1. Inleiding tot het framework VUE.JS
De PDF van dit document is beschikbaar |HIER|`.
De voorbeelden in dit document 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)| ;
- |Inleiding tot het VUE.JS-framework aan de hand van voorbeelden (2019)|. Dit is het huidige document;
- |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] introduceert de taal PHP 7. De lezer die alleen geïnteresseerd is in de taal PHP en niet in de JavaScript-taal uit de volgende artikelen, kan hier stoppen;
- de documenten [2-4] zijn allemaal gericht op het bouwen van een JavaScript-client 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-code uit 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 geïmplementeerd. 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 server voor belastingberekening die in het document [1] is gebouwd, als naar de code van de zelfstandige client JavaScript 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 verkennen, 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] (zie document |Inleiding tot de programmeertaal PHP7 aan de hand van voorbeelden (2019)|), kan op verschillende manieren worden verbeterd:
- de beschreven versie is servergericht. De trend is nu (september 2019) client/server:
- de server draait als de jSON-service;
- 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 de JavaScript:
- de pagina HTML kan worden verkregen door het samenvoegen van al dan niet statische fragmenten, die worden geleverd door dezelfde server die de startpagina heeft geleverd, of die worden samengesteld door het JavaScript van de client;
- 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 browser is een client:
- van een dienst met al dan niet statische pagina's of fragmenten (hierboven niet weergegeven);
- van een jSON-gegevensdienst;
De code JavaScript is dus een client van jSON en kan als zodanig worden gestructureerd 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 opgevraagd en opgebouwd door de JavaScript. 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 XM:
- Asynchronous: 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 dit document gaan we een dergelijke architectuur bestuderen. 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].
[Vue.js] is een JavaScript-framework. We hebben de JavaScript-taal geïntroduceerd in het document [2]. We zullen het [vue.js]-framework niet uitgebreid behandelen. We zullen ons beperken tot het presenteren van de concepten die vervolgens zullen worden gebruikt bij het schrijven van een [Vue.js]-client voor de jSON-versie van versie 14 van de belastingberekeningsserver (zie |Inleiding tot de programmeertaal PHP7 aan de hand van voorbeelden (2019)|).
De scripts in dit document zijn voorzien van commentaar en de uitvoer in de console wordt weergegeven. Soms worden aanvullende uitleg gegeven. Het document vereist een actieve lezing: om een script te begrijpen, moet u zowel de code, het commentaar als de uitvoerresultaten lezen.
De voorbeelden uit het document zijn |hier| beschikbaar.
De serverapplicatie PHP 7 kan |hier| worden getest.
Serge Tahé, oktober 2019