Angular, React und Vue im Vergleich

Alle drei Frameworks bieten eine solide Basis für moderne Frontends. Dennoch können die Unterschiede ein Framework gegenüber seinen Alternativen vorteilhafter machen.

Leistung

Bei der Bewertung der Leistung müssen wir einige Metriken berücksichtigen. So kann beispielsweise die Bundle-Größe – die Größe der Dateien, die bei Verwendung eines bestimmten Frameworks ausgegeben werden – sehr aufschlussreich sein. Außerdem misst die anfängliche Ladezeit den ersten inhaltlichen Anstrich – die Zeit zwischen der Initialisierung der Anwendung und dem Zeitpunkt, an dem der Inhalt für den Endbenutzer erstmals sichtbar wird.

Diese Metriken können verschiedene Bedingungen berücksichtigen, z. B. die Größe der Anwendung, die Netzwerkgeschwindigkeit, den Gerätetyp oder die Leistung.

Eine ausgezeichnete Möglichkeit, die Geschwindigkeit zu messen, ist der js-framework-benchmark. Die Stresstests zeigen, dass Vue das schnellste der drei Frameworks ist, wobei Angular und React eine ähnliche Leistung liefern.

Bei den Startup-Metrics-Tests ist Vue erneut der Spitzenreiter. Die beiden anderen Frameworks unterscheiden sich jedoch noch deutlicher als bei den vorherigen Tests. Die Leistung von React ist der von Angular überlegen, wie man es von einem leichtgewichtigen Framework erwartet.

Der Test der Speicherzuweisung schließlich liefert ähnliche Ergebnisse.

Basierend auf diesen Ergebnissen ist Vue der klare Spitzenreiter in allen Fragen, die Geschwindigkeit erfordern. Allerdings können die Tests nicht alle Geschwindigkeitsfaktoren berücksichtigen, und der Vergleich kleinerer Datensätze kann zu einem anderen Ergebnis führen. Angular und React können zum Beispiel die Paketgröße für kleinere Anwendungen optimieren.

Vue erhält einen Punkt auf der Leistungsseite, während React an zweiter Stelle liegt.

Integrationen

Angular benötigt nicht viele von der Community bereitgestellte Integrationen. Das Angular-Team bietet so ziemlich alles von Haus aus an. Folglich ist die Community weniger geneigt, hier mehr Integration anzubieten. Schließlich ist das die Aufgabe von Angular, oder?

React ist stark auf den Beitrag von Integrationen angewiesen. React ist ziemlich populär, daher ist die Zahl der Integrationen enorm. Nimmt man etwas so grundlegendes wie das Tooling, zum Beispiel das Transpilieren von JSX, so sehen wir so ziemlich überall Unterstützung für die Syntax von React.

Da wir JSX auch anderswo verwenden können (und Vue verwendet es bereits), scheint dies eine Lösung zu sein, von der alle profitieren. Ansonsten verwendet React Standard-JavaScript und braucht keine besondere Unterstützung. Das gilt auch für Vue (denken Sie an die SFC mit ihren Abschnitten) und Angular. Angular verwendet zwar HTML-Dateien, aber diese enthalten auch benutzerdefinierte Direktiven, die wir in eine integrierte Entwicklungsumgebung (IDE) oder einen Build-Prozess integrieren müssen.

Aufgrund der Leichtigkeit und des Komforts der Lösung erhält React hier den ersten Platz, während die beiden anderen knapp dahinter liegen.

Nutzung & Einfachheit

Während die Benutzerfreundlichkeit völlig subjektiv ist, bringt die Tendenz, TypeScript und seine neuen Konzepte zu benötigen, Angular in eine problematische Situation. Wenn ein Team jedoch Erfahrung mit solider Datentypisierung und strukturierten Frameworks hat – wie etwa in Java, C# oder .NET – könnte es für sie am produktivsten sein, Angular gegenüber React oder Vue zu verwenden.

Dennoch bleibt React die am einfachsten zu erlernende Lösung. Schließlich verfügt es über die minimalistischste API und nutzt durchgängig JavaScript-Konzepte. Auf der anderen Seite führt Vue benutzerdefinierte Namen und Konzepte über HTML ein, die als Direktiven bekannt sind, z. B. v-if, um die Dinge zum Laufen zu bringen. Der Bedarf an Dokumentation darüber, wie diese benutzerdefinierten Vue-Konzepte funktionieren, bringt React hier in Führung.

