Angular.JS und Vue.JS im Vergleich
JavaScript nimmt in der Webentwicklung traditionell die Rolle der dynamischen Programmierung für das Frontend ein.
Doch mittlerweile gibt es immer mehr Lösungsansätze, Webentwicklung fast ausschließlich über JavaScript zu realisieren. Einer der bekanntesten ist Node.js, das serverseitig zum Betrieb von Netzwerkanwendungen geeignet ist.
Die Zahl der JavaScript-Frameworks ist folglich in den letzten Jahren sprunghaft gestiegen. Die bekanntesten sind Angular und React (letzteres stammt von Facebook), aber auch das vergleichsweise junge Vue hat mittlerweile eine große Fangemeinde.
Alle diese Frameworks beruhen auf dem Konzept des Model View ViewModel (MVVM), einer Variante des Model-View-Controller-Musters (MVC) und beheben damit eine der strukturellen Schwächen des „normalen“ JavaScript. Somit lassen sich Webseiten mit JavaScript-Frameworks dynamisch erstellen.
Vue.JS ist eines der am häufigsten diskutierten und am schnellsten wachsenden JavaScript-Frameworks. Es wurde von dem ehemaligen Google-Mitarbeiter Evan You konzipiert. Das anfängerfreundliche Projekt ist Open-Source, das vollständig auf GitHub entwickelt wurde.
Angular.JS hingegen ist ein Open-Source-JavaScript-Framework von Google für die Desktop- und mobile Anwendungsentwicklung, das im September 2016 unter einer MIT-Lizenz veröffentlicht wurde.
Es ist ein komplettes Framework, das Lösungen für fast alle Frontend-Entwicklungsaufgaben bietet. Angular ist der Nachfolger des Frameworks AngularJS und wurde grundlegend überarbeitet, um Schwächen seines Vorgängers, z.B. in der Performance, zu beheben. Es basiert auf einer komponentenbasierten MVC-Architektur. Eine Besonderheit bei Angular.JS ist, dass es auf TypeScript basiert, einer Weiterentwicklung von JavaScript.
Vue
Vue.JS ist ein modernes JavaScript-Framework, das sowohl für einzelne interaktive Komponenten der Website als auch für komplexe Webanwendungen geeignet ist. Es ist das neueste der drei großen, beliebten JavaScript-Frameworks und kombiniert viele Konzepte aus Angular und React.
Bei der Arbeit mit dem progressiven Vue merkt man, dass es nicht von einem Unternehmen betrieben wird, sondern von einer aktiven, unabhängigen Community. Der Einstieg ist einfach, es ist als Entwickler leicht zu erlernen, das Projekt ist leichtgewichtig und nicht unnötig aufgebläht.
Vue.JS hat seinen Schwerpunkt in der Darstellung von Daten auf einer HTML-Seite (View Binding), der Übernahme von Werten aus Formularen (Input Binding) und der Handhabung von Benutzerinteraktionen (Event Binding).
Es bietet Unterstützung für Vorlagen, Mixins, Strukturierung der Anwendung in Komponenten, berechnete und zwischengespeicherte Werte und Übergänge. Die stabilen APIs ermöglichen es der Programmlogik, auf Ereignisse wie das Laden einer Komponente zu reagieren.
Das Konzept der Single-File-Komponenten, die Vorlagen, Logik und Stil in einer einzigen Vue-Datei kombinieren, ist dabei sehr beliebt. Für die komplexere Einrichtung mit Build-Tools wie Webpack oder in Setups wie Progressive Web Apps hilft das Kommandozeilen-Tool vue-cli.
Ein offizielles Devtools-Plugin für Chrome und Firefox hilft bei der Analyse und Fehlersuche von Vue.JS-Anwendungen im Browser. Damit können Entwickler die Vue.JS Instanz auf der Seite analysieren und zusätzliche Funktionen aktivieren. In der npm-Auswertung rangiert Vue an dritter Stelle unter den am häufigsten heruntergeladenen Frameworks und stieg von 60.000 auf fast 300.000 Downloads. Vue wird unter anderem von Unternehmen wie Alibaba und Baidu für ihre Webseiten genutzt.
Angular
Im September 2016 wurde die stark verbesserte, nicht zu AngularJS rückwärtskompatible Version Angular 2 freigegeben.
Anwendungen bestehen dabei aus verschiedenen UI-Komponenten. Es unterstützt den Entwickler bei der Einrichtung einer neuen Anwendung und dient der Kompilierung und Bündelung der JavaScript-Anwendung. Aus der Philosophie Angular ist mittlerweile ein komplettes Projekt geworden, das Lösungen für fast alle Aufgaben eines Frontend-Entwicklers bietet. Bei Angular.JS erhält der Programmierer damit ein Rundum-Sorglos-Paket. Routing, Validierung, Kommunikation mit dem Backend etc. sind dabei Aufgaben, die bewusst außen vor gelassen werden.
Angular eignet sich besonders für die Implementierung der typischen Formularanwendungen für Büroumgebungen und ist damit eines der beliebtesten Werkzeuge für die Erstellung interaktiver Websites.
Es nutzt die Double-Bind-Funktion, so dass Elemente aus View und Modell einander zugeordnet werden und ein bidirektionaler Austausch problemlos möglich ist. Wenn also ein Änderungsauftrag auf der einen Seite auftritt, wird er direkt auf die andere Seite übertragen, ohne dass ihm spezielle Funktionen zugeordnet sind. Angular.JS bietet viele Funktionen, die für eine moderne Webanwendung erforderlich sind. Dazu gehören beispielsweise Dependency Injection, Templates, Routing, Ajax Requests oder Unit Tests.
Angular bietet einen grundlegenden Rahmen für die Erstellung von Webanwendungen und benötigt keine zusätzlichen Bibliotheken. Da es in TypeScript geschrieben ist, wird empfohlen, möglichst TypeScript für die Entwicklung zu verwenden. Analog dem Vue CLI unterstützt das Angular CLI den Entwickler bei der Codegenerierung und dem Aufbau der Anwendung.
Eine erste Demo-Anwendung kann damit innerhalb von 15 Minuten weiterentwickelt werden. Darüber hinaus wird Investitionssicherheit gegeben: Angular wird aktiv von einer großen, lebendigen und hilfsbereiten Community und einem großen Unternehmen namens Google entwickelt. Namhafte Unternehmen, die Angular zur Entwicklung ihrer Websites nutzen, sind beispielsweise Youtube und PayPal.
Popularität
Popularität lässt sich auf verschiedene Arten messen. Ein guter Indikator ist die Anzahl der Sterne auf GitHub, wo sowohl Angular.JS als auch Vue.JS angeboten werden. Im Jahr 2016 kam es zu einer plötzlichen Verschiebung der Anzahl der Sterne von Vue, und heute ist Vue dicht gefolgt von React das beliebteste Projekt auf JavaScript-Basis. Angular.JS bekommt in Bezug dort nur halb so viele Sterne.
Was die Popularität in der Praxis, zum Beispiel auf dem Arbeitsmarkt angeht, ist es genau anders herum. Wie aus den Trends von Ende 2018 hervorgeht, ist die Anzahl der Arbeitsplätze, die Skills in Angular erfordern relativ hoch, während die von Vue nur 20% dessen ausmacht (Quelle: www.codeinwp.com).
Vue Vorteile:
- einfacher konstruiert und daher einfacher zu lernen
- flexibel und modular
- erleichterter Datenfluss
- geringe Größe und Ladezeit: Angular hat über 500 KB, Vue 80 KB
- für kleinere Projekte geeignet
Angular Vorteile:
- umfassender, beschränkt sich nicht nur auf das Frontend
- große, aktive Community und schnellere Updates
- hat eine komponentenbasierte Architektur, die eine höhere Codequalität bietet
- bietet vielfältige Möglichkeiten für objektorientierte Programmierung
- für große Projekte geeignet
Fazit
Wer kleinere Projekte entwickeln möchte und sich gerne schnell zurechtfinden will, der ist mit Vue am Besten bedient. Für größere, komplexere Anwendungen, eventuell sogar in Teams, eignet sich Angular besser. Es ist auf der anderen Seite aber auch verhältnismäßig einfach, beide Frameworks zu erlernen, denn kennt man eines der beiden, so ist der Umstieg auf das andere nicht schwer.
Interessante Beiträge:
Vue, React und Angular im Vergleich auf entwickler.de
Unterschiede werden auf medium.com beschrieben
Bilder: Canva
Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.
Schreibe einen Kommentar