JavaScript, jQuery und AngularJS im Vergleich
Mit Javascript, jQuery und AngularJS kann «Dynamik» in eine Website gebracht werden. Worin genau die Unterschiede liegen, erklärt Alex Kereszturi in seinem Beitrag.
Für Einsteiger habe ich in einem vorangegangenen Blogbeitrag erklärt, was im Grossen und Ganzen die Unterschiede zwischen reinem JavaScript und jQuery sind. In diesem Beitrag möchte ich gerne für die etwas versierteren Leser JavaScript, jQuery und AngularJS mittels eines kleinen Beispiels vergleichen.
Die weniger geübten Leserinnen und Leser lade ich gerne ein, sich von der Fülle an technischen Begriffen verzaubern zu lassen und nichtsdestotrotz das eine oder andere aus dem Beitrag mitzunehmen.
Die Aufgabenstellung
Auf einer HTML-Seite befinden sich ein DIV-Tag, ein SPAN-Tag und ein Textfeld (INPUT). Der Inhalt des DIV-Tags soll immer dem Inhalt des Textfelds entprechen. Der Inhalt des SPAN-Tags zeigt die Anzahl der im Textfeld eingegebenen Zeichen.
Vorarbeiten: der HTML-Code
Die Anforderungen bedingen mindestens die drei erwähnten Tags, die ich für dieses Beispiel folgendermassen umsetze und ergänze:
Lösung 1: reines JavaScript
Ich würde als Auslöser für meine Berechnungen und Veränderungen im HTML-Code gerne den OnKeyUp-Event des Textfelds verwenden – also den Zeitpunkt, wenn der User gerade etwas ins Textfeld eingibt und eine Taste auf der Tastatur losgelassen wird. Dazu schnappe ich mir aus dem Document Object Model der Seite das Input-Feld und setze als Event-Handler eine anonyme Funktion. Wer jetzt nur «Bahnhof» versteht, darf trotzdem gerne weiterlesen. Auf den Zeilen, die mit «//» beginnen, habe ich versucht, Kommentare für Nicht-Entwickler zu schreiben, damit man halbwegs versteht, was da als Code geschrieben wird:
Vereinfacht (also für versierte JavaScript-Menschen) sieht das so aus:
Jetzt fehlt eigentlich nur noch «etwas Gescheites», nämlich das, was effektiv passieren soll:
Das komplette JavaScript sieht somit folgendermassen aus:
Zwischenbericht: was alles zu tun ist
Fassen wir zusammen, was alles getan wurde, damit wir nachher die Lösungen in jQuery und AngularJS besser mit dieser ersten Lösung vergleichen können:
- > Warten, bis das Fenster bzw. das Dokument vollständig geladen ist
- > Das INPUT-Feld schnappen
- > Einen Event-Handler auf das INPUT-Feld setzen
- > Das DIV-Element schnappen und dessen Inhalt ändern
- > Das SPAN-Element schnappen und dessen Inhalt ändern
Hier das Resultat mit JavaScript
Lösung 2: jQuery – weniger (Code) ist mehr
Erst einmal stellen wir sicher, dass jQuery eingebunden ist:
Danach können wir den Code wie folgt vereinfachen:
Was genau ändert sich?
Wir sehen, dass der Vorteil von jQuery insbesondere beim Selektieren von Elementen innerhalb des Document Object Models bemerkbar ist. Der Slogan von jQuery «write less, do more» zeigt sich hier sehr schön. Was ich aber immer noch zu tun habe, ist das Umsetzen der Logik: Wann passiert was, wodurch ausgelöst.
Zwischenbemerkung für Anfänger oder Laien:
Wenn Sie jetzt vor lauter «impliziter Iteration» und «Method-Chaining» das Gefühl haben, diesen Blog-Beitrag verlassen zu müssen, schreiben Sie doch vorher noch die nicht verstandenen Begriffe in einen Kommentar unten. Wer weiss, vielleicht liefert das guten Stoff für einen nächsten Beitrag. Danke!
Lösung 3: AngularJS – alles schon funktionsbereit
Der Lösungsansatz mit AngularJS ist denkbar einfach, wenn AngularJS eingebunden und initialisiert ist. Dazu binden wir AngularJS in die HTML-Seite ein:
Und wir ergänzen den HTML-Tag BODY um das Attribut NG-APP, damit AngularJS auf dieser Seite auch initialisiert wird:
Danach brauchen wir tatsächlich keine einzige Zeile JavaScript zu schreiben, sondern lediglich den HTML-Code folgendermassen anzupassen:
Wie löst AngularJS die Aufgaben?
Hier das Resultat mit AngularJS
Zusammenfassung
JavaScript ist das Salz in der Suppe einer Website. Es ermöglicht Ihnen, Berechnungen durchzuführen und das Document Object Model zu manipulieren.
jQuery ist eine intelligente Anwendung von JavaScript, sozusagen eine Streuwürze, die «besser schmeckt», weil sie vieles (z.B. das Selektieren von Elementen) vereinfacht und eine umfangreiche Sammlung an vorgefertigten Funktionalitäten bietet. Ich muss mit jQuery aber immer noch selbst würzen.
AngularJS nun ist eine Art halbautomatische Würz-Maschine, die gewisse Standardaufgaben ganz von alleine übernimmt.
Wenn JavaScript das Salz in der Suppe einer Webpage ist, jQuery als Streuwürze bezeichnet und AngularJS mit einer halbautomatischen Würz-Maschine verglichen werden kann, dann gilt: Streuwürze kommt nicht ohne Salz aus – so kommt auch jQuery nicht ohne JavaScript aus, ja es ist sogar in JavaScript geschrieben. Und auch eine vollautomatische Würz-Maschine ist auf die Streuwürze und das Salz angewiesen. Auch AngularJS ist in JavaScript geschrieben und integriert sogar jQuery in einer abgespeckten Version.
Es geht meines Erachtens bei einem Vergleich der Technologien also weniger darum, zu fragen «Womit?» – also mit welcher Technologie – wollen wir die Aufgabe lösen. Das wäre so, als ob wir fragen würden, ob wir lieber mit Salz, Streuwürze oder der Würz-Maschine würzen wollen. Die Frage sollte vielmehr lauten: «Was?» wollen wir tun. Fehlt etwas Salz (Logik), also ein, zwei Zeilen JavaScript da und dort? Oder braucht es etwas mehr als Salz, nämlich «Geschmack», also Manipulationen und Veränderungen, oder wollen wir (von Grund auf) eine Single-Page-Web-Applikation aufbauen? Bei Letzterem empfiehlt sich AngularJS.