SPA

Single Page Application

Single Page Application (SPA) to podejście do tworzenia stron internetowych.

W odróżnieniu do tradycyjnego podejścia w chwili, gdy klient wykona akcje cała strona nie zostanie przeładowana. SPA dynamicznie przeładuje i wyśle do klienta tylko dane, których klienta zażądał.

Jeśli spojrzą Państwo w prawy dolny róg strony, znajduje się tam odnośnik do czata z nami. Na każdej standardowej stronie w momencie, gdy przechodzą Państwo między podstronami, czat zostaje wyłączony i wczytany ponownie, widać kilku sekundowe opóźnienie, zanim czat ponownie się wczyta. W przypadku naszej strony czat nie jest "od-montowany" przy każdym przejściu między podstronami. To dobrze obrazuje różnice w działaniu między tradycyjną stroną a SPA. Jeśli zainstalują Państwo czat w swoim sklepie internetowym lepiej jeśli nie będzie on znikać i pojawiać co chwilę.  

Czat jest doskonałym przykładem ponieważ jest to widoczny element dla klienta i łatwo na tym przykładzie zrozumieć jak działa SPA. Jednak podobnie do czata wszystkie inne niewidoczne dla klienta zasoby strony również zostają ponownie wczytywane co angażuje zarówno zasoby serwera jak i zasoby przeglądarki klienta.

Aby to jeszcze lepiej zobrazować załóżmy że klient sklepu internetowo jest w kategorii A i chce przejść do kategorii B

Tradycyjna strona

  1. 1. Zapytanie klienta jest wysyłane do serwera (Bakcendu) sklepu internetowego, tym samym klient musi nawiązać nowe połączenie z serwem na którym stoi sklep.
  2. 2. Po otrzymaniu żądania serwer tworzy daną podstronę sklepu. Musi musi stworzyć nową stronę, załadować listę produktów, banery i wykonać wszystkie inne prace niezbędne do stworzenia Kategorii B. Może to zrobić z plików „cache”, aby przyspieszyć proces tworzenia, jednak proces musi zostać przeprowadzony.
  3. 3. Po stworzeniu strony, kompletna strona jest wysyłana do klienta.
  4. 4. Do strony dołączane są dodatkowe pliki takie jak skrypty JavaScript, arkusze stylów CSS, oraz zdjęcia. Te wszystkie informacje klient musi pobrać zaraz po pobraniu nowej strony.

Klient wysyła zapytanie o o nową stroną → Nawiązanie połączenia → BACKEND tworzy stronę → Klient otrzymuje stronę -> Klient wczytuje Frontend → Klient wczytuje zdjęcia, pliki CSS, JS

Single Page Application

  1. 1. Zapytanie klienta nie jest wysyłane bezpośrednio do backendu, jest przechwytywane przez Frontend, nie jest potrzebne nawiązanie nowego połączenia z serwerem, dlatego reakcja na ruch klienta jest natychmiastowa.
  2. 2. Frontend decyduje czy ma wszystkie niezbędne dane do wyświetlania nowych treści klientowi i jeśli tak przeładuje jedynie fragment strony, który wymaga zmiany. Jeśli potrzebne są nowe dane potrzebne z „Backendu” frontend wyśle zapytanie do serwera i podmieni dane na nowe. Backend w tym przypadku nie tworzy całej nowej strony a jedynie dany fragment o który został poproszony. Dodatkowo przy odpowiedniej strukturze aplikacji możliwa jest podmiana tego fragmentu tak szybko, że praktycznie niezauważalnie przez klienta sklepu.

Zapytanie o nową stroną → FRONTED zmienia fragment strony → Klient podmiana fragment strony → Klient wczytuje zdjęcia.

Single Page Application jest od lat używany. Np. internetowy klient poczty "gmail" jest stworzony jako SPA. W sklepach internetowych to nadal rzadkość, do tej pory tylko największe firmy mogły pozwolić sobie na stworzenie strony typu single page application, jednak dzięki innowacyjnym frameworkom typu React, Angular lub Vue technologia jest częściej stosowana.

W prosklepy.pl stworzyliśmy jako pierwsi w Polsce sklep typu SPA w roku 2008 - http://www.ambitmusic.pl strona działa bez modyfikacji od 12 lat do dzisiaj. W roku 2008 nie było dostępnych zaawansowanych technologii wspomagających tworzenie SPA. Dzisiejsze, nasze projekty działają jako SPA, ale korzystają z innych, nowszych rozwiązań technicznych.