01. Juni 2017

jQuery vs. Angular - Unterschiede und Gemeinsamkeiten

Wer sich in der Vergangenheit bereits mit JavaScript auseinandergesetzt hat, hat es vermutlich mitbekommen: Es gibt immer mehr und mehr JavaScript-Frameworks und Libraries. Zwei beliebte Frameworks sind dabei jQuery und AngularJS (bzw. neuerdings nur noch Angular). Doch warum ist das eigentlich so? In diesem Artikel möchten wir diese beiden Frameworks einmal miteinander vergleichen und der Frage nachgehen, warum beide ihre Daseinsberechtigung haben.

Fangen wir mit jQuery an: Genau genommen ist jQuery gar kein JavaScript-Framework, sondern eine JavaScript-Library. Eine gute Definition für den Unterschied zwischen Framework und Library ist dabei die folgende: Eine Library (oder auch Bilbiothek) wird in den eigenen Code integriert, in einem Framework dagegen, integriert man seinen eigenen Code. Hier ist auch schon der erste Vorteil von jQuery zu finden: Die Einbindung ist sehr einfach. An sich braucht man nur eine JavaScript-Datei herunterladen und via <script>-Tag in seine Webseite oder Webapplikation einbinden. Fertig.
Bei Angular dagegen sieht es etwas anders aus. Angular ist tatsächlich ein Framework und so muss man es zunächst einrichten bevor man mit seinem eigenen Code so richtig loslegen kann. Es wird also zunächst der Rahmen für die Webanwendung auf Basis von Angular geschaffen. Dabei helfen sog. Package-Manager und Building-Tools. Package-Manager sind hier dafür zuständig, verschiedene Libraries und Frameworks aus einem zentralen Repository zu laden und dabei auch die Abhängigkeiten zwischen verschiedenen Libraries und deren Versionen zu prüfen (auch praktisch für Updates). Sehr beliebt im Bereich JavaScript ist hier z.B. npm von Node (alternativ gibt es z.B. noch Bower). Die Building-Tools sind danach für das „zusammenbauen“ verantwortlich. Das hat den Vorteil, dass man eine Struktur mit verschiedenen JavaScript-Dateien erstellen kann und diese dann am Ende vom Building-Tool zusammengefügt werden zu einem kompakten Script. Dabei können auch gleich Optimierungen vorgenommen werden, z.B. Minifying oder Preprocessoren (Angular verwendet seit Version 2 standardmässig TypeScript). Solche Building-Tools sind u.a. Gulp, Grunt oder für Angular 2 und höher auch Angular-CLI. Unter dem Strich braucht man für ein Angular-Projekt also einen Package-Manager (npm), ein Building-Tool (Angular-CLI) und etwas Zeit.

So viel also zur Einrichtung beider Frameworks (Wir verwenden jetzt mal der Einfachheit halber diesen Begriff für beide). So gesehen ist der Start mit jQuery deutlich einfacher gestaltet, warum also dann so etwas komplexes wie Angular einsetzen? Zugegeben, die Einrichtung ist gerade für Anfänger ziemlich kompliziert, aber es zahlt sich am Ende aus. Denn dank Preprocessoren und Building-Tools kann man mit Angular deutlich strukturierter arbeiten. So lassen sich z.B. bekannte Strukturen aus dem Bereich von MVC-Frameworks übernehmen, mit Files für Controller, Models etc. Angular ist übrigens ein sog. MVVM-Framework, eine Abwandlung von MVC. Nebenbei sorgt TypeScript für eine schöne Code-Struktur, denn TypeScript erlaubt Typen und Klassen in JavaScript. Zusammengefasst bedeutet das: Bei jQuery haben wir am Ende ggf. nur eine Script-File oder müssen sehr genau darauf achten, in welcher Reihenfolge wir die Script-Files laden. Ggf. müssen wir hier auch selber auf Abhängigkeiten zu anderen jQuery-Plugins achten. Es droht Spaghetti-Code! Bei Angular ist der Code – vorausgesetzt man programmiert sauber – besser strukturiert, unterteilt in Models, Views, Controller und mehr. In der Ausgabe sieht man das übrigens nicht, hier kommt dank den entsprechenden Building-Tools eine grosse unleserliche JavaScript-File heraus, aber der Browser weiss schon etwas damit anzufangen.

