Programowanie Single Page Application (SPA)

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 typu responsive web design, 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.