HTML5-Tutorium: JavaScript: Hello World 04

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
v01_1: index.html (HTML validate, CSS validate, Google PageSpeed)
v01_2: index.html (HTML validate, CSS validate, Google PageSpeed)
v01_3: index.html (HTML validate, CSS validate, Google PageSpeed)
v01_4: index.html (HTML validate, CSS validate, Google PageSpeed)
v01_5: index.html (HTML validate, CSS validate, Google PageSpeed)

Git-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 (vgl. Programmierprinzipien).

Modularisierung

Eine Anwendung, wie z. B. ein HTML5-Spiel, besteht aus diversen unterschiedlichen Komponenten mit ganz unterschiedlichen Aufgaben. Bei einem Web-Frontend müssen beispielsweise verschieden Komponenten (Buttons, Scrolbars, Textfelder, Datumsfelder etc.) erstellt werden. 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 Spielentwicklung und teilweise während der Spielausführung (Runtime) erfolgt.

An der Entwicklung eines Web-Systems oder 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 eine Anwendung 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.

Je mehr Dateien von unterschiedlichen Autoren erstellt werden, desto größer ist die Gefahr, dass es beim Zugriff auf globale Variablen zu Namenskollisionen kommt. Außerdem weiß niemand, welche globale Größe noch benötigt wird und welche nicht. Sicherheitshalber löscht man daher keine dieser Variablen, auch wenn sie vollkommen veraltet sind.

Daher gilt der Grundsatz: Verwende so wenig globale Größen wie möglich.

Erstellen eines neuen Projekts

Erstellen Sie ein neues Projekt hello_world_04 als Fork von hello_world_03 (siehe Hello-World-02-Tutorium).

Die App

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 web-Verzeichnis Ihres Projekts folgende Ordner an:

• web/css: Hier werden die eigentlichen 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 ist das hier nicht notwendig. Es wird nur die Dateien „head.css“ und „body.css“ geben. Verschieben Sie die Datei web/main.css in diesen Ordner.
• web/js: Hierher kommen die JavaScript-Dateien, die von der Anwendung benötigt werden. Verschieben Sie die Datei web/main.js in diesen Ordner.

Nehmen Sie in der Datei web/index.html folgende beiden Ersetzungen vor:

• main.css → css/main.css
• main.js → js/main.js

Wenn Sie jetzt die Datei index.html mit dem Live Server ausführen, sollte Ihre Anwendung wieder funktionieren.

Sollte dies der Fall sein, so sollten Sie die Änderungen committen und evtl. auch gleich per git push auf den Git-Server hochladen. Es schadet übrigens nie, vor einen Commit oder gar einen Push noch einmal zu überprüfen, ob die Anwendung noch läuft.

Modularisierung der Datei main.js

Dateien wie die ECMAScript-Datei main.js aus dem dritten Teil des Tutoriums werden sehr schnell groß, wenn man alle Funktionalität in diese eine Datei einfügt. Dies reduziert die Lesbarkeit und die Wartbbarkeit des Codes. Bertrand Meyer, einer der wesentlichen Begründer der modularen und objektorientierten Programmierung, fordert, dass ein Programmcode in sogenannte Module zerlegt werden sollen. Ein Modul stellt eine gewisse Funktionalität zur Verfügung. Die zugehörigen Funktionen werden exportiert und können von anderen Modulen importiert werden, sofern sie diese Funktionalität zur Erfüllung ihrer Aufgabe benötigen. Meyer hält es für sinnvoll, dass ein Modul jeweils nur eine oder sehr wenige Aufgaben erfüllt. Damit können Module von vielen anderen Modulen wiederverwendet werden.

Die Datei main.js wird im Sinne von Meyer in zwei Teile aufgespalten: greet.js und main.js. Die erste Datei enthält die eigentliche Begrüßungsfunktionalität, die zweite initialisiert die App, d. h. aktiviert die Begrüßungsfunktiontionalität.

Erstellen Sie die JavaScript-Datei web/js/greet.js und verschieben Sie die beiden Funktionen sayHello und sayHelloOnEnter (jeweils samt Funktionsrumpf :-) ) in diese Datei.