Dieser Punkt geht an React, gefolgt von Vue. Die Teams sollten jedoch Lösungen diskutieren, um zu entscheiden, was am besten zu ihrer Situation passt.

Dokumentation

React und Vue haben einen Vorteil: Ihre Gemeinschaften sind recht groß und aktiv. Bei React zum Beispiel sind über 1.500 Mitwirkende aufgelistet. Es gibt also genug Leute, die helfen können, die Dokumentation auf ein hervorragendes Niveau zu bringen.

Natürlich lässt das Team hinter Angular bei der Dokumentation nicht locker. Eine große Herausforderung bei Angular ist jedoch, dass wir einen Großteil der Online-Dokumentation, die veraltet ist, mit der von uns verwendeten Version abgleichen müssen.

Während die offizielle Angular-Dokumentation korrekt versioniert und genau ist, verwenden die Online-Antworten auf häufige Fragen und Tutorials möglicherweise ältere Versionen von Angular (oder sogar Angular.js). Diese Inkonsistenz führt zu Verwirrung und Frustration.

Da Angular außerdem sehr umfangreich ist und dazu neigt, Dinge „anders“ zu machen als das breitere JavaScript-Ökosystem, muss die Dokumentation umfangreicher sein. Für Routinetätigkeiten ist die Dokumentation hervorragend, aber wenn wir Anpassungen vornehmen müssen, fehlen entscheidende Details.

React hat die kleinste API und die am meisten erprobten Konzepte auf dem Markt. Daher ist die Dokumentation von React vermutlich der Goldstandard. Wenn man jedoch bedenkt, dass auch Vue einige Konzepte abdecken muss und ein breiteres API benötigt, leistet es eine hervorragende Arbeit.

In Anbetracht des Umfangs der notwendigen Dokumentation und ihres Niveaus, geben wir Vue den ersten Platz, dicht gefolgt von React

Gemeinschaft

Die drei Großen haben sich ihren Platz an der Spitze durch den Aufbau großer Communities verdient. Heute hat Angular 80 Tausend Sterne, React 183 Tausend Sterne und Vue 193 Tausend Sterne auf GitHub. Zusammengenommen sind das fast eine halbe Million Sterne! Auch wenn Sterne allein keine verlässliche Kennzahl sind, so zeigen sie doch, dass diese Projekte in der Community beliebt sind und gut ankommen.

Die Anzahl der Community-Zugänge spiegelt den Fokus von React und Vue auf kleinere, engagiertere Projekte wider. Während Angular versucht, alles aus der Schachtel zu holen, haben React und Vue ihre Stärke im Aufbau eines großen Ökosystems gefunden. Zu diesem Ökosystem gehören auch die Unterstützung der Benutzer und die Unterstützung der Plugin-Entwickler. Letztendlich ist ein solches Ökosystem schwer zu schlagen, wenn es einmal etabliert ist.

Die Hauptzielgruppe von Angular, die Unternehmensanwender, macht ihre Zielgruppe klein. React und Vue haben einen gleich großen Anteil an der aktiven Open-Source-Gemeinschaft. Allerdings verwendet etwa die Hälfte der Vue-Community Vue 2 und die andere Hälfte Vue 3. Während die meisten einen Wechsel anstreben, sind einige wichtige Pakete nur noch für die zuvor veröffentlichte Version 2 verfügbar.

React hat diese Herausforderung nicht. Die API ist gleich geblieben, und neuere Ergänzungen wie Hooks sind optional, obwohl die Community diese Änderungen recht schnell angenommen hat.

Wir hätten hier Vue den Punkt gegeben, aber da der Übergang von Vue 2 zu Vue 3 ein bisschen ein Kampf der Community zu sein scheint, werden wir diesen Punkt an React vergeben und Vue auf den zweiten Platz setzen.

Fazit

Fazit Die Wahl des richtigen Frontend-Frameworks unter den großen Drei ist vor allem eine Frage des Geschmacks. Während einige Frameworks mehr auf bestimmte Anwendungsfälle zugeschnitten sind als andere, sind die drei großen Frameworks alle generisch und entwicklerfreundlich genug, um in allen Arten von Projekten eingesetzt zu werden. Angular könnte für eine Gruppe ehemaliger Java- oder .NET-Entwickler am sinnvollsten sein, während Node.js-Befürworter sich mit React besser aufgehoben fühlen würden. Letztendlich hängt die Entscheidung, welches Framework verwendet werden soll, vollständig von nicht-funktionalen Aspekten ab, wie z. B. der Zusammensetzung des Teams.