Po pierwsze, najprawdopodobniej jesteś już stałym użytkownikiem aplikacji pojedynczych stron (SPAs).
Aplikacje jednostronicowe są doskonałym narzędziem do tworzenia niezwykle angażujących i unikalnych doświadczeń dla użytkowników.
niektóre aplikacje jednostronicowe, takie jak Gmail, Google Maps, AirBNB, Netflix, Pinterest, Paypal, i wiele innych używają Spa do budowania płynnego, skalowalnego doświadczenia.,
jednak w przeszłości uzdrowiska pozostawiły marketerów w ciemności, jeśli chodzi o zarządzanie treścią. Na szczęście można teraz sparować SPA z odpowiednim CMS, aby zapewnić zarówno programistom, jak i marketerom Wymagany poziom kontroli.
Co to jest aplikacja jednostronicowa?
Single page application (SPA) to pojedyncza strona (stąd nazwa), na której wiele informacji pozostaje bez zmian i tylko kilka elementów wymaga aktualizacji na raz.,
na przykład podczas przeglądania poczty e-mail zauważysz, że niewiele się zmienia podczas nawigacji – pasek boczny i nagłówek pozostają nietknięte podczas przechodzenia przez skrzynkę odbiorczą.
SPA wysyła tylko to, czego potrzebujesz za każdym kliknięciem, a twoja przeglądarka wyświetla te informacje. Różni się to od tradycyjnego ładowania strony, gdzie serwer ponownie renderuje pełną stronę za każdym kliknięciem i wysyła ją do przeglądarki.
ten kawałek po kawałku, Metoda Po stronie klienta sprawia, że czas ładowania musi być szybszy dla użytkowników i sprawia, że ilość informacji, które serwer musi wysłać o wiele mniej i o wiele bardziej opłacalne., Wszyscy wygrywają.
co to jest Architektura aplikacji jednostronicowych? Jak to działa?
single page application to aplikacja internetowa lub strona internetowa, która wchodzi w interakcję z użytkownikiem poprzez dynamiczne przepisywanie bieżącej strony, a nie Ładowanie całych nowych stron z serwera.
takie podejście eliminuje przerwy pomiędzy kolejnymi stronami, dzięki czemu aplikacja zachowuje się bardziej jak aplikacja desktopowa.
na większości stron internetowych jest dużo powtarzających się treści.,
niektóre z nich pozostają takie same bez względu na to, gdzie idzie użytkownik (nagłówki, stopki, logo, pasek nawigacyjny itp.), Niektóre z nich są stałe tylko w określonej sekcji (paski filtrów, banery), a istnieje wiele powtarzających się układów i szablonów (blogi, samoobsługa, Konfiguracja poczty google wymieniona powyżej).
Aplikacje jednostronicowe wykorzystują to powtórzenie.
powiedzmy, że twój widok na stronę jest obrazem domu i Drzewa. Tradycyjne, wielostronicowe strony internetowe malują cały obraz na serwerze i wysyłają go do przeglądarki.,
SPAs daje Ci prowadnice paint-by-numbers dla strony, w tym powtarzające się prowadnice, których prawdopodobnie będziesz używać, a następnie wysyłasz odpowiedni paint (Dane i zawartość), aby wypełnić szablon.
tak czy inaczej widzisz to samo drzewo, ale szybkość SPA pojawia się, gdy prosisz o nową treść – jak kliknięcie „dalej”, filtrowanie wyników, otwieranie poczty lub – w tej małej metaforze – prosząc o zobaczenie innego drzewa.
w tradycyjnej witrynie twoja prośba o nowe drzewo spowoduje, że serwer przemaluje cały obraz i odeśle go z powrotem.,
w aplikacji Jednostronicowej serwer mówi: „Hej, mam dla Ciebie nowe drzewo, ale już masz dom, więc zostaw to tak samo”, a następnie wysyła zaktualizowane instrukcje dotyczące nowego drzewa i farby, aby go zrobić.
poprzez przeniesienie pracy malowania (renderowania strony) z serwera do klienta (Ciebie) strona może być dynamicznie przepisywana, zamiast przechodzić przez cały przeładowanie.
to sprawia, że wszystko jest o wiele szybsze.,
zalety aplikacji jednostronicowych
rozwiązania SPA oferują wiele korzyści, takich jak poprawa wydajności i spójności aplikacji oraz skrócenie czasu opracowywania i kosztów infrastruktury.
oddzielając prezentację od treści i danych, zespoły programistyczne mogą pracować z różnymi prędkościami, a jednocześnie być zintegrowane dla całego rozwiązania. SPA jest dobre do tworzenia responsywnego projektu dla urządzeń mobilnych, komputerów stacjonarnych i tabletów.,
jednokrotne Ładowanie Pliku każdy z HTML, CSS, JS
aplikacja jednostronicowa, po początkowym załadowaniu strony serwer nie wysyła do ciebie żadnego HTML – pobierasz go od razu.
serwer wysyła stronę powłoki, a przeglądarka renderuje interfejs użytkownika (UI).
następnie, gdy klikniesz, SPA odsyła żądania danych i znaczników, serwer odsyła potrzebne surowce, a twoja przeglądarka pobiera je i renderuje zaktualizowany interfejs-wymienne elementy bez konieczności odświeżania całej strony.,
ta szybka wymienność sprawia, że Spa jest niezwykle przydatne na stronach, które są mocno poruszane i używają powtarzających się szablonów.
Brak dodatkowych zapytań do serwera
ponieważ serwer nie musi tracić czasu& energia robi pełne rysowanie, Spa obniża wpływ na twoje serwery ogólnie – co oznacza, że możesz zaoszczędzić pieniądze, używając mniej serwerów dla tej samej ilości ruchu.
szybki i responsywny Front-end zbudowany
wraz z szybszym czasem działania, o którym mowa powyżej, Spa pozwalają również programistom budować front-end o wiele szybciej.,
wynika to z odsprzęgniętej architektury Spa, czyli oddzielenia usług zaplecza od wyświetlacza front-end.
wiele kluczowych funkcjonalności biznesowych nie zmienia się tak bardzo w back-endzie.
podczas gdy sposób logowania się, rejestracji, zakupu i śledzenia zamówień klientów może od czasu do czasu zmieniać jego „wygląd” lub prezentację, logika i orkiestracja danych za nim jest dość stała – i nie chcesz ryzykować zepsucia go.
podobnie surowa zawartość i dane mogą pozostać takie same, ale sposób ich wyświetlania różni się.,
oddzielając tę logikę zaplecza & od tego, jak jest prezentowana, przekształcasz ją w „usługę”, a programiści mogą zbudować wiele różnych sposobów wyświetlania i korzystania z tej usługi.
dzięki odsprzęgniętej konfiguracji programiści mogą budować, wdrażać i eksperymentować z front-endem całkowicie niezależnie od podstawowej technologii back-end.
projektują, jak chcą, aby wrażenia użytkownika wyglądały i wyglądały, a następnie pobierają treści, Dane i funkcjonalność za pośrednictwem tych usług.,
odbywa się to za pomocą interfejsów API, które są standardowym zestawem reguł między aplikacjami dotyczących struktury, wymiany i ponownego montażu danych.
Ta konfiguracja interfejsu API umożliwia programistom szybką pracę nad interfejsem bez ryzyka dla krytycznych technologii zaplecza.
Enhanced User Experiences
ponieważ coraz więcej funkcji jest budowanych jako usługi modułowe (Architektura mikrousług), które mogą być aktualizowane niezależnie, łatwiej jest eksperymentować z ich wyświetlaniem i użytkowaniem.,
frameworki Spa są świetne do zabawy z tymi usługami, aby tworzyć angażujące, dynamiczne, a nawet animowane wrażenia użytkownika.
Wiele osób po prostu lubi rozwijać się w określonym języku programowania (wiele frameworków SPA używa javascript), a dzięki API, Spa budowane w jednym języku mogą pracować szczęśliwie z usługami zaplecza opracowanymi w różnych językach.
jednostronicowa aplikacja z Angular vs React vs Ember vs Vue?,
Angular i React (i wiele innych, takich jak Ember I Vue) to frameworki, których programiści używają do wydajnego i wymownego tworzenia Spa.
Mówiąc najprościej, frameworki te są zbiorem komponentów wielokrotnego użytku, do których przyczyniło się wielu programistów, które przestrzegają określonych zasad budowania.
Jeśli myślisz o tym jak o budowie domu, możesz mieszać glinę, suszyć Cegły, wydobywać i formować stal samodzielnie – lub możesz użyć cegieł i rur, które inni ludzie już zaprojektowali i skupić swój czas na tym, co czyni Twój dom wyjątkowym.,
jeśli chodzi o różnice między nimi wszystkimi, Nie jestem ekspertem (ale ten facet wydaje się być), ale świetną rzeczą w spa i frameworkach, które je obsługują, jest to, że dzięki API, z odpowiednimi integracjami możesz używać dowolnej frameworku wolisz z innymi technologiami obsługującymi API.
dlaczego pojedyncze aplikacje i CMSs były historycznie trudne parowanie
podczas korzystania z Spa, programiści mogą myśleć o doświadczeniu jako „aplikacja”, ale odwiedzający nadal będzie myśleć o tym jak o stronie internetowej, a gdzie jest strona internetowa, jest zespół marketingowy swędzenie, aby ją zoptymalizować.,
ponieważ uzdrowiska są aplikacjami, które wymagają prac rozwojowych, aby majstrować przy wyświetlaczu& dostarczanie doświadczenia, marketerzy muszą wrócić do cyfrowej epoki kamienia (aka lat 90.) i poprosić o pomoc w rozwoju dla każdego tweak – powodując nieuniknione wąskie gardła.
usunięto narzędzia do edycji marketerzy są używane do
funkcje edycji CMS zespoły marketingowe polegać na (podgląd na żywo, przeciągnij i upuść, edycja WYSIWYG, itp.) są zwykle związane z warstwą dostawy w CMS.,
w przypadku Spa dostawa jest ustalana przez SPA, a zawartość jest po prostu przechowywana w CMS w standardowy sposób, w jaki API może czytać. Ponieważ SPA jest renderowane na front-endzie, back-end CMS nie ma pojęcia, jak powinien wyglądać i dlatego nie może podkręcić podglądu.
tak więc użytkownicy CMS-a kończą z bardzo przestarzałym podejściem-wypełniają formularz, trzymają kciuki, wciskają publikację i zobaczą jak to wygląda na żywo.
aby powrócić do naszego przykładu paint-by-numbers, CMS przechowuje surową zawartość (paint), a SPA ma przewodnik paint-by-number, jak ta zawartość powinna wyglądać., Podgląd nie ma tego przewodnika, więc nie można dowiedzieć się, jak powinna wyglądać zawartość.
Jest to czysta „bezgłowa” dostawa treści (aka, nie ma warstwy dostarczania CMS jako „głowa”). Jest świetny do szybkiego rozwoju, ale trochę szorstki dla marketerów, którzy chcą samodzielnie zmienić witrynę bez konieczności kodowania.
poza tym marketerzy są przyzwyczajeni do myślenia o rzeczach w „stronach”, ale ponieważ SPA to, cóż, pojedyncza strona, funkcje budowania i edycji stron, których potrzebują marketerzy, nie są dostępne.,
Jeśli chcą nową ” stronę „(„trasę” w SPA), lub chcą, aby Widok wyglądał inaczej, muszą zapytać dewelopera.
utrudnia ponowne wykorzystanie treści
ten problem pochodzi z dwóch podstawowych powodów, jeden z przestarzałych CMSs i drugi z projektowania SPA.
Po pierwsze, istnieją pewne systemy CMS, w których po prostu nie ma sprzężenia, jak wygląda Twoja treść i jak jest przechowywana.,
ponieważ przechowywanie Treści nie jest w standardowym, neutralnym dla prezentacji formacie, SPA nie może go używać w sposób oparty na API.
to nie tylko problem podczas korzystania z Spa oczywiście, ten rodzaj konfiguracji CMS uniemożliwia ponowne wykorzystanie treści w różnych kanałach w ogóle.
ponieważ zawartość jest powiązana ze sposobem wyświetlania (system oparty na stronie), Często zadawane pytania umieszczane na twojej stronie nie mogą być po prostu używane, aby ktoś mógł je przeglądać na swoim inteligentnym zegarku-musiałbyś przechowywać tę samą zawartość na dwa różne sposoby.,
do poprawnego działania potrzebny jest cms oparty na treści, tak aby mógł pobierać surowe treści i wyświetlać je w dowolny sposób.
Po stronie SPA trudność wynika z faktu, że wiele stron internetowych będzie konfiguracją hybrydową.
podczas gdy możesz chcieć niektóre części jako SPA, możesz chcieć inne skonfigurować w tradycyjny sposób (często lepiej dla SEO), a między nimi musi być spójność.
Jeśli Twoja konfiguracja to dwa wiadra treści, kawałki dla tradycyjnej strony i SPA, to ta spójność się zepsuje., Potrzebujesz treści, która działa we wszystkim.
trudno o personalizację/trafność
SPAs chwyta zawartość w sposób „serwisowy”, dzięki czemu jest to trochę za dużo treści bez większego kontekstu – nie duża pomoc w odpowiedniej dostawie.
poza tym, wiele CMS robi swoją personalizację albo na podstawie strony (nie pomocne w SPA), lub po stronie klienta-i te zasady personalizacji javascript nie grają zbyt ładnie na szczycie javascript SPA. Zbyt wielu kucharzy w kuchni personalizacji, jeśli chcesz.
czy marketerzy są skazani na zawsze w świecie SPA?
oczywiście, że nie!, Po prostu potrzebujesz CMS, który ma architekturę gotową do użycia w SPA.
Ten, który jest oparty na API, oddziela zawartość od prezentacji, może współpracować z SPA, aby zapewnić podgląd na żywo& narzędzia do edycji, obsługuje konfigurację hybrydową i personalizuje po stronie serwera.
w poniższych częściach oprowadzę cię po sposobie, w jaki Bloomreach to robi.
-
jak Bloomreach oferuje łatwość aplikacji jednostronicowych dla programistów i marketerów
-
Personalizacja i hybrydowa Obsługa aplikacji jednostronicowych