Angular vs React vs Vue – Wähle mit Bedacht und guten Gründen

Von Florian Strupp , 07.02.2020, 09:13
Frontend

Häufig hört man den Wunsch nach einer modernen Applikationslandschaft von Frontend bis Backend. Speziell im Bereich des Consultings trifft man häufig auf Kunden oder Projekte, welche ihren IT-Stack zwar in die Moderne treiben wollen, dabei nicht selten aber blind auf ein Pferd setzen das gerade durch die IT-Presse getrieben wird.

Umso erfrischender ist es, nicht nur in der Umsetzung eines Projektes tätig zu sein, sondern auch in beratender Funktion bei der Bestimmung der passenden Technologie mitzuwirken.

Wenn Sie diesen Artikel lesen werden Sie sich vielleicht in derselben Situation befinden, oder sich zumindest die Frage stellen welches Framework am ehesten auf Ihre Bedürfnisse und Anforderungen passt.

 

1. Überblick über aktuelle Frontend-Trends

Bevor man mit der tiefergehenden Auswahl des richtigen Frameworks beginnt lohnt ein kurzer Blick auf die aktuelle Marktpopularität der 3 großen Frameworks. Dies dient vor allem bei der späteren Unterstützung von Problemen. Stellen Sie sich vor Sie arbeiten in einem Projekt mit einem Framework und stoßen auf Probleme die keiner Ihrer Entwickler lösen kann. Ist das von Ihnen eingesetzte Framework nur eine „Randerscheinung“ im großen Markt, kann das schnell zu sehr teuren (zeitlich als auch monetär) Problemen führen.

In Bezug auf die „Most Loved, Dreaded, and wanted Web Frameworks” von Stackoverflow wird schnell ersichtlich wie dominant React.js, Vue.js und Angular sind.

web

 

 

Quelle: https://insights.stackoverflow.com/survey/2019#technology-_-most-loved-dreaded-and-wanted-web-frameworks

Während sich React.js und Vue.js bei der „Loved-List“ nicht groß unterscheiden hängt Angular etwas zurück. Ein Grund hierfür könnte durchaus der schmerzliche Start von Anuglar.js und die Vorbehalte des Frameworks auch nach der Wiedergeburt durch „Angular 2“ im Jahr 2016 sein.

Betrachtet man den „Wanted“-Bereich der Statistik machen die 3 großen Frameworks die ersten drei Plätze unter sich aus.

blog3

 

Quelle: https://insights.stackoverflow.com/survey/2019#technology-_-most-loved-dreaded-and-wanted-web-frameworks

 

Diese beiden Statistiken zeigen deutlich die Marktbedeutung der Frameworks in der Verteilung der aktuell beliebtesten UI-Frameworks.

 

2. Die Frameworks im Überblick

 

Performance in modernen Webapplikationen ist eine sehr breit gefächerte Begrifflichkeit. Oft jedoch wird dieses Schlagwort als das Löwen-Kriterium benannt, ohne dabei den Begriff oder dessen Parameter für die Erfüllung sauber zu definieren.
Von vorneherein lässt sich sagen, keines der Frameworks ist inperformant, nach heutigen Maßstäben rückständig oder gar bereits veraltet.

Viel eher, und speziell darauf ist dieser Artikel ausgelegt, haben diese Frameworks unterschiedliche Schwächen und Stärken.

Ein häufiges Argument bei UI-Frameworks ist deren Beständigkeit im Markt sowie deren Support und Reife über die Jahre hinweg.

Daher soll die nachfolgende Tabelle einen kleinen Umriss über die Frameworks geben:

 

blog4

 

Wie schon sehr deutlich ersichtlich, ist Angular das „älteste“ Framework in diesem Trio und gilt somit manchmal bereits als altes Eisen. Dem gegenüber steht der Jungspund React.js und der fast Frischling Vue.js.

Kurzum lässt sich sagen, dass noch keines dieser Frameworks zum alten Eisen gehört oder moderne Ideen und Ansätze der Webentwicklung nicht mehr verwirklichen kann.

