123 Invest Gruppe: Kommentar
Javascript-Frameworks: Vue, Angular oder React?
Durch JavaScript-Frameworks lassen sich die Aufgaben für Entwickler deutlich vereinfachen. Doch vor dem Projektstart stellt sich die Frage, welche Lösung am besten geeignet – und damit die richtige Lösung ist. In welchem Anwendungsfall ist Vue, Angular oder React besser und worauf beruht die Entscheidung?
Vue, React, Angular? Die beliebtesten JavaScript Framework Lösungen
Auch wenn wir primär abseits der Webtechnologien arbeiten, kommen wir bei Front-End Anwendungen logischerweise um diese nicht drumherum. Der dahinterstehende Aufwand der Entwicklung haben in den vergangenen Jahren rasant zugenommen. JavaScript Frameworks stellen mit einigen Features die Architektur, den Boilerplate und die Testumgebung bereit. Für den Entwickler bringen sie Vorteile, ohne die der Zeit- und Kostenaufwand förmlich explodieren würden. Die Entscheidung für ein Framework ist dennoch schwierig, zumal die ohnehin schon zahlreichen Optionen einer stetigen Erweiterung unterliegen. Die eigene Präferenz spielt eine essenzielle Rolle, doch reicht sie als Entscheidungskriterium keinesfalls aus. Wer sich mit der Thematik beschäftigt, hat die Bezeichnungen Angular, Vue und React bereits häufiger gehört – die 3 beliebtesten Framework Lösungen bei JavaScript.
Um perspektivisch kosten- und zeitintensives Refactoring zu vermeiden, sollte die Auswahl des Frameworks auf die langfristigen Ansprüche abgestimmt werden. Diesbezüglich stehen der Projektumfang, die Entwickleranzahl, sowie der Fokus auf die Stabilität, den Standard und die Performance im Fokus. Auch die Vorgabe – Neuentwicklung oder Implementierung neuer Funktionalitäten im vorhandenen Legacy System – ist entscheidungsrelevant.
Die meisten Projekte lassen eine konkrete Auswahl zu. Ausnahmen bestätigen die Regel, so dass die kombinierte Anwendung der Frameworks notwendig sein kann. Innovative Micro-Frontend-Architektur inklusive Shell Anwendung mit innenliegenden Widgets, sowie Technologien wie Web-Components unterstützen dabei.
Leichtgewichtig und vielseitig anwendbar: VUE
Bei Vue handelt es sich um ein auf der Anzeigelogik und dem Data-Bindung basierendes UI only Framework, das seit 2016 besteht. Von Anfang an erfreute sich Vue vor allem bei asiatischen Startups enormer Beliebtheit. Ins Leben gerufen wurde Vue durch einen einstigen Mitarbeiter von Google, Evan You. Dieser wollte eine abgespeckte Alternative zu Angular realisieren und ein JavaScript Framework schaffen, das für Webentwickler-Neustarter verständlich ist.
Auf eine komplexe Syntax wurde verzichtet. Wer HTML, CSS und JavaScript ES5 versteht, kann Vue programmieren. Man schreibt intuitiv und muss keine Syntax erlernen. Es ist möglich, die vollständige Anwendung in eine HTML Datei zu packen. Wie das geht, ist in zahlreichen Dokumentationen und Community-Tipps ersichtlich.
Was bringt Vue also mit?
Mit 80 Kilobyte ist die Bibliothek bereits klein und lässt sich weiter minimieren, so dass sie nach dem Zippen nur noch mit 20 Kilobyte zu Buche schlägt. Für kleine Applikationen, die in bereits vorhandene Anwendungen eingebettet werden, eignet sich diese Option hervorragend. Der Vorteil für responsive Homepages ist offensichtlich. Trotz Minimalismus verfügt Vue über ein ausgefeiltes Oneway-Data-Binding Konzept und verwendet Virtual DOMs.
Standardfeatures in der Core-Bibliothek entfallen. Der Entwickler kann auf das Ökosystem des Frameworks zugreifen und fehlende Pakete ergänzen. Ohne nachträgliche Implementierung fehlt die Backend-Kommunikation und wer einen offiziellen Support wünscht, wird bei Vue ebenfalls enttäuscht. Der automatisierte Test ist zwischenzeitlich dank Non-Beta Paket möglich. Im Allgemeinen brauchen Vue Entwickler mehr Geduld als Angular und React Nutzer, da die Weiterentwicklungen von neuen Features von einem 20-köpfigen Team und nicht durch einen Großkonzern realisiert werden.
Für das State Management empfiehlt sich Vuex, das von einer Fluxarchitktur ohne direkten Schreibzugriff abstammt. Für die Navigation innerhalb von Single-Page ist der Vue-Router ratsam. Wer eine Alternative zum begrenzten Komponentenumfang wünscht, kann die fertigen UI Komponenten Vuetify nutzen.
Komplettpaket als Enterprise Lösung: Angular
Angular wird seit 2010 von großen Firmen genutzt und hat sich auch aus dem Grund etabliert, dass der Support, Bugfixes und Weitentwicklungen durch ein spezialisiertes Google-Team sichergestellt sind. Das JavaScript Framework beschränkt sich nicht auf die UI, sondern kommt im Komplettpaket mit Standardbibliotheken für jeden Anwendungsfall. Die Unterteilung in mehrere Bibliotheken gibt den Entwicklerteams die Möglichkeit, sich auf essenzielle Features zu berufen und den Code bedarfsoptimiert zu verschlanken. Eine leichtgewichtige Anwendung ist Angular nicht, da allein für „Hello World“ mit Boilerplate per CLI ein Code von etwa 500 Kilobyte entsteht.
Wer eine All-in-One Lösung vorzieht, spart Zeit und muss sich nicht mit der Sicherstellung, der Kompatibilität und den Lizenzen von Einzelbibliotheken beschäftigen. Die Code-Reduzierung ist durch die Aussparung von Subpaketen möglich. Die Kompatibilitätshaltung der Pakete bei Updates ist einfach und stellt für erfahrene Angular Architekten keine Herausforderung dar.
Klare Architektur mit Komponententrennung
In Angular enthalten ist ein CLI Projektgenerator, der nach Befehlseingabe >ng new app< das Gerüst für Module, Apps und Komponenten automatisiert erstellt und den Aufwand verringert. Wer Schematics selbst schreiben oder vergrößern möchte, kann das mit Angular ebenfalls tun. Der Boilerplate ist klar und lesbar dargestellt, da die verschiedenen Codes nach Programmiersprache getrennt sind. Auch die Stabilität der Anwendung ist keine Frage, sondern vereinfacht sich durch generierte Test-Stubs. Die wichtigen End to End Tests sind beispielsweise mit Selenium Wrapper oder mit Cypress, sowie mit Protractor erstellbar. Im DOM Testing ist Testbed eine herausragende Alternative zu Ngmodule, da es komplexe Dependency-Injcections vereinfacht.
Angular ist bei großen Webanwendungen vorteilhaft. Der Code wird im Browser gespeichert, wodurch sich beim zweiten Aufruf der Seite ein Performancevorteil ergibt. Single Module können innerhalb der Navigation nachgeladen werden.
Trotz aller Vorzüge – ganz ohne Nachteile funktioniert Angular nicht
Es wird kein Virtual DOM geboten, wodurch unerwünschte Rerendering-Zyklen dank Two Way Data-Binding auftreten können. Die Optimierung einer Anwendung beruht auf Know-how und Verständnis für die Dependency-Injection oder Lifecycle Hooks. Um alle Features des JavaScript Frameworks zu nutzen, muss der Entwickler bereit sein, intensiv zu lernen und in den Expertenstatus aufzusteigen. Das zeigt sich spätestens, wenn es um die Optimierung eins Production-Build geht. Doch es besteht Hoffnung auf eine Vereinfachung – an Angular wird weiter getüftelt.
Beste Performance mit JavaScript Framework React
Das UI Only Framework wurde von in 2013 von Facebook entwickelt und ist eine Open Source Lösung, bei der die Performance im Fokus steht. Geschwindigkeit steht bei allen Anwendungen im Fokus und überzeugt ganz besonders in mobilen Apps und Devices. Um diesen Effekt zu erzielen, sucht der Entwickler bei React Virtual DOM oder vermeidbare Re-Rendering-Zyklen vergeblich. Die Sicherstellung des global State wird durch das Onway Data-Binding Konzept und durch Flux gewährleistet, in dem der Store eine Weiterreichung an die Komponenten erzwingt und das rein konsumierende Lesen erfordert. Am Beispiel des Facebook Feed zeigt sieht man, wie die Performance bei React funktioniert.
Etablierte Bibliotheken im Standard sind im Ökosystem von React mit Redux und dem React-Router zu finden. Eine flexible, individuelle Kombination von Bibliotheken im ausgereiften React Framework stellt für den Entwickler keine Schwierigkeit dar. Da es keinen Facebook-Team Support gibt und die Bibliotheken fragmentiert sind, zahlt sich Vorerfahrung aus. Große Anwendungen stellen vor die Schwierigkeit, Duplikate in den Codes auszuschließen und die Kompatibilität der Bibliotheken, sowie die Funktionalität beim Updaten zu gewährleisten. Wenn ein React Projekt von mehreren Entwicklern betreut oder an den Kunden übergeben wird, spielen die konkrete Kommunikation und Dokumentation eine essenzielle Rolle. Warum?
Weil React keine starren Architekturen aufweist
Ein funktionaler Programmierstil, Codes mit souveräner und moderner Struktur und ES6 Features sorgen dafür, dass erfahrene Entwickler durchblicken und schnell ans Ziel gelangen. Wer mit JavaScript überhaupt keine Erfahrung hat, könnte trotz Syntax für die Kombination von Darstellung und Funktionalität vor einem Problem stehen. Fehler schleichen sich durch eine nicht optimale Automatisierung der Testabdeckung, sowie in der Komplexität im Zusammenarbeiten mit anderen Teams ein. Bei flüssigen Datenmengen mit hoher Fluktuation ist React ideal – ohne diese Ausrichtung ist unnötige Komplexität eine Direktfolge.
Die Auswahl des JavaScript Frameworks anhand der anwendungsbedingten Vor- und Nachteile treffen
Sowohl Vue, wie auch Angular und React haben ihre eigenen Vor- und Nachteile. Um das richtig JavaScript Framework zu wählen, sollten die eigenen Kompetenzen und Expertisen, sowie der Anwendungsbereich im Fokus stehen. Vue ist die einfachste, für alle kleinen Anwendungen optimale Lösung. Für Enterprise Projekt mit hohem Umfang ist Angular als Komplettlösung ideal. Bei hoher Datenfluktuation und performant Re-Rendering bietet React die größten Vorteile. Im Teamwork kommt es bei der Auswahl nicht nur auf die eigenen Fähigkeiten und JavaScript Kenntnisse, sondern auch auf die gemeinschaftliche Teamkompetenz und damit auf die Fähigkeiten aller Beteiligten an.
Herzlichst
Ihre Algopioniere
erstellt von Julia Rosen in Zusammenarbeit mit unserem Team
Weitere Informationen über die 123 Invest Gruppe erhalten Sie unter www.1-2-3-invest.de
