1. Inleiding tot de taal ECMASCRIPT 6
De PDF uit dit artikel is beschikbaar |HIER|.
De voorbeelden uit dit artikel zijn beschikbaar |HIER|.
Dit document maakt deel uit van een reeks van vier artikelen:
- [Inleiding tot de taal ECMASCRIPT6 aan de hand van voorbeelden (2019)]. Dit is het huidige document;
- [Inleiding tot het VUE.JS-framework aan de hand van voorbeelden (2019)];
- [Inleiding tot het NUXT.JS-framework aan de hand van voorbeelden (2019)];
Dit zijn allemaal documenten voor beginners. De artikelen volgen elkaar logisch op, maar zijn los van elkaar te lezen:
- het document [1] behandelt de taal PHP 7. De lezer die alleen geïnteresseerd is in de taal PHP en niet in de JavaScript-taal van de volgende artikelen, kan hier stoppen;
- de documenten [2-4] zijn bedoeld om een JavaScript-client te bouwen voor de belastingberekeningsserver die in document [1] is ontwikkeld;
- voor de JavaScript-frameworks [vue.js] en [nuxt.js] uit de artikelen 3 en 4 is kennis van de JavaScript-taal van de laatste versies van ECMASCRIPT vereist, namelijk die van versie 6. Het document [2] is daarom bedoeld voor degenen die deze versie van JavaScript niet kennen. Het verwijst naar de belastingberekeningsserver die in het document [1] is gebouwd. De lezer van [2] zal dan af en toe moeten teruggrijpen op het document [1];
- zodra men ECMASCRIPT onder de knie heeft, kan men het framework VUE.JS gaan verkennen, waarmee JavaScript-clients kunnen worden gebouwd die in een browser in de modus SPA (Single Page Application) worden uitgevoerd. Dit is het document [3]. Het verwijst zowel naar de belastingberekeningsserver die in het document [1] is gebouwd als naar de code van de zelfstandige JavaScript-client die in [2] is gebouwd. Wie [3] doorneemt, zal dan af en toe moeten teruggrijpen op de documenten [1] en [2];
- zodra men VUE.JS onder de knie heeft, kan men het framework NUXT.JS gaan gebruiken, waarmee JavaScript-clients kunnen worden gebouwd die in een browser in de modus SSR (Server Side Rendered) worden uitgevoerd. Het verwijst zowel naar de server voor belastingberekening die in het document [1] is gebouwd, de code van de zelfstandige JavaScript-client die is gebouwd in [2], en de applicatie [vue.js] die is ontwikkeld in het document [3]. De lezer van [4] zal dan soms moeten teruggrijpen op de documenten [1], [2] en [3];
De nieuwste versie van de belastingberekeningsserver, ontwikkeld in document [1], kan op verschillende manieren worden verbeterd:
- de beschreven versie is servergericht. De trend is nu (juli 2019) client/server:
- de server draait als een service jSON;
- een al dan niet statische pagina vormt het startpunt van de webapplicatie. Deze pagina bevat HTML /CSS maar ook JavaScript;
- de overige pagina’s van de webapplicatie worden dynamisch gegenereerd door het JavaScript:
- de pagina HTML kan worden opgebouwd door statische fragmenten samen te voegen, die worden geleverd door dezelfde server die de startpagina heeft geleverd, of volledig door JavaScript worden opgebouwd;
- deze verschillende pagina’s geven gegevens weer die worden opgevraagd bij de service jSON;
Zo wordt het werk verdeeld over de client en de server. De server, die hierdoor wordt ontlast, kan meer gebruikers bedienen.
De architectuur die bij dit model hoort, is als volgt:
JS: JavaScript
De JavaScript-code bevindt zich op de client:
- van een dienst met al dan niet statische pagina's of fragmenten;
- van een jSON-service;
De JavaScript-code is dus een client jSON en kan als zodanig worden ingedeeld in lagen [UI, métier, dao] (UI: gebruikersinterface), net zoals onze jSON-clients die in PHP zijn geschreven. Uiteindelijk laadt de browser slechts één enkele pagina, namelijk de startpagina. Alle andere pagina’s worden door JavaScript opgevraagd en opgebouwd. Dit type applicatie wordt SPA genoemd: Single Page Application of ook wel APU: applicatie met één pagina.
Dit type applicatie behoort ook tot de zogenaamde AJAX: Asynchronous JavaScript en XML
- Asynchroon: omdat de JavaScript-verzoeken van de client aan de jSON-server asynchroon zijn;
- XML: omdat XML de technologie was die werd gebruikt vóór de komst van jSON. Het acroniem AJAX is echter behouden;
In de komende hoofdstukken zullen we een dergelijke architectuur nader bekijken. Aan de clientzijde zullen we het JavaScript-framework [Vue.js] [https://vuejs.org/] gebruiken om de JavaScript-client te schrijven voor de server jSON PHP die we in het document [1] hebben geschreven.
[Vue.js] is een JavaScript-framework. Om dit te begrijpen, moet men deze taal beheersen. In dit document presenteren we de standaard ECMAScript 6, de meest recente standaard (uit 2019) voor deze taal. De geschiedenis en de rol van ECMAScript zijn te vinden op Wikipedia [https://fr.wikipedia.org/wiki/ECMAScript].
Dit document bevat een lijst met JavaScript-consolescripts op verschillende gebieden (taalstructuren, toegang tot databases, toegang tot het internet, gelaagde programmering, programmeren via interfaces). Het document sluit af met twee toepassingen:
Een console-toepassing die zal fungeren als client voor de belastingberekeningsserver die in het document [1] is gebouwd. Deze client zal dezelfde architectuur hebben als die van de console-client PHP die in het document [1] is gebouwd:
- de lagen van [7-9] zijn die van de JavaScript-client die in een console wordt uitgevoerd;
- de lagen [1-4] zijn die van de server PHP 7, die is opgebouwd in het document [1];
- in tegenstelling tot de client-console PHP die in het document [1] is ingebouwd, zal er geen interactie plaatsvinden met het lokale bestandssysteem [6];
Dit is een client/server-toepassing waarbij de client een console-toepassing is. Er zal een tweede toepassing worden geschreven waarbij de code van de lagen [7-9] naar een browser wordt overgezet. Vervolgens zijn we klaar om de JavaScript-frameworks van browsers te behandelen in de documenten [3] en [4].
De scripts in dit document zijn van commentaar voorzien en de uitvoer in de console is weergegeven. Soms worden aanvullende uitleg gegeven. Het document vereist actieve lezing: om een script te begrijpen, moet je zowel de code, de commentaren als de uitvoerresultaten lezen.
De voorbeelden uit het document zijn |hier| beschikbaar.
De servertoepassing PHP 7 kan |hier| worden getest.
Serge Tahé, oktober 2019