GlossarWiki - Benutzerbeiträge [de-formal]

MMProg: Praktikum: WiSe 2017/18: GameLoop01

2017-10-27T15:48:49Z

Jostl:

{{MMProg:Praktikum:WiSe 2017/18:Menü}}

==Vorbereitung==

Im SVN-Repository finden Sie zwei WebStorm-Projekte zum Thema GameLoop:
* [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/game_loop/WK_GameLoop01/ WK_GameLoop01]
* [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/game_loop/WK_GameLoop02/ WK_GameLoop02]

Sie können diese Projekte folgendermaßen auf Ihrem Rechner installieren:

* <code>VCS</code> → <code>Checkout from Version Control</code> → <code>Subversion</code>
* Sofern noch nicht geschehen: Klick auf das grüne Plus-Symbol → Repository URL: <code>https://glossar.hs-augsburg.de/beispiel/tutorium/es6</code>
* Klick auf die Pfeilspitze vor diesem Pfad → Klick auf die Pfeilspitze vor <code>game_loop</code> → Klick '''auf''' <code>WK_GameLoop02</code>
* <code>Checkout</code> (<code>WK_GameLoop01</code> dient nur didaktischen Zwecken und wird für diese Praktikumsaufgabe nicht benötigt.)
* Speichern Sie das Projekt irgendwo auf Ihrem Rechner. '''Achtung: Speichern Sie das Projekt nicht innerhalb eines anderen Projektes (insbesondere nicht in Ihrem neuen Projekt) oder innerhalb eines Ordners, der bereits unter SVN-Kontrolle steht. Speichern meine Projekte in einem ganz anderen Ordner, der {{zB}} <code>KowaBeispiele</code> heißen könnte.'''
* Öffnen Sie das Projekt und geben Sie im WebStorm-Terminal <code>npm install</code> (oder kurz <code>npm i</code>) ein, um alle benötigten Node.js-Module zu installieren.

Machen Sie sich mit den Projekten vertraut. Die Web-Anwendung <code>src/js/app</code> des zweiten Projektes dient als Ausgangsbasis für diese Praktikumsaufgabe.

Im ersten Beispiel finden Sie diverse Game-Loop-Varianten. Schrittweise werden potentielle
Probleme behoben. Dieses Projekt verfolgt das didaktische Ziel, Ihnen die Probleme und potentielle
Lösungen im Zusammenhang mit JavaScript-Animationen zu verdeutlichen.

Im zweiten Beispiel wurde eine einfache Game-Loop-Klasse realisiert, die sie für dieses Praktikum
nutzen können und sollten. Diese Klasse basiert auf den Ergebnissen des ersten Projektes,
stellt aber – im Gegensatz zu einigen Web-Anwendungen des ersten Projekt – bislang keine Informationen
über die aktuelle Frame-Rate bereit. Dies ist aber für diese Praktikumsaufgabe nicht von Interesse.

==Aufgaben==

Laden Sie das leere Projekt [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/empty/WK_GameLoop02_Empty WK_GameLoop02_Empty] auf Ihren Rechner
(am Besten in den zuvor angelegten Ordner <code>KowaBeispiele</code>).
'''Installieren Sie diesmal aber nicht die Node.js-Module''', das machen Sie später. Sie finden das leere Projekt im zuvor aktivierten
Repository-Pfad <code>https://glossar.hs-augsburg.de/beispiel/tutorium/es6</code> im Unterordner <code>empty</code>.

Erstellen Sie ein neues Projekt <code>praktikum01</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)
sowie alle Dateien, die Sie im Wurzelverzeichnis des Projektes <code>WK_GameLoop02_Empty</code>
finden mittels <code>Crtl-/Apfel-C</code> <code>Crtl-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum
Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)

Nun können Sie in Ihrem eigenen Projekt die benötigten Node.js-Module installieren: <code>npm i</code>.

Sie können Ihr Projekt zur Übung auch im Subversion-Repository speichern. Das ist aber nit so wichtig.

In Ihrem Projekt finden Sie nun 10 Web-Anwendungen vor: <code>index01.html</code> verwendet die gepackte Version von <code>app01.js</code>,
die ihrerseits das Spiel <code>game01.js</code> einbindet. <code>index02.html</code>, <code>index03.html</code> etc. sind analog aufgebaut.
Wenn Sie irgendeine dieser Anwendungen im Browser öffnen, sehen Sie eine Eule in der linken oberen Bildschirmecke. Diese sollen
sie auf unterschiedliche Art und Weise animieren. Lösen Sie jede der folgenden Aufgaben in einer der vorgegebenen Apps.
Scheuen Sie sich nicht davor, eigene Experimente durchzuführen. Wenn die vorgegebenen Apps nicht ausreichen sollten, legen Sie einfach
noch ein paar an. (Vergessen Sie in diesem Fall nicht, <code>webpack.config.js</code> entsprechend zu erweitern.)

Schreiben Sie Ihre Lösungen der Aufgabe $i$ in die Datei <code>game</code>$i$<code>.js</code>.
Am einfachsten ist es, wenn Sie jeweils die Lösung der vorangegangenen Aufgabe kopieren und diese Kopie dann weiterentwickeln.

===Aufgabe 1===

Lassen Sie die Eule horizontal vom linken bis zum rechten Fensterrand des Browsers fliegen.

Tipp: http://ryanve.com/lab/dimensions/

Berücksichtigen Sie, dass die Eule 150 Pixel breit ist und das der Ankerpunkt im linken oberen Eck des zugehörigen Bildes liegt.
Sie müssen daher im Eulen-Objekt auch die Breite der Eule speichern und diese Breite bei der Kollissionserkennung
und -behandlung berücksichtigen.

Beachten Sie bitte, dass Sie zur Lösung dieser Aufgabe einfach die Datei <code>game01.js</code> anpassen müssen.
Lassen Sie sich durch den Code der Datei <code>owl.js</code> aus dem Beispiel <code>WK_GameLoop02</code> inspirieren.
(Sie können auch <code>owl_interpolate.js</code> verwenden, aber das verwirrt Sie vermutlich zurzeit mehr, als dass es
Inhen nützt.) Eine Reset-Funktion, wie sie im genannten Beispiel definiert wird, brauchen Sie nicht zu implementieren,
da Sie das „Spiel“ nicht mit Hilfe von irgendwelchen Buttons anhalten und zurücksetzen werden. Dies gilt auch für alle folgenden
Aufgaben.

Vergessen Sie <code>grunt</code> oder besser noch </code>grunt watch</code> nicht. :-)

===Aufgabe 2===

Lassen Sie die Eule nicht waagerecht, sondern in der horizontalen Mitte des Browserfesnters senkrecht von Fenstrrand zu Festerrand fliegen.

Um die Aufgabe zu lösen, müssen Sie für die Eule zusätzlich eine y-Position und eine y-Geschwindigkeit definieren. Die Berechnung der aktuellen y-Position funktioniert
analog zur Berechnung der aktuellen x-Position.

Vergessen Sie nicht auch die Kollissionserkennung und -behandlung für die beiden Bildschirmseiten <code>top</code> und <code>botton</code>
zu implementieren.

Und Sie müssen natürlich die Render-Funktion anpassen, sodass die aktuelle y-Position beim Rendern auch berücksichtigt wird.

===Aufgabe 3===

Lassen Sie die Eule von der Browsermitte aus schräg über den Bildschirm fliegen. In x-Richtung soll sie doppelt so schnell sein (200 Pixel/s)
wie in y-Richtung (100 Pixel/s).

===Aufgabe 4===

Setzen Sie die x-Start-Position der Eule auf <code>-100</code> und starten Sie die Web-App. Den Effekt, den Sie sehen, nennt
man [[Kollisionserkennung und -behandlung|Penetration]]. Die Eule hängt in der Wand fest, da Sie in einem Schritt nicht den Kollissionsbereich
(die linke Wand) verlässt. Daher besteht die Kollission fort und im nächsten Schritt ändert sie wieder ihre Flugrichtung.

Verbessern Sie das, indem Sie die Kollisionserkennung und -behandlung verbessern:

