1. Wprowadzenie do frameworka VUE.JS
PDF z tego dokumentu jest dostępny jako |TUTAJ|`.
Przykłady zawarte w tym dokumencie są dostępne w formacie |TUTAJ|.
Niniejszy dokument stanowi część serii czterech artykułów:
- |Wprowadzenie do języka ECMASCRIPT6 na przykładach (2019)|;
- |Wprowadzenie do frameworka VUE.JS na przykładach (2019)|. Jest to niniejszy dokument;
- |Wprowadzenie do frameworka NUXT.JS na przykładach (2019)|;
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, zakończy lekturę w tym miejscu;
- 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 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]. Odwołuje się on zarówno do serwera obliczającego podatek, zbudowanego w dokumencie [1], jak i do kodu autonomicznego klienta JavaScript, zbudowanego w [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];
Najnowsza wersja serwera obliczającego podatek, opracowana w dokumencie [1] (por. dokument |https://tahe.developpez.com/tutoriels-cours/php7|), może zostać ulepszona na różne sposoby:
- wersja opisana w dokumencie koncentruje się na serwerze. Obecnie (wrzesień 2019 r.) dominuje model klient-serwer:
- serwer działa jako usługa jSON;
- punktem wejścia do aplikacji internetowej jest strona statyczna lub dynamiczna. Strona ta zawiera elementy HTML /CSS, a także JavaScript;
- pozostałe strony aplikacji internetowej są generowane dynamicznie przez JavaScript:
- stronę HTML można uzyskać poprzez złożenie fragmentów statycznych lub dynamicznych, dostarczonych przez ten sam serwer, który dostarczył stronę startową, lub zbudowanych przez skrypt JavaScript po stronie klienta;
- te różne strony wyświetlają dane, które są pobierane z serwisu jSON;
W ten sposób obciążenie jest rozłożone między klienta a serwer. Odciążony w ten sposób serwer może obsłużyć większą liczbę użytkowników.
Architektura odpowiadająca temu modelowi wygląda następująco:
JS : JavaScript
Przeglądarka jest klientem:
- usługi zawierającej statyczne lub dynamiczne strony lub fragmenty (nie przedstawione powyżej);
- usługi danych jSON;
Kod JavaScript jest zatem klientem jSON i jako taki może być zorganizowany w warstwy [UI, métier, dao] (UI: interfejs użytkownika), podobnie jak nasze klienckie komponenty jSON napisane w PHP. Ostatecznie przeglądarka ładuje tylko jedną stronę – stronę główną. Wszystkie pozostałe są pobierane i generowane przez JavaScript. Tego typu aplikację nazywamy SPA: Single Page Application lub też APU: aplikacja jednostronicowa.
Ten typ aplikacji należy również do tzw. aplikacji AJAX: Asynchronous JavaScript oraz XM:
- Asynchronous: ponieważ wywołania klienta JavaScript do serwera jSON są asynchroniczne;
- XML: ponieważ XML była technologią stosowaną przed pojawieniem się jSON. Zachowano jednak akronim AJAX;
W niniejszym dokumencie przeanalizujemy taką architekturę. Po stronie klienta wykorzystamy framework JavaScript [Vue.js] [https://vuejs.org/] do napisania klienta JavaScript dla serwera jSON PHP, który stworzyliśmy w dokumencie [1].
[Vue.js] jest frameworkiem JavaScript. Język JavaScript omówiliśmy w dokumencie [2]. Nie będziemy przeprowadzać wyczerpującej analizy frameworka [vue.js]. Ograniczamy się do przedstawienia pojęć, które zostaną następnie wykorzystane przy pisaniu klienta [Vue.js] dla wersji jSON serwera obliczającego podatek w wersji 14 (por. |https://tahe.developpez.com/tutoriels-cours/php7|).
Skrypty zawarte w niniejszym dokumencie są opatrzone komentarzami, a ich przebieg w konsoli został odtworzony. W niektórych przypadkach 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é, październik 2019 r.