Um diesen Blog-Beitrag nicht zu sehr in technische Eben abbiegen zu lassen werden nun kurz die Key-Facts der Frameworks gegen- und füreinander aufgeführt sowie ein Ausblick über die typischen (und besten) Anwendungsfälle der Frameworks geben.

 

Angular

 

Leicht abzulesen an der Tabelle ist, dass Google mit Angular das am längsten auf dem Markt bestehende Framework stellt. Hier sollte aber im speziellen darauf hingewiesen werden, dass bis zum Jahr 2016 Angular auf purem JS basiert, noch Angular.js hieß und unter massiven Kinderkrankheiten litt. Seit Version 2.+, der kompletten Überarbeitung des Frameworks und dem Einzug von TypeScript hat sich dessen Beliebtheit auf dem Markt deutlich verbessert und das auch zurecht. Nachfolgende Ausführungen beziehen sich folglich auch auf die neuste Version von Angular.

Einer der ersten und wohl offensichtlichsten Benefits von Angular ist die standardmäßige Verwendung von TypeScript. Denn eine der häufigsten und auch korrekten Aussagen die ich zum Thema TypeScript höre ist der leichte Einstieg für Entwickler aus dem Java und C# Universum. 

Betrachtet man die Bundle Size eines Angular-Artefakts, ist zwar dank „AoT-Compilation“ und „tree-shaking“ Einbindungen eine akzeptable Größe des Artefakts erreichbar, kann aber gegen Bundles basierend auf React.js oder Vue.js nicht ganz mithalten.

Generell empfiehlt es sich Angular eher für Anwendung zu verwenden welche sehr groß werden können oder beispielsweise nur im internen Firmennetz zur Verfügung stehen (Größe des Bundles nicht so gravierend).

Als einer der größten negativen Punkte von vielen Frontend-Entwicklern welche einen starken JavaScript-Background haben wird die Bindung an das Angular Universum empfunden. Ein Ausweichen auf andere Build-Systeme ist nur müßig zu erreichen und auch eine eigene Strukturierung des Projektes ist sehr unbequem. Ein Beispiel hierfür wäre die zwanghafte Verwendung des Angular HttpClients zur Kommunikation mit anderen Services.

 

React.js

 

React.js hingegen ist ein frisches und junges Framework. Es wurde im Jahr 2013 von keinem anderen als Facebook selbst entwickelt und veröffentlicht. Der Wunsch für die Entwicklung eines eigenen Frameworks im Hause Facebook war die zunehmende Last auf den Facebook Seiten und den damit zunehmenden technischen Problemen und steigenden Ladezeiten.

Entwickelt aus eben genau diesem Gesichtspunkt ist React.js kein Framework welches ein komplettes Ökosystem mitliefert.

React.js verlangt viel mehr von den Entwicklern eine für genau das Projekt passende Konfiguration. Das Ergebnis aus dieser Freizügigkeit ist ein kleines, exakt passendes Softwareartefakt welches genau die gestellten Anforderungen erfüllt und keine unnötigen Libraries oder Codefragmente mit ausliefert.

Einer der essentiellen Vorteile und Grund für den Performancegewinn von React.js schlecht hin ist ein technisch sehr essentieller. Der Umgang mit dem Document Object Model, kurz DOM, im Browser.

Während Angular auf dem „echten DOM“ arbeitet abstrahiert React.js diesen in den so genannten „virtuellen DOM“. Aus dieser Abstrahierung ergeben sich massive Performance Zugewinne im Umgang mit Veränderungen an den Webseiten.

Als einer der schmerzlichen Nachteile für Neueinsteiger in React.js wird oft der doch sehr beschwerliche Lernprozess angeführt. Während andere Frameworks sehr schnell den Fokus auf die Schaffung von geschäftlichem Mehrwert lenken, liegt der Anfangs Fokus von React.js eher auf dem korrekten Aufsetzen des Projektes.

Die performanceorientierten Eigenschaften von React.js werden vor allem deutlich, wenn man betrachtet welche weltbekannten Anwendungen auf React.js setzen.

