Angular vs Vue
Vor jedem neuen Projekt stellt sich für Frontend Developer die Frage "Welches Frontend-Framework ist für das Projekt richtig und passend?“. Da diese Frage oft gar nicht so leicht zu beantworten ist, möchte ich mit diesem Artikel eine Hilfestellung liefern.
Für alle, denen dieser Begriff noch neu ist: Ein Framework ist ein Programmiergerüst, das die Grundstruktur einer Anwendung vorgibt und verschiedene Elemente und Funktionen bereitstellt. Dadurch kann einiges an Zeit gespart werden.
Unterschiede zwischen Angular und Vue
Grundsätzlich sind sich Angular und Vue.js sehr ähnlich und haben in ihren Grundzügen viele Gemeinsamkeiten – nicht zuletzt basieren beide größtenteils auf JavaScript. Betrachtet man aber die Unterschiede, lässt sich auch besser evaluieren, welches der beiden Frameworks man für ein Projekt auswählt:
- Lernkurve
Vue.js ist ganz klar um einiges einfacher zu lernen als Angular. Für Vue.js reichen JavaScript Kenntnisse aus, für Angular muss man hingegen zusätzlich TypeScript und das Konzept MVC (Model View Controller) verstanden haben. Zudem ist Angular auch in der Verwendung um einiges komplexer. - Community
Beide Frameworks haben eine starke Community, wobei die Community von Angular auf jeden Fall größer ist. Das ist auch kein Wunder, schließlich existiert Angular schon länger und wird von mehr Menschen genutzt. Hat man also eine Frage oder ein Problem, kann man sich sicher sein, dass man nicht der/die erste ist und dafür schon eine Lösung in der Community existiert. Sprich, man findet immer eine passende Lösung in der Suchmaschine der Wahl. Aber: Auch die Community von Vue.js wächst von Tag zu Tag! - Data Rendering
Angular verwendet sogenannte Watcher, um den Daten-Rendering Prozess zu vereinfachen. Watcher behalten den Überblick über Werte und aktualisieren nur die Teile des DOMs (Document Object Model), dessen Werte sich geändert haben.
Vue.js dagegen verwendet virtuelle DOMs. Ein virtuelles DOM ist eine vereinfachte Kopie des DOMs mit den nötigsten Informationen. Dadurch verbessert sich die Performance bei Änderungen des Layouts erheblich, da nicht der ganze DOM neu gerendert werden muss, sondern nur der veränderte Teil des virtuellen DOMs. - TypeScript
Angular verwendet nicht nur TypeScript, sondern wurde auch in TypeScript geschrieben. Die komplette Dokumentation ist ebenfalls in TypeScript. Auch bei Vue.js hat man die Möglichkeit TypeScript zu verwenden, jedoch gibt es viel weniger Dokumentation dazu.
Meine Erfahrungen mit Angular und Vue
Wie viele andere hab auch ich mit Vue.js gestartet. Die letzten 1,5 Jahre hab ich nun aber fast ausschließlich Projekte mithilfe von Angular entwickelt. Vor Kurzem hab ich zur Abwechslung mal wieder ein Projekt mit Vue.js umgesetzt. Und dabei ist mir aufgefallen, dass sich die beiden Frameworks zwar grundsätzlich ähnlich sind, aber auch dass es große Unterschiede beim Entwickeln selbst gibt:
In Angular wird eine Komponente in deren Bestandteile (HTML, CSS und TypeScript) in jeweils eigenen Dateien aufgeteilt.
In Vue.js hingegen befindet sich der gesamte Code einer Komponente in einer Datei. Das bewegt einen dazu, mehr darauf zu achten, Komponenten tatsächlich so klein wie möglich zu halten – ganz gut, das als Anfänger:in zu lernen, wie ich finde 🙂
Man kann sowohl in Angular als auch in Vue.js Komponenten Properties übergeben. In Angular heißen diese Properties „Inputs“ und in Vue.js „Props“. Der größte Unterschied hier ist, dass wenn sich in Angular die übergebenen Properties ändern sollten, die Komponente das automatisch mitbekommt. In Vue.js müsste man hingegen entweder einen „Watcher“ auf das Property legen oder mithilfe einer „Computed Value“ auf Änderungen hören. Wenn man hauptsächlich Angular gewohnt ist, kann das am Anfang etwas verwirrend sein. Sobald man jedoch den Unterschied zwischen Computed Values und Watcher verstanden hat, hat man auch das schnell draußen.
Fazit
Im Großen und Ganzen sind sich Angular und Vue.js sehr ähnlich, doch bei näherer Betrachtung, vor allem aber bei der Verwendung, merkt man recht schnell, dass beide Frameworks für bestimmte Zwecke entwickelt worden sind. Bei großen und komplexen Projekten mit vielen Daten empfiehlt es sich, Angular zu verwenden. Vue.js wurde ursprünglich dafür entwickelt, um Single Page Websites zu programmieren und ist dafür auch ideal. Für eine Website mit flacher Navigation und wenigen Seiten wäre Angular ein Overkill.
Beide Frameworks erfüllen ihren Zweck und können bei richtiger Anwendung das Leben von Programmierer:innen einfacher machen.
Was waren deine bisherigen Erfahrungen mit Angular oder Vue.js?
Du willst mit jemanden über das Thema plaudern?
Einen kostenlosen Termin mit CEO Susanne vereinbaren!
UX Snacks Vol.09
That’s a wrap on UX Snacks 2024. Am 7. November hat die vierte und letzte Ausgabe in diesem Jahr stattgefunden und wir nehmen mit diesem Recap ganz viel positive UX-Energie mit ins neue Jahr. Und keine Angst: Schon bald verkünden wir die Daten für 2025.
Jetzt lesen
Folge #62 mit Susanne Liechtenecker
In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.
Jetzt anhören