Müde von AngularJS und seinen Macken? Keine Lust auf TypeScript? Probieren Sie mal VueJS!

01. Februar 2018
VueJS
Denken Sie während des Entwickelns mit AngularJS auch manchmal, dass es sich irgendwie falsch anfühlt? Eine in die Jahre gekommene Technologie soll die Basis für neue und richtungsweisende Projekte sein? Suchen Sie verzweifelt nach einer Alternative? Dann versuchen Sie es doch einmal mit VueJS!
 
AngularJS hat bekannterweise erhebliche Schwächen bei Performance, Übersichtlichkeit (gerade bei größeren Projekten), Debugging und ein paar anderen Dingen. Zudem wird AngularJS von Google nicht mehr supportet und weiterentwickelt. Oft wird deshalb zur höheren Version gegriffen: Angular 2+ beziehungsweise inzwischen Angular 5. Leider gibt es jedoch einen großen Unterschied zwischen dem höheren Angular und seinem Vorgänger: TypeScript. Diese „Sprache“ kann man entweder lieben oder hassen, da scheiden sich die Geister. Konzipiert wurde die Syntax, um das Programmieren übersichtlicher und einfacher zu machen. Allerdings ist es genaugenommen keine eigenständige Sprache, sondern wird am Ende immer zu einer normalen .js umgewandelt. Freunde der objektorientierten Programmierung (OOP) werden die verwendeten Klassen, Imports, Datentypenchecks und ähnliches lieben. Was aber tun, wenn Sie genau das nicht mögen oder es unnötig kompliziert finden? Dann ist Angular nämlich komplett draußen. Ohne TypeScript geht es bei dem Framework einfach nicht.
 
Sind Sie also auf ewig an AngularJS gebunden – müssen auf neue Methoden verzichten und Defizite in Kauf nehmen? Nein, zum Glück nicht. Hier kommt nämlich das perfekte Framework für so einen Fall ins Spiel: VueJS. Wer es das erste Mal sieht, bemerkt, dass einige Syntaxzeilen sich nicht groß von AngularJS unterscheiden. Warum? Nun, laut dem Gründer wurde VueJS anfangs durch AngularJS inspiriert, da dieses vieles richtig macht. Allerdings ist es das Ziel von VueJS, AngularJS zu verbessern und die Defizite zu beheben. Klingt gut, oder?

From A to the V – die Basics

Was kann VueJS inzwischen alles? Wie behauptet es sich gegenüber AngularJS und Angular 2+ und ist es eine sinnvolle Alternative? Um das zu beantworten, will ich hier einmal ein paar Ansätze und Inhalte der Frameworks vergleichen.
 
Die Templates von AngularJS, Angular 2+ und VueJS basieren alle auf validen XML-Strukturen, will sagen: Die Basis ihrer Struktur ist ein normaler HTML-Baum. Allerdings ist die Referenzierung beziehungsweise das Binding für die einzelnen Frameworks komplett unterschiedlich. Ein Beispiel: Die onclick-Methode für AngularJS wird bekanntermaßen durch ng-click=““ erzeugt. Bei VueJS wurde das leicht auf @click=““ abwandelt. In Angular 2+ wird wiederum die Syntax (click)=““ verwendet. Wozu die Klammern? Weil Angular zwischen den Bindings unterscheidet und eine spezielle Syntax hat: [x] und (x) in HTML-Tags. [x] bedeutet dabei, dass dieser Wert „One-Way“ in das HTML eingebunden wird. Das heißt, dass ein Wert aus dem JavaScript für ein Attribut im HTML ausgegeben wird. (x) bedeuten hingegen, dass es andersherum „One-Way gebinded“ ist – also vom HTML ins JavaScript übermittelt werden soll. Genutzt wird dies zum Beispiel für veränderbare Werte und Aktionen wie Inputs oder Clicks, auf die JavaScript reagieren soll. Das Ganze kann auch zu [()] kombiniert werden. Diese Form bindet dann vom JavaScript ins HTML und wieder zurück. Zusammengefasst bedeutet das: Das Binding-Modell von Angular ist standardmäßig „Two-Way“. Ähnlich übrigens wie beim alten AngularJS, nur mit ein bisschen mehr Abstraktion und etwas stärker aufgesplittet für isolierte Bindings. VueJS hingegen setzt standardmäßig auf ein One-Way-Data-Binding, was zu einer höheren Performance führen soll. Es ist jedoch auch hier ein Two-Way-Binding implementiert und nutzbar. 
 
Was macht aber nun den Unterschied aus? Two-Way-Binding erfordert irgendeine Art „Watcher“. JavaScript „schaut“ also die ganze Zeit, ob sich etwas am Wert im HTML (Two-Way-gebinded) ändert und aktualisiert ihn (im JavaScript), wenn dies der Fall ist. Beim One-Way-Binding muss der Entwickler dagegen für die Änderungen der Variable Events oder Funktionen definierten. Das wäre zum Beispiel @change=““ bei einem Input-Element. Nutzt man diese Technologie sinnvoll, bietet sie einen kleinen Performance-Schub gegenüber dem Two-Way-Binding. Außerdem ist das System anpassungsfähiger, da die Events nur auf User-Wunsch triggern. Das Ganze kann aber bei falscher Nutzung auch nach hinten losgehen, alles verlangsamen und verkomplizieren – es ist also etwas Feingefühl geboten.

Die Startvoraussetzungen: Funktionsumfang, Größe, Features

