Multimedia-Programmierung: Best Practices

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

Korrektheit: 4 (großteils überprüft)

Umfang: 2 (wichtige Fakten fehlen)

Quellenangaben: 2 (wichtige Quellen fehlen)

Quellenarten: 3 (gut)

Konformität: 3 (gut)

CSS

• Es gibt CSS-Code, der zu Beginn geladen werden muss, damit der Bereich „above the fold“, also der Bereich, der im größten denkbaren Monitor zu Beginn zu sehen ist, korrekt dargestellt wird. Dieser CSS-Code wird explizit in den HTML-Head-Bereich eingefügt. Es muss möglichst klein sein. (Mittels vite oder eines vergleichbaren Tools kann man dafür sorgen, dass deren Inhalt automatisch in ein style-Element eingefügt wird.)
• Der restliche CSS-Code wird CSS-Dateien bereitgestellt, die eindeutig benannt sind. Diese werden bei Bedarf rechtzeitig dynamisch geladen. Die Namen ändern sich im Laufe der Zeit nicht, um Browser-Caching zu unterstützen..
• Verschiedene HTML-Seiten teilen sich möglichst viele CSS-Dateien. Eine CSS-Datei, die unter einem eindeutigen Namen vom Browser einmal geladen wurde, wird üblicherweise im Browser-Cache gehalten und muss daher kein zweites Mal geladen werden, wenn sie nochmals verwendet wird.
• CSS-Dateien werden in komprimierter Form ausgeliefert (d. h. überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren CSS-Komprimierungstools.

JavaScript

• JavaScript-Code wird niemals explizit in den HTML-Code eingefügt (weder in HTML-Tags noch mittels des script-Elements). Er wird immer in JavaScript-Dateien bereitgestellt, die eindeutig benannt sind. Die Namen ändern sich im Laufe der Zeit nicht, um Browser-Caching zu unterstützen.
• JavaScript-Code wird wann immer möglich asynchron geladen.
• Es ist auch sinnvoll, bestimmte JavaScript-Datein erst bei Bedarf dynamisch mittels JavaScript nachzuladen.
• JavaScript-Dateien werden in komprimierter Form ausgeliefert (d. h. überflüssige Kommentare, Leeerzeichen und Leerzeichen werden entfernt; Variablennamen, Funktionsnamen, Parameternamen werden durch kürzere Namen ersetzt, soweit dies möglich ist). Die Komprimierung erfolgt automatisch mittels des besten verfügbaren JavaScript-Komprimierungs-Tools.

Grundsätzliches

• Don't repeat yourself! (DRY): Vermeide grundsätzlich die Verdopplung von Code. Mehrfach vorhandener Code muss bei notwendigen Änderungen auch mehrfach geändert werden.
• Keep it simple, stupid! (KISS): Schreibe nur Code, der auch benötigt wird. Code, der auf Vorrat angelegt wird, wird häufig nicht benötigt, muss aber trotzdem gewartet werden.

Modularisierung

• Definiere so wenig globale Größen (Variablen und Funktionen) wie möglich, am Besten gar keine.
• Greife auf so wenig globale Größen wie möglich zu, am besten auf gar keine.
• Verwende keine Konstanten im Code, es sein denn, diese können sich garantiert nie ändern.
• Teile eine Anwendung in Module ein:
  • Jedes Modul steht in einer eigenen Datei.
  • Jedes Modul erfüllt nach Möglichkeit eine einzige, wohldefinierte Aufgabe.
  • Jedes Modul greift auf möglichst wenige andere Module zu.
• Halte den Code-Umfang eines jeden Moduls möglichst gering, damit der Code schnell geladen werden kann und bei mobilen Endgeräte kein unnötigen Kosten verursacht (vgl. KISS).

Quellen

2. https://wiki.selfhtml.org/wiki/Webstandards
3. https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil
4. Google (Web): Make the Web Faster; Organisation: Google Developers; https://developers.google.com/speed/; Quellengüte: 3 (Web)
5. http://www.w3schools.com/js/js_best_practices.asp
6. https://www.w3.org/wiki/JavaScript_best_practices
7. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)