Libraries

Libraries (Bibliotheken) sind wiederverwendbare Codeblöcke. Diese Codeblöcke müssen nicht Open Source sein.

Ein Codeblock in einem separaten JavaScript-File ist quasi eine Bibliothek.

Two Types of Libraries

• Automatische Bibliotheken
• Manuelle Bibliotheken

Automatic Libraries

Automatische Bibliotheken führen den Code automatisch aus, sobald die Bibliothek geladen wird. Wir brauchen diese Bibliotheken also nur zu importieren, und alles läuft automagisch ab.

Ein gutes Beispiel dafür sind Polyfills. Diese finden fehlende Funktionen im Browser und stellen Support dafür bereit. Dafür muss nur eine JavaScript-Datei inkludiert, aber kein Code geschrieben werden.

Komponenten können ebenfalls in automatische Bibliotheken umgewandelt werden. Dafür muss

1. HTML und CSS laut der Dokumentation der Komponente geschrieben und
2. die entsprechende JavaScript-Datei geladen werden
3. der Rest sollte von selbst gehen …

Manuelle Bibliotheken

Manuelle Bibliotheken benötigen JavaScript. Dafür müssen wir zwei Dinge tun:

1. die JavaScript-Datei laden
2. die Funktion(en) der Bibliothek manuell im JavaScript-Code aufrufen

Die meisten Bibliotheken funktionieren nicht ohne Input des Benutzers.

Ein Beispiel ist DOMPUrify (sanitizes an HTML-String, man muss also einen HTML-String übergeben), ein anderes ist zlFetch (man übergibt einen Endpoint und zlFetch macht einen Request).

Komponenten können auch in Manuelle Bibliotheken umgewandelt werden. Diese werden charakterisiert durch:

• viele Konfigurationsoptionen
• User können eigenen Code (über Callbacks) ausführen
• User können instance methods verwenden

Should you build an Automatic or Manual Library?

Automatische Bibliotheken sind leichter zu nutzen, aber der User hat weniger Kontrolle darüber. Er muss sich genau an die HTML- und CSS-Vorgaben halten.

How to include libraries in your project

Es gibt drei Wege, wie man Bibliotheken einbindet:

1. mit dem <script>-Tag
2. mit ES6 Modulen
3. mit dynamischen Importen