1. Wprowadzenie do języka ECMASCRIPT 6
Plik PDF z tego artykułu jest dostępny |TUTAJ|.
Przykłady z tego artykułu są dostępne |TUTAJ|.
Niniejszy dokument stanowi część serii czterech artykułów:
- [Wprowadzenie do języka ECMASCRIPT6 na przykładach (2019)]. To jest ten dokument;
- [Wprowadzenie do frameworka VUE.JS na przykładach (2019)];
- [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 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];
Najnowsza wersja serwera obliczającego podatek, opracowana w dokumencie [1], może zostać ulepszona na różne sposoby:
- wersja opisana w dokumencie skupia się na serwerze. Obecnie (lipiec 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 kod HTML /CSS, a także kod JavaScript;
- pozostałe strony aplikacji internetowej są generowane dynamicznie przez JavaScript:
- strona HTML może zostać wygenerowana poprzez połączenie fragmentów statycznych, dostarczonych przez ten sam serwer, który dostarczył stronę główną, lub może być w całości zbudowana przez JavaScript;
- 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
Kod JavaScript po stronie klienta:
- usługi obsługującej statyczne lub dynamiczne strony lub fragmenty;
- usługi 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 aplikacje klienckie jSON napisane w języku 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 XML
- Asynchroniczne: 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 kolejnych rozdziałach przyjrzymy się takiej architekturze. Po stronie klienta będziemy korzystać z frameworka JavaScript [Vue.js] [https://vuejs.org/] do napisania klienta JavaScript dla serwera jSON PHP, który opisaliśmy w dokumencie [1].
[Vue.js] to framework JavaScript. Aby go zrozumieć, należy opanować ten język. W niniejszym dokumencie przedstawiamy standard ECMAScript 6, który jest najnowszą (z 2019 r.) wersją tego języka. Historię i rolę ECMAScript można znaleźć w Wikipedii pod hasłem [https://fr.wikipedia.org/wiki/ECMAScript].
Niniejszy dokument zawiera listę skryptów konsolowych JavaScript z różnych dziedzin (struktury języka, dostęp do baz danych, do sieci internetowej, programowanie warstwowe, programowanie za pomocą interfejsów). Dokument kończy się dwoma aplikacjami:
Aplikacja konsolowa, która będzie klientem serwera obliczającego podatek, zbudowanego w dokumencie [1]. Klient ten będzie miał taką samą architekturę jak klient konsolowy PHP zbudowany w dokumencie [1]:
- warstwy [7-9] będą odpowiadały klientowi JavaScript działającemu w konsoli;
- warstwy [1-4] to warstwy serwera PHP 7 utworzonego w dokumencie [1];
- w przeciwieństwie do klienta konsolowego PHP wbudowanego w dokument [1], nie będzie interakcji z lokalnym systemem plików [6];
Mamy tu do czynienia z aplikacją klient-serwer, w której klientem jest aplikacja konsolowa. Zostanie napisana druga aplikacja, w której kod warstw [7-9] zostanie przeniesiony do przeglądarki. Będziemy wtedy gotowi do omówienia frameworków JavaScript przeglądarek w dokumentach [3] i [4].
Skrypty zawarte w tym dokumencie są opatrzone komentarzami, a ich wynik działania 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 działania.
Serge Tahé, październik 2019