1. Einführung in das Framework VUE.JS

Das PDF dieses Dokuments ist verfügbar |HIER|`.

Die Beispiele in diesem Dokument sind unter |HIER| verfügbar.

Dieses Dokument ist Teil einer vierteiligen Artikelserie:

1. |Einführung in die Sprache PHP7 anhand von Beispielen|;
2. |Einführung in die Sprache ECMASCRIPT 6 anhand von Beispielen|;
3. |Einführung in das Framework VUE.JS anhand von Beispielen|. Dies ist das vorliegende Dokument;
4. |Einführung in das Framework NUXT.JS anhand von Beispielen|;

Es handelt sich dabei ausschließlich um Dokumente für Anfänger. Die Artikel folgen einer logischen Abfolge, sind jedoch nur lose miteinander verbunden:

• Das Dokument [1] stellt die Sprache PHP 7 vor. Leser, die sich nur für die Sprache PHP und nicht für die JavaScript-Sprache der folgenden Artikel interessieren, können an dieser Stelle aufhören;
• die Dokumente [2-4] zielen alle darauf ab, einen JavaScript-Client für den im Dokument [1] entwickelten Steuerberechnungsserver zu erstellen;
• die JavaScript-Frameworks [vue.js] und [nuxt.js] aus den Artikeln 3 und 4 setzen Kenntnisse des JavaScripts der neuesten Versionen von ECMASCRIPT voraus, nämlich der Version 6. Das Dokument [2] richtet sich daher an diejenigen, die diese Version von JavaScript nicht kennen. Es bezieht sich auf den im Dokument [1] erstellten Steuerberechnungsserver. Leser von [2] müssen daher gelegentlich auf das Dokument [1] zurückgreifen;
• Sobald man ECMASCRIPT beherrscht, kann man sich mit dem Framework VUE.JS befassen, das es ermöglicht, JavaScript-Clients zu erstellen, die in einem Browser im SPA-Modus (Single Page Application) ausgeführt werden. Es handelt sich um das Dokument [3]. Es bezieht sich sowohl auf den im Dokument [1] erstellten Steuerberechnungsserver als auch auf den in [2] erstellten eigenständigen Client-Code JavaScript. Wer sich mit [3] befasst, muss daher gelegentlich auf die Dokumente [1] und [2] zurückgreifen;
• sobald man VUE.JS beherrscht, kann man sich mit dem Framework NUXT.JS befassen, das es ermöglicht, JavaScript-Clients zu erstellen, die in einem Browser im Modus SSR (Server Side Rendered) ausgeführt werden. Es bezieht sich sowohl auf den im Dokument [1] erstellten Steuerberechnungsserver auf den eigenständigen JavaScript-Client-Code, der in [2] erstellt wurde, sowie auf die Anwendung [vue.js], die im Dokument [3] entwickelt wurde. Der Leser von [4] muss daher gelegentlich auf die Dokumente [1], [2] und [3] zurückgreifen;

Die neueste Version des Steuerberechnungsservers, die im Dokument [1] entwickelt wurde (siehe Dokument |https://tahe.developpez.com/tutoriels-cours/php7|), lässt sich auf verschiedene Weise verbessern:

• Die beschriebene Version ist serverzentriert. Der Trend geht mittlerweile (September 2019) in Richtung Client/Server:

• Der Server läuft als Dienst jSON;
• eine statische oder dynamische Seite ist der Einstiegspunkt der Webanwendung. Diese Seite enthält HTML / CSS, aber auch JavaScript;
• die übrigen Seiten der Webanwendung werden dynamisch über den JavaScript abgerufen:
  • Die Seite HTML kann durch Zusammensetzen statischer oder dynamischer Fragmente erstellt werden, die von demselben Server bereitgestellt werden, der auch die Startseite bereitgestellt hat, oder durch das JavaScript auf dem Client-Rechner;
  • Diese verschiedenen Seiten zeigen Daten an, die vom Dienst jSON angefordert werden;

Auf diese Weise wird die Arbeit zwischen Client und Server aufgeteilt. Der dadurch entlastete Server kann mehr Nutzer bedienen.

Die diesem Modell entsprechende Architektur sieht wie folgt aus:

JS: JavaScript

Der Browser ist der Client:

• eines Dienstes für statische oder nicht-statische Seiten oder Fragmente (oben nicht dargestellt);
• eines Datendienstes jSON;

Der Code JavaScript ist somit ein Client von jSON und kann als solcher in Schichten organisiert werden: [UI, métier, dao] (UI: Benutzeroberfläche), so wie es auch bei unseren in PHP geschriebenen Clients jSON der Fall war. Letztendlich lädt der Browser nur eine einzige Seite, nämlich die Startseite. Alle anderen Seiten werden vom JavaScript abgerufen und aufgebaut. Diese Art von Anwendung wird als SPA: Single Page Application oder auch als APU: Anwendung mit einer einzigen Seite bezeichnet.

Diese Art von Anwendung gehört ebenfalls zu den sogenannten AJAX: Asynchronous JavaScript und XM:

• Asynchronous – da die Aufrufe vom JavaScript-Client an den Server jSON asynchron erfolgen;
• XML: da XML die Technologie war, die vor dem Aufkommen von jSON verwendet wurde. Das Akronym AJAX wurde jedoch beibehalten;

In diesem Dokument werden wir eine solche Architektur untersuchen. Auf der Client-Seite verwenden wir das JavaScript-Framework [Vue.js] [https://vuejs.org/], um den JavaScript-Client für den Server jSON PHP zu schreiben, den wir im Dokument [1] beschrieben haben.

[Vue.js] ist ein Framework JavaScript. Die Sprache JavaScript haben wir im Dokument [2] vorgestellt. Wir werden das Framework [vue.js] nicht ausführlich behandeln. Wir beschränken uns darauf, die Konzepte vorzustellen, die anschließend beim Schreiben eines [Vue.js]-Clients für die Version jSON der Version 14 des Steuerberechnungsservers verwendet werden (siehe |https://stahe.github.io/de-php7-juillet-2019/|).

Die Skripte in diesem Dokument sind kommentiert und ihre Ausführung in der Konsole wird wiedergegeben. Teilweise werden zusätzliche Erläuterungen gegeben. Das Dokument erfordert aktives Lesen: Um ein Skript zu verstehen, muss man sowohl den Code als auch die Kommentare und die Ausführungsergebnisse lesen.

Die Beispiele des Dokuments sind |hier| verfügbar.

Die Serveranwendung PHP 7 kann |hier| getestet werden.

Serge Tahé, Oktober 2019