Schreiben Sie vor jede der beiden Funktionsdefinitionen das Schlüsselwort export. Mit dieser ES-6-Anweisung legen Sie fest, dass die beiden Funktionen von anderen ES-6-Dateien mittels eines Import-Befehls importiert werden können. (Funktionen ohne Export-Anweisung könnten von anderen ES-6-Dateien nicht importiert werden.)

In der Datei web/js/main.js werden jetzt diese beiden Funktionen importiert. Fügen Sie ganz am Anfang der Datei (d. h. vor der verbliebenen Init-Funktion) die folgende Import-Anweisung ein:

import * as greet from './greet.js';

Damit wird erreicht, dass alle (*) Elemente, die in der Datei greet.js exportiert werden, unter ihrem jeweiligen Namen im Objekt greet gespeichert werden. Das heißt, innerhalb der Datei main.js gibt es nun die beiden Funktionen greet.sayHello und greet.sayHelloOnEnter.

Fügen Sie jetzt noch das Attribut type="module" in das Script-Element in der Datei index.html ein. Damit teilen Sie dem Browser mit, dass Sie die ECMAScript-6-Befehle import und export verwenden möchten.

Anderenfalls hätten sie Zugriff auf alle Objekte, Konstanten, Variablen und Funktionen einer geladenen Datei, so wie die bis ECMAScript 5 üblich war. Das heißt, das Laden einer Datei konnte zu massiven Problemen führen, wenn in zwei verschiedenen Dateien unterschiedliche Objekte etc. zufälligerweise gleich benannt wurden. Um diese Probleme zu umgehen gab es zahlreiche ziemlich aufwändige Hacks. Mit dem Modul-Konzept von ECMAScript gehören diese Probleme der Vergangenheit an.

Damit sollte Ihre Anwendung wieder funktionieren.

Vergessen Sie nicht, Ihr aktuelles Projekt zu committen und auf dem Git-Server zu speichern, sobald alles funktioniert.´

Musterlösung v04_1

Verison v04_1 index.html (HTML validate, CSS validate, Google PageSpeed)

Laden der CSS- und der JavaScript-Dateien

Führen Sie Google PageSpeed für die Musterlösung der vorherigen Teilaufgabe aus und sehen Sie sich an, welche Verbesserungsvorschläge Google macht.

Folgendes findet Google PageSpeed verbesserungswürdig:

1. Ressourcen entfernen, die das Rendering blockieren.
   Mögliche Einsparung von 300 ms.
2. Verkettung kritischer Anfragen vermeiden
   2 Ketten gefunden
3. [Largest Contentful Paint-Element 1.350 ms https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint?hl=de]
4. Dokument enthält keine Meta-Beschreibung

Anmerkung: Google Pagespped ist auch über die Chroeme-Entwickler-Konsole zugänglich. Damit können auch lokale Server (<ocde>localhost o. Ä.) getestet werden. Echte Prformanzprobleme erkennt man aber eher, wenn man seinen Live-Server testet.

Eine Meta-Beschreibung hinzuzufügen, ist kein Problem. Fügen Sie folgende Zeile in den Head-Bereich der HTML-Datei ein.

<meta name="description" 
      content="A Hello World application that demonstrates best practices for HTML, CSS, and JavaScript files."
>

Das effiziente Laden der JavaScript- und CSS-Dateien ist viel komplexer, aber auch viel wichtiger, da die CSS- und JavaScript-Dateien werden im Laufe der Zeit immer zahlreicher und/oder größer werden. Diese Dateien zu laden, dauert seine Zeit. Auch das Laden von vielen kleinen Dateien dauert deutlich länger, als das Laden einer einzigen großen Datei. Das aber widerspricht der Modularisierung, die wir vorher vorgenommen haben. Modularisierung und Performance widersprechen sich zunächst einmal.

In Web-Anwendung aus dem dritten Teil des Tutoriums stehen die Verweise auf die CSS- und JavaScript-Dateien im head-Bereich des Dokuments. Die CSS-Datei wird vollständig geladen, bevor der body-Bereich eingelesen wird. Die JavaScript-Datei main.js wird dagegen parallel zum Body-Bereich geladen. Dies wird durch die Angabe von async im Script-Tag wird erreicht.

Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments darstellen kann, solange er die CSS-Datei (und evtl. weitere Dateien wie Fonts, Hintergrundbilder etc.) 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 (und durch die Angabe von async auch machbar), 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: https://de.wikipedia.org/wiki/Ampel

