Single Page Application (SPA) – czym jest i jak działa?

Single Page Application to popularny trend w dziedzinie tworzenia nowoczesnych, przejrzystych i szybko działających aplikacji, które w głównej mierze stanowią ukłon w stronę użytkowników, którzy coraz częściej narzekają na toporność działania bardziej wiekowych rozwiązań. Czym dokładnie jest SPA i czym się wyróżnia?

 

 

Czym jest strona typu SPA i czym się charakteryzuje?

 

Single Page Application to relatywnie młody i innowacyjny model tworzenia aplikacji internetowych, którego cechą szczególną jest asynchroniczne ładowanie elementów takich jak poszczególne widoki strony, zamiast dobrze nam znanego z tradycyjnych stron internetowych pełnego ładowania poszczególnych podstron.

Strona typu Single Page Application działa w taki sposób, że przechodzenie do kolejnych podstron wydaje się ciągłe, bez ułamka sekundy, w którym strona ładuje się na nowo. Coraz częściej możemy zauważyć zastosowanie modelu SPA w budowie stron internetowych, a projektanci chwalą sobie takie rozwiązanie ze względu na:

  • Redukcję obciążenia serwera i urządzenia, na którym wyświetlana jest aplikacja,
  • Wzrost efektywności technicznej działania strony,
  • Brak dodatkowych kosztów związanych ze stworzeniem strony w modelu SPA.

 

 

Przy użyciu jakich technologii tworzy się strony typu SPA?

 

Każda aplikacja internetowa jest stworzona w oparciu o trzy podstawowe technologie, jakimi są HTML, CSS oraz JavaScript. By jednak zadbać o odpowiednie User Experience i stworzyć stronę lekką w odbiorze, atrakcyjną wizualnie i efektywną technicznie, niezbędne jest wykorzystanie dodatkowych narzędzi i frameworków, które ułatwią wykonanie nowoczesnej strony. Jakie to technologie?

Przede wszystkim AJAX, czyli najważniejsze narzędzie, które umożliwia zaprojektowanie strony internetowej z wykorzystaniem asynchronicznego przesyłania danych pomiędzy serwerem strony i wykorzystywaną przez użytkownika przeglądarką. Nie możemy jednak zapominać o trzech innych bibliotekach, które coraz powszechniej wykorzystujemy w budowaniu SPA. Chodzi tu oczywiście o React, Vue oraz Angular. Spośród tych trzech technologii to Vue.js umożliwia budowanie ciekawych interfejsów użytkownika.

 

 

Jak zrodziła się koncepcja single-page application?

 

Koncepcja stworzenia innowacyjnej strony internetowej, która eliminuje drobną niedogodność w postaci ciągłego ładowania nowych podstron, zrodziła się wraz z rozpowszechnieniem technologii AJAX. Rozwiązanie, które bazuje na możliwości wymiany danych z serwerem w tle, z wyłączeniem ingerencji w aktualny status wyświetlania treści stanowiło strzał w dziesiątkę w obszarze projektowania aplikacji internetowych.

To jednak tylko jedna strona medalu. Drugim, równie istotnym źródłem przejścia na model SPA był wzrost zainteresowania pojęciem User Experience. UX na przestrzeni ostatnich lat zdobył ogromną uwagę największych firm aż do tego stopnia, że obecnie zdecydowana większość projektów jest rozpoczynana na bazie solidnej analizy doświadczeń konsumentów. Jak się okazało, połączenie tych dwóch czynników – popularyzacji AJAX i UX umożliwiło włączenie do standardu projektów stron rozwiązania Single Page Application. Dzisiaj z takiej konwencji korzystają wszystkie liczące się na rynku firmy, włącznie z największymi gigantami jak Amazon, Facebook, czy Google.

 

 

Czym wyróżniają się aplikacje typu SPA?

 

By w prosty sposób pokazać, czym charakteryzuje się aplikacja internetowa typu SPA, warto przyrównać ją do jej starszego rodzeństwa, jakim jest podejście multi-page application (MPA). W tym ujęciu strona internetowa ładuje się za każdym razem, gdy zdecydujemy się na kliknięcie linku na stronie – czyli przy przejściu do każdej podstrony. W tym modelu strona przy kliknięciu, w całkowity sposób pobiera nową podstronę zupełnie od nowa. Strona stworzona w modelu SPA w pełni ładuje się tylko jeden raz, a następnie przy nawigowaniu po stronie konkretne elementy są wymieniane przez te, które należą do konkretnej podstrony.

Aplikacje stworzone w modelu Single Page Application, ze względu na swój technologiczny potencjał są w stanie zawrzeć w sobie więcej efektów, treści i innych ozdobników, które w przypadku tradycyjnej strony MPA negatywnie wpłynęłyby na szybkość jej ładowania. Czy jednak istnieją jakiekolwiek podstawy do tego, by krytykować to nowe podejście i zostać przy starym sprawdzonym modelu MPA? Zgodnie z opiniami ekspertów aplikacje webowe SPA uruchamiane na starszych przeglądarkach mogą mieć poważne problemy z prawidłowym wyświetlaniem – jest to oczywiście związane z tym, że stare wersje przeglądarek nie opierają swojej mechaniki o nowoczesne technologie, jak AJAX, React czy chociażby JavaScript i TypeScript.

 

 

Kiedy warto postawić na stronę typu SPA?

 

W jakich sytuacjach zaprojektowanie aplikacji mobilnej z wykorzystaniem modelu SPA okaże się strzałem w dziesiątkę? Przede wszystkim zawsze wtedy, gdy chcemy stworzyć nietuzinkową stronę, która łączy w sobie estetyczny wygląd, efektywność działania przy optymalnym rozbudowaniu witryny.

Tak naprawdę ciężko w dzisiejszych czasach znaleźć powód, dla którego nie wykorzystać SPA. Zarówno sklepy internetowe, media społecznościowe, portale informacyjne, jak i zwykłe strony wizytówki wykorzystują potencjał asynchronicznego ładowania strony w procesie budowania swojej przewagi konkurencyjnej na rynku e-commerce.