1. Wprowadzenie do frameworka NUXT.JS

PDF z tego dokumentu jest dostępny pod nazwą |TUTAJ|.

Przykłady zawarte w tym dokumencie są dostępne pod adresem |TUTAJ|.

Niniejszy dokument stanowi część serii czterech artykułów:

|Wprowadzenie do języka PHP7 na przykładach (2019)|;

|Wprowadzenie do języka ECMASCRIPT6 na przykładach (2019)|;
|Wprowadzenie do frameworka VUE.JS na przykładach (2019)|;
|Wprowadzenie do frameworka NUXT.JS na przykładach (2019)|. Jest to niniejszy dokument;

Wszystkie te dokumenty są przeznaczone dla początkujących. Artykuły tworzą logiczną całość, ale są ze sobą słabo powiązane:

dokument [1] przedstawia język PHP 7. Czytelnik zainteresowany wyłącznie językiem PHP, a nie językiem JavaScript omawianym w kolejnych artykułach, może na tym zakończyć lekturę;
dokumenty [2-4] mają na celu stworzenie klienta JavaScript dla serwera obliczającego podatek, opracowanego w dokumencie [1];
frameworki JavaScript [vue.js] i [nuxt.js], opisane w artykułach 3 i 4, wymagają znajomości języka JavaScript w najnowszych wersjach ECMASCRIPT, a konkretnie w wersji 6. Dokument [2] jest zatem przeznaczony dla osób, które nie znają tej wersji JavaScript. Odwołuje się on do serwera obliczającego podatek, zbudowanego w dokumencie [1]. Czytelnik dokumentu [2] będzie zatem czasami musiał odwołać się do dokumentu [1];
po opanowaniu dokumentu ECMASCRIPT można przejść do frameworka VUE.JS, który umożliwia tworzenie klientów JavaScript działających w przeglądarce w trybie SPA (aplikacja jednostronicowa). Jest to dokument [3]. Odnosi się on zarówno do serwera obliczającego podatek, zbudowanego w dokumencie [1], jak i do kodu samodzielnego klienta JavaScript, zbudowanego w dokumencie [2]. Osoba zapoznająca się z dokumentem [3] będzie zatem czasami musiała odwołać się do dokumentów [1] i [2];
po opanowaniu VUE.JS można przejść do frameworka NUXT.JS, który umożliwia tworzenie klientów JavaScript działających w przeglądarce w trybie SSR (renderowanie po stronie serwera). Odnosi się on zarówno do serwera obliczającego podatek, opisanego w dokumencie [1], jak i do kodu samodzielnego klienta JavaScript opracowanego w [2], a także do aplikacji [vue.js] opracowanej w dokumencie [3]. Czytelnik dokumentu [4] będzie zatem czasami musiał odwołać się do dokumentów [1], [2] i [3];

Niniejszy dokument stanowi kontynuację prac przeprowadzonych w dokumencie [3] z wykorzystaniem frameworka VUE.JS.

W niniejszej sekcji omówiono następującą architekturę:

W [1] przeglądarka internetowa wyświetla strony internetowe [5, 7] pochodzące z serwera [3] i przeznaczone dla użytkownika. Strony te zawierają kod JavaScript realizujący funkcję klienta serwisu danych [2], a także klienta serwera fragmentów stron internetowych [3];
w przypadku [2] serwer internetowy jest serwerem danych. Może być napisany w dowolnym języku programowania. Nie generuje on stron internetowych w klasycznym rozumieniu (HTML, CSS, JavaScript), z wyjątkiem być może pierwszego uruchomienia. Jednak tę pierwszą stronę można uzyskać z klasycznego serwera internetowego [3] (nie z serwera danych). Skrypt JavaScript na stronie początkowej wygeneruje następnie różne strony internetowe aplikacji, pobierając dane [4] do wyświetlenia z serwera internetowego, który pełni rolę serwera danych [2]. Może również pobierać fragmenty stron internetowych [5] w celu sformatowania tych danych z serwera stron internetowych [3];
w [4] użytkownik inicjuje akcję;
w [6,7]: otrzymuje dane w postaci fragmentu strony internetowej;

Framework [nuxt.js] |https://fr.nuxtjs.org/| pozwoli nam zaimplementować następujący przebieg działania:

pierwsza strona aplikacji jest dostarczana przez serwer [node.js] [3]. Ponadto pozostałe strony aplikacji również znajdują się na tym samym serwerze. Są one dostarczane, gdy użytkownik ręcznie wpisze ich adres URL w przeglądarce. Strony te zawierają aplikację [vue.js] (w przybliżeniu);
po załadowaniu pierwszej strony w przeglądarce aplikacja zachowuje się jak klasyczna aplikacja [vue.js]. W naszym powyższym schemacie będzie ona wówczas komunikować się z serwerem danych [2];

Ostatecznie aplikacja zachowuje się jak aplikacja [vue.js], z wyjątkiem pierwszej strony oraz sytuacji, gdy użytkownik ręcznie wpisuje adres URL. W takich przypadkach strona jest wyszukiwana na serwerze [3]. Gdy wyszukiwarka żąda różnych stron aplikacji, otrzymuje je z serwera [3]. Strony te mogły zostać zoptymalizowane pod kątem SEO (Search Engine Optimization). W aplikacji [vue.js] wyszukiwarka otrzymuje stronę o niewielkim znaczeniu SEO. Na przykład w aplikacji klienckiej serwera obliczającego podatek dla dokumentu [3] strona otrzymana przez przeglądarkę podczas uruchomienia aplikacji wyglądała następująco:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/client-vuejs-impot/favicon.ico">
    <title>vuejs</title>
  <link href="/client-vuejs-impot/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!--zostaną automatycznie wstrzyknięte -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

Jest to jedyna strona ładowana przez przeglądarkę. Wszystkie pozostałe strony aplikacji są generowane dynamicznie przez JavaScript bez udziału przeglądarki. Niektóre wyszukiwarki zadowalają się tą stroną. Inne idą o krok dalej, uruchamiając kod JavaScript zawarty na stronie (wiersz 9 powyżej). W ten sposób uzyskuje się kolejną stronę. Ta strona może zawierać operację asynchroniczną służącą do pobrania danych, które strona ma wyświetlić. W takim przypadku wyszukiwarki nie czekają. W rezultacie otrzymujemy niekompletną stronę. Być może pamiętamy, że tak właśnie jest w przypadku naszego klienta [vue.js] z serwera obliczającego podatek: w sposób asynchroniczny, podczas ładowania pierwszej strony, inicjuje on sesję jSON z serwerem obliczającym podatek. W tym konkretnym przypadku nie ma to wpływu na stronę pobieraną przez wyszukiwarkę. W przypadku innych aplikacji może to jednak negatywnie wpływać na pozycję w wynikach wyszukiwania (SEO).

Dzięki [nuxt.js] można dostarczyć wyszukiwarce bardziej znaczącą stronę dla każdej ze stron aplikacji.

Skrypty zawarte w tym dokumencie są opatrzone komentarzami, a ich wynik w konsoli został odtworzony. Czasami podano dodatkowe wyjaśnienia. Dokument wymaga aktywnego czytania: aby zrozumieć skrypt, należy zapoznać się zarówno z jego kodem, jak i komentarzami oraz wynikami wykonania.

Serge Tahé, grudzień 2019 r.