HTML5-Tutorium: JavaScript: Hello World 04

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3
(zu größeren Teilen überprüft) 		Umfang: 4
(unwichtige Fakten fehlen) 		Quellenangaben: 3
(wichtige Quellen vorhanden) 		Quellenarten: 5
(ausgezeichnet) 		Konformität: 3
(gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

Musterlösung: index.html, (SVN-Repository)

Anwendungsfälle (Use Cases)

Gegenüber dem 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, d. h. zu modularisieren.

Modularisierung

Eine Anwendung, wie z. B. 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, d. h. 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 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 node_modules 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.

  1. Erstellen Sie ein neues Projekt mit dem Namen „HelloWorld04“
  2. Speichern Sie das Projekt in Ihrem Repository.
  3. Erstellen Sie den Ordner node_modules im Wurzelverzeichnis.
  4. * Die Frage „Do you want to scedule the following directory for addition to Subversion?“ beantworten Sie mit „No“.
  5. Rechtsklick auf node_modules → Subversion → Ignore → Klick auf node_modules
  6. Klick auf das Commit-Icon.

Dadurch, dass Sie das Verzeichnis node_modules 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 npm install 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 node_modules 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 „css“ und JavaScript-Dateien in einen Ordner namens „js“ oder „lib“. 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 Yes):

  • web: Der Inhalt dieses Ordners kommt später auf einen echten Web-Server.
  • src: Der Inhalt dieses Ordners enthält die Ausgangsdateien, die mit Hilfe von Node.js noch transformiert und dann in den Web-Ordner kopiert werden.
  • web/css: Hier wird in den Vorlesungstutorien jeweils nur eine sehr kleine Datei liegen: „initial.css“. 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.
  • web/js: Hierher kopiert Node.js die erzeugten JavaScript-Dateien.
  • src/css: 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 „main.css“ oder „main.scss“ geben.
  • src/js: Hierher kommt die Datei „app.js“, 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.
  • src/js/app: Hier speichern Sie die übrigen von Ihnen geschriebenen JavaScript-Dateien Ihrer Web-Anwendung. In diesem Ordner werden i. Allg. 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 vollen.

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

  • Rechtklick auf den Ordner „mode_modules“ → Mark Directory as → Excluded
  • Rechtklick auf den Ordner „web/js“ → Mark Directory as → Excluded

Kopieren Sie nun aus Ihrer Lösung des dritten Teil des Tutoriums die Dateien „index.html“ und „main.css“ in den soeben erstellten Ordnerbaum und speichern Sie diese unter den Namen „web/index.html“ und „src/css/main.css“

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 head-Bereich des Dokuments. Dieser wird vollständig geladen, bevor der body-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 body-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 hat Google früher ernsthaft emphohlen, die Link-Element ganz ans Ende der HTML-Datei zu stellen, also nach dem schließenden html-Tag. Damit das Problem mit dem falschen Layout nicht auftritt, sollen wichtige CSS-Befehle direkt – d. h. als CSS-Befehle innerhalb eines style-Elements – in die HTML-Datei eingefügt werden.[1]

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 i. Allg. nicht. Aber: Sie können webpack[2] dazu bringen, dies dynamisch zur Laufzeit für Sie nachzuholen. Doch nachzuholen.

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

Legen Sie die Datei web/css/initial.css an und fügen Sie folgenden Code ein: 

body    { background-color: #C5EFFC; }
.hidden { display: none; }

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

In der Datei web/index.html müssen Sie das Link-Element in Header folgendermaßen 

<link rel = "stylesheet" type = "text/css" href = "css/initial.css"/>

anpassen.

JavaScript-Dateien

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden.[3] Dieser Vorschlag ist sehr sinnvoll.

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

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

Fügen Sie außerdem in das erste section-Tag im Body das Attribut class="hidden" 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 app.bundle.js nicht gefunden wird. Dieser Fehler ist nicht weiter erstaunlich, da es diese Datei ja noch gar nicht gibt.

Node.js, Grunt, Babel und webpack

Zum Transformieren und Packen von JavaScript-, JSON- und CSS/SCSS-Datein verwenden wir Grunt[4], Babel[5] und webpack[6]. Grunt und Babel kenn Sie ja schon aus dem Tutorium „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 

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

Achtung: grunt-cil wird auch benötigt. Aber dieses Paket wurde schon im Tutorium „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 package.json und package-lock.json auch im Repository gespeichert werden (Leider erledigt die WebStorm nicht automatisch):

  • Rechtklick auf „package.json“ → Subversion → Add to VCS
  • Rechtklick auf „package-lock.json“ → Subversion → Add to VCS


Quellen

  1. ↑ Google (Web): Make the Web Faster; Organisation: Google Developers; https://developers.google.com/speed/; Quellengüte: 3 (Web), Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
  2. ↑ https://webpack.js.org/
  3. ↑ Google (Web): Make the Web Faster; Organisation: Google Developers; https://developers.google.com/speed/; Quellengüte: 3 (Web), Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/BlockingJS
  4. ↑ Grunt: https://gruntjs.com/
  5. ↑ Babel: https://babeljs.io/
  6. ↑ webpack: https://webpack.js.org/
  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Hello_World_04&oldid=43677“