W tym artykule pokażę jak zaprogramować prosty framework strony typu Single Page Application całkowicie napisany od zera za pomocą JavaScript i biblioteki jQuery.
Jest to zgodny z SEO i z podejściem progressive enhancement skrypt, który będzie odpowiedzialny za płynne przejścia pomiędzy podstronami. Po wyłączeniu wsparcia JavaScript będzie się zachowywał jak standardowa strona dlatego postępujemy w myśl postępującego / progresywnego ulepszania.
O tym co to jest, jak działa i jakie zalety mają Single Page Application pisałem już w artykule i nie ma sensu tutaj tego wszystkiego powtarzać: Projektowanie stron Single Page Application.
Zalety pisania własnych szkieletów SPA
Zaletą napisania własnego frameworka SPA jest przede wszystkim prostota i lekkość , która przełoży się na szybkie działanie strony i uniezależnienie się od zewnętrznych narzędzi – w tym specjalnych bibliotek.
Jak wiadomo szybkość to dobre doświadczenia użytkowników i dobre pozycje w wyszukiwarce. Wchodząc na podstronę takiej witryny nie doświadczymy wad związanych ze stosowania SPA a zaliczamy do nich ładowanie kilobajtów kodu JavaScript, który (jak się tak zastanowić) w istocie obsługuje bardzo banalne mechanizmy.
Programowanie Single Page Application
Na samym początku stwórzmy sobie menu, odpowiednik diva przechowującego treść i jakieś przykładowe teksty. Można dodać styl CSS, który spowoduje że nasza zabawa z pierwszą aplikacją typu SPA będzie przyjemniejsza dla oka.
Kod HTML aplikacji SPA niczym się nie różni od standardowej strony internetowej, dlatego aby nie było bałaganu zamieszczam kluczowe elementy, menu i coś na kształt okienka z właściwą zawartością. Na końcu dodajemy bibliotekę jQuery:
<html>
<head>
<title>SPA - Super Prosta Aplikacja</title>
</head>
<body>
<nav>
<ul>
<li><a href="o-nas.html">O nas</a></li>
<li><a href="o-nas.html">Oferta</a></li>
<li><a href="o-nas.html">Kontakt</a></li>
</ul>
</nav>
<main id="spa-container">
Treść podstrony home.
</main>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script>
/* Tutaj wstawiamy dalszy kod */
</script>
</html>
Dodajmy minimalny styl
Przykładowa aplikacja w ogóle nie musi mieć stylu ale zdefiniujmy podstawowe style aby przyjemniej się nam pracowało. Nie musimy tworzyć osobnego pliku. Można dodać styl wewnątrz znacznika head.
<style>
body{
padding:0;
margin:0;
font-family:Verdana;
}
nav{
width:100%;
text-align:center;
background:#333;
}
nav ul{
height:26px;
}
nav ul li{
display:inline;
margin:8px;
padding:8px;
color:#fff;
font-size:12px;
}
nav ul li a{
padding:12px;
color:#fff;
}
main{
padding:8px;
}
</style>
Dobra, nie ma co przesadzać bo jeszcze ktoś zgarnie Mobile Excellence na AWWWARDS 😉 Całość powinna wyglądać mniej-więcej tak:

Dodajmy dodatkowe podstrony
Wszak Single Page Application to nie strona One Page. Dodajmy po prostu inny tekst abyśmy wiedzieli, że nawigacja działa. Tworzymy identyczne podstrony
- o-nas.html,
- oferta.html,
- kontakt.html,
zmieniając ich zawartość. Jeżeli przełączanie pomiędzy poszczególnymi podstronami działa, możemy przejść do następnego etapu.
Blokada linków, czyli opuszczenia podstrony
Aby nasz strona była zgodna z podejściem Single Page Application musimy sprawić, aby linki nie powodowały opuszczenia podstrony. Zablokujmy domyślne zachowanie linków za pomocą preventDefault();:
<script>
var mainMenuLink = $('nav ul li a');
mainMenuLink.click(function(e){
e.preventDefault();
});
</script>
Asynchroniczne ładowanie treści z innych podstron
W zdarzeniu „click” załadujemy teraz to co się znajduje na podstronie, którą wskazuje atrybut href klikanego linku. Użyjemy metody load a następnie selektora zawierającego zasadniczą treść strony.
let link = $(this).attr('href');
spaContainer.load(link + ' #spa-container');
Dynamiczna zmiana adresu URL
Wszystko świetnie działa tylko nie zmienia nam się adres w pasku adresu przeglądarki. To bardzo ważna funkcja pod kątem User Experience i usability. Jeżeli zmienia się adres, pozostaje nam historia przeglądania i możemy się nim z kimś podzielić. Aby się zmieniał należy dodać jeszcze jedną instrukcję:
history.pushState({
id: label
}
, 'SPA - ' + label, link);
Obsługa przycisków wstecz dalej
Im dalej w las tym więcej drzew… Działa nam przełączanie podstron, działa nam zmiana adresów w pasku przeglądarki ale nie działają nam przyciski wstecz i dalej, których obsługa jest priorytetem kiedy zależy nam na wygodzie użytkowników – tym bardziej mobilnych.
Ponieważ napisaliśmy Single Page Application od podstaw tego typu niespodzianki to żadne wyzwanie. Wystarczy wykryć wciśnięcie przycisku „wstecz” albo „dalej”:
window.addEventListener('popstate', function(event) {
let link = window.location.pathname;
spaContainer.load(link + ' #spa-container');
}, false);
Jak widać, wszystko działa. Wystarczy dodać treść, design, jakieś szpanerskie wodotryski i mamy stronę nowej generacji, którą pokochają Twoi klienci.
Obsługa Google Analytics w Single Page Application
Nie zabraknie integracji z Google Analytics. Aby móc śledzić odwiedziny w panelu Google Analytics tak jak przy tradycyjnej stronie internetowej musimy dać sygnał do analytics.js, że nastąpiła zmiana bieżącej strony i określić moment kiedy ma „naliczyć” wizytę.
W tym celu należy załadować analytics.js, użyć komendy „set” i podać nową wartość „page”. Aby zarejestrować odsłonę nowej strony (np. po załadowaniu wszystkich zasobów) należy wysłać zdarzenie „pageview”.
Czytaj przewodnik o tym jak śledzić i zintegrować Single Page Application z Google Analytics.
Podsumowanie
Jak widać stworzenie Single Page Application nie jest trudne. Za pomocą standardowej biblioteki jQuery stworzyliśmy mechanizm SPA w kilka chwil. Oczywiście jest on wystarczający jedynie do celów dydaktycznych. W większych aplikacjach nie będzie wystarczające i trzeba rozwiązać wiele innych problemów.
Tworzenie takich skryptów i próba stworzenia coraz większych projektów na bazie takich rozwiązań to dobre ćwiczenie, które pozwoli nam zrozumieć skąd się biorą dobre praktyki, wzorce i frameworki.
Źródła
- Stark J., Jepson B., Android. Tworzenie aplikacji w oparciu o HTML, CSS i JavaScript, wyd. Helion 2013 r.
- McFarland D., JavaScript & jQuery – The Missing Manual, wyd. O’Reilly Media 2014 r.
- https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
- https://code.jquery.com/
- http://api.jquery.com/load/
Odpowiedz lub skomentuj