1. Einführung in die Sprache ECMASCRIPT 6
Das PDF dieses Artikels ist |HIER| verfügbar.
Die Beispiele in diesem Artikel sind |HIER| verfügbar.
Dieses Dokument ist Teil einer vierteiligen Artikelserie:
- [Einführung in ECMASCRIPT 6 anhand von Beispielen]. Dies ist das aktuelle Dokument;
- [Einführung in das VUE.JS-Framework anhand von Beispielen];
- [Einführung in das NUXT.JS-Framework anhand von Beispielen];
Dies sind alles Dokumente für Anfänger. Die Artikel folgen einer logischen Reihenfolge, sind jedoch lose miteinander verbunden:
- Dokument [1] stellt die Sprache PHP 7 vor. Leser, die sich nur für PHP und nicht für das in den folgenden Artikeln behandelte JavaScript interessieren, sollten hier aufhören;
- Die Dokumente [2–4] zielen darauf ab, einen JavaScript-Client für den in Dokument [1] entwickelten Steuerberechnungsserver zu erstellen;
- Die JavaScript-Frameworks [Vue.js] und [Nuxt.js] in den Artikeln 3 und 4 erfordern Kenntnisse der neuesten Versionen von ECMAScript, insbesondere der Version 6. Dokument [2] richtet sich daher an diejenigen, die mit dieser Version von JavaScript nicht vertraut sind. Es bezieht sich auf den in Dokument [1] erstellten Steuerberechnungsserver. Leser von [2] müssen daher gelegentlich auf Dokument [1] zurückgreifen;
- Sobald ECMASCRIPT 6 beherrscht wird, können wir zum VUE.JS-Framework übergehen, das die Erstellung von JavaScript-Clients ermöglicht, die in einem Browser im SPA-Modus (Single Page Application) laufen. Dies ist das Dokument [3]. Es bezieht sich sowohl auf den in Dokument [1] erstellten Steuerberechnungsserver als auch auf den in [2] erstellten eigenständigen JavaScript-Client-Code. Leser von [3] müssen daher gelegentlich auf die Dokumente [1] und [2] zurückgreifen;
- Sobald Sie VUE.JS beherrschen, können Sie zum NUXT.JS-Framework übergehen, mit dem Sie JavaScript-Clients erstellen können, die in einem Browser im SSR-Modus (Server Side Rendered) laufen. Es bezieht sich auf den in Dokument [1] erstellten Steuerberechnungsserver, den in [2] erstellten eigenständigen JavaScript-Client-Code und die in Dokument [3] entwickelte [vue.js]-Anwendung. Leser von [4] müssen daher gelegentlich auf die Dokumente [1], [2] und [3] zurückgreifen;
Die neueste Version des in Dokument [1] entwickelten Steuerberechnungsservers lässt sich in verschiedener Hinsicht verbessern:
- Die aktuelle Version ist serverzentriert. Der aktuelle Trend (Stand: Juli 2019) geht in Richtung einer Client-Server-Architektur:
- Der Server fungiert als JSON-Dienst;
- Eine statische oder dynamische Seite dient als Einstiegspunkt für die Webanwendung. Diese Seite enthält HTML/CSS sowie JavaScript;
- die anderen Seiten der Webanwendung werden dynamisch durch JavaScript generiert:
- Die HTML-Seite kann durch Zusammensetzen statischer Fragmente generiert werden, die von demselben Server bereitgestellt werden, der auch die Startseite bereitstellt, oder vollständig durch JavaScript erstellt werden;
- diese verschiedenen Seiten zeigen Daten an, die vom JSON-Dienst angefordert wurden;
Auf diese Weise wird die Arbeit zwischen Client und Server aufgeteilt. Da die Auslastung des Servers dadurch sinkt, kann er mehr Nutzer bedienen.
Die diesem Modell entsprechende Architektur sieht wie folgt aus:
JS: JavaScript
Der JavaScript-Code ist clientseitig:
- von einem Dienst, der statische oder nicht-statische Seiten oder Fragmente bereitstellt;
- einem JSON-Dienst;
JavaScript-Code ist daher ein JSON-Client und kann als solcher in Schichten [UI, Geschäftslogik, DAO] (UI: Benutzeroberfläche) organisiert werden, genau wie unsere in PHP geschriebenen JSON-Clients. Letztendlich lädt der Browser nur eine einzige Seite – die Startseite. Alle anderen Seiten werden von JavaScript abgerufen und gerendert. Diese Art von Anwendung wird als SPA (Single Page Application) oder APU (Single Page Application) bezeichnet.
Diese Art von Anwendung gehört auch zu den sogenannten AJAX-Anwendungen: Asynchronous JavaScript and XML
- Asynchron: weil die Aufrufe des JavaScript-Clients an den JSON-Server asynchron erfolgen;
- XML: weil XML die Technologie war, die vor dem Aufkommen von JSON verwendet wurde. Das Akronym AJAX wurde jedoch beibehalten;
Wir werden diese Architektur in den kommenden Kapiteln näher betrachten. Auf der Client-Seite werden wir das JavaScript-Framework [Vue.js] [https://vuejs.org/] verwenden, um den JavaScript-Client für den PHP-JSON-Server zu schreiben, den wir in Dokument [1] beschrieben haben.
[Vue.js] ist ein JavaScript-Framework. Um es zu verstehen, müssen Sie diese Sprache beherrschen. In diesem Dokument stellen wir den ECMAScript-6-Standard vor, der (Stand 2019) die aktuellste Standardisierung dieser Sprache darstellt. Die Geschichte und Rolle von ECMAScript finden Sie auf Wikipedia [https://fr.wikipedia.org/wiki/ECMAScript].
Dieses Dokument enthält eine Liste von JavaScript-Konsolenskripten aus verschiedenen Bereichen (Sprachstrukturen, Datenbankzugriff, Internetzugriff, mehrschichtige Programmierung und Programmierung über Schnittstellen). Das Dokument schließt mit zwei Anwendungen:
Eine Konsolenanwendung, die als Client für den in Dokument [1] erstellten Steuerberechnungsserver fungiert. Dieser Client wird dieselbe Architektur aufweisen wie der in Dokument [1] erstellte PHP-Konsolen-Client:
- Die Schichten [7–9] entsprechen denen des in einer Konsole ausgeführten JavaScript-Clients;
- die Schichten [1–4] entsprechen denen des in Dokument [1] implementierten PHP-7-Servers;
- im Gegensatz zum in Dokument [1] implementierten PHP-Konsolen-Client wird es keine Interaktionen mit dem lokalen Dateisystem [6] geben;
Hier haben wir eine Client/Server-Anwendung, bei der der Client eine Konsolenanwendung ist. Es wird eine zweite Anwendung geschrieben, bei der der Code für die Schichten [7–9] auf einen Browser portiert wird. Dann sind wir bereit, uns mit den Browser-JavaScript-Frameworks in den Dokumenten [3] und [4] zu befassen.
Die Skripte in diesem Dokument sind kommentiert, und ihre Konsolenausgabe wird wiedergegeben. Manchmal werden zusätzliche Erläuterungen gegeben. Das Dokument erfordert aktives Lesen: Um ein Skript zu verstehen, müssen Sie dessen Code, Kommentare und Ausführungsergebnisse lesen.
Die Beispiele in diesem Dokument sind |hier| verfügbar.
Die PHP-7-Serveranwendung kann |hier| getestet werden.
Serge Tahé, Oktober 2019