UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

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.

Bild
F

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.

Es gibt unterschiedlichste Frameworks, die auf den verschiedensten Technologien basieren. In diesem Blogbeitrag möchte ich die zwei JavaScript Frameworks Angular und Vue.js vergleichen. 

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!

Nicole Pepelko

Meine Rolle bei Liechtenecker: Female Dev Power Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Ärztin Mein Herz schlägt für: Sojageschnetzeltes
Bild
Header-Bild: Barrierefreiheit im Fokus
UX/UI Design – Blogbeitrag

Barrierefreiheit im Fokus

Spätestens seit dem neuen Barrierefreiheitsgesetzt kommt man um das Thema Accessibility nicht mehr herum. Und das ist auch gut so. Von der Berücksichtigung verschiedenster Bedürfnisse bis hin zur Umsetzung von WCAG-Richtlinien – lasst uns gemeinsam entdecken, warum eine inklusive Online-Erfahrung für alle unverzichtbar ist.

Jetzt lesen

Interesse mit uns zu arbeiten?

Lass uns plaudern …

oder vereinbare gleich mit unserer CEO Susanne einen kostenlosen Termin.