Was also machen?

CSS-Dateien

Damit das Problem mit dem falschen Layout nicht auftritt, empfiehlt Google (PageSpeed Insights), ganz wenige, wichtige CSS-Befehle direkt – d. h. als CSS-Befehle innerhalb eines style-Elements – in dem HTML-Head-Bereich einzufügen. Alle anderen CSS-Anweisungen sollen erst am Ende der HTML-Datei dynamisch mittels JavaScript (oder mittels des PageSpeed-Optimization-Modul von Google) gelesen werden.

PageSpeed Insights (für Musterlösung v04_1):

Ressourcen blockieren den First Paint deiner Seite. Versuche, wichtiges JS und wichtige CSS inline anzugeben und alle nicht kritischen JS und Stile zurückzustellen.

Gehen Sie so vor, wie es Google empfohlen hat. Genauer gesagt, gehen Sie so vor, wie es unter Multimedia-Programmierung: Best Practices beschrieben ist. In diesem und den folgenden Tutorien werden die dort beschriebenen Prinzipien berücksichtigt.

Legen Sie die Datei src/css/head.css an und fügen Sie folgenden (sehr kurzen!) Code ein:

body
{ background-color: #C5EFFC; }

.hidden
{ display: none; }

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

<link rel="stylesheet" href="css/head.css"/>

anpassen. Das heißt, Sie laden im HTML-Head-Bereich nur noch die kleine CSS-Datei. Damit funktioniert Ihre Web-Anwendung derzeit nur noch rudimentär: Es gibt kaum noch CSS-Anweisungen, die berücksichtigt werden. Noch besser ist es gemäß den Google-Empfehlungen, wenn man die CSS-Regeln direkt in die HTML-Datei einfügt. Ersetzen Sie also das Link-Element durch folgendes Style-Element:

<style>
body
{ background-color: #C5EFFC; }

.hidden
{ display: none; }
</style>

In der Datei src/css/main.css können Sie nun das .hidden-Element und das Farbattribut background-color: #C5EFFC; entfernen.

Es ist sinnvoll, die Datei main.css in body.css umzubenennen: head.css wird im HTML-Head-Bereich vor dem Body-Bereich geladen, body.css soll parallel zum Body-Bereich geladen werden und dann zur Verfügung stehen, wenn der Body vollständig geladen wurde.

Leider ist CSS-Link-Element nicht möglich, async anzugeben, wie wir dies beim Skript-Element gemacht haben, um JavaScript-Code parallel zum Body-Element zu laden. Hier hilft derzeit nur ein kleiner Hack:

<!-- Load body.css asynchronously, i.e. parallel to the body content. -->
<link rel="preload" href="css/body.css" as="style" onload="this.rel='stylesheet'">

Die Datei body.css wird für den Medientyp style parallel zum HTML-Dokument geladen, aber nicht aktiviert. Um aus dem Inhalt der vorab geladenen Datei für den Browser ein Stylesheet zu machen, muss man den Wert des Attributs rel in 'stylesheet' abändern. Das sollte erst erfolgen, wenn das Dokument vollständig geladen wurde, wenn also das das Fensterobjekt des Browsers, in dem das HTML-Dokument gerendert werden soll, das Ereignis load feuert. Für dieses Ereignis kann man entweder im link-Tag den Händler onload einfügen oder man schreibt den Aktivierungsbefehl in die Init-Funktion in der Datei main.js.

Für die zweite Variante sollte man dem link-Element eine eindeutigen Identifikator zuweisen:

<link id="body_css" rel="preload" href="css/body.css" as="style">

Danach kann man den Aktivierungsbefehl in die Funktion init in der Datei main.js einfügen.

document.getElementById('body_css').rel = 'stylesheet';

Zusammenfassung:

• In head.css stehen möglichst wenig CSS-Anweisungen. Sie sollten ausreichen, um die aktuelle Seite “above the fold” („über dem Zeitungsknick“) fehlerfrei zu rendern. Das heißt, es sollte alles korrekt gerendert werden, was nach dem Laden im größtmöglichen Browserfenster sichtbar ist.
• Der Inhalt der head.css sollte direkt in den Head-Bereich der HTML-Seite eingefügt werden.
• Die restlichen CSS-Anweisungen werden in die Datei body.css eingetragen.
• Diese Datei wird mittels eines kleinen Hacks asynchron, d. h. parallel zum Body-Element geladen.

index.html

Da die Datei head.css nur die Hintergrundfarbe sowie die .hidden-Regel enthält, sollten alle HTML-Elemente, die gerendert werden sollen, zunächst unsichtbar gemacht werden. Bei einer Web-Anwendung, wie einem Spiel, die zum Laden länger braucht, könnte man eine Sanduhr oder einen Ladebalken einfügen, um anzuzeigen, dass man noch etwas warten muss. Üblicherweise, sollte man dafür sorgen, dass das Laden einer Seite so schnell geht, dass der Benutzer gar nicht erst ungeduldig wird.

Fügen Sie die CSS-Klasse hidden in beide HTML-Sektions ein:

<section id="section_form" class="hidden">
...
</section>
<section id="section_hello" class="hidden">
...
</section>

Wenn man jetzt das Dokument im Browser öffnet, sieht man nichts, außer einem hellblauen Hintergrund.

Abhilfe schafft hier ein kleiner JavaScript-Befehl, der hidden von der Eingabe-Section hidden-form entfernt, sobald das Dokument vollständig geladen wurde (samt allen CSS- und JavaScript-Dateien):

document.getElementById('section_form').classList.remove('hidden');

An welche Stelle dieser Befehl eingefügt wird, erfahren Sie im nachfolgenden Abschnitt.

JavaScript-Dateien

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden, sondern das Laden „aufzuschieben“. Das machen wir bereits mit Hilfe des Async-Attributs.

Fügen Sie nun den zuvor erwähnten Befehl

document.getElementById('section_form').classList.remove('hidden');

als letzen Befehl in den Rumpf der Funktion init in der Datei web/js/main.js ein.

Wenn Sie jetzt die Web-App starten, sollte sie wieder funktionieren.

Was haben Sie erreicht? Solange die Anwendung geladen wird, sehen Sie nur einen blauen Hintergrund ohne Inhalt, bzw. i. Allg. einen so genannten Splash Screen. Wenn dann alles, d. h. alle CSS- und JavaScript-Dateien geladen wurden, wird die eigentliche Anwendung sichtbar.

Vergessen Sie nicht: Commit!

Verbesserung der Init-Funktion

Bislang sieht die Init-Funktion folgendermaßen aus.

function init()
{ document.getElementById('button_submit')
          .addEventListener('click', greet.sayHello);
  window.addEventListener('keydown', greet.sayHelloOnEnter);

  document.getElementById('body_css').rel = 'stylesheet';

  document.getElementById('section_form').classList.remove('hidden');
}

Man kann auch einen anderen Import-Befehl verwenden, um auf das Objekt greet verzichten zu können.

import { sayHello, sayHelloOnEnter } from './greet.js'
 
function init()
{ document.getElementById('button_submit')
          .addEventListener('click', sayHello);
  window.addEventListener('keydown', sayHelloOnEnter);

  document.getElementById('body_css').rel = 'stylesheet';

  document.getElementById('section_form').classList.remove('hidden');
}

Darüber hinaus kann man die Autofokus-Funktionalität verbessern. Das Autofokus-Attribut reagiert laut HTML-Standard nur in manchen Situation. Wenn man die Situationen selbst definiert werden, in den Autofokus aktiv wird, muss man den Fokus per JavaSript setzen, sobald eine dieser Situationen eintritt.

function autofocus()
{ document.getElementById('input_name').focus();   
}

function reset()
{ document.getElementById('input_name').value = '';
  autofocus();  
}

function init()
{ // Say hello, if the submit button is clicked or the buttoen 'Enter' is pressed.
  document.getElementById('button_submit').addEventListener('click', sayHello);
  window.addEventListener('keydown', sayHelloOnEnter);

  // Set the focus it the window is reentered.
  window.addEventListener('visibilitychange', autofocus);
  
  // If the reset button is clicked, not only the textares are reset but also the focus is replaced.
  document.getElementById('button_reset').addEventListener('click', reset);

  // Activate the body css file that had been preloaded asynchronously.
  document.getElementById('body_css').rel = 'stylesheet';

  // Now that all files have been loaded, the app can be started.
  // So the form is made visible!
  document.getElementById('section_form').classList.remove('hidden');
  autofocus();
}

Musterlösung v04_2

Verison v04_2 index.html (HTML validate, CSS validate, Google PageSpeed)

Weitere Modularisierung

Teilen Sie die Datei greet.js in zwei Dateien greet.js und greet_on_enter.js mit jeweils eines Funktion auf, um dem Single Responsibility Principle zu genügen. Versuchen Sie weitere Modularisierungsmöglichkeiten zu finden, um dem Single Responsibility Principle noch besser zu genügen.

Musterlösung:
v03: index.html, Git: v04_3
v04: index.html, Git: v04_4

Konfigurierbarkeit

Entfernen Sie programmspezifische Konstanten aus den JavaScript-Dateien und definieren Sie diese in einer Datei config.js oder (sehr viel besser) config.json, um dem Prinzip der Konfigurierbarkeit zu genügen.

Musterlösung:
v03: index.html, Git: v04_5

Ich verwende hier die Funktionen getJson und controlerKey (bzw. die allgemeinere Variante ControllerKey, eine ECMAScript-Klasse), die erst später eingeführt und erklärt werden.

Die Musterlösung müsste noch ausgebaut werden:

• Für die Internationalisierung müsste eine interaktive Auswahlmöglichkeit geschaffen werden. Zurzeit kann der Sprachwechsel nur erfolgen, indem in main.js der Array-Zugriff ["de"] durch ["en"] ersetzt wird.
• Für die Internationalisierung müssten eigene Module zur Verfügung gestellt werden.

Fortsetzung des Tutoriums

Wenn man die Anwendung noch einmal mit Google testet, erhält man eine neue Empfehlung

[1], [2], [3], [4]:

• Verkettung kritischer Anfragen vermeiden – 1/2/4/5 Ketten gefunden
• Halten Sie die Anfrageanzahl niedrig und die Übertragungsgröße gering – 5 Anfragen • 5 KiB.

Anmerkung: Die aktuelle Version von PageSpeed Insights zeigt die zweite Empfehlung nicht mehr an, vermutlich weil das Hello-World-Beispiel so klein ist, dass die vorgeschlagene Verbesserung keine Vorteile mehr bringt. Wir beachten die ehemalige Empfehlung trotzdem.

Das heißt, wir sollten die verschiedenen Dateien main.js, greet.js etc. wieder zu einer Datei zusammenfügen. Und wir sollten alle Dateien komprimieren: Überflüssige Kommentare, Leerzeichen und Zeilenumbrüche löschen, lange Variablen-, Konstanten- und Funktionsnamen verkürzen etc.

Dies machen wir im 5. Teil des Tutoriums. Wenn man die Vorschläge von Google beachtet, beschleunigt dies die Übertragung der Dateien vom Server zum Client, macht aber den Code unlesbar. Die Zusammenführung zweier Dateien widerspricht dem Prinzip der Modularisierung. Das Entfernen von Kommentaren, Leerzeichen und Leerzeilen ist aus Entwickler-Sicht vollkommen kontraproduktiv.

Daher hat es sich eingebürgert, modularen Code mit Kommentaren und Leerzeichen zu schreiben. Dieser wird dann, bevor er an einen Browser übergeben wird automatisch zusammengefasst und komprimiert (minifiziert).

Sie sollten nun Teil 5 des Tutoriums bearbeiten. Dort erfüllen wir die Google-Vorgaben mittels vite, einem mächtiges Werkzeug zur Umwandlung von Web-Dateien. Leider ist die Konfiguration dieses Werkzeugs sehr komplex.

Quellen

1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)