So basiert z.B. Facebook (natürlich) als auch Twitter auf React.js. Ebenso der Messaging Dienst WhatsApp hat auf Grund der hohen Last auf React.js gesetzt.

 

Vue.js

Vue.js kann bei all seinen Vorteilen nicht mit einem so namenhaften Hersteller wie React.js oder Angular punkten. Entwickelt von einem ehemaligen Mitarbeiter von Google wurde es im Jahr 2014 veröffentlicht und erfreut sich seither zunehmender Beliebtheit und Verbreitung.

Vue.js setzt, ebenso wie React.js, auf den „virtuellen DOM“ und zieht auch die Vorteile aus diesem.

Hierbei geht es aber, ähnlich zu Angular, den Weg des „Two-Way Data Bindings“.

Vue.js kommt ebenfalls sehr stark aus dem Gedanken der Flexibilität und Ungebundenheit an ein Ökosystem. Es bietet auf der eigenen Framework Seite zwar eine Implementierung des State Managements, namentlich „Vuex“ an, überlässt aber dem Entwickler die Entscheidung bezüglich der Verwendung oder dem Einsatz einer Third-Party Library. Ähnlich verhält es sich mit dem „vue-router“.

Speziell für Entwickler zeichnet sich Vue.js aber auch durch das sehr gute CLI-Tooling aus. Aus dieser CLI heraus ist es für Newbies aber auch erfahrene Entwickler sehr leicht Projekte aufzusetzen, zu verwalten, zu linten, mit Unit-Tests zu versehen oder beispielsweise dem JS-Code TypeScript überzustülpen und so den Einstieg für unerfahrene JavaScript Entwickler noch zu vereinfachen.

Taucht man tiefer in die Vue.js Szene ein oder hört sich bei Kunden um stellt man häufig fest, dass der Markt mit erfahrenen Entwicklern noch sehr dünn ist. Darüber hinaus ist der die Verbreitung von Vue.js in sehr großen Projekten überschaubar, was oft auch am hohen Flexibilitätsgedanken von Vue.js liegt.

Als namenhafte Verwender von Vue.js sei hier an der Stelle GitLab, 9Gag oder Lime zu nennen.

 

3. Zusammenfassung

 

Zusammenfassend lässt sich festhalten, dass alle 3 Frameworks ihre Daseinsberechtigung haben und ihr Einsatz sehr stark von der Gegebenheit der Anforderung abhängt.

Möchte man (vielleicht als unerfahrenerer Frontend-Entwickler) schnell einen Business Value schaffen und muss dabei nicht auf Bundle-Sizes oder Libraries achten, ist Angular sicher eine sehr gute Wahl. Es „engt“ zwar den Entwickler in seiner Entscheidungsfreiheit ein, lenkt die verfügbaren Ressourcen aber sehr schnell auf das Wesentliche, nämlich auf die Schaffung von geschäftsrelevantem Mehrwert.

Befindet man sich hingegen in der Situation eine Anwendung zu schreiben die sehr hohen Lasten ausgesetzt ist und diese schnell abhandeln sollte man mit React.js-Zug einsteigen. Nach der Einrichtung und dem passenden Aufsetzen des Projektes punktet das Framework mit sehr kleinen Artefakten, hoher Flexibilität und der besten Runtime-Performance unter den drei genannten.

​​​​​​​Eine gute Alternative zum sehr radikalen React.js stellt Vue.js. Für Anwendungen welche zum Beispiel im öffentlichen Internet stehen und gerne auch über mobile Endgeräte (und somit aus dem mobilen Datennetz) angesteuert werden ist Vue.js sehr gut geeignet.

Sehr schlanke Artefakte und gute Performance gepaart mit den Vorteilen aus dem Angular Universum ohne den Ökosystem-Gedanken, erleichtern die Arbeit und führen schnell zu Ergebnissen.

 

Neuen Kommentar schreiben

Ich habe die Datenschutzhinweise zur Kenntnis genommen. Ich stimme zu, dass meine Angaben und Daten zur Beantwortung meiner Anfrage elektronisch erhoben und gespeichert werden.