<source lang="javascript">
if (v_owl.x <= v_stage.left)
{
v_owl.vx = Math.abs(v_owl.vx);
}
if (v_owl.x >= v_stage.right - v_owl.width)
{
v_owl.vx = -Math.abs(v_owl.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung analog an.

Sie können und sollten sogar noch einen Schritt weiter gehen und die Eule
wieder zurück auf die Bühne schieben, wenn Sie in die Wand eingedrungen ist.
In die Wand einzudringen ist zwar physikalisch nicht möglich, aber leider in
einer Simulation der physikalischen Welt nur schwer zu vermeiden, da die
Position nur alle 16,7 ms berechnet wird. War die Eule zu einem Zeitpunkt
noch vor der Mauer, kann Sie beim nächsten Schritt schon drinnen stecken.
Insbesondere bei sehr schnellen Objekten kann das dann zu PEnetrations-Effekten führen.

Also schieben Sie die Eule besser zurück auf die Bühne.

<source lang="javascript">
if (v_owl.x <= v_stage.left)
{
v_owl.x = v_stage.left;
v_owl.vx = Math.abs(v_owl.vx);
}
if (v_owl.x >= v_stage.right - v_owl.width)
{
v_owl.x = v_stage.right - v_owl.width;
v_owl.vx = -Math.abs(v_owl.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung wiederum analog an.

===Aufgabe 5===

Ändern Sie die Kollisionserkennung und -behandlung so ab, dass die Eule ausgehend von der linken oberen Fensterecke
im Uhrzeigersinn sich immer entlang des Fensterrandes bewegt.

Beachten Sie bitte: Hier ist es besonders wichtig, dass Sie die Eule wieder auf die Bühne zurückbewegen, wenn sie mit einer
Wand kollidiert. Ansonsten verschwindet die Eule schnell im Nirgendwo.

(Anmerkung: Dies war einmal eine Aufgabe im Rahmen des Prüfungspraktikums, wobei die Lösung zur 3. Aufgabe vorgegeben war.)

===Aufgabe 6===

Kopieren Sie diesmal nicht die Lösung von Aufgabe 5, sondern von Aufgabe 4. Im folgenden arbeiten Sie
wieder mit der normalen Kollissionserkennung und -behandlung. Positionieren Sie die Eule allerdings wieder im linken oberen Eck
(in Aufgabe 4 hatten Sie sie außerhalb der Bühne platziert).

Die neue Position der Eule berechnet man mit Hilfe der Geschwindigkeit (velocity). Doch auch die
Geschwindigkeit kann sich ändern. Dazu benötigt man die Beschleunigung (acceleration).

Fügen Sie zu Ihrer Eule zwei weitere Attribute <code>ax</code> (Beschleunigung in x-Richtung) und
<code>ay</code> (Beschleunigung in y-Richtung) hinzu. Setzen Sie die Initialwerte auf
<code>400</code> (Pixel pro Sekunde) bzw. <code>200</code> (Pixel pro Sekunde). Das heißt, Sie möchten,
dass die Eule in jeder Sekunde um 400 bzw. 200 Pixel pro Sekunde mehr zurücklegt als zuvor.

Wenn Sie jetzt die Web-App starten, beschleunigt die Eule allerdings noch nicht.

In Ihrem Code wird die Position 60 mal pro Sekunde mit Hilfe des folgenden Codes aktualisiert:

<source lang="javascript">
v_owl.x += v_owl.vx * p_frac_s;
v_owl.y += v_owl.vy * p_frac_s;
</source>

Die Geschwindigkeit wird zur Position hinzuaddiert. Allerdings ist die Geschwindigkeit
in Pixeln pro Sekunde angegeben. Die Modellaktualisierung passiert jedoch alle $0,0167$
Sekunden. In dieser Zei bewegt sich die Eule nur um das $0,0167$-fache (= $1,67$%) der Sekundengeschwindigkeit weiter.

Auf genau dieselbe Weise wird die aktuelle Geschwindigkeit mit Hilfe der Beschleunigung
berechnet:

<source lang="javascript">
v_owl.vx += v_owl.ax * p_frac_s;
v_owl.vy += v_owl.ay * p_frac_s;
</source>

Fügen Sie diesen Code in Ihre Model-Update-Funktion ein und starten Sie die Eule erneut.
Wenn Sie jetzt Ihre We-App laufen lassen, stellen Sie fest, dass die Eule zunächst beschleunigt,
nach eine Kollission aber wieder abbremst. NAch der nächsten Kollission beschleunigt sie wieder.

Um diesen Effekt zu vermeiden, müssen Sie jedes mal, wenn Sie bei der Kollissionsbehandlung das Vorzeichen
der Geschwindigkeit ändern, das Vorzeichen der zugehörigen Beschleunigung analog ändern.

Beispielsweise mus der Code

<source lang="javascript">
v_owl.vx = -Math.abs(v_owl.vx);
</source>

um

<source lang="javascript">
v_owl.ax = -Math.abs(v_owl.ax);
</source>

ergänzt werden.

===Aufgabe 7===

Schreiben Sie die Kollissionsbehandlung so um, dass im Falle einer Kollission der Eule
mit dem unteren Fensterrand sowohl die Geschwindigkeit als auch die Beschleunigung
jeweils in x- und in y-Richtung auf Null gesetzt wird. Das heißt, die
Eule bleibt bei einer Kollision mit dem unteren Rand stehen stehen.

===Aufgabe 8===

Positionieren Sie die Eule im linken oberen Eck, geben Sie ihr eine Geschwindigkeit von
300 Pixeln in x-Richtung und von 0 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 800. (Diese Zahlen sind gut für meinen Monitor geeignet,
der eine Auflösung von 1600x900 hat. Wenn Sie einen deutlich kleineren oder größeren
Monitor haben, müssen Sie die Zahlen evtl. anpassen.)

Welche Kurve beschreibt die Eule, wenn Sie die Web-App starten?

===Aufgabe 9===

Positionieren Sie die Eule im linken unteren Eck, geben Sie ihr eine Geschwindigkeit von
300 Pixeln in x-Richtung und von -400 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 200.

Welche Kurve beschreibt die Eule, wenn Sie die Web-App starten?

Jetzt fehlt nur noch en Gummiband, mit dem Sie die Eule beschleunigen können. :-)

===Aufgabe 10===

Machen Sie eigene Experimente. Bringen Sie {{zB}} die Eule dazu, wie ein Flummi
zu springen, indem sie ihre Geschwindigkeit in x- und y-Richtung bei einem Bodenkontakt
um einen gewissen Prozentsatz reduzieren, aber nicht gleich auf null setzen.
(Die Beschleunigung, die die Erdanziehung simuliert, bleibt die ganze Zeit über gleich).
Achtung: Bei einem Bodenkontakt, dreht sich das Vorzeichen der y-Geschwindigkeit um,
das der x-Geschwindigkeit bleibt gleich.

Nervig ist, dass die Eule zum Schluss immer noch ganz leicht hüpft und gar nicht
zur Ruhe kommt. Vielleicht können Sie auch dieses Problem beheben.

Oder probieren Sie etwas ganz anderes aus.
==Quellen==
<references/>
<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

HTML5-Tutorium: JavaScript: Hello World 04

2017-10-12T21:53:07Z

Jostl:

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld04/web/index.html <code>index.html</code>],
([https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld04/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]]
ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil des Tutoriums geht es darum, die Anwendung besser zu strukturieren, {{dh}} zu [[Modul|modularisieren]].

==Modularisierung==

Eine Anwendung, wie {{zB}} ein HTML5-Spiel, besteht aus diversen unterschiedlichen Komponenten mit ganz unterschiedlichen Aufgaben.
Bei einem HTML5-Spiel müssen die Spielfiguren, die Spielszenen, die Spiellogik, die Benutzereingaben, die Darstellung das Spiels im Browser
etc. erstellt und verwaltet werden, wobei das Erstellen und Verwalten teilweise während der Spiel-Entwicklung und teilweise
während der Spiel-Ausführung (Runtime) erfolgt. An der Entwicklung eines Spiels sind üblicherweise mehrere oder gar viele
Entwickler gleichzeitig beteiligt. Oft müssen einzelnen Komponenten an neue Endgeräte oder Betriebssysteme angepasst werden.
Beispielsweise muss eine Tastatursteuerung durch eine Touch- oder Gestensteuerung ersetzt werden,
wenn ein Spiel so erweitert werden soll, dass es auch auf einem Smartphone oder Tablet läuft.

Das alles ist nur machbar, wenn man die Anwendung modularisiert, {{dh}} in kleine, möglichst unabhängige
Komponenten unterteilt. Ein großer Feind der Modularisierung sind globale Variablen und Funktionen.
Je mehr Dateien von unterschiedlichen Autoren erstellt werden, desto größer ist die Gefahr, dass es zu Namenskollisionen kommt.
Daher gilt der [[Multimedia-Programmierung: Best Practices#Modularisierung|Grundsatz]]: Verwende so wenig globale Größen wie möglich.

==Erstellen eines neuen Projektes==

'''Achtung: Es ist extrem wichtig, dass Sie folgende Befehle in der richtigen Reihenfolge durchführen.'''

Wenn Sie den zweiten und den dritten der der nachfolgenden Befehlsliste vertauschen, fügt WebStorm
den Ordner <code>node_modules</code> in Subversion ein und deaktiviert die Möglichkeit, ihn zur SVN-Ignore-Liste hinzufügen. Dann müssen Sie den Ordner wieder löschen und noch einmal hinzufügen. Später kann es sogar sein, dass ein nachträgliches Hinzufugen zur Ignore-Liste gar nicht mehr möglich ist. Dann müssten Sie dies mit einem anderen Tool (wie TortoiseSVN) nachholen.

'''Also: Arbeiten Sie die Befehle in der vorgegebenen Reihenfolge ab.'''

# Erstellen Sie ein neues Projekt mit dem Namen „<code>HelloWorld04</code>“
# Speichern Sie das Projekt in Ihrem Repository.
# Erstellen Sie den Ordner <code>node_modules</code> im Wurzelverzeichnis.
# * Die Frage „''Do you want to scedule the following directory for addition to Subversion?''“ beantworten Sie mit „<code>No</code>“.
# Rechtsklick auf <code>node_modules</code> → <code>Subversion</code> → <code>Ignore</code> → Klick auf <code>node_modules</code>
# Klick auf das Commit-Icon.

Dadurch, dass Sie das Verzeichnis <code>node_modules</code> zur SVN-Ignore-Liste hinzugefügt haben,
werden die Datein, die in Zukunft in diesem Ordner gespeichert werden, '''nicht''' ins SVN-Repository übertragen. Dies ist notwendig, da sich in diesem Ordner mehrere tausend ganz kleine Dateien befinden
werden, und die Speicherung dieser Daten im SVN-Repository Stunden in Anspruch nehmen kann.
Dabei ist eine Speicherung gar nicht notwendig, da sie jederzeit mit dem Befehl <code>npm install</code> ''sehr schnell'' wieder hergestellt werden können.

BTW: '''Sollten Sie einmal eine Abschlussarbeit mit Node.js erstellen, fügen Sie bitte auf gar keinen Fall den Inhalt des Ordners <code>node_modules</code> in Ihr Abgabemedium (CD, DVD, USB-Stick ...) ein.'''

==Erstellen einer Ordnerstruktur==

Grundsätzlich gilt auch bei der Programmierung: Ordnung ist das halbe Leben.

Web-Anwendungen werden sehr schnell sehr groß. Also sollte man sich eine geeignete Ordnerstruktur überlegen.
Üblicherweise legt man CSS-Dateien in einen Ordner namens „<code>css</code>“ und JavaScript-Dateien in einen Ordner namens
„<code>js</code>“ oder „<code>lib</code>“. Sollten es viele CSS- und/oder JavaScript-Dateien werden,
legt man im entsprechenden Ordner geeignete Unterordner an.

Legen Sie im Root-Verzeichnis Ihres Projektes folgende Ordner an (und beantworten Sie die Frage, ob der Ordner im SVN-Repository gepichert werden soll, jeweils mit <code>Yes</code>):
* <code>web</code>: Der Inhalt dieses Ordners kommt später auf einen echten Web-Server.
* <code>src</code>: Der Inhalt dieses Ordners enthält die Ausgangsdateien, die mit Hilfe von Node.js noch transformiert und dann in den Web-Ordner kopiert werden.
* <code>web/css</code>: Hier wird in den Vorlesungstutorien jeweils nur eine sehr kleine Datei liegen: „<code>initial.css</code>“. Diese sorgt dafür, dass das Fenster der App während der Initialisierung kein defektes LAyout präsentiert. Der größte Teil des CSS-Codes wird später dynamisch (per JavaScript) geladen.
* <code>web/js</code>: Hierher kopiert Node.js die erzeugten JavaScript-Dateien.
* <code>src/css</code>: Hier werden die eigentlichn CSS-Dateien der Web-Anwendung gespeichert, die von der App dynamisch nachgeladen werden sollen. In diesem Ordner könnten zur weiteren Strukturierung Unterordner angelegt werden. Allerdings wird das in dieser Veranstaltung nicht notwendig sein. Es wird jeweils nur eine Datei namens „<code>main.css</code>“ oder „<code>main.scss</code>“ geben.
* <code>src/js</code>: Hierher kommt die Datei „<code>app.js</code>“, die für den Start der Web-Anwendung zuständig ist. Üblicherweise liest sie weitere JavaScript-Dateien sowie eine oder mehrere JSON-Dateien mit Initialwerten ein, initialisiert die Anwendung und startet sie da nn.
* <code>src/js/app</code>: Hier speichern Sie die übrigen von Ihnen geschriebenen JavaScript-Dateien Ihrer Web-Anwendung. In diesem Ordner werden {{iAllg}} Unterordner zur weiteren Strukturierung der Anwendung angelegt.

Fremde Bibliotheken und automatisch generierte JavaScript-Dateien enthalten häufig
unsauberen Code, die Ihnen von WebStorm beim Speichern der Dateien im Repository angezeigt werden.
In einer Rückfrage sollen Sie dann bestätigen, dass Sie die „fehlerhaften“ Dateien trotzdem speichern wollen.

Damit Ihnen bei einem Commit nur Fehler in Ihren eigenen Dateien angezeigt werden, schließen Sie die Ordner „<code>mode_modules</code>“ und „<code>web/js</code>“ von der
WebStorm-Fehlerüberwachung aus:

* Rechtklick auf den Ordner „<code>mode_modules</code>“ → <code>Mark Directory as</code> → <code>Excluded</code>
* Rechtklick auf den Ordner „<code>web/js</code>“ → <code>Mark Directory as</code> → <code>Excluded</code>

Kopieren Sie nun aus Ihrer Lösung des [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]] die Dateien „<code>index.html</code>“ und „<code>main.css</code>“ in den soeben erstellten Ordnerbaum und speichern Sie diese unter den Namen „<code>web/index.html</code>“ und „<code>src/css/main.css</code>“

Noch ein kleiner Tipp: Aktivieren Sie die WebStorm-Node.js-coding-assitence, da Sie anderenfalls
bei jedem SVN-Commit einen Fehler angezeigt bekommen:

<code>File</code>/<code>WebStorm</code> → <code>Settings</code>/<code>Preferences</code> → <code>Language & Frameworks</code> → <code>Node.js and NPM</code>
→ Node.js Core library is not enabled. <code>Enable</code>

Damit Sie dies nicht bei jedem Projekt wiederholen müssen, konfigurieren Sie auch Ihre Default Settings/Default Preferences entsprechend.

<code>File</code>/<code>WebStorm</code> → <code>Default Settings</code>/<code>Default Preferences</code> → <code>Language & Frameworks</code> → <code>Node.js and NPM</code>
→ Node.js Core library is not enabled. <code>Enable</code>

Sie sollten nach jeden größeren Entwicklungsschritt die Änderungen im Repository speichern:

* Klick auf das SVN-Commit-Icon.

==Die App==

===Laden der CSS- und der JavaScript-Dateien===

Eine Web-Anwendung funktioniert nur – wie Sie bereits erfahren haben –, wenn nicht nur die HTML-Datei, sondern auch die zugehörigen
CSS- und JavaScript-Dateien geladen werden. Allerdings gibt es dabei ein Problem: Die CSS- und JavaScript-Dateien werden im Laufe der
Zeit immer zahlreicher und/oder größer. Diese Dateien zu laden, dauert seine Zeit.

In der aktuellen fritten Version der Web-Anwendung stehen die Verweise auf diese Dateien im <code>head</code>-Bereich des Dokuments.
Dieser wird vollständig geladen, bevor der <code>body</code>-Bereich eingelesen wird. Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments
darstellen kann, solange er die JavaScript- und CSS-Dateien lädt. Wenn dies zu lange dauert, verliert der Besucher die Geduld und verlässt die Seite
vorzeitig.

Besser wäre es daher andersherum vorzugehen: Es wird zuerst der <code>body</code>-Bereich geladen und dann die JavaScript- und die CSS-Dateien.
Im Falle von JavaScript ist das durchaus sinnvoll, aber im Falle von CSS hat das den Effekt, dass der Browser noch keine Layout-Vorgaben erhalten hat,
wenn er mit dem [[Rendern]] der Seite beginnt. Also verwendet er die browserspezifischen Defaultwerte. Das heißt, die Seite sieht zunächst
ganz anders aus, als vom Designer geplant. Wenn dann die CSS-Dateien geladen wurden, wird die Seite erneut gerendert und verändert ihr Aussehen.
Auch das ist verwirrend und wirkt unprofessionell.

Was also machen?

===CSS-Dateien===
Für CSS-Dateien empfiehlt Google ernsthaft, das Link-Element ganz ans Ende der HTML-Datei zu stellen, also '''nach''' dem schließenden <code>html</code>-Tag. Damit das Problem mit dem falschen Layout nicht auftritt, sollen ganz wenige, wichtige CSS-Befehle direkt – {{dh}} als CSS-Befehle innerhalb eines <code>style</code>-Elements – in dem HTML-Head-Bereich eingefügt
werden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery</ref>

Von ersten Vorschlag rate ich dringend ab, da er nicht [[HTML]]-konform ist, ja noch nicht einmal [[SGML]]-konform. Der zweite Vorschlag hat zur Folge, dass Struktur (HTML) und Layout (CSS)
vermischt werden. Dies war einer der Kardinalfehler von frühen HTML-Versionen aus der Zeit, bevor es das CSS-Format gab. '''Tun Sie das {{iAllg}} nicht.''' Aber: Sie können webpack<ref>https://webpack.js.org/</ref> dazu bringen, dies dynamisch zur Laufzeit für Sie nachzuholen.

Gehen Sie so vor, wie es unter [[Multimedia-Programmierung: Best Practices#CSS|Multimedia-Programmierung: Best Practices]] beschrieben ist. In diesem und den folgenden Tutorien werden
diese Prinzipien berücksichtigt.

Legen Sie die Datei <code>web/css/initial.css</code> an und fügen Sie folgenden (sehr kurzen!) Code ein:

<source lang="javascript">
body { background-color: #C5EFFC; }
.hidden { display: none; }
</source>

In der Datei <code>src/css/main.css</code> können Sie das <code>.hidden</code>-Element entfernen.

In der Datei <code>web/index.html</code> müssen Sie das Link-Element in Header folgendermaßen
<source lang="html">
<link rel = "stylesheet" type = "text/css" href = "css/initial.css"/>
</source>
anpassen. Das heißt, Sie laden im HTML-Head-Bereich nur noch die kleine CSS-Datei.

===JavaScript-Dateien===

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/BlockingJS</ref> Dieser Vorschlag ist sehr sinnvoll.

Entfernen Sie das <code>script</code>-Element aus dem HTML-Header-Bereich und fügen vor dem schließenden <code>body</code>-Tag folgendes Script-Element ein:

<source lang="html5">
<body>
...
<script type="text/javascript" src="js/app.bundle.js"></script>
</body>
</source>

Fügen Sie außerdem in das erste <code>section</code>-Tag im Body das Attribut
<code>class="hidden"</code> ein, damit man auch dieses Element beim Laden der Anwendung
zunächst nicht sieht. In einer Anwendung, die zum Laden etwas länger dauert, würde man
einen so genannten [[Splash Screen]] sichtbar einfügen und diesen beim eigentlichen Start der App ausblenden.

Wenn Sie nun die Web-App testweise starten, sollten Sie eine himmelblaue, aber ansonsten leere Seite sehen.
Wenn Sie im Browser die Konsole öffnen, sehen Sie dort (evtl. nach einem Reload), eine Fehlermeldung,
dass die JavaScript-Datei <code>app.bundle.js</code> nicht gefunden wird. Dieser Fehler ist nicht
weiter erstaunlich, da es diese Datei ja noch gar nicht gibt.

Weiter unten im Tutorium wird beschrieben, wie Sie mit Hilfe eines ES6-Import-Befehls und webpack dafür sorgen,
dass diese Datei nicht nur den JavaScript-Code der Anwendung bereit stellt, sondern auch den Inhalt
der eigentlichen CSS-Datei <code>main.css</code> dynamisch in die HTML-Datei einfügt (''injiziert'').

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

===Modularisierung der JavaScript-Dateien===

Die JavaScript-Datei <code>main.js</code> aus dem dritten des Tutoriums wird in zwei Teile aufgespalten:
<code>greet.js</code> und <code>app.js</code>. Die erste Datei enthält die eigentliche Begrüßungsfunktionalität,
die zweite initialisiert die App, {{dh}} aktiviert die Begrüßungsfunktion.

Erstellen Sie folgende zwei JavaScript-Dateien:

'''<code>src/js/greet.js</code>'''
<source lang="javascript">
/**
* @namespace greet
* Contains methods to say hello to the user of the web app.
*/

/**
* Welcomes the user of the web app by displaying a welcome message
* that includes his name. The name is fetched from a text input field.
*/
export const sayHello =
function()
{
document.getElementById('heading_hello').innerHTML =
'Hello, ' + document.getElementById('input_name').value + '!';
document.getElementById('section_form').classList.add('hidden');
document.getElementById('section_hello').classList.remove('hidden');
};

/**
* A keyboard event observer. It tests whether the enter key has been pressed.
* If so, the greet method is activated. Default reactions of the browser are
* disabled.
* @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
*/
export const sayHelloOnEnter =
function(p_event)
{
if ( (p_event.code === 'Enter' || p_event.keyCode === 13) &&
document.activeElement === document.getElementById('input_name')
)
{
p_event.preventDefault();
p_event.stopPropagation();
sayHello();
}
};
</source>

Sie sehen, dass dieses Modul zwei Funktionen exportiert. Diese (und nur diese) können jetzt
von anderen Modulen importiert und damit genutzt werden. Dies nutzen Sie im zweiten Modul aus:

'''<code>src/app.js</code>'''
<source lang="javascript">
import '../css/main.css';
import * as greet from './app/greet.js';

// Initialize the app.
document.getElementById('button_submit')
.addEventListener('click', greet.sayHello);
window .addEventListener('keydown', greet.sayHelloOnEnter);

// As now all files have been loaded and all data has been
// initialized, the app is ready to start.
// So make the form visible!
document.getElementById('section_form').classList.remove('hidden');
</source>

Sie importieren alle Elemente (<code>*</code>), die Ihnen das Modul <code>src/app/greet.js</code>
zur Verfügung stellt, und speichern diese Elemente in einem Objekt namens <code>greet</code>.
Damit ist es Ihnen mäglich die beiden Funktionen <code>sayHello</code> und <code>sayHelloOnEnter</code>
zu verwenden. Sie können jeweils unter dem Namen <code>greet.sayHello</code> bzw. <code>greet.sayHelloOnEnter</code>,
auf sie zugreifen.

Weil Sie schon gerade dabei sind, importieren Sie am besten gleich auch noch
die CSS-Datei <code>main.css</code>. Webpack sorgt dann dafür, dass diese
Datei in die Datei <code>app.bundle.js</code> integriert wird und somit ''dynamisch''
geladen wird, sobald der Browser die Script-Anweisung

<source lang="html5">
<script type="text/javascript" src="js/app.bundle.js"></script>
</source>

ausführt.

Der letzte Befehl in der JavaScript-Datei <code>app.js</code>

<source lang="javascript">
document.getElementById('section_form').classList.remove('hidden');
</source>

sorgt dafür, dass das Eingabeformular sichtbar wird. Da die
notwendigen Callback-Funktionen zuvor mit dem Formular verknüpft wurden,
ist es jetzt einsatzbereit, und es spricht nichts mehr dafür, den Benutzer
länger an der Verwendung dieses genialen ( :-) ) Formulars zu hindern.

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

===Node.js, Grunt, Babel und webpack===

Eigentlich wäre Sie jetzt fertig, wenn denn die Standardbrwoser die ES6-Import- und Export-Befehle kennen würden.
Doch das ist leider in den allermeisten Fällen nicht der Fall. Daher müssen die ES6-Dateien in ES5-Dateien transformiert werden.
Dafür gibt es diverse Möglichkeiten. Ich empfehle derzeit „webpack“<ref>webpack: https://webpack.js.org/</ref>.

Zum Transformieren und Packen von JavaScript-, JSON- und CSS/SCSS-Dateien kommen neben webpack auch noch Grunt<ref>Grunt: https://gruntjs.com/</ref> und Babel<ref>Babel: https://babeljs.io/</ref> zum Einsatz. Diese Pakete kennen Sie ja schon
aus dem Tutorium „[[HTML5-Tutorium: JavaScript: Entwicklungsumgebung|Einrichten eine Entwicklungsumgebung für Web-Anwendungen]]“.

Webpack ist ein sehr mächtiges Werkzeug, mit dem eine Vielzahl von Web-Dateien in einer oder einigen wenigen JavaScript-Dateien
zusammengefasst und bei Bedarf auch komprimiert werden können. Es handelt sich also um einen ''JavaScript module bundler''.
Einer der Entwickler von webpack ist [[Johannes Ewald]], ein ehemaliger Student der [[HSA]] (vgl. https://github.com/jhnns). Er bietet auch
regelmäßig Vorlesung an der HSA zum Thema „JavaScript“ an.

====Node.js-Pakete====

Öffnen Sie das WebStorm-Terminal und installieren Sie die benötigten Node.js-Pakete

<source lang="bash">
npm init -y
# Autor, Lizenz und Keywords in package.json anpassen
npm install --save-dev grunt grunt-contrib-watch
npm install --save-dev babel-cli babel-preset-env
npm install --save-dev webpack grunt-webpack
npm install --save-dev babel-loader json-loader style-loader css-loader
</source>

Achtung: <code>grunt-cil</code> wird auch benötigt. Aber dieses Paket wurde schon
im Tutorium „[[HTML5-Tutorium: JavaScript: Entwicklungsumgebung|Einrichten eine Entwicklungsumgebung für Web-Anwendungen]]“
global installiert und braucht daher nicht noch einmal installiert zu werden.

Sorgen Sie nun dafür. dass die Dateien <code>package.json</code> und <code>package-lock.json</code>
auch im Repository gespeichert werden (Leider erledigt die WebStorm nicht automatisch):

* Rechtklick auf „<code>package.json</code>“ → <code>Subversion</code> → <code>Add to VCS</code>
* Rechtklick auf „<code>package-lock.json</code>“ → <code>Subversion</code> → <code>Add to VCS</code>

====webpack====

Nun müssen noch webpack und Grunt konfiguriert werden, damit die Datei <code>app.bundle.js</code>
automatisch generiert werden kann.

Erstellen Sie im Wurzelverzeichnis des Projektes folgende Datei:

''<code>webpack.config.js</code>''
<source lang="html">
const path = require('path');

function absolutePath(l_path)
{ return path.resolve(__dirname, l_path);
}

module.exports =
{ entry:
{ app: absolutePath('src/js/app.js')
},

output:
{ filename: '[name].bundle.js',
path: absolutePath('web/js')
},

module:
{ rules:
[ { test: /\.json$/,
loader: 'json-loader'
},
{ test: /\.js$/,
use: [ { loader: 'babel-loader',
options:
{ presets: ['env'],
ignore: '/node_modules/'
},
},
],
},
{ test: /\.css$/,
use: [ 'style-loader',
{ loader: 'css-loader', options: { minimize: true } }
]
}
],
},

plugins:
[],
};
</source>

Es handelt sich um ein JavaScript-Datei, die direkt von Node.js interpretiert wird.
Aus diesem Grund wird auch nicht das EcmaScript-6-Modul-Konzept eingesetzt, sondern
[[CommonJS]], das Standard-Modulkonzept vom Node. Hier werden Module mittels <code>require</code>
und nicht mittels <code>import</code> importiert. Für Sie ist das allerdings nebensächlich,
das Sie im Rahmen der Tutorien keine komplexen Konfigurations-Dateien für webpack implementieren werden.

Im Prinzip macht diese Datei nichts andere als ein Objekt zu exportieren,
das webpack-Konfigurations-Informationen enthält:

* <code>entry</code>: JavaScript-Dateien, die gebündelt und komprimiert werden sollen. Man muss jeweils nur die Wurzeldatei angeben. Webpack sucht in dieser Datei rekursiv nach Import-Befehlen und packt die benötigten Dateien ebenfalls in die Ausgabedatei.
* <code>output</code>: Hier wird festgelgt, wie die gepackten Dateien heißen sollen. Für jeden
Eintrag im Attribute <code>entry</code> wird eine Datei mit dem Namen <<code>[name].bundle.js</code>
erzeugt, wobei <code>[name]</code> durch den Schlüsselname des Entry-Eintrags ersetzt wird.
In der obigen Datei gibt es nur ein Entry-Element. Dessen Schlüsselname lautet <code>app</code>.
* <code>module</code>: In diesem Attribut werden Regeln (<code>rules</code>) angegeben,
die festlegen, auf welche Weise eine Datei transformiert werden sollen. Bei jeder Regel gibt
es einen Test, der festlegt, für welche Dateien die jeweilge Regel zutrifft. Mit Hilfe eines
[[regulärer Ausdruck|regulärer Ausdrücke]] wird im Tutoriumsbeispiel geprüft, ob die aktuelle
Datei auf <code>.json</code>, <code>.js</code> oder <code>.css</code> endet. Je nach der
Endung wird ein anderer Loader zum Laden und Verarbeiten der Datei verwendet.
(Für webpack gibt es diverse Loader, einige davon haben Sie zuvor mit Hilfe von <code>npm</code> installiert.)

JSON-Dateien werden mit dem JSON-Loader geladen und in die Ergebnis-Datei (<code>app.bundle.js</code>)
eingefügt.

JavaScript-Dateien werden mit dem Babel-Loader geladen und transformiert.
Auf welche Weise der Babel-Loader dies macht wird nicht mehr in der Datei <code>.babelrc</code>
festgelegt, sondern direkt in der Datei <code>webpack.config.js</code>. Der Loader kann
auch Dateien laden, die sich im Verzeichnis <code>node_modules</code> befinden.
Die dort gespeicherten Module sorgen allerdings selbst dafür, dass sie ausführbaren
Web-Code bereitstellen. Daher sollten sie vom Babel-Loader nicht noch einmal transformiert werden.
Mit <code>ignore: '/node_modules/'</code> wird also nicht festgelegt, dass Babel die
benötigten Dateien nicht lädt, sondern es wird festgelegt, dass sie nicht noch einmal transformiert werden.

CSS-Dateien werden zunächst mit dem CSS-Loader geladen und verarbeitet. Anschließend werden vom
Style-Loader Anweisungen in die Datei <code>app.bundle.js</code> geschrieben, die dafür sorgen,
dass die CSS-Elemente beim Laden dieser JavaScript-Datei direkt in den HTML-Head-Bereich
der zugehörigen HTML-Datei eingefügt (''injiziert'') werden.

Am Ende der Konfigurations-Datei, gibt es noch eine Plugin-Liste, die dazu genutzt werden kann,
dateiunabhängige Transformationen an der Ergebnis-Datei (<code>app.bundle.js</code>)
vorzunehmen. Derartige Plugins werden zunächst einmal nicht verwendet.

Damit steht einer Verwendung von webpack nichts mehr im Wege. Man könnte webpack nun direkt von
der Kommandozeile aufrufen. Besser ist es allerdings, NPM-Skript-Befehle oder gar Grunt-Befehle
zu verwenden.

====NPM-Skripte====

Fügen Sie das <code>scripts></code>-Objekt der Datei <code>package.json</code>
drei weitere Skript-Anweisungen ein:

<source lang="json">
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "webpack",
"compress": "webpack -p",
"watch": "webpack --watch"
},
</source>

Geben Sie nun im WebStorm-Terminal die Anweisung <code>npm run bundle</code> ein.

Wenn Sie alles richtig gemacht haben, müsste webpack fehlerfrei durchlaufen und die Datei <code>web/js/app.bundle.js</code> erstellt werden. Im Zweifelsfall müssen Sie auf das Reload-Icon unter der
Menü-Leiste klicken, um sie zu sehen.
Wenn der Dateiname nicht grün, sondern braun eingefärbt ist, müssen Sie sie unter SVN-Kontrolle stellen:

* Rechtklick auf „<code>app.bundle.js</code>“ → <code>Subversion</code> → <code>Add to VCS</code>

Wenn Sie jetzt die Datei <code>index.html</code> im Browser öffnen, sollten Sie nach kurzer Zeit
wieder das Begrüßungsmenü sehen. Nach Eingabe des Namens und Klick auf den Say-hello-Button
oder Drücken der Enter-Taste sollten Sie freundlich begrüßt werden.

Sehen Sie sich mal den Inhalt der Datei <code>app.bundle.js</code> an. Darin finden Sie
– neben vielen Kommentaren, die zur Strukturierung der Datei verwendet werden – die Inhalte der Dateien <code>greet.js</code>, <code>app.js</code> und <code>main.css</code>
sowie spezielle Anweisungen, die von webpack eingefügt wurden.

In dieser Form ist die Datei für Entwicklungszwecke einigermaßen brauchbar. Bei einem Fehler
zeigt einem der Browser, in welcher Zeile dieser Datei der Fehler aufgetreten ist.
Normalerweise handelt es sich um eine Zeile, die Sie erfasst haben. Webpack-Befehle sollten keine
Fehler werden. Nachteilig ist, dass diese Zeile etwas anders aussehen kann, wie in Ihrem Sourcecode,
das sie ja mittels Babel transformiert wurde. Aber man findet die Originalzeile normalerweise recht schnell.

Gehen Sie nochmal ins WebStorm-Terminal und geben Sie diesmal
die Anweisung <code>npm run compress</code> ein.
Es wird wirder die Datei <code>app.bundle.js</code> erstellt. Und die Web-Anwendung sollte
immer noch funktionieren. Wenn Sie sich die gebündelte JavaScript noch einmal ansehen,
stellen Sie fest, dass Sie nun viel kleiner ist. Sie enthält keine überflüssige Leerzeichen, keine Zeilenumbrüche
und auch keine Kommentare mehr (mit Ausnahme des Kommentars, der Auskunft über den Autor und die
Lizenz gibt). Diese Datei ist für den Produktivbetrieb viel besser geeignet, da sie weniger Bandbreite
verbraucht. Insbesondere Smarphone-Besitzer freuen sich über kleine Dateien, da ihr Datenvolumen
dadurch weniger belastet wird. Für die Fehlersuche bei der Entwicklung der Web-App ist diese
Variante allerdings vollkommen ungeeignet.

Nun können Sie noch die Anweisung <code>npm run watch</code> testen.
Dieser startet einen webpack-Watcher, der bei jeder Änderung an einer Datei, die von webpack
beim Bündeln berücksichtigt wird, dafür sorgt, dass <code>app.bundle.js</code> neu erstellt wird
und Sie die Ergebnisse Ihrer Änderung durch einen einfachen Reload der Datei <code>index.html</code>
im Browser betrachten können. Ändern Sie doch einmal in der CSS-Datei die Hintergrundfarbe, speichern Sie die Datei und beobachten Sie das Terminalfenster. Laden Sie danach die HTML-Datei im Browser mittels
des Reload-Buttons neu.

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

====Grunt====

Nun können Sie auch noch Grunt konfiguerieren. Hier wäre das noch nicht so wichtig,
da Grunt auch nicht mehr leistet, als die zuvor getesteten NPM-Skript-Befehle.
Allerdings kann man mit Grunt nicht nur webpack, sondern auch noch viele
weitere Tools verwalten. Ich persönlich finde es ganz angenehm, well alle Tools
mit Hilfe eines einzigen Werkzeugs administirert werden.

Fügen Sie folgende Datei ins Wurzelverzeichnis Ihrer Projektes ein:

'''<code>gruntfile.js</code>'''
<source lang="javascript">
const webpack = require('webpack'),
webpackConfig = require('./webpack.config.js');

module.exports = function(grunt)
{
// Project configuration.
grunt.initConfig
({
pkg: grunt.file.readJSON('package.json'),

webpack:
{
options: webpackConfig,

bundle:
{
},

compress:
{
plugins:
webpackConfig.plugins.concat
( new webpack.optimize.UglifyJsPlugin({ mangle: true }) )
},

watch:
{
watch: true,
keepalive: true
}
},
});

// Register task(s)
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['webpack:bundle']);
grunt.registerTask('bundle', ['webpack:bundle']);
grunt.registerTask('compress', ['webpack:compress']);
grunt.registerTask('watch', ['webpack:watch']);
};
</source>

Damit stehen Ihnen folgende Grunt-Befehle zur Verfügung:

* <code>grunt</code> bzw. <code>grunt bundle</code> (entspricht <code>npm run bundle</code>)
* <code>grunt compress</code> (entspricht <code>npm run compress</code>)
* <code>grunt watch</code> (entspricht <code>npm run watch</code>)

Interessant ist, dass hier die Komprimierung der Zieldatei mit Hilfe des Webpack-Plugins
<code>UglifyJsPlugin</code> und nicht mit Hilfe der Kommandozeilen-Option <code>-f</code> erzielt wird.
Diese Plugin bietet viele Optionen, mit denen der Kompressionsvorgang gezielt gesteuert werden kann.

Und noch einmal (sobald alles funktioniert):
* Klick auf das SVN-Commit-Icon.

==Quellen==
<references/>
<ol>
<li value="7"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World 04

2017-10-12T21:25:25Z

Jostl:

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld04/web/index.html <code>index.html</code>],
([https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld04/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]]
ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil des Tutoriums geht es darum, die Anwendung besser zu strukturieren, {{dh}} zu [[Modul|modularisieren]].

==Modularisierung==

Eine Anwendung, wie {{zB}} ein HTML5-Spiel, besteht aus diversen unterschiedlichen Komponenten mit ganz unterschiedlichen Aufgaben.
Bei einem HTML5-Spiel müssen die Spielfiguren, die Spielszenen, die Spiellogik, die Benutzereingaben, die Darstellung das Spiels im Browser
etc. erstellt und verwaltet werden, wobei das Erstellen und Verwalten teilweise während der Spiel-Entwicklung und teilweise
während der Spiel-Ausführung (Runtime) erfolgt. An der Entwicklung eines Spiels sind üblicherweise mehrere oder gar viele
Entwickler gleichzeitig beteiligt. Oft müssen einzelnen Komponenten an neue Endgeräte oder Betriebssysteme angepasst werden.
Beispielsweise muss eine Tastatursteuerung durch eine Touch- oder Gestensteuerung ersetzt werden,
wenn ein Spiel so erweitert werden soll, dass es auch auf einem Smartphone oder Tablet läuft.

Das alles ist nur machbar, wenn man die Anwendung modularisiert, {{dh}} in kleine, möglichst unabhängige
Komponenten unterteilt. Ein großer Feind der Modularisierung sind globale Variablen und Funktionen.
Je mehr Dateien von unterschiedlichen Autoren erstellt werden, desto größer ist die Gefahr, dass es zu Namenskollisionen kommt.
Daher gilt der [[Multimedia-Programmierung: Best Practices#Modularisierung|Grundsatz]]: Verwende so wenig globale Größen wie möglich.

==Erstellen eines neuen Projektes==

'''Achtung: Es ist extrem wichtig, dass Sie folgende Befehle in der richtigen Reihenfolge durchführen.'''

Wenn Sie den zweiten und den dritten der der nachfolgenden Befehlsliste vertauschen, fügt WebStorm
den Ordner <code>node_modules</code> in Subversion ein und deaktiviert die Möglichkeit, ihn zur SVN-Ignore-Liste hinzufügen. Dann müssen Sie den Ordner wieder löschen und noch einmal hinzufügen. Später kann es sogar sein, dass ein nachträgliches Hinzufugen zur Ignore-Liste gar nicht mehr möglich ist. Dann müssten Sie dies mit einem anderen Tool (wie TortoiseSVN) nachholen.

'''Also: Arbeiten Sie die Befehle in der vorgegebenen Reihenfolge ab.'''

# Erstellen Sie ein neues Projekt mit dem Namen „<code>HelloWorld04</code>“
# Speichern Sie das Projekt in Ihrem Repository.
# Erstellen Sie den Ordner <code>node_modules</code> im Wurzelverzeichnis.
# * Die Frage „''Do you want to scedule the following directory for addition to Subversion?''“ beantworten Sie mit „<code>No</code>“.
# Rechtsklick auf <code>node_modules</code> → <code>Subversion</code> → <code>Ignore</code> → Klick auf <code>node_modules</code>
# Klick auf das Commit-Icon.

Dadurch, dass Sie das Verzeichnis <code>node_modules</code> zur SVN-Ignore-Liste hinzugefügt haben,
werden die Datein, die in Zukunft in diesem Ordner gespeichert werden, '''nicht''' ins SVN-Repository übertragen. Dies ist notwendig, da sich in diesem Ordner mehrere tausend ganz kleine Dateien befinden
werden, und die Speicherung dieser Daten im SVN-Repository Stunden in Anspruch nehmen kann.
Dabei ist eine Speicherung gar nicht notwendig, da sie jederzeit mit dem Befehl <code>npm install</code> ''sehr schnell'' wieder hergestellt werden können.

BTW: '''Sollten Sie einmal eine Abschlussarbeit mit Node.js erstellen, fügen Sie bitte auf gar keinen Fall den Inhalt des Ordners <code>node_modules</code> in Ihr Abgabemedium (CD, DVD, USB-Stick ...) ein.'''

==Erstellen einer Ordnerstruktur==

Grundsätzlich gilt auch bei der Programmierung: Ordnung ist das halbe Leben.

Web-Anwendungen werden sehr schnell sehr groß. Also sollte man sich eine geeignete Ordnerstruktur überlegen.
Üblicherweise legt man CSS-Dateien in einen Ordner namens „<code>css</code>“ und JavaScript-Dateien in einen Ordner namens
„<code>js</code>“ oder „<code>lib</code>“. Sollten es viele CSS- und/oder JavaScript-Dateien werden,
legt man im entsprechenden Ordner geeignete Unterordner an.

Legen Sie im Root-Verzeichnis Ihres Projektes folgende Ordner an (und beantworten Sie die Frage, ob der Ordner im SVN-Repository gepichert werden soll, jeweils mit <code>Yes</code>):
* <code>web</code>: Der Inhalt dieses Ordners kommt später auf einen echten Web-Server.
* <code>src</code>: Der Inhalt dieses Ordners enthält die Ausgangsdateien, die mit Hilfe von Node.js noch transformiert und dann in den Web-Ordner kopiert werden.
* <code>web/css</code>: Hier wird in den Vorlesungstutorien jeweils nur eine sehr kleine Datei liegen: „<code>initial.css</code>“. Diese sorgt dafür, dass das Fenster der App während der Initialisierung kein defektes LAyout präsentiert. Der größte Teil des CSS-Codes wird später dynamisch (per JavaScript) geladen.
* <code>web/js</code>: Hierher kopiert Node.js die erzeugten JavaScript-Dateien.
* <code>src/css</code>: Hier werden die eigentlichn CSS-Dateien der Web-Anwendung gespeichert, die von der App dynamisch nachgeladen werden sollen. In diesem Ordner könnten zur weiteren Strukturierung Unterordner angelegt werden. Allerdings wird das in dieser Veranstaltung nicht notwendig sein. Es wird jeweils nur eine Datei namens „<code>main.css</code>“ oder „<code>main.scss</code>“ geben.
* <code>src/js</code>: Hierher kommt die Datei „<code>app.js</code>“, die für den Start der Web-Anwendung zuständig ist. Üblicherweise liest sie weitere JavaScript-Dateien sowie eine oder mehrere JSON-Dateien mit Initialwerten ein, initialisiert die Anwendung und startet sie da nn.
* <code>src/js/app</code>: Hier speichern Sie die übrigen von Ihnen geschriebenen JavaScript-Dateien Ihrer Web-Anwendung. In diesem Ordner werden {{iAllg}} Unterordner zur weiteren Strukturierung der Anwendung angelegt.

Fremde Bibliotheken und automatisch generierte JavaScript-Dateien enthalten häufig
unsauberen Code, die Ihnen von WebStorm beim Speichern der Dateien im Repository angezeigt werden.
In einer Rückfrage sollen Sie dann bestätigen, dass Sie die „fehlerhaften“ Dateien trotzdem speichern wollen.

Damit Ihnen bei einem Commit nur Fehler in Ihren eigenen Dateien angezeigt werden, schließen Sie die Ordner „<code>mode_modules</code>“ und „<code>web/js</code>“ von der
WebStorm-Fehlerüberwachung aus:

* Rechtklick auf den Ordner „<code>mode_modules</code>“ → <code>Mark Directory as</code> → <code>Excluded</code>
* Rechtklick auf den Ordner „<code>web/js</code>“ → <code>Mark Directory as</code> → <code>Excluded</code>

Kopieren Sie nun aus Ihrer Lösung des [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]] die Dateien „<code>index.html</code>“ und „<code>main.css</code>“ in den soeben erstellten Ordnerbaum und speichern Sie diese unter den Namen „<code>web/index.html</code>“ und „<code>src/css/main.css</code>“

Noch ein kleiner Tipp: Aktivieren Sie die WebStorm-Node.js-coding-assitence, da Sie anderenfalls
bei jedem SVN-Commit einen Fehler angezeigt bekommen:

<code>File</code>/<code>WebStorm</code> → <code>Settings</code>/<code>Preferences</code> → <code>Language & Frameworks</code> → <code>Node.js and NPM</code>
→ Node.js Core library is not enabled. <code>Enable</code>

Damit Sie dies nicht bei jedem Projekt wiederholen müssen, konfigurieren Sie auch Ihre Default Settings/Default Preferences entsprechend.

<code>File</code>/<code>WebStorm</code> → <code>Default Settings</code>/<code>Default Preferences</code> → <code>Language & Frameworks</code> → <code>Node.js and NPM</code>
→ Node.js Core library is not enabled. <code>Enable</code>

Sie sollten nach jeden größeren Entwicklungsschritt die Änderungen im Repository speichern:

* Klick auf das SVN-Commit-Icon.

==Die App==

===Laden der CSS- und der JavaScript-Dateien===

Eine Web-Anwendung funktioniert nur – wie Sie bereits erfahren haben –, wenn nicht nur die HTML-Datei, sondern auch die zugehörigen
CSS- und JavaScript-Dateien geladen werden. Allerdings gibt es dabei ein Problem: Die CSS- und JavaScript-Dateien werden im Laufe der
Zeit immer zahlreicher und/oder größer. Diese Dateien zu laden, dauert seine Zeit.

In der aktuellen fritten Version der Web-Anwendung stehen die Verweise auf diese Dateien im <code>head</code>-Bereich des Dokuments.
Dieser wird vollständig geladen, bevor der <code>body</code>-Bereich eingelesen wird. Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments
darstellen kann, solange er die JavaScript- und CSS-Dateien lädt. Wenn dies zu lange dauert, verliert der Besucher die Geduld und verlässt die Seite
vorzeitig.

Besser wäre es daher andersherum vorzugehen: Es wird zuerst der <code>body</code>-Bereich geladen und dann die JavaScript- und die CSS-Dateien.
Im Falle von JavaScript ist das durchaus sinnvoll, aber im Falle von CSS hat das den Effekt, dass der Browser noch keine Layout-Vorgaben erhalten hat,
wenn er mit dem [[Rendern]] der Seite beginnt. Also verwendet er die browserspezifischen Defaultwerte. Das heißt, die Seite sieht zunächst
ganz anders aus, als vom Designer geplant. Wenn dann die CSS-Dateien geladen wurden, wird die Seite erneut gerendert und verändert ihr Aussehen.
Auch das ist verwirrend und wirkt unprofessionell.

Was also machen?

===CSS-Dateien===
Für CSS-Dateien empfiehlt Google ernsthaft, das Link-Element ganz ans Ende der HTML-Datei zu stellen, also '''nach''' dem schließenden <code>html</code>-Tag. Damit das Problem mit dem falschen Layout nicht auftritt, sollen ganz wenige, wichtige CSS-Befehle direkt – {{dh}} als CSS-Befehle innerhalb eines <code>style</code>-Elements – in dem HTML-Head-Bereich eingefügt
werden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery</ref>

Von ersten Vorschlag rate ich dringend ab, da er nicht [[HTML]]-konform ist, ja noch nicht einmal [[SGML]]-konform. Der zweite Vorschlag hat zur Folge, dass Struktur (HTML) und Layout (CSS)
vermischt werden. Dies war einer der Kardinalfehler von frühen HTML-Versionen aus der Zeit, bevor es das CSS-Format gab. '''Tun Sie das {{iAllg}} nicht.''' Aber: Sie können webpack<ref>https://webpack.js.org/</ref> dazu bringen, dies dynamisch zur Laufzeit für Sie nachzuholen.

Gehen Sie so vor, wie es unter [[Multimedia-Programmierung: Best Practices#CSS|Multimedia-Programmierung: Best Practices]] beschrieben ist. In diesem und den folgenden Tutorien werden
diese Prinzipien berücksichtigt.

Legen Sie die Datei <code>web/css/initial.css</code> an und fügen Sie folgenden (sehr kurzen!) Code ein:

<source lang="javascript">
body { background-color: #C5EFFC; }
.hidden { display: none; }
</source>

In der Datei <code>src/css/main.css</code> können Sie das <code>.hidden</code>-Element entfernen.

In der Datei <code>web/index.html</code> müssen Sie das Link-Element in Header folgendermaßen
<source lang="html">
<link rel = "stylesheet" type = "text/css" href = "css/initial.css"/>
</source>
anpassen. Das heißt, Sie laden im HTML-Head-Bereich nur noch die kleine CSS-Datei.

===JavaScript-Dateien===

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/BlockingJS</ref> Dieser Vorschlag ist sehr sinnvoll.

Entfernen Sie das <code>script</code>-Element aus dem HTML-Header-Bereich und fügen vor dem schließenden <code>body</code>-Tag folgendes Script-Element ein:

<source lang="html5">
<body>
...
<script type="text/javascript" src="js/app.bundle.js"></script>
</body>
</source>

Fügen Sie außerdem in das erste <code>section</code>-Tag im Body das Attribut
<code>class="hidden"</code> ein, damit man auch dieses Element beim Laden der Anwendung
zunächst nicht sieht. In einer Anwendung, die zum Laden etwas länger dauert, würde man
einen so genannten [[Splash Screen]] sichtbar einfügen und diesen beim eigentlichen Start der App ausblenden.

Wenn Sie nun die Web-App testweise starten, sollten Sie eine himmelblaue, aber ansonsten leere Seite sehen.
Wenn Sie im Browser die Konsole öffnen, sehen Sie dort (evtl. nach einem Reload), eine Fehlermeldung,
dass die JavaScript-Datei <code>app.bundle.js</code> nicht gefunden wird. Dieser Fehler ist nicht
weiter erstaunlich, da es diese Datei ja noch gar nicht gibt.

Weiter unten im Tutorium wird beschrieben, wie Sie mit Hilfe eines ES6-Import-Befehls und webpack dafür sorgen,
dass diese Datei nicht nur den JavaScript-Code der Anwendung bereit stellt, sondern auch den Inhalt
der eigentlichen CSS-Datei <code>main.css</code> dynamisch in die HTML-Datei einfügt (''injiziert'').

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

===Modularisierung der JavaScript-Dateien===

Die JavaScript-Datei <code>main.js</code> aus dem dritten des Tutoriums wird in zwei Teile aufgespalten:
<code>greet.js</code> und <code>app.js</code>. Die erste Datei enthält die eigentliche Begrüßungsfunktionalität,
die zweite initialisiert die App, {{dh}} aktiviert die Begrüßungsfunktion.

Erstellen Sie folgende zwei JavaScript-Dateien:

'''<code>src/js/greet.js</code>'''
<source lang="javascript">
/**
* @namespace greet
* Contains methods to say hello to the user of the web app.
*/

/**
* Welcomes the user of the web app by displaying a welcome message
* that includes his name. The name is fetched from a text input field.
*/
export const sayHello =
function()
{
document.getElementById('heading_hello').innerHTML =
'Hello, ' + document.getElementById('input_name').value + '!';
document.getElementById('section_form').classList.add('hidden');
document.getElementById('section_hello').classList.remove('hidden');
};

/**
* A keyboard event observer. It tests whether the enter key has been pressed.
* If so, the greet method is activated. Default reactions of the browser are
* disabled.
* @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
*/
export const sayHelloOnEnter =
function(p_event)
{
if ( (p_event.code === 'Enter' || p_event.keyCode === 13) &&
document.activeElement === document.getElementById('input_name')
)
{
p_event.preventDefault();
p_event.stopPropagation();
sayHello();
}
};
</source>

Sie sehen, dass dieses Modul zwei Funktionen exportiert. Diese (und nur diese) können jetzt
von anderen Modulen importiert und damit genutzt werden. Dies nutzen Sie im zweiten Modul aus:

'''<code>src/app.js</code>'''
<source lang="javascript">
import '../css/main.css';
import * as greet from './app/greet.js';

// Initialize the app.
document.getElementById('button_submit')
.addEventListener('click', greet.sayHello);
window .addEventListener('keydown', greet.sayHelloOnEnter);

// As now all files have been loaded and all data has been
// initialized, the app is ready to start.
// So make the form visible!
document.getElementById('section_form').classList.remove('hidden');
</source>

Sie importieren alle Elemente (<code>*</code>), die Ihnen das Modul <code>src/app/greet.js</code>
zur Verfügung stellt, und speichern diese Elemente in einem Objekt namens <code>greet</code>.
Damit ist es Ihnen mäglich die beiden Funktionen <code>sayHello</code> und <code>sayHelloOnEnter</code>
zu verwenden. Sie können jeweils unter dem Namen <code>greet.sayHello</code> bzw. <code>greet.sayHelloOnEnter</code>,
auf sie zugreifen.

Weil Sie schon gerade dabei sind, importieren Sie am besten gleich auch noch
die CSS-Datei <code>main.css</code>. Webpack sorgt dann dafür, dass diese
Datei in die Datei <code>app.bundle.js</code> integriert wird und somit ''dynamisch''
geladen wird, sobald der Browser die Script-Anweisung

<source lang="html5">
<script type="text/javascript" src="js/app.bundle.js"></script>
</source>

ausführt.

Der letzte Befehl in der JavaScript-Datei <code>app.js</code>

<source lang="javascript">
document.getElementById('section_form').classList.remove('hidden');
</source>

sorgt dafür, dass das Eingabeformular sichtbar wird. Da die
notwendigen Callback-Funktionen zuvor mit dem Formular verknüpft wurden,
ist es jetzt einsatzbereit, und es spricht nichts mehr dafür, den Benutzer
länger an der Verwendung dieses genialen ( :-) ) Formulars zu hindern.

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

===Node.js, Grunt, Babel und webpack===

Eigentlich wäre Sie jetzt fertig, wenn denn die Standardbrwoser die ES6-Import- und Export-Befehle kennen würden.
Doch das ist leider in den allermeisten Fällen nicht der Fall. Daher müssen die ES6-Dateien in ES5-Dateien transformiert werden.
Dafür gibt es diverse Möglichkeiten. Ich empfehle derzeit „webpack“<ref>webpack: https://webpack.js.org/</ref>.

Zum Transformieren und Packen von JavaScript-, JSON- und CSS/SCSS-Dateien kommen neben webpack auch noch Grunt<ref>Grunt: https://gruntjs.com/</ref> und Babel<ref>Babel: https://babeljs.io/</ref> zum Einsatz. Diese Pakete kennen Sie ja schon
aus dem Tutorium „[[HTML5-Tutorium: JavaScript: Entwicklungsumgebung|Einrichten eine Entwicklungsumgebung für Web-Anwendungen]]“.

Webpack ist ein sehr mächtiges Werkzeug, mit dem eine Vielzahl von Web-Dateien in einer oder einigen wenigen JavaScript-Dateien
zusammengefasst und bei Bedarf auch komprimiert werden können. Es handelt sich also um einen ''JavaScript module bundler''.
Einer der Entwickler von webpack ist [[Johannes Ewald]], ein ehemaliger Student der [[HSA]] (vgl. https://github.com/jhnns). Er bietet auch
regelmäßig Vorlesung an der HSA zum Thema „JavaScript“ an.

====Node.js-Pakete====

Öffnen Sie das WebStorm-Terminal und installieren Sie die benötigten Node.js-Pakete

<source lang="bash">
npm init -y
# Autor, Lizenz und Keywords in package.json anpassen
npm install --save-dev grunt grunt-contrib-watch
npm install --save-dev babel-cli babel-preset-env
npm install --save-dev webpack grunt-webpack
npm install --save-dev babel-loader json-loader style-loader css-loader
</source>

Achtung: <code>grunt-cil</code> wird auch benötigt. Aber dieses Paket wurde schon
im Tutorium „[[HTML5-Tutorium: JavaScript: Entwicklungsumgebung|Einrichten eine Entwicklungsumgebung für Web-Anwendungen]]“
global installiert und braucht daher nicht noch einmal installiert zu werden.

Sorgen Sie nun dafür. dass die Dateien <code>package.json</code> und <code>package-lock.json</code>
auch im Repository gespeichert werden (Leider erledigt die WebStorm nicht automatisch):

* Rechtklick auf „<code>package.json</code>“ → <code>Subversion</code> → <code>Add to VCS</code>
* Rechtklick auf „<code>package-lock.json</code>“ → <code>Subversion</code> → <code>Add to VCS</code>

====webpack====

Nun müssen noch webpack und Grunt konfiguriert werden, damit die Datei <code>app.bundle.js</code>
automatisch generiert werden kann.

Erstellen Sie im Wurzelverzeichnis des Projektes folgende Datei:

''<code>webpack.config.js</code>''
<source lang="html">
const path = require('path');

function absolutePath(l_path)
{ return path.resolve(__dirname, l_path);
}

module.exports =
{ entry:
{ app: absolutePath('src/js/app.js')
},

output:
{ filename: '[name].bundle.js',
path: absolutePath('web/js')
},

module:
{ rules:
[ { test: /\.json$/,
loader: 'json-loader'
},
{ test: /\.js$/,
use: [ { loader: 'babel-loader',
options:
{ presets: ['env'],
ignore: '/node_modules/'
},
},
],
},
{ test: /\.css$/,
use: [ 'style-loader',
{ loader: 'css-loader', options: { minimize: true } }
]
}
],
},

plugins:
[],
};
</source>

Es handelt sich um ein JavaScript-Datei, die direkt von Node.js interpretiert wird.
Aus diesem Grund wird auch nicht das EcmaScript-6-Modul-Konzept eingesetzt, sondern
[[CommonJS]], das Standard-Modulkonzept vom Node. Hier werden Module mittels <code>require</code>
und nicht mittels <code>import</code> importiert. Für Sie ist das allerdings nebensächlich,
das Sie im Rahmen der Tutorien keine komplexen Konfigurations-Dateien für webpack implementieren werden.

Im Prinzip macht diese Datei nichts andere als ein Objekt zu exportieren,
das webpack-Konfigurations-Informationen enthält:

* <code>entry</code>: JavaScript-Dateien, die gebündelt und komprimiert werden sollen. Man muss jeweils nur die Wurzeldatei angeben. Webpack sucht in dieser Datei rekursiv nach Import-Befehlen und packt die benötigten Dateien ebenfalls in die Ausgabedatei.
* <code>output</code>: Hier wird festgelgt, wie die gepackten Dateien heißen sollen. Für jeden
Eintrag im Attribute <code>entry</code> wird eine Datei mit dem Namen <<code>[name].bundle.js</code>
erzeugt, wobei <code>[name]</code> durch den Schlüsselname des Entry-Eintrags ersetzt wird.
In der obigen Datei gibt es nur ein Entry-Element. Dessen Schlüsselname lautet <code>app</code>.
* <code>module</code>: In diesem Attribut werden Regeln (<code>rules</code>) angegeben,
die festlegen, auf welche Weise eine Datei transformiert werden sollen. Bei jeder Regel gibt
es einen Test, der festlegt, für welche Dateien die jeweilge Regel zutrifft. Mit Hilfe eines
[[regulärer Ausdruck|regulärer Ausdrücke]] wird im Tutoriumsbeispiel geprüft, ob die aktuelle
Datei auf <code>.json</code>, <code>.js</code> oder <code>.css</code> endet. Je nach der
Endung wird ein anderer Loader zum Laden und Verarbeiten der Datei verwendet.
(Für webpack gibt es diverse Loader, einige davon haben Sie zuvor mit Hilfe von <code>npm</code> installiert.)

JSON-Dateien werden mit dem JSON-Loader geladen und in die Ergebnis-Datei (<code>app.bundle.js</code>)
eingefügt.

JavaScript-Dateien werden mit dem Babel-Loader geladen und transformiert.
Auf welche Weise der Babel-Loader dies macht wird nicht mehr in der Datei <code>.babelrc</code>
festgelegt, sondern direkt in der Datei <code>webpack.config.js</code>. Der Loader kann
auch Dateien laden, die sich im Verzeichnis <code>node_modules</code> befinden.
Die dort gespeicherten Module sorgen allerdings selbst dafür, dass sie ausführbaren
Web-Code bereitstellen. Daher sollten sie vom Babel-Loader nicht noch einmal transformiert werden.
Mit <code>ignore: '/node_modules/'</code> wird also nicht festgelegt, dass Babel die
benötigten Dateien nicht lädt, sondern es wird festgelegt, dass sie nicht noch einmal transformiert werden.

CSS-Dateien werden zunächst mit dem CSS-Loader geladen und verarbeitet. Anschließend werden vom
Style-Loader Anweisungen in die Datei <code>app.bundle.js</code> geschrieben, die dafür sorgen,
dass die CSS-Elemente beim Laden dieser JavaScript-Datei direkt in den HTML-Head-Bereich
der zugehörigen HTML-Datei eingefügt (''injiziert'') werden.

Am Ende der Konfigurations-Datei, gibt es noch eine Plugin-Liste, die dazu genutzt werden kann,
dateiunabhängige Transformationen an der Ergebnis-Datei (<code>app.bundle.js</code>)
vorzunehmen. Derartige Plugins werden zunächst einmal nicht verwendet.

Damit steht einer Verwendung von webpack nichts mehr im Wege. Man könnte webpack nun direkt von
der Kommandozeile aufrufen. Besser ist es allerdings, NPM-Skript-Befehle oder gar Grunt-Befehle
zu verwenden.

====NPM-Skripte====

Fügen Sie das <code>scripts></code>-Objekt der Datei <code>package.json</code>
drei weitere Skript-Anweisungen ein:

<source lang="json">
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "webpack",
"compress": "webpack -p",
"watch": "webpack --watch"
},
</source>

Geben Sie nun im WebStorm-Terminal die Anweisung <code>npm run bundle</code> ein.

Wenn Sie alles richtig gemacht haben, müsste webpack fehlerfrei durchlaufen und die Datei <code>web/js/app.bundle.js</code> erstellt werden. Im Zweifelsfall müssen Sie auf das Reload-Icon unter der
Menü-Leiste klicken, um sie zu sehen.
Wenn der Dateiname nicht grün, sondern braun eingefärbt ist, müssen Sie sie unter SVN-Kontrolle stellen:

* Rechtklick auf „<code>app.bundle.js</code>“ → <code>Subversion</code> → <code>Add to VCS</code>

Wenn Sie jetzt die Datei <code>index.html</code> im Browser öffnen, sollten Sie nach kurzer Zeit
wieder das Begrüßungsmenü sehen. Nach Eingabe des Namens und Klick auf den Say-hello-Button
oder Drücken der Enter-Taste sollten Sie freundlich begrüßt werden.

Sehen Sie sich mal den Inhalt der Datei <code>app.bundle.js</code> an. Darin finden Sie
– neben vielen Kommentaren, die zur Strukturierung der Datei verwendet werden – die Inhalte der Dateien <code>greet.js</code>, <code>app.js</code> und <code>main.css</code>
sowie spezielle Anweisungen, die von webpack eingefügt wurden.

In dieser Form ist die Datei für Entwicklungszwecke einigermaßen brauchbar. Bei einem Fehler
zeigt einem der Brwoser, in welcher Zeile dieser Datei der Fehler aufgetreten ist.
Normalerweise handelt es sich um eine Zeile, die Sie erfasst haben. Webpack-Befehle sollten keine
Fehler werden. NAchteilig ist, dass diese Zeile etwas anders ausseen kann, wie in IHrem Sourcecode,
das sie ja mittels Babel transformiert wurde. Aber man findet die ORiginalzeile normalerweise recht schnell.

Gehen Sie nochmal ins WebStorm-Terminal und geben Sie diesmal
die Anweisung <code>npm run compress</code> ein.
Es wird wirder die Datei <code>app.bundle.js</code> erstellt. Und die Web-Anwendung sollte
immer noch funktionieren. Wenn Sie sich die gebündelte JavaScript noch einmal ansehen,
stellen Sie fest, dass Sie nun viel kleiner ist. Sie enthält keine überflüssige Leerzeichen, keine Zeilenumbrüche
und auch keine Kommentare mehr (mit Ausnahme des Kommentars, der Auzskunft über den Autor und die
Lizenz gibt). Diese Datei ist für den Produktivbetrieb viel besser geeignet, da sie weniger Bandbreite
verbraucht. Insbesondere Smarphone-Besitzer freuen sich über kleine Dateien, da ihr Datenvolumen
dadurch weniger belastet wird. Für die Fehlersuche bei der Entwicklung der Web-App ist diese
Variante allerdings vollkommen ungeeignet.

Nun können Sie noch die Anweisung <code>npm run watch</code> testen.
Dieser startet einen webpack-Watcher, der bei jeder Änderung an einer Datei, die von webpack
beim Bündeln berücksichtigt wird, dafür sorgt, dass <code>app.bundle.js</code> neu erstellt wird
und Sie die Ergebnisse Ihrer Änderung durch einen einfachen Reload der Datei <code>index.html</code>
im Browser betrachten können. Änderin Sie doch einmal in der CSS-Datei die Hintergrundfarbe, speicher Sie die Datei un beobachten Sie das Terminalfenster. Laden Sie danach die HTML-Datei im Browser mitels
des Reload-Buttons neu.

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

====Grunt====

Nun können Sie auch noch Grunt konfiguerieren. Hier wäre das noch nicht so wichtig,
da Grunt auch nicht mehr leistet, als die zuvor getesteten NPM-Skript-Befehle.
Allerdings kann man mit Grunt nicht nur webpack, sondern auch noch viele
weitere Tools verwalten. Ich persönlich finde es ganz angenehm, well alle Tools
mit Hilfe eines einzigen Werkzeugs administirert werden.

Fügen Sie folgende Datei ins Wurzelverzeichnis Ihrer Projektes ein:

'''<code>gruntfile.js</code>'''
<source lang="javascript">
const webpack = require('webpack'),
webpackConfig = require('./webpack.config.js');

module.exports = function(grunt)
{
// Project configuration.
grunt.initConfig
({
pkg: grunt.file.readJSON('package.json'),

webpack:
{
options: webpackConfig,

bundle:
{
},

compress:
{
plugins:
webpackConfig.plugins.concat
( new webpack.optimize.UglifyJsPlugin({ mangle: true }) )
},

watch:
{
watch: true,
keepalive: true
}
},
});

// Register task(s)
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['webpack:bundle']);
grunt.registerTask('bundle', ['webpack:bundle']);
grunt.registerTask('compress', ['webpack:compress']);
grunt.registerTask('watch', ['webpack:watch']);
};
</source>

Damit stehen Ihnen folgende Grunt-Befehle zur Verfügung:

* <code>grunt</code> bzw. <code>grunt bundle</code> (entspricht <code>npm run bundle</code>)
* <code>grunt compress</code> (entspricht <code>npm run compress</code>)
* <code>grunt watch</code> (entspricht <code>npm run watch</code>)

Interessant ist, dass hier die Komprimierung der Zieldatei mit Hilfe des Webpack-Plugins
<code>UglifyJsPlugin</code> und nicht mit Hilfe der Kommandozeilen-Option <code>-f</code> erzielt wird.
Diese Plugin bietet viele Optionen, mit denen der Kompressionsvorgang gezielt gesteuert werden kann.

Und noch einmal (sobald alles funktioniert):
* Klick auf das SVN-Commit-Icon.

==Quellen==
<references/>
<ol>
<li value="7"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World 04

2017-10-12T21:22:47Z

Jostl:

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld04/web/index.html <code>index.html</code>],
([https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld04/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]]
ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil des Tutoriums geht es darum, die Anwendung besser zu strukturieren, {{dh}} zu [[Modul|modularisieren]].

==Modularisierung==

Eine Anwendung, wie {{zB}} ein HTML5-Spiel, besteht aus diversen unterschiedlichen Komponenten mit ganz unterschiedlichen Aufgaben.
Bei einem HTML5-Spiel müssen die Spielfiguren, die Spielszenen, die Spiellogik, die Benutzereingaben, die Darstellung das Spiels im Browser
etc. erstellt und verwaltet werden, wobei das Erstellen und Verwalten teilweise während der Spiel-Entwicklung und teilweise
während der Spiel-Ausführung (Runtime) erfolgt. An der Entwicklung eines Spiels sind üblicherweise mehrere oder gar viele
Entwickler gleichzeitig beteiligt. Oft müssen einzelnen Komponenten an neue Endgeräte oder Betriebssysteme angepasst werden.
Beispielsweise muss eine Tastatursteuerung durch eine Touch- oder Gestensteuerung ersetzt werden,
wenn ein Spiel so erweitert werden soll, dass es auch auf einem Smartphone oder Tablet läuft.

Das alles ist nur machbar, wenn man die Anwendung modularisiert, {{dh}} in kleine, möglichst unabhängige
Komponenten unterteilt. Ein großer Feind der Modularisierung sind globale Variablen und Funktionen.
Je mehr Dateien von unterschiedlichen Autoren erstellt werden, desto größer ist die Gefahr, dass es zu Namenskollisionen kommt.
Daher gilt der [[Multimedia-Programmierung: Best Practices#Modularisierung|Grundsatz]]: Verwende so wenig globale Größen wie möglich.

==Erstellen eines neuen Projektes==

'''Achtung: Es ist extrem wichtig, dass Sie folgende Befehle in der richtigen Reihenfolge durchführen.'''

Wenn Sie den zweiten und den dritten der der nachfolgenden Befehlsliste vertauschen, fügt WebStorm
den Ordner <code>node_modules</code> in Subversion ein und deaktiviert die Möglichkeit, ihn zur SVN-Ignore-Liste hinzufügen. Dann müssen Sie den Ordner wieder löschen und noch einmal hinzufügen. Später kann es sogar sein, dass ein nachträgliches Hinzufugen zur Ignore-Liste gar nicht mehr möglich ist. Dann müssten Sie dies mit einem anderen Tool (wie TortoiseSVN) nachholen.

'''Also: Arbeiten Sie die Befehle in der vorgegebenen Reihenfolge ab.'''

# Erstellen Sie ein neues Projekt mit dem Namen „<code>HelloWorld04</code>“
# Speichern Sie das Projekt in Ihrem Repository.
# Erstellen Sie den Ordner <code>node_modules</code> im Wurzelverzeichnis.
# * Die Frage „''Do you want to scedule the following directory for addition to Subversion?''“ beantworten Sie mit „<code>No</code>“.
# Rechtsklick auf <code>node_modules</code> → <code>Subversion</code> → <code>Ignore</code> → Klick auf <code>node_modules</code>
# Klick auf das Commit-Icon.

Dadurch, dass Sie das Verzeichnis <code>node_modules</code> zur SVN-Ignore-Liste hinzugefügt haben,
werden die Datein, die in Zukunft in diesem Ordner gespeichert werden, '''nicht''' ins SVN-Repository übertragen. Dies ist notwendig, da sich in diesem Ordner mehrere tausend ganz kleine Dateien befinden
werden, und die Speicherung dieser Daten im SVN-Repository Stunden in Anspruch nehmen kann.
Dabei ist eine Speicherung gar nicht notwendig, da sie jederzeit mit dem Befehl <code>npm install</code> ''sehr schnell'' wieder hergestellt werden können.

BTW: '''Sollten Sie einmal eine Abschlussarbeit mit Node.js erstellen, fügen Sie bitte auf gar keinen Fall den Inhalt des Ordners <code>node_modules</code> in Ihr Abgabemedium (CD, DVD, USB-Stick ...) ein.'''

==Erstellen einer Ordnerstruktur==

Grundsätzlich gilt auch bei der Programmierung: Ordnung ist das halbe Leben.

Web-Anwendungen werden sehr schnell sehr groß. Also sollte man sich eine geeignete Ordnerstruktur überlegen.
Üblicherweise legt man CSS-Dateien in einen Ordner namens „<code>css</code>“ und JavaScript-Dateien in einen Ordner namens
„<code>js</code>“ oder „<code>lib</code>“. Sollten es viele CSS- und/oder JavaScript-Dateien werden,
legt man im entsprechenden Ordner geeignete Unterordner an.

Legen Sie im Root-Verzeichnis Ihres Projektes folgende Ordner an (und beantworten Sie die Frage, ob der Ordner im SVN-Repository gepichert werden soll, jeweils mit <code>Yes</code>):
* <code>web</code>: Der Inhalt dieses Ordners kommt später auf einen echten Web-Server.
* <code>src</code>: Der Inhalt dieses Ordners enthält die Ausgangsdateien, die mit Hilfe von Node.js noch transformiert und dann in den Web-Ordner kopiert werden.
* <code>web/css</code>: Hier wird in den Vorlesungstutorien jeweils nur eine sehr kleine Datei liegen: „<code>initial.css</code>“. Diese sorgt dafür, dass das Fenster der App während der Initialisierung kein defektes LAyout präsentiert. Der größte Teil des CSS-Codes wird später dynamisch (per JavaScript) geladen.
* <code>web/js</code>: Hierher kopiert Node.js die erzeugten JavaScript-Dateien.
* <code>src/css</code>: Hier werden die eigentlichn CSS-Dateien der Web-Anwendung gespeichert, die von der App dynamisch nachgeladen werden sollen. In diesem Ordner könnten zur weiteren Strukturierung Unterordner angelegt werden. Allerdings wird das in dieser Veranstaltung nicht notwendig sein. Es wird jeweils nur eine Datei namens „<code>main.css</code>“ oder „<code>main.scss</code>“ geben.
* <code>src/js</code>: Hierher kommt die Datei „<code>app.js</code>“, die für den Start der Web-Anwendung zuständig ist. Üblicherweise liest sie weitere JavaScript-Dateien sowie eine oder mehrere JSON-Dateien mit Initialwerten ein, initialisiert die Anwendung und startet sie da nn.
* <code>src/js/app</code>: Hier speichern Sie die übrigen von Ihnen geschriebenen JavaScript-Dateien Ihrer Web-Anwendung. In diesem Ordner werden {{iAllg}} Unterordner zur weiteren Strukturierung der Anwendung angelegt.

Fremde Bibliotheken und automatisch generierte JavaScript-Dateien enthalten häufig
unsauberen Code, die Ihnen von WebStorm beim Speichern der Dateien im Repository angezeigt werden.
In einer Rückfrage sollen Sie dann bestätigen, dass Sie die „fehlerhaften“ Dateien trotzdem speichern wollen.

Damit Ihnen bei einem Commit nur Fehler in Ihren eigenen Dateien angezeigt werden, schließen Sie die Ordner „<code>mode_modules</code>“ und „<code>web/js</code>“ von der
WebStorm-Fehlerüberwachung aus:

* Rechtklick auf den Ordner „<code>mode_modules</code>“ → <code>Mark Directory as</code> → <code>Excluded</code>
* Rechtklick auf den Ordner „<code>web/js</code>“ → <code>Mark Directory as</code> → <code>Excluded</code>

Kopieren Sie nun aus Ihrer Lösung des [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]] die Dateien „<code>index.html</code>“ und „<code>main.css</code>“ in den soeben erstellten Ordnerbaum und speichern Sie diese unter den Namen „<code>web/index.html</code>“ und „<code>src/css/main.css</code>“

Noch ein kleiner Tipp: Aktivieren Sie die WebStorm-Node.js-coding-assitence, da Sie anderenfalls
bei jedem SVN-Commit einen Fehler angezeigt bekommen:

<code>File</code>/<code>WebStorm</code> → <code>Settings</code>/<code>Preferences</code> → <code>Language & Frameworks</code> → <code>Node.js and NPM</code>
→ Node.js Core library is not enabled. <code>Enable</code>

Damit Sie dies nicht bei jedem Projekt wiederholen müssen, konfigurieren Sie auch Ihre Default Settings/Default Preferences entsprechend.

<code>File</code>/<code>WebStorm</code> → <code>Default Settings</code>/<code>Default Preferences</code> → <code>Language & Frameworks</code> → <code>Node.js and NPM</code>
→ Node.js Core library is not enabled. <code>Enable</code>

Sie sollten nach jeden größeren Entwicklungsschritt die Änderungen im Repository speichern:

* Klick auf das SVN-Commit-Icon.

==Die App==

===Laden der CSS- und der JavaScript-Dateien===

Eine Web-Anwendung funktioniert nur – wie Sie bereits erfahren haben –, wenn nicht nur die HTML-Datei, sondern auch die zugehörigen
CSS- und JavaScript-Dateien geladen werden. Allerdings gibt es dabei ein Problem: Die CSS- und JavaScript-Dateien werden im Laufe der
Zeit immer zahlreicher und/oder größer. Diese Dateien zu laden, dauert seine Zeit.

In der aktuellen fritten Version der Web-Anwendung stehen die Verweise auf diese Dateien im <code>head</code>-Bereich des Dokuments.
Dieser wird vollständig geladen, bevor der <code>body</code>-Bereich eingelesen wird. Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments
darstellen kann, solange er die JavaScript- und CSS-Dateien lädt. Wenn dies zu lange dauert, verliert der Besucher die Geduld und verlässt die Seite
vorzeitig.

Besser wäre es daher andersherum vorzugehen: Es wird zuerst der <code>body</code>-Bereich geladen und dann die JavaScript- und die CSS-Dateien.
Im Falle von JavaScript ist das durchaus sinnvoll, aber im Falle von CSS hat das den Effekt, dass der Browser noch keine Layout-Vorgaben erhalten hat,
wenn er mit dem [[Rendern]] der Seite beginnt. Also verwendet er die browserspezifischen Defaultwerte. Das heißt, die Seite sieht zunächst
ganz anders aus, als vom Designer geplant. Wenn dann die CSS-Dateien geladen wurden, wird die Seite erneut gerendert und verändert ihr Aussehen.
Auch das ist verwirrend und wirkt unprofessionell.

Was also machen?

===CSS-Dateien===
Für CSS-Dateien empfiehlt Google ernsthaft, das Link-Element ganz ans Ende der HTML-Datei zu stellen, also '''nach''' dem schließenden <code>html</code>-Tag. Damit das Problem mit dem falschen Layout nicht auftritt, sollen ganz wenige, wichtige CSS-Befehle direkt – {{dh}} als CSS-Befehle innerhalb eines <code>style</code>-Elements – in dem HTML-Head-Bereich eingefügt
werden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery</ref>

Von ersten Vorschlag rate ich dringend ab, da er nicht [[HTML]]-konform ist, ja noch nicht einmal [[SGML]]-konform. Der zweite Vorschlag hat zur Folge, dass Struktur (HTML) und Layout (CSS)
vermischt werden. Dies war einer der Kardinalfehler von frühen HTML-Versionen aus der Zeit, bevor es das CSS-Format gab. '''Tun Sie das {{iAllg}} nicht.''' Aber: Sie können webpack<ref>https://webpack.js.org/</ref> dazu bringen, dies dynamisch zur Laufzeit für Sie nachzuholen.

Gehen Sie so vor, wie es unter [[Multimedia-Programmierung: Best Practices#CSS|Multimedia-Programmierung: Best Practices]] beschrieben ist. In diesem und den folgenden Tutorien werden
diese Prinzipien berücksichtigt.

Legen Sie die Datei <code>web/css/initial.css</code> an und fügen Sie folgenden (sehr kurzen!) Code ein:

<source lang="javascript">
body { background-color: #C5EFFC; }
.hidden { display: none; }
</source>

In der Datei <code>src/css/main.css</code> können Sie das <code>.hidden</code>-Element entfernen.

In der Datei <code>web/index.html</code> müssen Sie das Link-Element in Header folgendermaßen
<source lang="html">
<link rel = "stylesheet" type = "text/css" href = "css/initial.css"/>
</source>
anpassen. Das heißt, Sie laden im HTML-Head-Bereich nur noch die kleine CSS-Datei.

===JavaScript-Dateien===

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/BlockingJS</ref> Dieser Vorschlag ist sehr sinnvoll.

Entfernen Sie das <code>script</code>-Element aus dem HTML-Header-Bereich und fügen vor dem schließenden <code>body</code>-Tag folgendes Script-Element ein:

<source lang="html5">
<body>
...
<script type="text/javascript" src="js/app.bundle.js"></script>
</body>
</source>

Fügen Sie außerdem in das erste <code>section</code>-Tag im Body das Attribut
<code>class="hidden"</code> ein, damit man auch dieses Element beim Laden der Anwendung
zunächst nicht sieht. In einer Anwendung, die zum Laden etwas länger dauert, würde man
einen so genannten [[Splash Screen]] sichtbar einfügen und diesen beim eigentlichen Start der App ausblenden.

Wenn Sie nun die Web-App testweise starten, sollten Sie eine himmelblaue, aber ansonsten leere Seite sehen.
Wenn Sie im Browser die Konsole öffnen, sehen Sie dort (evtl. nach einem Reload), eine Fehlermeldung,
dass die JavaScript-Datei <code>app.bundle.js</code> nicht gefunden wird. Dieser Fehler ist nicht
weiter erstaunlich, da es diese Datei ja noch gar nicht gibt.

Weiter unten im Tutorium wird beschrieben, wie Sie mit Hilfe eines ES6-Import-Befehls und webpack dafür sorgen,
dass diese Datei nicht nur den JavaScript-Code der Anwendung bereit stellt, sondern auch den Inhalt
der eigentlichen CSS-Datei <code>main.css</code> dynamisch in die HTML-Datei einfügt (''injiziert'').

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

===Modularisierung der JavaScript-Dateien===

Die JavaScript-Datei <code>main.js</code> aus dem dritten des Tutroiums wird in zwei Teile aufgespalten:
<code>greet.js</code> und <code>app.js</code>. Die erste Datei enthält die eigentliche Begrüßungsfunktionalität,
die zweite initialisiert die App, {{dh}} aktiviert die Begrüßungsfunktion.

Erstellen Sie folgende zwei JavaScript-Dateien:

'''<code>src/js/greet.js</code>'''
<source lang="javascript">
/**
* @namespace greet
* Contains methods to say hello to the user of the web app.
*/

/**
* Welcomes the user of the web app by displaying a welcome message
* that includes his name. The name is fetched from a text input field.
*/
export const sayHello =
function()
{
document.getElementById('heading_hello').innerHTML =
'Hello, ' + document.getElementById('input_name').value + '!';
document.getElementById('section_form').classList.add('hidden');
document.getElementById('section_hello').classList.remove('hidden');
};

/**
* A keyboard event observer. It tests whether the enter key has been pressed.
* If so, the greet method is activated. Default reactions of the browser are
* disabled.
* @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
*/
export const sayHelloOnEnter =
function(p_event)
{
if ( (p_event.code === 'Enter' || p_event.keyCode === 13) &&
document.activeElement === document.getElementById('input_name')
)
{
p_event.preventDefault();
p_event.stopPropagation();
sayHello();
}
};
</source>

Sie sehen, dass dieses Modul zwei Funktionen exportiert. Diese (und nur diese) können jetzt
von anderen Modulen importiert und damit genutzt werden. Dies nutzen Sie im zweiten Modul aus:

'''<code>src/app.js</code>'''
<source lang="javascript">
import '../css/main.css';
import * as greet from './app/greet.js';

// Initialize the app.
document.getElementById('button_submit')
.addEventListener('click', greet.sayHello);
window .addEventListener('keydown', greet.sayHelloOnEnter);

// As now all files have been loaded and all data has been
// initialized, the app is ready to start.
// So make the form visible!
document.getElementById('section_form').classList.remove('hidden');
</source>

Sie importieren alle Elemente (<code>*</code>), die Ihnen das Modul <code>src/app/greet.js</code>
zur Verfügung stellt, und speichern diese Elemente in einem Objekt namens <code>greet</code>.
Damit ist es Ihnen mäglich die beiden Funktionen <code>sayHello</code> und <code>sayHelloOnEnter</code>
zu verwenden. Sie können jeweils unter dem Namen <code>greet.sayHello</code> bzw. <code>greet.sayHelloOnEnter</code>,
auf sie zugreifen.

Weil Sie schon gerade dabei sind, importieren Sie am besten gleich auch noch
die CSS-Datei <code>main.css</code>. Webpack sorgt dann dafür, dass diese
Datei in die Datei <code>app.bundle.js</code> integriert wird und somit ''dynamisch''
geladen wird, sobald der Browser die Script-Anweisung

<source lang="html5">
<script type="text/javascript" src="js/app.bundle.js"></script>
</source>

ausführt.

Der letzte Befehl in der JavaScript-Datei <code>app.js</code>

<source lang="javascript">
document.getElementById('section_form').classList.remove('hidden');
</source>

sorgt dafür, dass das Eingabeformular sichtbar wird. Da die
notwendigen Callback-Funktionen zuvor mit dem Formular verknüpft wurden,
ist es jetzt einsatzbereit, und es spricht nichts mehr dafür, den Benutzer
länger an der Verwendung dieses genialen ( :-) ) Formulars zu hindern.

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

===Node.js, Grunt, Babel und webpack===

Eigentlich wäre Sie jetzt fertig, wenn denn die Standardbrwoser die ES6-Import- und Export-Befehle kennen würden.
Doch das ist leider in den allermeisten Fällen nicht der Fall. Daher müssen die ES6-Dateien in ES5-Dateien transformiert werden.
Dafür gibt es diverse Möglichkeiten. Ich empfehle derzeit „webpack“<ref>webpack: https://webpack.js.org/</ref>.

Zum Transformieren und Packen von JavaScript-, JSON- und CSS/SCSS-Dateien kommen neben webpack auch noch Grunt<ref>Grunt: https://gruntjs.com/</ref> und Babel<ref>Babel: https://babeljs.io/</ref> zum Einsatz. Diese Pakete kennen Sie ja schon
aus dem Tutorium „[[HTML5-Tutorium: JavaScript: Entwicklungsumgebung|Einrichten eine Entwicklungsumgebung für Web-Anwendungen]]“.

Webpack ist ein sehr mächtiges Werkzeug, mit dem eine Vielzahl von Web-Dateien in einer oder einigen wenigen JavaScript-Dateien
zusammengefasst und bei Bedarf auch komprimiert werden können. Es handelt sich also um einen ''JavaScript module bundler''.
Einer der Entwickler von webpack ist [[Johannes Ewald]], ein ehemaliger Student der [[HSA]] (vgl. https://github.com/jhnns). Er bietet auch
regelmäßig Vorlesung an der HSA zum Thema „JavaScript“ an.

====Node.js-Pakete====

Öffnen Sie das WebStorm-Terminal und installieren Sie die benötigten Node.js-Pakete

<source lang="bash">
npm init -y
# Autor, Lizenz und Keywords in package.json anpassen
npm install --save-dev grunt grunt-contrib-watch
npm install --save-dev babel-cli babel-preset-env
npm install --save-dev webpack grunt-webpack
npm install --save-dev babel-loader json-loader style-loader css-loader
</source>

Achtung: <code>grunt-cil</code> wird auch benötigt. Aber dieses Paket wurde schon
im Tutorium „[[HTML5-Tutorium: JavaScript: Entwicklungsumgebung|Einrichten eine Entwicklungsumgebung für Web-Anwendungen]]“
global installiert und braucht daher nicht noch einmal installiert zu werden.

Sorgen Sie nun dafür. dass die Dateien <code>package.json</code> und <code>package-lock.json</code>
auch im Repository gespeichert werden (Leider erledigt die WebStorm nicht automatisch):

* Rechtklick auf „<code>package.json</code>“ → <code>Subversion</code> → <code>Add to VCS</code>
* Rechtklick auf „<code>package-lock.json</code>“ → <code>Subversion</code> → <code>Add to VCS</code>

====webpack====

Nun müssen noch webpack und Grunt konfiguriert werden, damit die Datei <code>app.bundle.js</code>
automatisch generiert werden kann.

Erstellen Sie im Wurzelverzeichnis des Projektes folgende Datei:

''<code>webpack.config.js</code>''
<source lang="html">
const path = require('path');

function absolutePath(l_path)
{ return path.resolve(__dirname, l_path);
}

module.exports =
{ entry:
{ app: absolutePath('src/js/app.js')
},

output:
{ filename: '[name].bundle.js',
path: absolutePath('web/js')
},

module:
{ rules:
[ { test: /\.json$/,
loader: 'json-loader'
},
{ test: /\.js$/,
use: [ { loader: 'babel-loader',
options:
{ presets: ['env'],
ignore: '/node_modules/'
},
},
],
},
{ test: /\.css$/,
use: [ 'style-loader',
{ loader: 'css-loader', options: { minimize: true } }
]
}
],
},

plugins:
[],
};
</source>

Es handelt sich um ein JavaScript-Datei, die direkt von Node.js interpretiert wird.
Aus diesem Grund wird auch nicht das EcmaScript-6-Modul-Konzept eingesetzt, sondern
[[CommonJS]], das Standard-Modulkonzept vom Node. Hier werden Module mittels <code>require</code>
und nicht mittels <code>import</code> importiert. Für Sie ist das allerdings nebensächlich,
das Sie im Rahmen der Tutorien keine komplexen Konfigurations-Dateien für webpack implementieren werden.

Im Prinzip macht diese Datei nichts andere als ein Objekt zu exportieren,
das webpack-Konfigurations-Informationen enthält:

* <code>entry</code>: JavaScript-Dateien, die gebündelt und komprimiert werden sollen. Man muss jeweils nur die Wurzeldatei angeben. Webpack sucht in dieser Datei rekursiv nach Import-Befehlen und packt die benötigten Dateien ebenfalls in die Ausgabedatei.
* <code>output</code>: Hier wird festgelgt, wie die gepackten Dateien heißen sollen. Für jeden
Eintrag im Attribute <code>entry</code> wird eine Datei mit dem Namen <<code>[name].bundle.js</code>
erzeugt, wobei <code>[name]</code> durch den Schlüsselname des Entry-Eintrags ersetzt wird.
In der obigen Datei gibt es nur ein Entry-Element. Dessen Schlüsselname lautet <code>app</code>.
* <code>module</code>: In diesem Attribut werden Regeln (<code>rules</code>) angegeben,
die festlegen, auf welche Weise eine Datei transformiert werden sollen. Bei jeder Regel gibt
es einen Test, der festlegt, für welche Dateien die jeweilge Regel zutrifft. Mit Hilfe eines
[[regulärer Ausdruck|regulärer Ausdrücke]] wird im Tutoriumsbeispiel geprüft, ob die aktuelle
Datei auf <code>.json</code>, <code>.js</code> oder <code>.css</code> endet. Je nach der
Endung wird ein anderer Loader zum Laden und Verarbeiten der Datei verwendet.
(Für webpack gibt es diverse Loader, einige davon haben Sie zuvor mit Hilfe von <code>npm</code> installiert.)

JSON-Dateien werden mit dem JSON-Loader geladen und in die Ergebnis-Datei (<code>app.bundle.js</code>)
eingefügt.

JavaScript-Dateien werden mit dem Babel-Loader geladen und transformiert.
Auf welche Weise der Babel-Loader dies macht wird nicht mehr in der Datei <code>.babelrc</code>
festgelegt, sondern direkt in der Datei <code>webpack.config.js</code>. Der Loader kann
auch Dateien laden, die sich im Verzeichnis <code>node_modules</code> befinden.
Die dort gespeicherten Module sorgen allerdings selbst dafür, dass sie ausführbaren
Web-Code bereitstellen. Daher sollten sie vom Babel-Loader nicht noch einmal transformiert werden.
Mit <code>ignore: '/node_modules/'</code> wird also nicht festgelegt, dass Babel die
benötigten Dateien nicht lädt, sondern es wird festgelegt, dass sie nicht noch einmal transformiert werden.

CSS-Dateien werden zunächst mit dem CSS-Loader geladen und verarbeitet. Anschließend werden vom
Style-Loader Anweisungen in die Datei <code>app.bundle.js</code> geschrieben, die dafür sorgen,
dass die CSS-Elemente beim Laden dieser JavaScript-Datei direkt in den HTML-Head-Bereich
der zugehörigen HTML-Datei eingefügt (''injiziert'') werden.

Am Ende der Konfigurations-Datei, gibt es noch eine Plugin-Liste, die dazu genutzt werden kann,
dateiunabhängige Transformationen an der Ergebnis-Datei (<code>app.bundle.js</code>)
vorzunehmen. Derartige Plugins werden zunächst einmal nicht verwendet.

Damit steht einer Verwendung von webpack nichts mehr im Wege. Man könnte webpack nun direkt von
der Kommandozeile aufrufen. Besser ist es allerdings, NPM-Skript-Befehle oder gar Grunt-Befehle
zu verwenden.

====NPM-Skripte====

Fügen Sie das <code>scripts></code>-Objekt der Datei <code>package.json</code>
drei weitere Skript-Anweisungen ein:

<source lang="json">
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "webpack",
"compress": "webpack -p",
"watch": "webpack --watch"
},
</source>

Geben Sie nun im WebStorm-Terminal die Anweisung <code>npm run bundle</code> ein.

Wenn Sie alles richtig gemacht haben, müsste webpack fehlerfrei durchlaufen und die Datei <code>web/js/app.bundle.js</code> erstellt werden. Im Zweifelsfall müssen Sie auf das Reload-Icon unter der
Menü-Leiste klicken, um sie zu sehen.
Wenn der Dateiname nicht grün, sondern braun eingefärbt ist, müssen Sie sie unter SVN-Kontrolle stellen:

* Rechtklick auf „<code>app.bundle.js</code>“ → <code>Subversion</code> → <code>Add to VCS</code>

Wenn Sie jetzt die Datei <code>index.html</code> im Browser öffnen, sollten Sie nach kurzer Zeit
wieder das Begrüßungsmenü sehen. Nach Eingabe des Namens und Klick auf den Say-hello-Button
oder Drücken der Enter-Taste sollten Sie freundlich begrüßt werden.

Sehen Sie sich mal den Inhalt der Datei <code>app.bundle.js</code> an. Darin finden Sie
– neben vielen Kommentaren, die zur Strukturierung der Datei verwendet werden – die Inhalte der Dateien <code>greet.js</code>, <code>app.js</code> und <code>main.css</code>
sowie spezielle Anweisungen, die von webpack eingefügt wurden.

In dieser Form ist die Datei für Entwicklungszwecke einigermaßen brauchbar. Bei einem Fehler
zeigt einem der Brwoser, in welcher Zeile dieser Datei der Fehler aufgetreten ist.
Normalerweise handelt es sich um eine Zeile, die Sie erfasst haben. Webpack-Befehle sollten keine
Fehler werden. NAchteilig ist, dass diese Zeile etwas anders ausseen kann, wie in IHrem Sourcecode,
das sie ja mittels Babel transformiert wurde. Aber man findet die ORiginalzeile normalerweise recht schnell.

Gehen Sie nochmal ins WebStorm-Terminal und geben Sie diesmal
die Anweisung <code>npm run compress</code> ein.
Es wird wirder die Datei <code>app.bundle.js</code> erstellt. Und die Web-Anwendung sollte
immer noch funktionieren. Wenn Sie sich die gebündelte JavaScript noch einmal ansehen,
stellen Sie fest, dass Sie nun viel kleiner ist. Sie enthält keine überflüssige Leerzeichen, keine Zeilenumbrüche
und auch keine Kommentare mehr (mit Ausnahme des Kommentars, der Auzskunft über den Autor und die
Lizenz gibt). Diese Datei ist für den Produktivbetrieb viel besser geeignet, da sie weniger Bandbreite
verbraucht. Insbesondere Smarphone-Besitzer freuen sich über kleine Dateien, da ihr Datenvolumen
dadurch weniger belastet wird. Für die Fehlersuche bei der Entwicklung der Web-App ist diese
Variante allerdings vollkommen ungeeignet.

Nun können Sie noch die Anweisung <code>npm run watch</code> testen.
Dieser startet einen webpack-Watcher, der bei jeder Änderung an einer Datei, die von webpack
beim Bündeln berücksichtigt wird, dafür sorgt, dass <code>app.bundle.js</code> neu erstellt wird
und Sie die Ergebnisse Ihrer Änderung durch einen einfachen Reload der Datei <code>index.html</code>
im Browser betrachten können. Änderin Sie doch einmal in der CSS-Datei die Hintergrundfarbe, speicher Sie die Datei un beobachten Sie das Terminalfenster. Laden Sie danach die HTML-Datei im Browser mitels
des Reload-Buttons neu.

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

====Grunt====

Nun können Sie auch noch Grunt konfiguerieren. Hier wäre das noch nicht so wichtig,
da Grunt auch nicht mehr leistet, als die zuvor getesteten NPM-Skript-Befehle.
Allerdings kann man mit Grunt nicht nur webpack, sondern auch noch viele
weitere Tools verwalten. Ich persönlich finde es ganz angenehm, well alle Tools
mit Hilfe eines einzigen Werkzeugs administirert werden.

Fügen Sie folgende Datei ins Wurzelverzeichnis Ihrer Projektes ein:

'''<code>gruntfile.js</code>'''
<source lang="javascript">
const webpack = require('webpack'),
webpackConfig = require('./webpack.config.js');

module.exports = function(grunt)
{
// Project configuration.
grunt.initConfig
({
pkg: grunt.file.readJSON('package.json'),

webpack:
{
options: webpackConfig,

bundle:
{
},

compress:
{
plugins:
webpackConfig.plugins.concat
( new webpack.optimize.UglifyJsPlugin({ mangle: true }) )
},

watch:
{
watch: true,
keepalive: true
}
},
});

// Register task(s)
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['webpack:bundle']);
grunt.registerTask('bundle', ['webpack:bundle']);
grunt.registerTask('compress', ['webpack:compress']);
grunt.registerTask('watch', ['webpack:watch']);
};
</source>

Damit stehen Ihnen folgende Grunt-Befehle zur Verfügung:

* <code>grunt</code> bzw. <code>grunt bundle</code> (entspricht <code>npm run bundle</code>)
* <code>grunt compress</code> (entspricht <code>npm run compress</code>)
* <code>grunt watch</code> (entspricht <code>npm run watch</code>)

Interessant ist, dass hier die Komprimierung der Zieldatei mit Hilfe des Webpack-Plugins
<code>UglifyJsPlugin</code> und nicht mit Hilfe der Kommandozeilen-Option <code>-f</code> erzielt wird.
Diese Plugin bietet viele Optionen, mit denen der Kompressionsvorgang gezielt gesteuert werden kann.

Und noch einmal (sobald alles funktioniert):
* Klick auf das SVN-Commit-Icon.

==Quellen==
<references/>
<ol>
<li value="7"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World 04

2017-10-12T21:05:06Z

Jostl:

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld04/web/index.html <code>index.html</code>],
([https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld04/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]]
ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil des Tutoriums geht es darum, die Anwendung besser zu strukturieren, {{dh}} zu [[Modul|modularisieren]].

==Modularisierung==

Eine Anwendung, wie {{zB}} ein HTML5-Spiel, besteht aus diversen unterschiedlichen Komponenten mit ganz unterschiedlichen Aufgaben.
Bei einem HTML5-Spiel müssen die Spielfiguren, die Spielszenen, die Spiellogik, die Benutzereingaben, die Darstellung das Spiels im Browser
etc. erstellt und verwaltet werden, wobei das Erstellen und Verwalten teilweise während der Spiel-Entwicklung und teilweise
während der Spiel-Ausführung (Runtime) erfolgt. An der Entwicklung eines Spiels sind üblicherweise mehrere oder gar viele
Entwickler gleichzeitig beteiligt. Oft müssen einzelnen Komponenten an neue Endgeräte oder Betriebssysteme angepasst werden.
Beispielsweise muss eine Tastatursteuerung durch eine Touch- oder Gestensteuerung ersetzt werden,
wenn ein Spiel so erweitert werden soll, dass es auch auf einem Smartphone oder Tablet läuft.

Das alles ist nur machbar, wenn man die Anwendung modularisiert, {{dh}} in kleine, möglichst unabhängige
Komponenten unterteilt. Ein großer Feind der Modularisierung sind globale Variablen und Funktionen.
Je mehr Dateien von unterschiedlichen Autoren erstellt werden, desto größer ist die Gefahr, dass es zu Namenskollisionen kommt.
Daher gilt der [[Multimedia-Programmierung: Best Practices#Modularisierung|Grundsatz]]: Verwende so wenig globale Größen wie möglich.

==Erstellen eines neuen Projektes==

'''Achtung: Es ist extrem wichtig, dass Sie folgende Befehle in der richtigen Reihenfolge durchführen.'''

Wenn Sie den zweiten und den dritten der der nachfolgenden Befehlsliste vertauschen, fügt WebStorm
den Ordner <code>node_modules</code> in Subversion ein und deaktiviert die Möglichkeit, ihn zur SVN-Ignore-Liste hinzufügen. Dann müssen Sie den Ordner wieder löschen und noch einmal hinzufügen. Später kann es sogar sein, dass ein nachträgliches Hinzufugen zur Ignore-Liste gar nicht mehr möglich ist. Dann müssten Sie dies mit einem anderen Tool (wie TortoiseSVN) nachholen.

'''Also: Arbeiten Sie die Befehle in der vorgegebenen Reihenfolge ab.'''

# Erstellen Sie ein neues Projekt mit dem Namen „<code>HelloWorld04</code>“
# Speichern Sie das Projekt in Ihrem Repository.
# Erstellen Sie den Ordner <code>node_modules</code> im Wurzelverzeichnis.
# * Die Frage „''Do you want to scedule the following directory for addition to Subversion?''“ beantworten Sie mit „<code>No</code>“.
# Rechtsklick auf <code>node_modules</code> → <code>Subversion</code> → <code>Ignore</code> → Klick auf <code>node_modules</code>
# Klick auf das Commit-Icon.

Dadurch, dass Sie das Verzeichnis <code>node_modules</code> zur SVN-Ignore-Liste hinzugefügt haben,
werden die Datein, die in Zukunft in diesem Ordner gespeichert werden, '''nicht''' ins SVN-Repository übertragen. Dies ist notwendig, da sich in diesem Ordner mehrere tausend ganz kleine Dateien befinden
werden, und die Speicherung dieser Daten im SVN-Repository Stunden in Anspruch nehmen kann.
Dabei ist eine Speicherung gar nicht notwendig, da sie jederzeit mit dem Befehl <code>npm install</code> ''sehr schnell'' wieder hergestellt werden können.

BTW: '''Sollten Sie einmal eine Abschlussarbeit mit Node.js erstellen, fügen Sie bitte auf gar keinen Fall den Inhalt des Ordners <code>node_modules</code> in Ihr Abgabemedium (CD, DVD, USB-Stick ...) ein.'''

==Erstellen einer Ordnerstruktur==

Grundsätzlich gilt auch bei der Programmierung: Ordnung ist das halbe Leben.

Web-Anwendungen werden sehr schnell sehr groß. Also sollte man sich eine geeignete Ordnerstruktur überlegen.
Üblicherweise legt man CSS-Dateien in einen Ordner namens „<code>css</code>“ und JavaScript-Dateien in einen Ordner namens
„<code>js</code>“ oder „<code>lib</code>“. Sollten es viele CSS- und/oder JavaScript-Dateien werden,
legt man im entsprechenden Ordner geeignete Unterordner an.

Legen Sie im Root-Verzeichnis Ihres Projektes folgende Ordner an (und beantworten Sie die Frage, ob der Ordner im SVN-Repository gepichert werden soll, jeweils mit <code>Yes</code>):
* <code>web</code>: Der Inhalt dieses Ordners kommt später auf einen echten Web-Server.
* <code>src</code>: Der Inhalt dieses Ordners enthält die Ausgangsdateien, die mit Hilfe von Node.js noch transformiert und dann in den Web-Ordner kopiert werden.
* <code>web/css</code>: Hier wird in den Vorlesungstutorien jeweils nur eine sehr kleine Datei liegen: „<code>initial.css</code>“. Diese sorgt dafür, dass das Fenster der App während der Initialisierung kein defektes LAyout präsentiert. Der größte Teil des CSS-Codes wird später dynamisch (per JavaScript) geladen.
* <code>web/js</code>: Hierher kopiert Node.js die erzeugten JavaScript-Dateien.
* <code>src/css</code>: Hier werden die eigentlichn CSS-Dateien der Web-Anwendung gespeichert, die von der App dynamisch nachgeladen werden sollen. In diesem Ordner könnten zur weiteren Strukturierung Unterordner angelegt werden. Allerdings wird das in dieser Veranstaltung nicht notwendig sein. Es wird jeweils nur eine Datei namens „<code>main.css</code>“ oder „<code>main.scss</code>“ geben.
* <code>src/js</code>: Hierher kommt die Datei „<code>app.js</code>“, die für den Start der Web-Anwendung zuständig ist. Üblicherweise liest sie weitere JavaScript-Dateien sowie eine oder mehrere JSON-Dateien mit Initialwerten ein, initialisiert die Anwendung und startet sie da nn.
* <code>src/js/app</code>: Hier speichern Sie die übrigen von Ihnen geschriebenen JavaScript-Dateien Ihrer Web-Anwendung. In diesem Ordner werden {{iAllg}} Unterordner zur weiteren Strukturierung der Anwendung angelegt.

Fremde Bibliotheken und automatisch generierte JavaScript-Dateien enthalten häufig
unsauberen Code, die Ihnen von WebStorm beim Speichern der Dateien im Repository angezeigt werden.
In einer Rückfrage sollen Sie dann bestätigen, dass Sie die „fehlerhaften“ Dateien trotzdem speichern wollen.

Damit Ihnen bei einem Commit nur Fehler in Ihren eigenen Dateien angezeigt werden, schließen Sie die Ordner „<code>mode_modules</code>“ und „<code>web/js</code>“ von der
WebStorm-Fehlerüberwachung aus:

* Rechtklick auf den Ordner „<code>mode_modules</code>“ → <code>Mark Directory as</code> → <code>Excluded</code>
* Rechtklick auf den Ordner „<code>web/js</code>“ → <code>Mark Directory as</code> → <code>Excluded</code>

Kopieren Sie nun aus Ihrer Lösung des [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]] die Dateien „<code>index.html</code>“ und „<code>main.css</code>“ in den soeben erstellten Ordnerbaum und speichern Sie diese unter den Namen „<code>web/index.html</code>“ und „<code>src/css/main.css</code>“

Noch ein kleiner Tipp: Aktivieren Sie die WebStorm-Node.js-coding-assitence, da Sie anderenfalls
bei jedem SVN-Commit einen Fehler angezeigt bekommen:

<code>File</code>/<code>WebStorm</code> → <code>Settings</code>/<code>Preferences</code> → <code>Language & Frameworks</code> → <code>Node.js and NPM</code>
→ Node.js Core library is not enabled. <code>Enable</code>

Damit Sie dies nicht bei jedem Projekt wiederholen müssen, konfigurieren Sie auch Ihre Default Settings/Default Preferences entsprechend.

<code>File</code>/<code>WebStorm</code> → <code>Default Settings</code>/<code>Default Preferences</code> → <code>Language & Frameworks</code> → <code>Node.js and NPM</code>
→ Node.js Core library is not enabled. <code>Enable</code>

Sie sollten nach jeden größeren Entwicklungsschritt die Änderungen im Repository speichern:

* Klick auf das SVN-Commit-Icon.

==Die App==

===Laden der CSS- und der JavaScript-Dateien===

Eine Web-Anwendung funktioniert nur – wie Sie bereits erfahren haben –, wenn nicht nur die HTML-Datei, sondern auch die zugehörigen
CSS- und JavaScript-Dateien geladen werden. Allerdings gibt es dabei ein Problem: Die CSS- und JavaScript-Dateien werden im Laufe der
Zeit immer zahlreicher und/oder größer. Diese Dateien zu laden, dauert seine Zeit.

In der aktuellen fritten Version der Web-Anwendung stehen die Verweise auf diese Dateien im <code>head</code>-Bereich des Dokuments.
Dieser wird vollständig geladen, bevor der <code>body</code>-Bereich eingelesen wird. Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments
darstellen kann, solange er die JavaScript- und CSS-Dateien lädt. Wenn dies zu lange dauert, verliert der Besucher die Geduld und verlässt die Seite
vorzeitig.

Besser wäre es daher andersherum vorzugehen: Es wird zuerst der <code>body</code>-Bereich geladen und dann die JavaScript- und die CSS-Dateien.
Im Falle von JavaScript ist das durchaus sinnvoll, aber im Falle von CSS hat das den Effekt, dass der Browser noch keine Layout-Vorgaben erhalten hat,
wenn er mit dem [[Rendern]] der Seite beginnt. Also verwendet er die browserspezifischen Defaultwerte. Das heißt, die Seite sieht zunächst
ganz anders aus, als vom Designer geplant. Wenn dann die CSS-Dateien geladen wurden, wird die Seite erneut gerendert und verändert ihr Aussehen.
Auch das ist verwirrend und wirkt unprofessionell.

Was also machen?

===CSS-Dateien===
Für CSS-Dateien empfiehlt Google ernsthaft, das Link-Element ganz ans Ende der HTML-Datei zu stellen, also '''nach''' dem schließenden <code>html</code>-Tag. Damit das Problem mit dem falschen Layout nicht auftritt, sollen ganz wenige, wichtige CSS-Befehle direkt – {{dh}} als CSS-Befehle innerhalb eines <code>style</code>-Elements – in dem HTML-Head-Bereich eingefügt
werden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery</ref>

Von ersten Vorschlag rate ich dringend ab, da er nicht [[HTML]]-konform ist, ja noch nicht einmal [[SGML]]-konform. Der zweite Vorschlag hat zur Folge, dass Struktur (HTML) und Layout (CSS)
vermischt werden. Dies war einer der Kardinalfehler von frühen HTML-Versionen aus der Zeit, bevor es das CSS-Format gab. '''Tun Sie das {{iAllg}} nicht.''' Aber: Sie können webpack<ref>https://webpack.js.org/</ref> dazu bringen, dies dynamisch zur Laufzeit für Sie nachzuholen.

Gehen Sie so vor, wie es unter [[Multimedia-Programmierung: Best Practices#CSS|Multimedia-Programmierung: Best Practices]] beschrieben ist. In diesem und den folgenden Tutorien werden
diese Prinzipien berücksichtigt.

Legen Sie die Datei <code>web/css/initial.css</code> an und fügen Sie folgenden (sehr kurzen!) Code ein:

<source lang="javascript">
body { background-color: #C5EFFC; }
.hidden { display: none; }
</source>

In der Datei <code>src/css/main.css</code> können Sie das <code>.hidden</code>-Element entfernen.

In der Datei <code>web/index.html</code> müssen Sie das Link-Element in Header folgendermaßen
<source lang="html">
<link rel = "stylesheet" type = "text/css" href = "css/initial.css"/>
</source>
anpassen. Das heißt, Sie laden im HTML-Head-Bereich nur noch die kleine CSS-Datei.

===JavaScript-Dateien===

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/BlockingJS</ref> Dieser Vorschlag ist sehr sinnvoll.

Entfernen Sie das <code>script</code>-Element aus dem HTML-Header-Bereich und fügen vor dem schließenden <code>body</code>-Tag folgendes Script-Element ein:

<source lang="html5">
<body>
...
<script type="text/javascript" src="js/app.bundle.js"></script>
</body>
</source>

Fügen Sie außerdem in das erste <code>section</code>-Tag im Body das Attribut
<code>class="hidden"</code> ein, damit man auch dieses Element beim Laden der Anwendung
zunächst nicht sieht. In einer Anwendung, die zum Laden etwas länger dauert, würde man
einen so genannten [[Splash Screen]] sichtbar einfügen und diesen beim eigentlichen Start der App ausblenden.

Wenn Sie nun die Web-App testweise starten, sollten Sie eine himmelblaue, aber ansonsten leere Seite sehen.
Wenn Sie im Brwoser die Konsole öffnen, sehen Sie dort (evtl. nach einem Reload), eine Fehlermeldung,
dass die JavaScript-Datei <code>app.bundle.js</code> nicht gefunden wird. Dieser Fehler ist nicht
weiter erstaunlich, da es diese Datei ja noch gar nicht gibt.

Weiter unten im Tutorium wird beschrieben, wie Sie mit Hilfe eines ES6-Import-Befehls und webpack dafür sorgen,
dass diese Datei nicht nur den JavaScript-Code der Anwendung bereit stellt, sondern auch den Inhalt
der eigentlichen CSS-Datei <code>main.css</code> dynamisch in die HTML-Datei einfügt (''injiziert'').

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

===Modularisierung der JavaScript-Dateien===

Die JavaScript-Datei <code>main.js</code> aus dem dritten des Tutroiums wird in zwei Teile aufgespalten:
<code>greet.js</code> und <code>app.js</code>. Die erste Datei enthält die eigentliche Begrüßungsfunktionalität,
die zweite initialisiert die App, {{dh}} aktiviert die Begrüßungsfunktion.

Erstellen Sie folgende zwei JavaScript-Dateien:

'''<code>src/js/greet.js</code>'''
<source lang="javascript">
/**
* @namespace greet
* Contains methods to say hello to the user of the web app.
*/

/**
* Welcomes the user of the web app by displaying a welcome message
* that includes his name. The name is fetched from a text input field.
*/
export const sayHello =
function()
{
document.getElementById('heading_hello').innerHTML =
'Hello, ' + document.getElementById('input_name').value + '!';
document.getElementById('section_form').classList.add('hidden');
document.getElementById('section_hello').classList.remove('hidden');
};

/**
* A keyboard event observer. It tests whether the enter key has been pressed.
* If so, the greet method is activated. Default reactions of the browser are
* disabled.
* @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
*/
export const sayHelloOnEnter =
function(p_event)
{
if ( (p_event.code === 'Enter' || p_event.keyCode === 13) &&
document.activeElement === document.getElementById('input_name')
)
{
p_event.preventDefault();
p_event.stopPropagation();
sayHello();
}
};
</source>

Sie sehen, dass dieses Modul zwei Funktionen exportiert. Diese (und nur diese) können jetzt
von anderen Modulen importiert und damit genutzt werden. Dies nutzen Sie im zweiten Modul aus:

'''<code>src/app.js</code>'''
<source lang="javascript">
import '../css/main.css';
import * as greet from './app/greet.js';

// Initialize the app.
document.getElementById('button_submit')
.addEventListener('click', greet.sayHello);
window .addEventListener('keydown', greet.sayHelloOnEnter);

// As now all files have been loaded and all data has been
// initialized, the app is ready to start.
// So make the form visible!
document.getElementById('section_form').classList.remove('hidden');
</source>

Sie importieren alle Elemente (<code>*</code>), die Ihnen das Modul <code>src/app/greet.js</code>
zur Verfügung stellt, und speichern diese Elemente in einem Objekt namens <code>greet</code>.
Damit ist es Ihnen mäglich die beiden Funktionen <code>sayHello</code> und <code>sayHelloOnEnter</code>
zu verwenden. Sie können jeweils unter dem Namen <code>greet.sayHello</code> bzw. <code>greet.sayHelloOnEnter</code>,
auf sie zugreifen.

Weil Sie schon gerade dabei sind, importieren Sie am besten gleich auch noch
die CSS-Datei <code>main.css</code>. Webpack sorgt dann dafür, dass diese
Datei in die Datei <code>app.bundle.js</code> integriert wird und somit ''dynamisch''
geladen wird, sobald der Browser die Script-Anweisung

<source lang="html5">
<script type="text/javascript" src="js/app.bundle.js"></script>
</source>

ausführt.

Der letzte Befehl in der JavaScript-Datei <code>app.js</code>

<source lang="javascript">
document.getElementById('section_form').classList.remove('hidden');
</source>

sorgt dafür, dass das Eingabeformular sichtbar wird. Da die
notwendigen Callback-Funktionen zuvor mit dem Formular verknüpft wurden,
ist es jetzt einsatzbereit, und es spricht nichts mehr dafür, den Benutzer
länger an der Verwendung dieses genialen ( :-) ) Formulars zu hindern.

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

===Node.js, Grunt, Babel und webpack===

Eigentlich wäre Sie jetzt fertig, wenn denn die Standardbrwoser die ES6-Import- und Export-Befehle kennen würden.
Doch das ist leider in den allermeisten Fällen nicht der Fall. Daher müssen die ES6-Dateien in ES5-Dateien transformiert werden.
Dafür gibt es diverse Möglichkeiten. Ich empfehle derzeit „webpack“<ref>webpack: https://webpack.js.org/</ref>.

Zum Transformieren und Packen von JavaScript-, JSON- und CSS/SCSS-Dateien kommen neben webpack auch noch Grunt<ref>Grunt: https://gruntjs.com/</ref> und Babel<ref>Babel: https://babeljs.io/</ref> zum Einsatz. Diese Pakete kennen Sie ja schon
aus dem Tutorium „[[HTML5-Tutorium: JavaScript: Entwicklungsumgebung|Einrichten eine Entwicklungsumgebung für Web-Anwendungen]]“.

Webpack ist ein sehr mächtiges Werkzeug, mit dem eine Vielzahl von Web-Dateien in einer oder einigen wenigen JavaScript-Dateien
zusammengefasst und bei Bedarf auch komprimiert werden können. Es handelt sich also um einen ''JavaScript module bundler''.
Einer der Entwickler von webpack ist [[Johannes Ewald]], ein ehemaliger Student der [[HSA]] (vgl. https://github.com/jhnns). Er bietet auch
regelmäßig Vorlesung an der HSA zum Thema „JavaScript“ an.

====Node.js-Pakete====

Öffnen Sie das WebStorm-Terminal und installieren Sie die benötigten Node.js-Pakete

<source lang="bash">
npm init -y
# Autor, Lizenz und Keywords in package.json anpassen
npm install --save-dev grunt grunt-contrib-watch
npm install --save-dev babel-cli babel-preset-env
npm install --save-dev webpack grunt-webpack
npm install --save-dev babel-loader json-loader style-loader css-loader
</source>

Achtung: <code>grunt-cil</code> wird auch benötigt. Aber dieses Paket wurde schon
im Tutorium „[[HTML5-Tutorium: JavaScript: Entwicklungsumgebung|Einrichten eine Entwicklungsumgebung für Web-Anwendungen]]“
global installiert und braucht daher nicht noch einmal installiert zu werden.

Sorgen Sie nun dafür. dass die Dateien <code>package.json</code> und <code>package-lock.json</code>
auch im Repository gespeichert werden (Leider erledigt die WebStorm nicht automatisch):

* Rechtklick auf „<code>package.json</code>“ → <code>Subversion</code> → <code>Add to VCS</code>
* Rechtklick auf „<code>package-lock.json</code>“ → <code>Subversion</code> → <code>Add to VCS</code>

====webpack====

Nun müssen noch webpack und Grunt konfiguriert werden, damit die Datei <code>app.bundle.js</code>
automatisch generiert werden kann.

Erstellen Sie im Wurzelverzeichnis des Projektes folgende Datei:

''<code>webpack.config.js</code>''
<source lang="html">
const path = require('path');

function absolutePath(l_path)
{ return path.resolve(__dirname, l_path);
}

module.exports =
{ entry:
{ app: absolutePath('src/js/app.js')
},

output:
{ filename: '[name].bundle.js',
path: absolutePath('web/js')
},

module:
{ rules:
[ { test: /\.json$/,
loader: 'json-loader'
},
{ test: /\.js$/,
use: [ { loader: 'babel-loader',
options:
{ presets: ['env'],
ignore: '/node_modules/'
},
},
],
},
{ test: /\.css$/,
use: [ 'style-loader',
{ loader: 'css-loader', options: { minimize: true } }
]
}
],
},

plugins:
[],
};
</source>

Es handelt sich um ein JavaScript-Datei, die direkt von Node.js interpretiert wird.
Aus diesem Grund wird auch nicht das EcmaScript-6-Modul-Konzept eingesetzt, sondern
[[CommonJS]], das Standard-Modulkonzept vom Node. Hier werden Module mittels <code>require</code>
und nicht mittels <code>import</code> importiert. Für Sie ist das allerdings nebensächlich,
das Sie im Rahmen der Tutorien keine komplexen Konfigurations-Dateien für webpack implementieren werden.

Im Prinzip macht diese Datei nichts andere als ein Objekt zu exportieren,
das webpack-Konfigurations-Informationen enthält:

* <code>entry</code>: JavaScript-Dateien, die gebündelt und komprimiert werden sollen. Man muss jeweils nur die Wurzeldatei angeben. Webpack sucht in dieser Datei rekursiv nach Import-Befehlen und packt die benötigten Dateien ebenfalls in die Ausgabedatei.
* <code>output</code>: Hier wird festgelgt, wie die gepackten Dateien heißen sollen. Für jeden
Eintrag im Attribute <code>entry</code> wird eine Datei mit dem Namen <<code>[name].bundle.js</code>
erzeugt, wobei <code>[name]</code> durch den Schlüsselname des Entry-Eintrags ersetzt wird.
In der obigen Datei gibt es nur ein Entry-Element. Dessen Schlüsselname lautet <code>app</code>.
* <code>module</code>: In diesem Attribut werden Regeln (<code>rules</code>) angegeben,
die festlegen, auf welche Weise eine Datei transformiert werden sollen. Bei jeder Regel gibt
es einen Test, der festlegt, für welche Dateien die jeweilge Regel zutrifft. Mit Hilfe eines
[[regulärer Ausdruck|regulärer Ausdrücke]] wird im Tutoriumsbeispiel geprüft, ob die aktuelle
Datei auf <code>.json</code>, <code>.js</code> oder <code>.css</code> endet. Je nach der
Endung wird ein anderer Loader zum Laden und Verarbeiten der Datei verwendet.
(Für webpack gibt es diverse Loader, einige davon haben Sie zuvor mit Hilfe von <code>npm</code> installiert.)

JSON-Dateien werden mit dem JSON-Loader geladen und in die Ergebnis-Datei (<code>app.bundle.js</code>)
eingefügt.

JavaScript-Dateien werden mit dem Babel-Loader geladen und transformiert.
Auf welche Weise der Babel-Loader dies macht wird nicht mehr in der Datei <code>.babelrc</code>
festgelegt, sondern direkt in der Datei <code>webpack.config.js</code>. Der Loader kann
auch Dateien laden, die sich im Verzeichnis <code>node_modules</code> befinden.
Die dort gespeicherten Module sorgen allerdings selbst dafür, dass sie ausführbaren
Web-Code bereitstellen. Daher sollten sie vom Babel-Loader nicht noch einmal transformiert werden.
Mit <code>ignore: '/node_modules/'</code> wird also nicht festgelegt, dass Babel die
benötigten Dateien nicht lädt, sondern es wird festgelegt, dass sie nicht noch einmal transformiert werden.

CSS-Dateien werden zunächst mit dem CSS-Loader geladen und verarbeitet. Anschließend werden vom
Style-Loader Anweisungen in die Datei <code>app.bundle.js</code> geschrieben, die dafür sorgen,
dass die CSS-Elemente beim Laden dieser JavaScript-Datei direkt in den HTML-Head-Bereich
der zugehörigen HTML-Datei eingefügt (''injiziert'') werden.

Am Ende der Konfigurations-Datei, gibt es noch eine Plugin-Liste, die dazu genutzt werden kann,
dateiunabhängige Transformationen an der Ergebnis-Datei (<code>app.bundle.js</code>)
vorzunehmen. Derartige Plugins werden zunächst einmal nicht verwendet.

Damit steht einer Verwendung von webpack nichts mehr im Wege. Man könnte webpack nun direkt von
der Kommandozeile aufrufen. Besser ist es allerdings, NPM-Skript-Befehle oder gar Grunt-Befehle
zu verwenden.

====NPM-Skripte====

Fügen Sie das <code>scripts></code>-Objekt der Datei <code>package.json</code>
drei weitere Skript-Anweisungen ein:

<source lang="json">
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "webpack",
"compress": "webpack -p",
"watch": "webpack --watch"
},
</source>

Geben Sie nun im WebStorm-Terminal die Anweisung <code>npm run bundle</code> ein.

Wenn Sie alles richtig gemacht haben, müsste webpack fehlerfrei durchlaufen und die Datei <code>web/js/app.bundle.js</code> erstellt werden. Im Zweifelsfall müssen Sie auf das Reload-Icon unter der
Menü-Leiste klicken, um sie zu sehen.
Wenn der Dateiname nicht grün, sondern braun eingefärbt ist, müssen Sie sie unter SVN-Kontrolle stellen:

* Rechtklick auf „<code>app.bundle.js</code>“ → <code>Subversion</code> → <code>Add to VCS</code>

Wenn Sie jetzt die Datei <code>index.html</code> im Browser öffnen, sollten Sie nach kurzer Zeit
wieder das Begrüßungsmenü sehen. Nach Eingabe des Namens und Klick auf den Say-hello-Button
oder Drücken der Enter-Taste sollten Sie freundlich begrüßt werden.

Sehen Sie sich mal den Inhalt der Datei <code>app.bundle.js</code> an. Darin finden Sie
– neben vielen Kommentaren, die zur Strukturierung der Datei verwendet werden – die Inhalte der Dateien <code>greet.js</code>, <code>app.js</code> und <code>main.css</code>
sowie spezielle Anweisungen, die von webpack eingefügt wurden.

In dieser Form ist die Datei für Entwicklungszwecke einigermaßen brauchbar. Bei einem Fehler
zeigt einem der Brwoser, in welcher Zeile dieser Datei der Fehler aufgetreten ist.
Normalerweise handelt es sich um eine Zeile, die Sie erfasst haben. Webpack-Befehle sollten keine
Fehler werden. NAchteilig ist, dass diese Zeile etwas anders ausseen kann, wie in IHrem Sourcecode,
das sie ja mittels Babel transformiert wurde. Aber man findet die ORiginalzeile normalerweise recht schnell.

Gehen Sie nochmal ins WebStorm-Terminal und geben Sie diesmal
die Anweisung <code>npm run compress</code> ein.
Es wird wirder die Datei <code>app.bundle.js</code> erstellt. Und die Web-Anwendung sollte
immer noch funktionieren. Wenn Sie sich die gebündelte JavaScript noch einmal ansehen,
stellen Sie fest, dass Sie nun viel kleiner ist. Sie enthält keine überflüssige Leerzeichen, keine Zeilenumbrüche
und auch keine Kommentare mehr (mit Ausnahme des Kommentars, der Auzskunft über den Autor und die
Lizenz gibt). Diese Datei ist für den Produktivbetrieb viel besser geeignet, da sie weniger Bandbreite
verbraucht. Insbesondere Smarphone-Besitzer freuen sich über kleine Dateien, da ihr Datenvolumen
dadurch weniger belastet wird. Für die Fehlersuche bei der Entwicklung der Web-App ist diese
Variante allerdings vollkommen ungeeignet.

Nun können Sie noch die Anweisung <code>npm run watch</code> testen.
Dieser startet einen webpack-Watcher, der bei jeder Änderung an einer Datei, die von webpack
beim Bündeln berücksichtigt wird, dafür sorgt, dass <code>app.bundle.js</code> neu erstellt wird
und Sie die Ergebnisse Ihrer Änderung durch einen einfachen Reload der Datei <code>index.html</code>
im Browser betrachten können. Änderin Sie doch einmal in der CSS-Datei die Hintergrundfarbe, speicher Sie die Datei un beobachten Sie das Terminalfenster. Laden Sie danach die HTML-Datei im Browser mitels
des Reload-Buttons neu.

Vergessen Sie nicht:
* Klick auf das SVN-Commit-Icon.

====Grunt====

Nun können Sie auch noch Grunt konfiguerieren. Hier wäre das noch nicht so wichtig,
da Grunt auch nicht mehr leistet, als die zuvor getesteten NPM-Skript-Befehle.
Allerdings kann man mit Grunt nicht nur webpack, sondern auch noch viele
weitere Tools verwalten. Ich persönlich finde es ganz angenehm, well alle Tools
mit Hilfe eines einzigen Werkzeugs administirert werden.

Fügen Sie folgende Datei ins Wurzelverzeichnis Ihrer Projektes ein:

'''<code>gruntfile.js</code>'''
<source lang="javascript">
const webpack = require('webpack'),
webpackConfig = require('./webpack.config.js');

module.exports = function(grunt)
{
// Project configuration.
grunt.initConfig
({
pkg: grunt.file.readJSON('package.json'),

webpack:
{
options: webpackConfig,

bundle:
{
},

compress:
{
plugins:
webpackConfig.plugins.concat
( new webpack.optimize.UglifyJsPlugin({ mangle: true }) )
},

watch:
{
watch: true,
keepalive: true
}
},
});

// Register task(s)
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['webpack:bundle']);
grunt.registerTask('bundle', ['webpack:bundle']);
grunt.registerTask('compress', ['webpack:compress']);
grunt.registerTask('watch', ['webpack:watch']);
};
</source>

Damit stehen Ihnen folgende Grunt-Befehle zur Verfügung:

* <code>grunt</code> bzw. <code>grunt bundle</code> (entspricht <code>npm run bundle</code>)
* <code>grunt compress</code> (entspricht <code>npm run compress</code>)
* <code>grunt watch</code> (entspricht <code>npm run watch</code>)

Interessant ist, dass hier die Komprimierung der Zieldatei mit Hilfe des Webpack-Plugins
<code>UglifyJsPlugin</code> und nicht mit Hilfe der Kommandozeilen-Option <code>-f</code> erzielt wird.
Diese Plugin bietet viele Optionen, mit denen der Kompressionsvorgang gezielt gesteuert werden kann.

Und noch einmal (sobald alles funktioniert):
* Klick auf das SVN-Commit-Icon.

==Quellen==
<references/>
<ol>
<li value="7"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World 02

2017-10-12T20:03:28Z

Jostl:

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld02/index.html <code>index.html</code>],
[https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld02/index2.html <code>index2.html</code>]
([https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld02/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Die Anwendungsfälle ändern sich gegenüber dem ersten Teil des Tutoriums nicht:
Der einzige Anwendungsfall der Anwendung ist weiterhin die Begrüßung der ganzen Welt, sobald die Anwendung
ausgeführt wird.

Allerdings soll die Begrüßung gefälliger gestaltet werden, indem das Layout der Begrüßungsseite
verbessert wird. Zeichensatz, Schriftgröße, Zeilenabstand etc. werden geändert.

==Erstellen eines neuen Projektes==

Erstellen Sie im selben Ordner wie das Projekt „<code>HelloWorld01</code>“ ein neues Projekt „<code>HelloWorld02</code>“:

# Öffnen Sie das Projekt „<code>HelloWorld01</code>“ in WebStorm.
# <code>File</code> → <code>New</code> → <code>Project...</code> → <code>Empty Project</code>
# Tragen Sie den korrekten Projektpfad (mit dem Namen „<code>HelloWorld02</code>“ anstelle von „<code>untitled</code>“ am Pfadende) in dem Feld „<code>Location</code>“ ein.
# <code>Create</code> → <code>New Window</code>

Fügen Sie nun das neue Projekt in Ihr Subversion-Repository ein (analog zu [[HTML5-Tutorium:_JavaScript:_Hello_World_01|Teil 1]] des Tutoriums)
und committen Sie (vergessen Sie nicht die Commit Message „<code>Project HelloWorld02 created.</code>“).

Kopieren Sie die Datei „<code>index.html</code>“ aus dem WebStorm01-Projekt in das WebStorm02-Projekt.
Das können Sie entweder mit dem Dateibrowser Ihrer Wahl machen oder Sie legen die WebStorm-Fenster der Projekte
„<code>HelloWorld01</code>“ und „<code>HelloWorld02</code>“ nebeneinander, markieren und kopieren „<code>index.html</code>“
im ersten Projekt und fügen es in den Dateibaum des zweiten Projektes ein.

Passen Sie den Wert des <code>title</code>-Elements im HTML-Header an („<code>HelloWorld02</code>“ anstelle von „<code>HelloWorld01</code>“).

Überprüfen Sie, ob die Anwendung korrekt gestartet werden kann (Test). Falls dies der Fall ist,
committen Sie die neue Anwendung (Commit Message: „<code>Files of HelloWorld01 copied.</code>“)

==Festlegen des Designs der Anwendung==

Nun wird das Design der Anwendung verbessert. Die Überschrift soll in einem
serifenlosen Font dargestellt werden, der Text des nachfolgenden Absatzes
in einem serifenhaltigen.

Die ist kein [[CSS]]-Tutorium, daher wird nicht darauf eingegangen, wie ein geeigneter Font gewählt werden sollte.
Wir überlassen das einfach dem jeweiligen Browser-Hersteller, indem wir die Pseudofonts
„<code>sans-serif</code>“ und „<code>serif</code>“ angeben. Für [[Mac]]-User wird die Überschrift vermutlich in [[Helvetica]]
gesetzt und für [[Windows]]-Benutzer in [[Arial]].

Erstellen Sie eine [[CSS]]-Datei:

# Rechtsklick auf die Wurzel „<code>HelloWorld02</code>“ des Dateibaums → <code>New</code> → <code>Stylesheet</code>
# Name: <code>main.css</code> → <code>OK</code>

Es wird eine neue (diesmal leere!) Datei namens „<code>main.css</code>“ angelegt.

Fügen Sie in diese Datei folgenden CSS-Code ein:

<source lang="css">
h1
{
font-family: sans-serif;
}

p
{
font-family: serif;
}
</source>

Achten Sie darauf, dass öffnende und zugehörige schließende Klammern stets übereinander oder in derselben Zeile stehen.
Wenn Sie andere Tutorien bearbeiten, Fachbücher lesen oder Voreinstellungen von Web-IDEs begutachten,
werden Sie meist folgende Art der Formatierung entdecken, die gegen diese Regel verstößt:

<source lang="css">
/* *** DON'T DO IT THAT WAY!!!! *** */

h1 {
font-family: sans-serif;
}

p {
font-family: serif;
}
</source>

Die Begründung lautet dann oft, dass dieser Code weniger Zeilen habe, als der obige Code.
Das stimmt, lässt sich aber auch ohne Verletzung der Regel „Zusammengehörige Klammern befinden sich in derselben Spalte“
erreichen:

<source lang="css">
h1
{ font-family: sans-serif;
}

p
{ font-family: serif;
}
</source>

Im Falle von CSS-Code macht es keinen wirklichen Unterschied, welcher Konvention sie folgen.
'''Im Falle von JavaScript rate ich jedoch davon ab, öffnende und schließende Klammern nicht in derselben Spalte zu notieren.'''
Glauben Sie einem erfahrenen [[LISP]]-Programmierer
(LISP ist die Sprache, bei der ''jeder'' nicht-atomare Programmcode durch Klammern umschlossen wird):
Code ist wesentlich besser zu lesen, wenn öffnende und schließende Klammern übereinander stehen.
Insbesondere Strukturfehler sind bei dieser Konvention wesentlich einfacher zu finden.
Ob Sie die öffnende Klammer jeweils in einer eigenen Zeile schreiben oder nicht, ist dabei weniger wichtig.

Glücklicherweise highlighten die meisten Editoren (wie beispielsweise die WebStrom-Editoren)
die zugehörige schließende oder öffnende Klammer, wenn man den Cursor auf (bzw. vor oder nach)
eine öffnende oder schließende setzt. So erkennt man Strukturfehler auch dann, wenn man bei der
Einrückung Fehler gemacht hat. (Derartige Fehler sollte man allerdings möglichst schnell beheben,
wenn man sie einmal entdeckt hat.)

Wenn Sie Ihre CSS-Datei fertiggestellt haben und die Anwendung erneut testen
({{dh}} die Datei „<code>index.html</code>“ im Browser vom WebStorm-Server laden), werden Sie feststellen,
dass sich nichts geändert hat (auch wenn Sie den Reload-Button des Browsers drücken).

Sie können die CSS-Datei direkt im Browser laden (ersetzen sie in dem Browser-URI einfach „<code>index.html</code>“ durch „<code>main.css</code>“
und drücken Sie den Reload-Button), aber das hilft auch nichts. Ihnen wird daraufhin einfach der Inhalt des CSS-Datei vom Browser angezeigt.

Der Grund ist, dass der Browser beim Laden der HTML-Datei nicht weiß, dass er den Inhalt mit Hilfe
der CSS-Datei layouten soll. Damit er dies weiß, muss folgende Zeile in den <code>head</code>-Bereich
der HTML-Datei eingefügt werden:

<source lang="html5">
<link rel="stylesheet" type="text/css" href="main.css">
</source>

Wenn Sie jetzt noch einmal Ihre Web-Anwendung testen, wird die
Überschrift (evtl. nach einem Klick auf den Reload-Button des Browsers)
tatsächlich in einer serifenlosen Schriftart dargestellt.

Sie können jetzt noch weitere Verbesserungen vornehmen: Anpassung der Schriftgröße,
Anpassung des Abstandes zwischen Überschrift und Absatz, Anpassung der Schriftfarbe,
des Seitenhintergrundes etc. pp.

Zum Beispiel:

<source lang="css">
html, body
{
height: 100%;
}

html
{
display: table;
width: 100%;
}

body
{
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: #C5EFFC; /* zartes Blau */
}

h1
{
font-family: sans-serif;
font-size: 160%;
padding-bottom: 0;
margin-bottom: 0;
}

p
{
font-family: serif;
font-size: 100%;
}
</source>

Spielen Sie mit den CSS-Attributen und testen Sie Ihre Anwendung.

Tipp: Mit der CSS-Regel
<source lang="css">
* { border: solid 1px red; }
</source>
können Sie sehr einfach den Effekt von Padding-Attribut-Werten überprüfen. Falls Sie Ränder um einige Ihrer
Elemente zeichnen, sollten Sie
<source lang="css">
* { outline: solid 1px red; }
</source>
verwenden. Wenn Sie mit der Überprüfung fertig sind, sollten Sie diese Befehle allerdings wieder aus
der CSS-Datei entfernen oder sie zumindest auskommentieren (<code>/* .... */</code>).

Wenn Sie schließlich mit dem Layout Ihrer Anwendung zufrieden sind, committen Sie sie (Commit Message: „<code>Styling for web app was added.</code>“) .

==Optimierung des Designs für mobile Endgeräte==

Öffnen Sie die Web-Anwendung mit einem Smartphone.
Da der Zugriff auf den WebStorm-Servers auf Ihrem Entwicklungsrechner eingeschränkt ist,
müssen Sie Ihre Anwendung auf eine echten Web-Server legen, um mit einem anderen Device darauf zugreifen zu können.
Falls Sie am Praktikum zur Lehrveranstaltung [[Lehrveranstaltung:IAM 2006:Multimedia-Anwendungen/Programmierung|MMProg]] teilnehmen,
liegt Ihre Anwendung bereits auf einem externen Server: in Ihrem Subversion-Repository.
Sie brauchen also nichts weiter zu machen, als zunächst den folgenden URI in Ihrem Smartphone zu öffnen
(wobei Sie „<code>ACCOUNT</code>“ durch Ihren RZ-Account ersetzen müssen):

<source lang="html5">
https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT
</source>

Öffnen Sie dann der Reihe nach alle Unterordner, bis Sie die Datei „<code>index.html</code>“ des Projektes „<code>HelloWorld02</code>“ finden.
Wenn Sie sich an die Vorgaben des Tutoriums gehalten haben, wären das zunächst der Ordner „<code>mmprog</code>“, dann „<code>hello_world</code>“
und schließlich „<code>HelloWorld02</code>“.

Wenn Sie nun die Datei „<code>index.html</code>“ öffnen, werden Sie feststellen, dass die Schrift viel zu klein ist und der Begrüßungstext daher
nur schwer gelesen werden kann. Der Grund ist, dass die mobilen Browser in der Regel genauso rendern wie stationäre Browser. Da der Bildschirm aber viel kleiner
ist, erkennt man nicht mehr viel.

Unter [[Responsive Webdesign]] versteht man ein gestalterisches Paradigma, welches zum Ziel hat, eine Web-Site auf jedem möglichen Endgerät möglichst optimal les-
und benutzbar darzustellen. Technische Basis ist hier vor allem [[CSS]], aber natürlich auch [[HTML5]] und [[JavaScript]].

In unserem Fall reicht es, ein weiteres Meta-Tag in den HTML-Header einzufügen,
das den Browser anweist, für die Darstellung der HTML-Body-Elemente eine Bühne zu verwenden, die genauso breit ist,
wie das Fenster des Devices (PC, Tablet im Querformat, Smartphone im Hochformat etc.) .

<source lang="html5">
<meta name = "viewport"
content = "width=device-width, initial-scale=1.0, user-scalable=yes"
>
</source>

Darüber hinaus wird dem Browser mitgeteilt, das der Benutzer die Größe ändern kann (per Touchgeste). Initial
beträgt die Größe 100% (= 1,0).

Wenn alles funktioniert, committen Sie sie (Commit Message: „<code>Support for mobile devices added.</code>“) .

==Fortsetzung des Tutoriums==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World 03|Teil 3 des Tutoriums]] bearbeiten.

==Quellen==
<references/>
<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World 02

2017-10-12T20:02:39Z

Jostl:

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld02/index.html <code>index.html</code>],
[https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld02/index2.html <code>index2.html</code>]
([https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld02/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Die Anwendungsfälle ändern sich gegenüber dem ersten Teil des Tutoriums nicht:
Der einzige Anwendungsfall der Anwendung ist weiterhin die Begrüßung der ganzen Welt, sobald die Anwendung
ausgeführt wird.

Allerdings soll die Begrüßung gefälliger gestaltet werden, indem das Layout der Begrüßungsseite
verbessert wird. Zeichensatz, Schriftgröße, Zeilenabstand etc. werden geändert.

==Erstellen eines neuen Projektes==

Erstellen Sie im selben Ordner wie das Projekt „<code>HelloWorld01</code>“ ein neues Projekt „<code>HelloWorld02</code>“:

# Öffnen Sie das Projekt „<code>HellowWorld01</code>“ in WebStorm.
# <code>File</code> → <code>New</code> → <code>Project...</code> → <code>Empty Project</code>
# Tragen Sie den korrekten Projektpfad (mit dem Namen „<code>HelloWorld02</code>“ anstelle von „<code>untitled</code>“ am Pfadende) in dem Feld „<code>Location</code>“ ein.
# <code>Create</code> → <code>New Window</code>

Fügen Sie nun das neue Projekt in Ihr Subversion-Repository ein (analog zu [[HTML5-Tutorium:_JavaScript:_Hello_World_01|Teil 1]] des Tutoriums)
und committen Sie (vergessen Sie nicht die Commit Message „<code>Project HelloWorld02 created.</code>“).

Kopieren Sie die Datei „<code>index.html</code>“ aus dem WebStorm01-Projekt in das WebStorm02-Projekt.
Das können Sie entweder mit dem Dateibrowser Ihrer Wahl machen oder Sie legen die WebStorm-Fenster der Projekte
„<code>HelloWorld01</code>“ und „<code>HelloWorld02</code>“ nebeneinander, markieren und kopieren „<code>index.html</code>“
im ersten Projekt und fügen es in den Dateibaum des zweiten Projektes ein.

Passen Sie den Wert des <code>title</code>-Elements im HTML-Header an („<code>HelloWorld02</code>“ anstelle von „<code>HelloWorld01</code>“).

Überprüfen Sie, ob die Anwendung korrekt gestartet werden kann (Test). Falls dies der Fall ist,
committen Sie die neue Anwendung (Commit Message: „<code>Files of HelloWorld01 copied.</code>“)

==Festlegen des Designs der Anwendung==

Nun wird das Design der Anwendung verbessert. Die Überschrift soll in einem
serifenlosen Font dargestellt werden, der Text des nachfolgenden Absatzes
in einem serifenhaltigen.

Die ist kein [[CSS]]-Tutorium, daher wird nicht darauf eingegangen, wie ein geeigneter Font gewählt werden sollte.
Wir überlassen das einfach dem jeweiligen Browser-Hersteller, indem wir die Pseudofonts
„<code>sans-serif</code>“ und „<code>serif</code>“ angeben. Für [[Mac]]-User wird die Überschrift vermutlich in [[Helvetica]]
gesetzt und für [[Windows]]-Benutzer in [[Arial]].

Erstellen Sie eine [[CSS]]-Datei:

# Rechtsklick auf die Wurzel „<code>HelloWorld02</code>“ des Dateibaums → <code>New</code> → <code>Stylesheet</code>
# Name: <code>main.css</code> → <code>OK</code>

Es wird eine neue (diesmal leere!) Datei namens „<code>main.css</code>“ angelegt.

Fügen Sie in diese Datei folgenden CSS-Code ein:

<source lang="css">
h1
{
font-family: sans-serif;
}

p
{
font-family: serif;
}
</source>

Achten Sie darauf, dass öffnende und zugehörige schließende Klammern stets übereinander oder in derselben Zeile stehen.
Wenn Sie andere Tutorien bearbeiten, Fachbücher lesen oder Voreinstellungen von Web-IDEs begutachten,
werden Sie meist folgende Art der Formatierung entdecken, die gegen diese Regel verstößt:

<source lang="css">
/* *** DON'T DO IT THAT WAY!!!! *** */

h1 {
font-family: sans-serif;
}

p {
font-family: serif;
}
</source>

Die Begründung lautet dann oft, dass dieser Code weniger Zeilen habe, als der obige Code.
Das stimmt, lässt sich aber auch ohne Verletzung der Regel „Zusammengehörige Klammern befinden sich in derselben Spalte“
erreichen:

<source lang="css">
h1
{ font-family: sans-serif;
}

p
{ font-family: serif;
}
</source>

Im Falle von CSS-Code macht es keinen wirklichen Unterschied, welcher Konvention sie folgen.
'''Im Falle von JavaScript rate ich jedoch davon ab, öffnende und schließende Klammern nicht in derselben Spalte zu notieren.'''
Glauben Sie einem erfahrenen [[LISP]]-Programmierer
(LISP ist die Sprache, bei der ''jeder'' nicht-atomare Programmcode durch Klammern umschlossen wird):
Code ist wesentlich besser zu lesen, wenn öffnende und schließende Klammern übereinander stehen.
Insbesondere Strukturfehler sind bei dieser Konvention wesentlich einfacher zu finden.
Ob Sie die öffnende Klammer jeweils in einer eigenen Zeile schreiben oder nicht, ist dabei weniger wichtig.

Glücklicherweise highlighten die meisten Editoren (wie beispielsweise die WebStrom-Editoren)
die zugehörige schließende oder öffnende Klammer, wenn man den Cursor auf (bzw. vor oder nach)
eine öffnende oder schließende setzt. So erkennt man Strukturfehler auch dann, wenn man bei der
Einrückung Fehler gemacht hat. (Derartige Fehler sollte man allerdings möglichst schnell beheben,
wenn man sie einmal entdeckt hat.)

Wenn Sie Ihre CSS-Datei fertiggestellt haben und die Anwendung erneut testen
({{dh}} die Datei „<code>index.html</code>“ im Browser vom WebStorm-Server laden), werden Sie feststellen,
dass sich nichts geändert hat (auch wenn Sie den Reload-Button des Browsers drücken).

Sie können die CSS-Datei direkt im Browser laden (ersetzen sie in dem Browser-URI einfach „<code>index.html</code>“ durch „<code>main.css</code>“
und drücken Sie den Reload-Button), aber das hilft auch nichts. Ihnen wird daraufhin einfach der Inhalt des CSS-Datei vom Browser angezeigt.

Der Grund ist, dass der Browser beim Laden der HTML-Datei nicht weiß, dass er den Inhalt mit Hilfe
der CSS-Datei layouten soll. Damit er dies weiß, muss folgende Zeile in den <code>head</code>-Bereich
der HTML-Datei eingefügt werden:

<source lang="html5">
<link rel="stylesheet" type="text/css" href="main.css">
</source>

Wenn Sie jetzt noch einmal Ihre Web-Anwendung testen, wird die
Überschrift (evtl. nach einem Klick auf den Reload-Button des Browsers)
tatsächlich in einer serifenlosen Schriftart dargestellt.

Sie können jetzt noch weitere Verbesserungen vornehmen: Anpassung der Schriftgröße,
Anpassung des Abstandes zwischen Überschrift und Absatz, Anpassung der Schriftfarbe,
des Seitenhintergrundes etc. pp.

Zum Beispiel:

<source lang="css">
html, body
{
height: 100%;
}

html
{
display: table;
width: 100%;
}

body
{
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: #C5EFFC; /* zartes Blau */
}

h1
{
font-family: sans-serif;
font-size: 160%;
padding-bottom: 0;
margin-bottom: 0;
}

p
{
font-family: serif;
font-size: 100%;
}
</source>

Spielen Sie mit den CSS-Attributen und testen Sie Ihre Anwendung.

Tipp: Mit der CSS-Regel
<source lang="css">
* { border: solid 1px red; }
</source>
können Sie sehr einfach den Effekt von Padding-Attribut-Werten überprüfen. Falls Sie Ränder um einige Ihrer
Elemente zeichnen, sollten Sie
<source lang="css">
* { outline: solid 1px red; }
</source>
verwenden. Wenn Sie mit der Überprüfung fertig sind, sollten Sie diese Befehle allerdings wieder aus
der CSS-Datei entfernen oder sie zumindest auskommentieren (<code>/* .... */</code>).

Wenn Sie schließlich mit dem Layout Ihrer Anwendung zufrieden sind, committen Sie sie (Commit Message: „<code>Styling for web app was added.</code>“) .

==Optimierung des Designs für mobile Endgeräte==

Öffnen Sie die Web-Anwendung mit einem Smartphone.
Da der Zugriff auf den WebStorm-Servers auf Ihrem Entwicklungsrechner eingeschränkt ist,
müssen Sie Ihre Anwendung auf eine echten Web-Server legen, um mit einem anderen Device darauf zugreifen zu können.
Falls Sie am Praktikum zur Lehrveranstaltung [[Lehrveranstaltung:IAM 2006:Multimedia-Anwendungen/Programmierung|MMProg]] teilnehmen,
liegt Ihre Anwendung bereits auf einem externen Server: in Ihrem Subversion-Repository.
Sie brauchen also nichts weiter zu machen, als zunächst den folgenden URI in Ihrem Smartphone zu öffnen
(wobei Sie „<code>ACCOUNT</code>“ durch Ihren RZ-Account ersetzen müssen):

<source lang="html5">
https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT
</source>

Öffnen Sie dann der Reihe nach alle Unterordner, bis Sie die Datei „<code>index.html</code>“ des Projektes „<code>HelloWorld02</code>“ finden.
Wenn Sie sich an die Vorgaben des Tutoriums gehalten haben, wären das zunächst der Ordner „<code>mmprog</code>“, dann „<code>hello_world</code>“
und schließlich „<code>HelloWorld02</code>“.

Wenn Sie nun die Datei „<code>index.html</code>“ öffnen, werden Sie feststellen, dass die Schrift viel zu klein ist und der Begrüßungstext daher
nur schwer gelesen werden kann. Der Grund ist, dass die mobilen Browser in der Regel genauso rendern wie stationäre Browser. Da der Bildschirm aber viel kleiner
ist, erkennt man nicht mehr viel.

Unter [[Responsive Webdesign]] versteht man ein gestalterisches Paradigma, welches zum Ziel hat, eine Web-Site auf jedem möglichen Endgerät möglichst optimal les-
und benutzbar darzustellen. Technische Basis ist hier vor allem [[CSS]], aber natürlich auch [[HTML5]] und [[JavaScript]].

In unserem Fall reicht es, ein weiteres Meta-Tag in den HTML-Header einzufügen,
das den Browser anweist, für die Darstellung der HTML-Body-Elemente eine Bühne zu verwenden, die genauso breit ist,
wie das Fenster des Devices (PC, Tablet im Querformat, Smartphone im Hochformat etc.) .

<source lang="html5">
<meta name = "viewport"
content = "width=device-width, initial-scale=1.0, user-scalable=yes"
>
</source>

Darüber hinaus wird dem Browser mitgeteilt, das der Benutzer die Größe ändern kann (per Touchgeste). Initial
beträgt die Größe 100% (= 1,0).

Wenn alles funktioniert, committen Sie sie (Commit Message: „<code>Support for mobile devices added.</code>“) .

==Fortsetzung des Tutoriums==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World 03|Teil 3 des Tutoriums]] bearbeiten.

==Quellen==
<references/>
<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js

2017-10-12T19:07:07Z

Jostl:

{{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/test/WK_Test01_babel/ SVN-Repository]

Zur Unterstützung der Entwicklung von Web-Anwendungen kann [[Node.js]]<ref>Node.js: https://nodejs.org/en/</ref> eingesetzt werden:
automatische Übersetzung von [[ECMAScript|ECMAScript 6/7/8]] (genauer ECMAScript 2015/2016/2017) in ECMAScript 5.1, automatische Generierung der
Dokumentation, automatisches Testen der Anwendung etc.

Das heißt, auch wenn man keine Node.js-Server-Anwendung erstellt, ist Node.js ein
sehr wertvolles und universell einsetzbares Werkzeug.

==Installation==

===Unix-Shell===
Web-Entwickler verwenden unter Windows {{iAllg}} ein Terminal, das eine [[Unix]]-[[Shell]] simuliert.
Unter Linux und Mac OS X ist es nicht notwendig, eine separate Unix-Shell zu installieren, da
diese dort sowieso schon existiert (Unix: bash, Mac OS X: terminal).

Installieren Sie „Git for Windows“ (<code>https://git-for-windows.github.io/</code>; wählen Sie bei jeder Frage die Default-Werte, außer Sie haben einen triftigen Grund, davon abzuweichen). In diesem Paket ist die „Git BASH“ enthalten.
Das ist eine Terminal-Anwendung, die eine Linux-Bash emuliert und zahlreiche nützliche Befehle wie <code>which</code>, <code>[[vi]]</code> ( :-) ) etc. zur
Verfügung stellt.

Unter [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: WebStorm|WebStorm]] steht ebenfalls ein Terminal zur Verfügung,
in dem Sie Kommandozeilen-Befehle absetzen können:
* Menü am unteren Festerrand: Klick auf <code>Terminal</code>

Wenn Sie das Web-Storm-Terminal verwenden, befinden Sie sich automatisch im Wurzelverzeichnis des zugehörigen Projektes.
Bei Im Allgemeinen müssen Sie jedoch mit Hilfe des Unix-Befehls <code>cd <PFAD></code> in das Wurzelverzeichnis des
Projektes wechseln, wenn Sie Befehle absetzen wollen, die sich auf ein bestimmtes Projekt beziehen.

Achtung: Unter Windows stehen Ihnen in WebStorm nur die Windows-Kommandozeilen-Befehle zur Verdügung,
unter Linux und Mac können (und müssen) Sie dort Linux-Kommandozeilen-Befehle eingeben.

===Node.js===
Installieren Sie nun Node.js: <code>https://nodejs.org/en/</code>, <code>https://nodejs.org/dist/latest01/</code>, Version 8.x.
Achten Sie darauf, dass die Option <code>Add to PATH</code> ausgewählt wurde.

Starten Sie ein Unix-Terminal ({{zB}} Mac-OS-X-Terminal, <code>bash</code> oder auch WebStorm: Klick auf Icon in der linken unteren Ecke → Klick auf <code>Terminal</code>).
Öffnen Sie das Terminal, um zu testen, ob <code>node</code> funktioniert:

* Geben Sie Folgendes in die Konsole ein: <code>node -v</code>

Wenn Node.js korrekt installiert und der Pfad mit den <code>node</code>-Binaries in die Systemvariable <code>PATH</code> eingetragen wurde,
sollte die Versionsnummer von <code>node</code> ausgegeben werden.

Sie werden feststellen, das Node.js zum Großteil über Terminal-Befehle gesteuert wird.
Zu Beginn mag das für eingefleischte [[Klickibunti]]-Fans ungewohnt sein, aber Sie werden sich schnell daran gewöhnen.

===Wichtige Node.js-Pakete===

Mit Hilfe von <code>npm</code><ref>npm: https://www.npmjs.com/</ref> (npm = node package manager) können beliebige Node.js-Pakete installiert werden.
Viele dieser Pakte könnte man global auf dem Rechner installieren.
Die globale Installation hätte zur Folge, dass jedes Projekt auf diese Pakete zugreifen kann, Pakete also nicht mehrfach installiert werden müssen.

Im Allgemeinen ist es alledings besser, die Pakete für jedes Projekt separat, {{dh}} projektlokal zu installieren.
Die kostet zwar mehr Platz, hat aber den Vorteil, dass man für verschiedene Projekte verschiedene Pakete verwenden kann. Es kann durchaus sein, dass
zwei verschiedene Pakete ein drittes benötigen, doch jeweils in einer anderen Version. Außerdem stehen einem anderen Entwickler, der eine Kopie
Ihres Projektes erhält, dann sofort alle Pakete in der jeweils benötigten Version zur Verfügung.

Um ein neues Projekt zu erstellen, legt man zunächst einen leeren Ordner an. Es kann ein beliebiger Ordner gewählt werden.
Im Folgenden wählen wir <code>/C/mmprog/test01</code> als Beispielsordner. (Beachten Sie, dass in der GIT Bash wie auch im HTML-Umfeld immer Linux-Pfad-Bezeichner verwendet werden, auch unter Windows.)

Öffnen Sie nun ihr bevorzugtes Unix-Terminal
und geben Sie folgenden Befehle ein:

<source lang="bash">
# Erzeugen Sie ein neues (leeres!) Projektverzeichnis.
# Bitte passen Sie diesen Pfad an Ihre Gegebenheiten an.
mkdir -p /C/mmprog/test01 # Achten Sie darauf, dass es diesen Pfad vorher nicht gegeben hat.
cd /C/mmprog/test01 # Hier müssen Sie den von Ihnen zuvor definierten Pfad angeben.
npm init -y # Erzeugen Sie ein neues Node.js-Projekt unter Kontrolle von npm.
# Installieren Sie nun die Node.js-Pakete grunt (Task-Manager)
# und babel (JavaScript-Transpiler) projektlokal.
npm install --save-dev grunt
ls -al # Sehen Sie sich an, welche Dateien und Ordner erzeugt wurden.
ls -al node_modules/.bin
# Damit WebStorm den Befehl 'node_modules/.bin/grunt' findet,
# muss noch das Grunt-Command-Line-Interface global
# installiert werden.
npm install -g grunt-cli # Mac OS X: sudo npm install -g grunt-cli
less package.json # Sehen Sie sich den Inhalt der Konfigurationsdatei an.
# Verlassen von "less": Taste "q" drücken.
</source>

Sie können das Projekt in WebStorm öffenen, um die zugehörigen Dateien mit dem
WebStorm-Editor bearbeiten zu können:

* <code>Open</code> bzw. <code>File</code>/<code>WebStorm</code> → <code>Open</code>
* Zum zuvor angelegten Testordner navigieren und diesen mit <code>OK</code> öffnen. Die Frage, ob Sie das Projekt im selben oder in einem neuen Fenster öffnen wollen, können Sie nach Belieben beantworten.

Sie können Ihre JavaScript-Projekt-Dateien auch mit jedem beliebigen anderen Code-Editor (Atom, Sublime, Nodepad++, Emacs etc. pp.) bearbeiten.
Das liegt ganz bei Ihnen. WebStorm ist sehr angenehm zu bedienen und enthält einen kleinen Web-Server, der die Entwicklung von JavaScript-Code erleichtert.
(Es gibt allerdings auch für Node.js einen einfachen HTTP-Server, der bei der Entwicklung von HTML-Anwendungen zu
Testzwecken eingesetzt werden kann: https://github.com/indexzero/http-server)
Das Terminalfenster von WebStorm ist auch sehr praktisch. Insbesondere Node.js-Befehle können
dort direkt eingegeben werden. Unter Windows verwende ich allerdings für komplexere Aufgaben die (Git-)Bash.

Sie sollten sich angewöhnen, in der Datei <code>package.json</code> sofort nachdem Sie sie
erstellt haben, ein paar projektspezifische Informationen zu ergänzen, wobei Sie die Werte
natürlich an Ihre Gegebenheiten anpassen müssen:

<source lang="json">
"keywords": ["test"],
"author": "Wolfgang Kowarschick",
"license": "CC-BY-NC-SA-4.0",
</source>

Ändern Sie dagegen nicht die Paketinformationen, die im Attribut <code>devDependencies</code> gespeichert sind.
Diese werden mittels <code>npm</code> verwaltet.
Der Node-Paket-Manager <code>npm</code> ist ein sehr nützliches Hilfsprogramm,
mit dem Sie neue Node-Projekte erstellen (<code>npm init -y</code>), Pakete installieren (<code>npm install</code>) und
wieder löschen (<code>npm uninstall</code>) sowie vieles mehr machen können (Dokumentation: https://docs.npmjs.com/).

Wichtig ist auch der Befehl
<source lang="bash">
npm update
</source>
Mit diesem können Sie die lokal gespeicherte Versionen der im Attribut <code>devDependencies</code> aufgeführte Node.js-Pakete
jederzeit auf die neueste Version aktualisieren. Die aktuell installierten Versionen können Sie mit

<source lang="bash">
npm -g list # globale Node.js-Pakete
npm list # projektlokale Node.js-Pakete
</source>

erfragen.

Sie können Pakete auch lokal löschen und dann mittels <code>npm install</code> wieder herstellen.
Versuchen Sie es (Achtung: Die Unix-Befehle <code>ls</code> und <code>rm</code> funktionieren
unter Windows nur in der Bash. In einem Windows-Terminal heißen die entsprechenden Befehle <code>dir</code> und <code>del</code>):

<source lang="bash">
ls -al node_modules # Liste alle Dateien und Verzeichnisse auf,
# die im Ordner node_modules enthalten sind.
rm -rf node_modules # Lösche diesen Ordner samt Inhalt.
npm list
ls -al node_modules
npm install
ls -al node_modules
npm list
</source>

Sie können auch überprüfen, ob Sie in Ihrem Projekt irgendwelche veralteten Pakete benutzen (https://docs.npmjs.com/cli/outdated):
<source lang="bash">
npm outdated # projektlokale Node.js-Pakete
npm -g outdated # globale Node.js-Pakete
</source>

Kein Ergebnis ist hier ein gutes Ergebnis! Ansonsten sollten die die veralteten Pakete aktualisieren:

<source lang="bash">
npm update # projektlokale Node.js-Pakete
</source>

Bei veralteten globalen Paketen, müssen Sie das entsprechende Paket erneut installieren.
Wenn beispielsweise grunt-cli veraltet ist, schreiben Sie:

<source lang="bash">
npm -g install grunt-cli # Mac OS X: sudo npm -g install grunt-cli
</source>

Wurde <code>npm</code> global installiert und ist veraltet, lautet der Befehl entsprechend:

<source lang="bash">
npm -g install npm # Mac OS X: sudo npm -g install npm
</source>
Das Tool <code>npm</code> kann sich also selbst aktualisieren. :-)

Node.js-Pakete können, wie wir gesehen haben, mittels der npm-Option <code>-g</code> auch global gespeichert werden, werden aber normalerweise projektlokal abgelegt.
Durch die projektlokale Speicherung von Node.js-Paketen bläht sich ein Projekt sehr stark auf. Es enthält dann
meist mehrere Tausend Dateien, auch wenn das eigentliche Projekt nur aus ein paar wenigen Dateien besteht. Dies ist vor allem beim Speichern eines derartigen Projektes in eine Repository ([[SVN]], [[Git]] etc.)
sehr störend. Dennoch sollte man nur ein Paket wie <code>grunt-cli</code>, dessen einzige Aufgabe es ist, die jeweils projektlokale Version von Grunt auszuführen, global installieren.

Um das Repository-Problem zu vermeiden, muss man die Speicherung von Node.js-Bibliotheken im Repository ausschließen und
diese Dateien bei Bedarf automatisch von den entsprechenden Servern herunterladen. Wie das geht, haben wir gerade gesehen:
Man läd das Projekt auf seinen Arbeitsrechner, öffnet ein Terminal, wechselt mittels <code>cd</code> ins Wurzelverzeichnis des Projektes
(beim WebStorm-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) und führt
<code>npm install</code> aus.

===Grunt===

Als nächstes initialisieren Sie Grunt (https://gruntjs.com/) <ref>Grunt: https://gruntjs.com/</ref>.
Grunt ist ein “JavaScript Task Runner”, also ein Programm, das Aufgaben (''tasks'') wie {{zB}} das Übersetzen von [[ECMAScript|ECMAScript 2015/16/17]] in
ECMAScript 5.1 oder das Komprimieren von Programmdateien automatisch durchführt.

Die Initialisierung erfolgt durch die Bereitstellung zweier Dateien <code>package.json</code>
und <code>gruntfile.json</code> im Root-Verzeichnis der Web-Anwendung. Die Datei <code>package.json</code>
haben Sie schon mittels <code>npm init</code> erstellt.

In der Datei <code>package.json</code> gibt es das Attribut <code>main</code>.
Es enthält den Namen der Konfigurationsdatei von Grunt: <code>gruntfile.js</code>.
Diese fehlt allerdings noch. Also legen Sie sie im Wurzelverzeichnis des Projektes mit einem Texteditor Ihrer Wahl an
(WebStorm: <code>File</code>/<code>WebStorm</code> → <code>New</code> → <code>File</code>):

'''<code>gruntfile.js</code>'''
<source lang="javascript">
module.exports = function(grunt)
{
// Project configuration.
grunt.initConfig
({
pkg: grunt.file.readJSON('package.json'),
});
};
</source>

Diese Datei ist noch ziemlich leer, aber das wird sich ändern.

Vorausschauend sollten Sie eine überflüssige WebStorm-Fehlerprüfung deaktivieren, da anderenfalls künftige
Änderungen an der Datei <code>gruntfile.js</code> jedes Mal eine Fehlermeldung zur Folge haben, wenn die
Datei in ein SVN-Repository geschrieben werden soll:

* <code>File</code>/<code>WebStorm</code> → <code>Settings</code>/<code>Preferences</code> → <code>Editor</code> → <code>Inspections</code>
* <code>JavaScript</code> aufklappen → <code>General</code> aufklappen → <code>Unused global symbols</code> deselektieren
* <code>OK</code>

===Babel===

Das Compiler „Babel“<ref>Babel: https://babeljs.io/</ref> wurde geschaffen, da die meisten Browser zwar ECMAScript 5.1
unterstützten<ref>ECMAScript 5 compatibility table: https://kangax.github.io/compat-table/es5/</ref>,
aber nicht die Nachfolgesprachen ECMAScript 2015, ECMAScript 2016 und ECMAScript 2017.
Dies hat sich in jüngster Zeit deutlich gebessert. Die meisten Browser unterstützen diese Sprachen in der Zwischenzeit
sogar besser als Babel.<ref>ECMAScript 6 compatibility table: https://kangax.github.io/compat-table/es6/</ref><ref>ECMAScript 2016+ compatibility table: http://kangax.github.io/compat-table/es2016plus/</ref>.

Allerdings verstehen die meisten Browser derzeit die sehr wichtigen Export- und Import-Befehle noch nicht.<ref>Export-Statement: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/export</ref><ref>Import-Statement: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import</ref>

In solchen Fällen kommt Babel zum Einsatz. Babel übersetzt moderneren ECMAScript-Code in älteren ECMAScript-Code.
(Da „Babel“ den Code nicht in eine maschinennähere Sprache sondern nur in eine alternative ECMAScript-Version übersetzt,
sagen viele Nutzer „Transpiler“ an Stelle von „Compiler“.) Auf diese Weise wird erreicht, dass eine deutlich größere Anzahl von Browsern
den Code ausführen kann.

Babel wurde selbst in ECMAScript geschrieben und liegt in Form von Node.js-Paketen vor.<ref>babel-cli: https://www.npmjs.com/package/babel-cli</ref><ref>babel-preset-env: https://github.com/babel/babel-preset-env</ref><ref>grunt-babel: https://github.com/babel/grunt-babel</ref>
Installieren Sie diese zunächst:

<source lang="bash">
npm install --save-dev grunt babel-cli babel-preset-env grunt-babel
</source>

Nun muss Babel noch konfiguriert werden. Theoretisch könnten Sie den Übersetzer einfach von der Kommandozeile aus
aufrufen (da ein Command Line Interface – CLI vorliegt). Aber das ist auf dauer etwas mühsam. Besser ist es
einen Grunt-Task zu definieren, der diese Aufgabe übernimmt.

Andern Sie den Inhalt der Datei <code>gruntfile.js</code>:

<source lang="javascript">
module.exports = function(grunt)
{
// Project configuration.
grunt.initConfig
({
pkg: grunt.file.readJSON('package.json'),

babel:
{
options:
{
"sourceMap": true
},
dist:
{
files:
[{
"expand": true,
"cwd": "src/js",
"src": ["**/*.js"],
"dest": "web/js/",
"ext": ".js"
}]
}
},
});

// Register task(s)
grunt.loadNpmTasks("grunt-babel");

// Default task(s).
grunt.registerTask("default", ["babel"]);
};
</source>

Die Babel-Konfiguration bewirkt, dass alle Dateien mit der Endung <code>.js</code>, die sich
vom Projekt-Wurzelverzeichnis <code><ROOT></code> aus gesehen im Ordner <code>src/js</code> oder einem darin enthaltenen Unterordner befinden,
mit Hilfe von Babel übersetzt und in den Ordner <code><ROOT>/web/js</code> kopiert werden. Dort erhalten sie ebenfalls die Endung <code>.js</code>.<ref>Grunt – Building the files object dynamically: https://gruntjs.com/configuring-tasks#building-the-files-object-dynamically</ref>

Mit Hilfe des Befehle <code>grunt.loadNpmTasks("grunt-babel");</code> wird
der Task registriert. Er kann ab sofort im Wurzelverzeichnis des Projektes mit dem
Befehl <code>grunt babel</code> aktiviert werden. Der Befehl
<code>grunt.loadNpmTasks("grunt-babel");</code> sorgt dafür, dass
der Task <code>babel</code> zur Liste der Default-Aktionen von Grunt hinzugefügt wird.
Das heißt, wenn man <code>grunt</code> ohne Argument aufruft, wird der
Babel-Task ebenfalls ausgeführt.<ref>Grunt API: https://gruntjs.com/api/grunt</ref>

Um Babel zu testen erzeugen Sie die Datei <code>src/js/main.js</code>:
* <code>File</code>/<code>WebStorm</code> → <code>New</code> → <code>Directory</code>/<code>File</code>
Fügen Sie folgenden EcmaScript-6-Code ein:

<source lang="javascript">
let evens = [0, 2, 4, 6, 8],
odds = evens.map(langer_parameter_name => langer_parameter_name + 1),
pairs = evens.map(v => ({ even: v, odd: v + 1 }));

let name = "Anna";

console.log(evens);
console.log(odds);
console.log(pairs);
console.log(`Hello ${name}!`);
</source>

Diese Datei können Sie in WebStorm direkt ausführen:
* Im Dateibaum Rechtsklick auf <code>src/js/main.js</code> → <code>Run 'main.js'</code>
Das Ergebnis sehen Sie im Konsolfester von WebStorm, da Node.js schon zu 99% ECMAScript-2015-kompatibel ist.<ref>Node.js ES2015 Support: http://node.green/</ref>

Nun können Sie die Datei <code>src/js/main.js</code> mit Hilfe von Babel übersetzen.
Rufen Sie einfach einmal im Terminal einen der beiden Befehle <code>grunt babel</code> oder einfach nur <code>grunt</code> im
Wurzelverzeichnis des Projektes auf. Sie werden anschließend feststellen, dass ein Ordner
<code>web/js</code> angelegt und in diesen eine Datei namens <code>main.js</code>
eingefügt wurde. Wenn Sie sich den Inhalt dieser Datei ansehen, stellen Sie fest,
dass sich sich nicht von der Datei <code>src/js/main.js</code> unterscheidet.

Das ist nicht weiter verwunderlich, das Babel default-mäßig gar keine Veränderungen vornimmt.
Sie können sehr feingranular bestimmen, welche Übersetzungen stattfinden sollen.
Erstellen Sie im Wurzelbezeichnis des Projektes die Datei <code>.babelrc</code>
und fügen Sie folgenden Code ein:

<source lang="json">
{
"presets": ["env"]
}
</source>

Wenn Sie jetzt den Befehl <code>grunt</code> noch einmal ausführen, werden Sie feststellen,
dass sich <code>src/js/main.js</code> und <code>web/js/main.js</code> deutlich unterscheiden.
Die Datei <code>web/js/main.js</code> enthält nun astreinen ECMAScript-5-Code. Diesen können Sie
in WebStorm natürlich auch problemlos ausführen. Und in der Konsole werden dieselben Informationen
ausgegeben wie zuvor von <code>src/js/main.js</code>.

Babel kann den erzeugten Code auch noch gleich komprimieren, das heißt, überflüssige
Kommentare, Leerzeichen und Zeilenumbrüche entfernen, lange Variablen-, Funktions- und Parameternamen
durch kurze ersetzen, wann immer dies möglich ist, etc. Dafür benötigt man die
Node.js-Pakete <code>babel-minify</code> und <code>babel-preset-minify</code>.<ref>babel-minify: https://github.com/babel/minify</ref><ref>babel-preset-minify: https://www.npmjs.com/package/babel-preset-minify</ref>

<source lang="bash">
npm install --save-dev babel-minify babel-preset-minify
</source>

Wenn Sie nun den Inhalt der Datei <code>.babelrc</code> durch Folgenden Code ersetzen,
<source lang="json">
{
"presets": ["env", "minify"]
}
</source>
wird <code>main.js</code>mittels <code>grunt babel</code> nicht nur in ECMAScript 5 übersetzt, sondern auch noch komprimiert.

Wird dagegen
<source lang="json">
{
"presets": ["minify"]
}
</source>
geschrieben, wird die Datei nur komprimiert, der ECMAScript-2015-Code bleibt hingegen erhalten.

===Automatische Dateierzeugung mittels Grunt===

Einen Nachteil hat die Lösung mit der Übersetzung von Dateien noch.
Jedesmal wenn man eine Änderung an <code>src/js/main.js</code> vornimmt, muss man
den Befehl <code>grunt</code> aufrufen, um <code>web/js/main.js</code> zu erzeugen.
Das ist lästig und fehleranfällig. Besser ist es, bei jeder Änderung der Datei <code>src/js/main.js</code>
die Datei <code>web/js/main.js</code> automatisch zu erstellen. Dies geht mit Hilfe des Node.js-Pakets
<code>grunt-contrib-watch</code><ref>grunt-contrib-watch: https://github.com/gruntjs/grunt-contrib-watch</ref>:

<source lang="bash">
npm install --save-dev grunt-contrib-watch
</source>

Fügen Sie nun in die Datei <code>gruntfile.js</code> hinter
dem <code>babel</code>-Block folgenden
Block ein:

<source lang="json">
watch:
{
js:
{ files: ['src/js/**/*.js'],
tasks: ['babel']
}
},
</source>

Anschließend müssen Sie den Watch-Task in derselben Datei noch mittels

<source lang="json">
grunt.loadNpmTasks('grunt-contrib-watch');
</source>
registrieren. Das war es schon. Wenn Sie jetzt den Watch-Task mittels
<code>grunt watch</code> in einer Konsole im Wurzelverzeichnis des Projekts starten,
wird jedesmal, wenn Sie eine Änderung an der Datei <code>src/js/main.js</code>
vornehmen und diese speichern, wird die Datei <code>web/js/main.js</code> automatisch erstellt.
Versuchen Sie es.

Sie können noch diverse weitere Grunt-Tasks automatisch ausführen lassen,
wenn Sie sie in die Watch-Liste eintragen. Solange der Watch-Task läuft, brauchen
Sie also nichts weiter zu tun, als Ihre Sourcen zu bearbeiten und die erzeugten
Dateien ({{iAllg}} im Browser) zu testen. Sie können den Watch-Task jederzeit
beenden um andere Befehle im WebStorm-Terminal auszuführen.
Sie können aber auch ein zweites Terminal öffnen ({{zB}} eine Git-Bash) und diesen
Prozess dauerhaft laufen lassen, solange Sie an Ihrem Projekt arbeiten.


==Quellen==
<references/>
<ol>
<li value="18"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
[[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]]
[[Kategorie: HTML5-Beispiel]]
[[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
[[Kategorie:Praktikum:MMProg]]