Ein entscheidender Unterschied zwischen VueJS und den beiden Google-Frameworks: Es ist extrem schlank. VueJS besitzt außer Client-Side-Routing von Haus aus weder Ajax, noch kaum eine andere extravagante Funktion. Dadurch hat es einen beachtlichen Größenvorteil gegenüber der Konkurrenz: Gepackt umfasst es gerade einmal 20.9 kB! AngularJS ist mehr als doppelt und sein Nachfolger fast sieben Mal so groß. Das liegt teilweise sicher am Programmumfang, aber eben auch an zu vielen Features, die nicht ausgeklammert werden können. Wer nur die Basics benötigt, hat mit VueJS schon einmal einen echten Gewinn gemacht.
 
Um gewünschte Erweiterungen und Features hinzuzufügen, gibt es bekanntlich verschiedene Methoden. AngularJS-Plugins werden primär mit bower oder YARN installiert, seltener mit npm. Da bower inzwischen veraltet ist, werden bei Angular 5 und VueJS so gut wie nur noch npm und YARN zur Paketverwaltung verwendet. Ganz selten findet man die Pakete noch via bower, was allerdings bei einem Umstieg innerhalb eines Projektes zu einem Problem werden kann.
 
Ein wichtiger Vorzug der beiden neueren Frameworks: Sie ermöglichen serverseitiges Rendern. Dies verbessert das SEO und ermöglicht ein schnelleres initiales Laden. Das ist bei bestimmten Projekten mittlerweile unverzichtbar, auch wenn es einem größeren Useraufkommen längere Ladezeiten bedeuten kann.

Die Performance: Ein klarer Favorit

Für viele Entwickler zählt besonders die Performance  eines Frameworks, klar. AngularJS ist aber leider berüchtigt dafür, zu erlahmen, wenn zu viele Watcher eingebunden sind. Machen es der Nachfolger und vor allem VueJS besser? Ja! Beide Frameworks haben das Problem nicht mehr.
 
AngularJS leidet unter der eigenen Watcher-Methode: Bei einer Änderung des Scopes müssen sich alle Watcher neu updaten und teilweise mehrfach laden, wenn sie andere Watcher triggern. VueJS hingegen besitzt voneinander unabhängige Watcher. Dadurch müssen nicht alle Wächter bei einer Änderung updaten, sondern nur der jeweils erforderliche. Angular 5 löst das Problem auf eine andere Art. Reactive Extensions JS – kurz: RxJS – heißt seine Methode. Die Technologie löst das Problem des Event Streamings, dessen Verhalten, seine Reaktionen und Formatierung. Das Verfahren ist sehr leistungsfähig und spart enorm Ressourcen.
 
Doch nun zum besten Feature von VueJS:  Virtual DOM. Es gibt dem Framework einen gehörigen Boost, den auch Angular 5 nicht toppen kann. Bei vielen Projekten entstehen schnell große DOM-Strukturen und diese elegant zu handeln, wird bald eine der größten Herausforderungen. Was macht Virtual DOM hier so besonders? Stellen Sie sich ein Event vor, das eine DOM-Node mit einer bestimmten Klasse finden und den Inhalt ändern soll.  Dazu musste das Event bisher den gesamten physischen XML-Baum durchsuchen. Sprich: Das JavaScript musste das HTML parsen und das, was der User sieht, ändern. Virtual DOM muss dagegen nur die gleiche Node in einer Art Lightweight-Kopie des HTML ändern. Dadurch ändert sich auf dem Bildschirm des Nutzers nichts. Die eigentliche Aktualisierung des Inhaltes übernimmt dann eine elegante Update-Funktion. Sie vergleicht, was sich geändert hat und wandelt nur diesen Teil ab. Stellen Sie sich zum Vergleich einmal Folgendes vor: Ein Ingenieur kann die Konstruktion eines Rennwagens erst dann ändern, wenn dieser schon völlig fertig gebaut ist, statt einfach auf seinem Entwurf ein paar Linien abzuwandeln. Absurd, oder? Aber so ähnlich war es hier vor Virtual DOM tatsächlich. 
 
Bei kleineren bis mittelgroßen Projekten ist VueJS mit seinen Features und vor allem Virtual DOM auf jeden Fall auf der Pole Position. Direkt darauf folgt Angular 5, das durch die native Implementierung von RxJS sehr viele Funktionen und eine top Performance bietet. Wie zu erwarten, dümpelt AngularJS als Schlusslicht etwas hinterher. Allerdings muss bei diesem Ranking auch der jeweilige Funktionsumfang der einzelnen Frameworks gesehen werden. VueJS und AngularJS besitzen nur einen spartanischen EventBus ohne große Zusatzfunktionen. Wer komplexere Features braucht, muss diese selbst implementieren oder eben auf Angular 5 zurückgreifen.

Auf der Zielgeraden

Seinen Favoriten sollte natürlich jeder selbst küren. Ich wollte mit meinem Vergleich jedoch zeigen, dass VueJS kein unbedeutendes, kleines Framework ist. Nichts, das mit einem Schmunzeln abgetan werden kann. Es ist ein wirkungsvolles, zugängliches Tool und eine echte Alternative für viele kleine und größere Projekte.
 
Möchten Sie lieber dem Angular-Kosmos treu bleiben und Ihr AngularJS-Projekt auf Angular 5 migrieren? Dann finden Sie in diesem Blogbeitrag einige weiterführende Infos.
 
Ich hoffe, ich konnte Ihnen mit meinem Beitrag einen Einblick in die Eigenarten dreier Frameworks geben und Ihnen vielleicht die Entscheidung für eins davon erleichtern. Haben Sie Fragen und Anregungen, dann lassen Sie mir doch einfach einen Kommentar da.
 
 

Neuen Kommentar schreiben