Multimedia-Programmierung: Best Practices

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

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“[1], 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

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