Nun zur Handhabung: jQuery ist an sich relativ simpel zu handhaben. Nicht nur in der Einrichtung, sondern auch in der Nutzung. Es gibt irgendein DOM-Element, welches es zu manipulieren gilt. Dieses kann man dank jQuery-Selektoren sehr einfach ansprechen, z.B. über die Klasse oder die ID des Objektes. Danach lassen sich viele nette Dinge machen: Einblenden, Ausblenden, Events (z.B. onClick) und und und… Doch jetzt kommt der Haken: Das alles funktioniert im reinen JavaScript. Geht das etwa anders? Ja, das tut es! Nämlich mit Angular dank des magischen Wortes „Two-Way-Databinding“. Denn hier kann man bereits direkt im HTML dafür sorgen, dass Werte manipuliert werden. Ein ganz einfaches Beispiel: Ich habe einen <span>, darin steht eine Zahl, diese soll hochgezählt werden, wenn ich auf einen Button klicke. Bei jQuery müsste ich nun im JavaScript ein Event auf den Button legen, welcher dann den Wert im <span> ausliest, 1 addiert und den Wert im <span> neu setzt. Alles über das Script. Bei Angular gebe ich einfach eine Variable direkt im HTML als Model an, in etwa so: ng-model=“count“. Nun steht mir im JavaScript diese Variable „count“ zur Verfügung und ich kann sie direkt manipulieren. Ich kann auch auf den Button direkt im HTML das entsprechende Event legen, z.B. so ng-click=“countUp()“. Im JavaScript brauche ich also nur eine Methode countUp() einrichten, die count hochzählt, fertig. Das ganze funktioniert dabei in zwei Richtungen, wenn ich „count“ im HTML manipuliere, ändert es sich im JavaScript, manipuliere ich „count“ im JavaScript, so ändert es sich direkt im HTML. Sehr schön gegenüber gestellt, wird dies auch in diesem etwas älteren Tutorial-Video von AngularJS

Kommen wir zur wichtigsten Frage: Wann setze ich auf Angular und wann setze ich auf jQuery? Die Frage lässt sich nicht so einfach beantworten. Über den Daumen würde ich bei kleineren Projekten bzw. Projekte, die ohne viel JavaScript (auch ohne viele Ajax-Requests etc.) auskommen und eher andere Dinge im Fokus stehen, auf jQuery setzen. Bei grossen JavaScript-Projekten, also Projekte, wo JavaScript im Mittelpunkt steht, da könnte sich Angular besser eignen. Übrigens gehört Angular zu den sog. Single-Page-Application-Frameworks (kurz SPA). Hier wird alles über nur eine Seite dargestellt. Die Darstellung verschiedener Inhalte erfolgt dann über ein- und ausblenden im Browser kombiniert mit Routen. Aber technisch ist es unter dem Strich nur eine Seite im Browser. Das bedeutet Angular ist u.a. geeignet, wenn man z.B. Wizards gestaltet, in denen man von einem Formular zum nächsten springt, und dabei Formulare ein- und ausblendet oder wenn man asynchron mit einem Backend kommuniziert (z.B. über eine REST-API) und entsprechend asynchron Inhalte anzeigt und ausblendet. Ein gutes Beispiel für jQuery dagegen sind z.B. Filter auf einer Webseite. Man hat eine Webseite mit verschiedenen Unterseiten und allem was dazu gehört und eine Seite davon hat eine Liste von Daten. Diese Liste will man nun bequem im Browser filtern. Dafür eignet sich jQuery hervorragend, es wird ein eigenes Script eingebunden, dieses liest die Inhalte via jQuery ein, filtert diese und manipuliert entsprechend die Ausgabe. Alles über eine Script-File. Sobald man aber die Filter mit anderen Operationen koppeln muss, z.B. mit Ajax-Requests, kann es dagegen wieder sehr kompliziert werden.

Zusammengefasst sehen wir, beide Frameworks haben ihre Daseinsberechtigung. jQuery ist etwas leichter im Einstieg und der Handhabung für kleinere Operationen. Sobald es komplex wird, gestaltet es sich mit jQuery deutlich schwieriger. Angular dagegen hat seine Tücken im Einstieg, auch die Lernkurve ist relativ steil. Doch für komplexe Operationen bzw. Seiten, die zu fast 100% auf JavaScript setzen, ist Angular vermutlich die bessere Wahl.



Schreibe einen Kommentar

Bitte achte darauf, alle Felder mit einem Stern (*) auszufüllen. HTML-Code ist nicht erlaubt.

team work2