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/

Oceń artykuł na temat: Programowanie Single Page Application (SPA)
Średnia : 4.6 , Maksymalnie : 5 , Głosów : 17