Web Design Blog / Web:

Tworzenie Single-Page Application (SPA)

Strony internetowe typu Single-Page Application to kolejna nowość w obszarze web designu i projektowania aplikacji webowych. Choć sama idea SPA istnieje bardzo długo (ich tworzenie jest możliwe od ponad 10 lat) cieszą się obecnie sporym zainteresowaniem.

W tym artykule wytłumaczę czym są Single-Page Apps, czym one nie są, jak się je produkuje i jakie mają zalety. Kto wie, być może Twoja nowa strona internetowa będzie wykonana zgodnie z tym podejściem?

Co to jest SPA – Single Page App?

Single Page App to aplikacja internetowa (czyli z technicznego punktu widzenia strona internetowa), w której nawigowanie polega na asynchronicznym ładowaniu poszczególnych elementów (np. sekcji lub całych widoków) a nie przeładowywaniu poszczególnych podstron.

Najlepiej to wszystko pokazać na żywym przykładzie. Kiedy przeglądasz standardową stronę kliknięcie na link powoduje opuszczenie bieżącej strony i załadowanie całej nowej podstrony. W tym momencie możemy doświadczyć takiego „mignięcia” w przeglądarce. Jest ono krótkie jeżeli strona jest dobrze zoptymalizowana i dysponujemy dobrym łączem internetowym. No ale to mignięcie jest praktycznie zawsze jak nie zauważalne to chociaż wyczuwalne:

Strona o budowie Single Page Application, też ma linki, dokładnie takie same jak standardowa strona. Tylko mechanizm odpowiedzialny za asynchroniczne przejścia do poszczególnych podstron blokuje przeglądarce domyśle zachowanie (czyli opuszczenie bieżącej strony i załadowanie od nowa całej nowej podstrony).

Jak działa Single Page App?

Wszystkie zasoby są ściągane podczas pierwszej wizyty na stronie lub są dynamicznie pobierane w tle podczas korzystania z aplikacji wtedy kiedy to konieczne.

Za pomocą HTML5 History API jest możliwe kontrolowanie funkcjonalności przycisku wstecz oraz pokazywania aktualnej ścieżki URL do bieżącego widoku lub czegoś w rodzaju podstrony. Dysponując tym linkiem można zaczytać dane dla tego konkretnego widoku. SPA dzięki temu nie ma okrojonej funkcjonalności pod tym kątem.

Stworzyłem prosty tutorial, w którym stworzyłem możliwie najprostszą, w pełni funkcjonalną i zgodną z progressive enhancement stronę zgodną z podejściem SPA:

Programowanie stron SPA

Wyszukiwarki kiedyś faktycznie miały problem z czytaniem treści ze stron gdzie w budowanie treści był zaangażowany JavaScript. Teraz nie stanowi to dla nich najmniejszego problemu. Strony i aplikacje można indeksować, pozycjonować i spełnić wszelkie zalecenia dla webmasterów.

Zalety Single-Page Application

  • szybkie działanie
  • lepsze user experience za sprawą płynnych przejść
  • mniejsze obciążenie serwera
  • mniejsze obciążenie urządzenia klienckiego
  • podobny koszt do tworzenia konwencjonalnej strony

Wady Single-Page Application

Z uwagi na intensywne korzystanie z JavaScript i nowych interfejsów API, strony akie mogą być niekompatybilne ze starszymi przeglądarkami.

Trudniej dokonać analityki użytkowników – z uwagi na to że większość dodatków wykorzystuje zdarzenie ładowania się nowej strony niektóre narzędzia mogą nie działać poprawnie lub będą wymagały dodatkowych prac deweloperskich.

Narzędzia do tworzenia stron SPA

AJAX – technologia numer jeden do tworzenia Single Page Apps. Stary sprawdzony sposób na asynchroniczne przesyłanie danych pomiędzy serwerem i przeglaarką.

Vanilla JS – oczywiście niczego nie zastąpi czysty JavaScript. Aplikacje takie będą dobrze zoptymalizowane i stale gotowe do rozwoju.

jQuery – sprawdzona biblioteka do przyspieszania pisania kodu JavaScript

