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ślne zachowanie (czyli opuszczenie bieżącej strony i załadowanie od nowa całej nowej podstrony).
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
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 przeglądarką.
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.