JavaScript-Frameworks: wozu sie dienen und was sie kosten

Worum es geht

Skript 03, Folien 13 und 14: Wozu Frameworks? Generell bei Frameworks.

Ein Framework (auf Deutsch etwa „Rahmenwerk“) ist fertiger Code, den man in die eigene Seite lädt und auf dem man aufbaut. Die Frage: Wozu nimmt man so etwas, und was spricht dagegen?

So gehen wir vor:

Die Vorteile von Folie 13, mit einem kleinen Beispiel in jQuery.
Die Beispiele der Folie: jQuery, Angular, Vue.js, React, Dojo Toolkit.
Die Nachteile von Folie 14 und das Abwägen.
Eine Klausurfrage zum Thema.

Das Codebeispiel steht nicht auf den Folien; es baut auf Folie 7 auf.

Weniger Code, besser wartbar

Skript · Wozu Frameworks?

Ziel: Mit weniger Code besser wartbare Seiten

ohne Framework:

1window.onload = function() {2  document.getElementById('f3').onsubmit =3    function() { return checkform2(this); };4};

mit jQuery:

1$(function() {2  $('#f3').on('submit', function() { return checkform2(this); });3});

Das Ziel laut Folie: mit weniger Code besser wartbare Seiten, also Seiten, die man leicht ändern und reparieren kann. Unten im Lösungsweg steht der Code von Folie 7 zweimal: oben ohne, darunter mit jQuery, einem verbreiteten Framework.checkform2(f) ist die Prüffunktion von Folie 6: Sie meldet leere Felder t1 und t2 und liefert false, wenn eins fehlt, sonst true.

In jQuery heißt die zentrale Funktion $. $(function() {…}) führt den Code aus, sobald die Seite bereit ist, wie window.onload. $('#f3') findet das Element mit der id f3; das # kommt aus CSS. .on('submit', …) hängt die Funktion an das Event. Beide Fassungen verhalten sich gleich.

Bei vier Zeilen ist die Ersparnis klein. Sie wächst mit jeder weiteren Stelle, an der die Seite Elemente sucht und ändert.

Aus Skript 03, Folie 7: Die komplette Entkopplung setzt onsubmit des Formulars f3 in window.onload.

Browser-Unterschiede verschwinden

Skript · Wozu Frameworks?

Elimination der Abhängigkeiten von Browsern

Verschiedene Browser verstehen JavaScript nicht immer gleich. Ergänzung, nicht auf der Folie: Früher war das schlimm: Ein Event hängte man im Internet Explorer mit attachEvent an, in den anderen Browsern mit addEventListener. Wer selbst schrieb, musste beide Fälle abfangen.

Ein Framework erledigt das intern. Man schreibt einmal .on(…), und das Framework nimmt im jeweiligen Browser den passenden Weg. Das meint die Folie mit „Elimination der Abhängigkeiten von Browsern“.

Schritt 0Worum es geht

Schritt 1Weniger Code, besser wartbar

Schritt 2Browser-Unterschiede verschwinden

Abbildung 1

Worum es geht

Weniger Code, besser wartbar

Browser-Unterschiede verschwinden