AngularJS – framework, który ułatwia wykonanie data-bindingu. Rozwijany przez Google. Choć poprzednia wersja Angulara nie okazałą się sukcesem Angular ma się dobrze i powinien być coraz częściej wykorzystywany.

Ember.js – framework JavaScriptowy, który umożliwia wykonywanie aplikacji webowych zgodnie z wzorcem MVC (Model View Controller). Ma to za zadanie oddzielić logikę od sterowania i prezentacji danych co ułatwia rozwijanie dużych projektów rozwijanych w zespołach.

Vue.js – framework do budowania interfejsów użytkownika

React – framework wykorzystywany i rozwijany przez deweloperów Facebooka i Instagrama.

Mity o Single-Page Application

Mit #1: Strony Single Page Apps są trudniejsze w pozycjonowaniu – nieprawda – umiejętne zaprojektowanie parsowania adresów URL i obsługa nawigacji wstecz, dalej nie stanowi trudności w pozycjonowaniu. Oczywiście, nieprofesjonalne wdrożenia stron SPA moga ten problem powodować.

Mit #2: Strony Single Page Apps są droższe w produkcji – nieprawda – jest to po prostu inne podejście i tworzenie poza dodaniem kilku funkcjonalności nie różni się znacząco od zaprojektowania konwencjonalnej strony. Oczywiście pomijam przypadek, w którym agencja tworzy strony za powiedzmy 1 000,00 zł netto na bazie szablonów za kilkadziesiąt dolarów 🙂

Mit #3: Na stronach Single Page Apps nie można dokonywać analityki – nieprawda. Google Analytics ma gotowe rozwiązania do wspierana SPA. Wymagany jest dodatkowy wysiłek (programowanie) aby analityka poprawnie działała.

Przykłady Single Page Apps

Gmail to podręcznikowy przykład aplikacji SPA. Tworzenie nowej wiadomości otwiera okienko a nie całą nową stronę, która służy do edycji e-maila.

Google Maps – podczas korzystania aplikacja pobiera tylko te dane, które są jej w danej chwili potrzebne. Aplikacja pobiera szczegóły lokalizacji w miarę eksplorowania mapy i dynamicznie zmienia adres URL w pasku przeglądarki. Nie dochodzi przy tym do przeładowywania aplikacji.

Google Music, Spotify, Tidal – często wykonujemy we nich zmiany widoków przeglądając strony z albumami, artystami i playlistami są to aplikacje typu Single Page Application. Jest to konieczne aby odtwarzacz mógł ciągle odtwarzać muzykę. Gdyby dochodziło do przełączania podstron w synchroniczny sposób, odtwarzacz i jego stan byłby nieustannie resetowany i bylibyśmy zmuszeni co chwila klikać „play” od nowa lub odtwarzanie byłoby przerywane.

Facebook – mimo, że jest to ogromna aplikacja internetowa, jej architektura polega na podejściu Single Page App. To dlatego aplikacja przeglądarkowa może się zacinać na starszych komputerach. Niemal cała logika sterowania dzieje się po stronie przeglądarki.

Twitter – może przypominać zwykły serwis z podstronami, jest to tak naprawdę Single Page Application.

...i wiele innych nowoczesnych stron – wystarczy poprzeglądać nowe strony w galeriach z konkursami web designerskimi. Wiele agencji decyduje się na tworzenie Single Page App aby zapewnić jeszcze lepsze doświadczenia użytkownika.

Podsumowanie

Single Page Apps to przyszłość Internetu z powodu optymalizacji mobilnej i lepszego user experience jakie mogą zaoferować niezależnie od wykorzystywanego urządzenia. Z potencjału SPA można spokojnie skorzystać w przypadku mniejszych stron, które mają dostarczać doświadczeń na wyjątkowym poziomie.

Źródła

https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

https://www.awwwards.com/websites/single-page/

Tworzenie Single-Page Application (SPA)
4.5 (90%) głosów: 14



Autor:

Służę pomocą w razie wykonania lub odnowienia strony internetowej dla twojej firmy niezależnie od lokalizacji czy skali przedsięwzięcia. Masz pytania? Pisz w komentarzu.

Zadaj pytanie lub skomentuj


Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail