React vs Vue vs Angular
Das goldene Trio der Frontend Frameworks: React, Vue & Angular. Jeder Entwickler kennt sie, aber welches Framework ist das beste?
Fühlt man sich endlich sicher in den Basistechnologien HTML, CSS und Javascript betritt man die unbekannte und vielfältige Welt der Frameworks. Der frisch gebackene Webentwickler steht vor der entscheidenden Frage: Welches Framework lerne ich?
Die Techwelt bleibt nicht stehen. Was gestern die beste Wahl war, kann heute schnell außer Mode sein. Das richtige Framework kann dem Entwickler eine Reihe an Türen öffnen und das falsche gleichzeitig eine Menge verbauen (oder???). Also... welches Framework ist die beste Wahl?
Was sind die bekanntesten und welchen Marktanteil haben sie?
Für alle schwarz-weiß Denker: Ich muss Euch enttäuschen. So etwas, wie das eine beste Framework gibt es nicht. Die präziseste Antwort auf die Frage lautet wahrscheinlich, dass es 1. projektabhängig und 2. typabhängig ist.
Im Endeffekt kommt es also darauf an, mit welchem Framework Du Dich persönlich am wohlsten fühlst und welche Projekte Du entwickeln möchtest. Ich glaube, dass sich diese beiden Faktoren meistens nicht ganz trennen lassen. Wenn Du große Projekte bauen möchtest, dann wirst Du Dich wahrscheinlich auch mit dem für große Projekte am Besten geeigneten Framework am wohlsten fühlen und genauso umgekehrt.
Der erste Schritt in die richtige Richtung ist, sich die nächsten Abschnitte aufmerksam durchzulesen und genau aufzupassen, welche Eigenschaften Dir ins Auge springen.
Popularität der Frameworks
Für Jobsuchende ergibt sich die Auswahl zuteilen sicher auch aus der Frage, mit welchem Framework sie die höchsten Chancen auf einen Job haben und dafür wiederum lohnt sich ein Blick auf den Marktanteil der einzelnen Frameworks.
Wir müssen zwischen den verschiedenen Frameworks wesentlich unterscheiden. React, Angular und Vue bieten um einiges mehr an zusätzlichen Gestaltungsmöglichkeiten als zum Beispiel jQuery. Django, Laravel und Express sind keine Frontend- sondern Backend-Technologien.
Die populärsten kraftvollen Frontend-Frameworks sind dementsprechend React, Angular und Vue. On a side note: Es lohnt sich auch jQuery zu lernen, aber es zählt eher zu einer anderen Kategorie als React, Angular & Vue.
React
Mit 40 Prozent besitzt React eindeutig den höchsten Marktanteil. Aus diesem Grund lernst Du auch in den meisten Frontend-Kursen die von Facebook entwickelte Javascript-Bibliothek. Übrigens: weil React dem Entwickler keine spezifische Struktur aufzwingt, handelt es sich genau genommen um kein Framework.
Eine React Anwendung strukturiert sich mit Komponenten. Innerhalb der Komponenten erlaubt dir JSX HTML-Code in Deinem Javascript zu schreiben. Eine React-Anwendung setzt sich aus einer Reihe an Komponenten zusammen, die wiederum andere Komponenten erhalten können.
React arbeitet mit einer virtuellen Kopie des DOM. Wenn sich ein Wert auf deiner Webseite verändert, erstellt React zuerst eine Kopie des DOM und vergleicht diese Kopie mit der Originalversion. Beim Update aktualisiert React dann nur die Elemente, die sich auch wirklich verändert haben.
https://blog.logrocket.com/virtual-dom-react/#exploring-virtual-dom-react ←- Für mehr Infos
Angular
Im Gegensatz zu React gilt Angular wirklich als Framework. Angular gibt eine MVC-Architektur vor, arbeitet ansonsten aber genauso wie Vue und React mit Komponenten.
Angular wird von Google verantwortet und von großen Unternehmen wie Microsoft, PayPal & Samsung benutzt. Im Unterschied zu Vue und React baut Angular auf TypeScript, einer verstärkten Javascript-Version auf, was wiederum die Hürden für Angular-Anfänger erhöht.
Eine Angular-Anwendung setzt sich aus verschiedenen Modulen zusammen, die wiederum funktional ähnliche Komponenten miteinander verbinden. Darüber hinaus gibt es Services, die eine gewisse unveränderbare Funktionalität für die ganze App anbieten. Sie lassen sich als Utility-Bausteine verstehen.
Angular Directives sind Funktionen, die aktiven Einfluss auf das DOM nehmen und was dort angezeigt wird. Zuletzt gibt es noch Pipes, die ein Input gemäß einem definierten Schema transformieren. Angular bietet zum Beispiel eine eingebaute Pipe, die eine Zahl in eine Prozentangabe (in Form eines Strings) umwandelt.
Vue
Vue wurde von einem ehemaligen Google-Softwareingenieur namens Evan You entwickelt und wird somit als einziges der drei goldenen Frameworks nicht von einem großen Tech-Konzern verantwortet.
Vue arbeitet wie der Rest komponentenbasiert, erlaubt dem Entwickler aber im Vergleich zu Angular einen größeren Freiraum. Genauso wie React nutzt Vue ein virtuelles DOM, um eine schnelle Performance zu garantieren. Auch für große Anwendungen lassen sich Vue-Zusätze für State-Management, Router & Firebase-Support hinzufügen.
Weitere Frameworks
Neben diesen Dreien, die sich das Podest der Frontend-Bibliotheken teilen, gibt es weitere nennenswerte Technologien wie Ember oder Svelte. Insbesondere Svelte gilt als aufstrebendes Framework, das man im Blick behalten sollte.
Ein kompetitiver Vergleich der Drei
Anfängerfreundlichkeit
Diese Grafik stammt aus keiner objektiven Studie, spiegelt aber die Grundstimmung unter Entwicklern wieder. Angular gilt gemeinhin als komplexestes Framework. Weil es Typescript voraussetzt, liegt die Lernkurve vor allem zu Beginn deutlich höher.
React liegt im Mittelfeld. Ich bin überzeugt, dass die Lernkurve von React heutzutage (die Grafik ist von 2019) um einiges flacher ist. Seitdem die Klassen-Komponenten durch Funktions-Komponenten ersetzt werden, ist React um einiges einfacher zu verstehen.
Vue punktet auf ganzer Linie in Sachen Anfängerfreundlichkeit. Aus eigener Erfahrung bei der Recherche für diesen Artikel kann ich bestätigen, dass Vue um einiges verständlicher war als sein Kollege Angular.
Mehr Lernresourcen für React
Weil React das populärste Framework unter den Dreien ist, gibt es auch ein (über-)proportional größeres Angebot für React-Kurse. Einige Entwickler machen sich nicht einmal Gedanken über andere Frameworks, weil sie nur von React gehört haben und in ihrem Frontend-Kurs automatisch auf React getrimmt werden.
Wenn Du sehr selbstständig und diszipliniert bist, ist Vue wegen seiner einfachen Lernkurve im Hinblick auf das Lernerlebnis wahrscheinlich die beste Wahl. Genießt Du es hingegen von einem versierten Lehrer begleitet zu werden, stehen Deine Chancen bei React besser.
Für Angular finden sich nicht unbedingt viele Kurse im Internet, was seine Position in Sachen Anfängerfreundlichkeit nicht unbedingt verbessert. Gleichzeitig muss man sagen, dass Angular-Entwickler durch ihre Seltenheit wahrscheinlich auch etwas besser verdienen (dazu habe ich aber keine Statistiken).
Performance
Größe
Einer der entscheidenden Faktor beim Thema Performance ist die Größe der Frameworks. Im Generellen gilt, dass Angular um einiges mehr an Speicher als React und Vue einnimmt.
Gleichzeitig muss man bedenken, dass Angular damit auch eine größere Auswahl an Funktionen im Basissatz bietet. Bei React und Vue müssen einige Add-ons hinzugefügt werden, wodurch die Speichergröße mit der Komplexität der Anwendung steigt.
Dafür lassen sich Vue und React aber zum Beispiel gezielter anwenden. Während für Angular auch bei kleinen Anwendungen ein mittelgroßer Speicher beansprucht wird, punkten React und Vue durch ihre Simplizität.
Web Vitals
Viel bedeutender in Fragen der Performance sind aber die Web Vitals. Diese Google-Metrik umfasst die wichtigsten Aspekte für eine gute Experience auf Seiten des Nutzers und sind Essentials für die SEO. Vier der wichtigsten Web Vitals Kategorien sind:
First Contentful Paint
Largest Contentful Paint
Cumulative Layout Shift
First Input Delay
Auf https://perf-track.web.app/ erhältst Du einen Überblick über die Performance aller Webseiten nach den genannten Kriterien und Framework sortiert.
Hier sehen wir den Vergleich der einzelnen Frameworks anhand der Kategorien. Es wird deutlich, dass sich die Frameworks in Sachen Cumulative Layout Shift und First Input Delay nicht viel nehmen. Was den First und Largest Contentful Paint angeht, hinkt Angular eindeutig hinterher. Vue liegt leicht vor React.
Dabei muss man beachten, dass die Schwierigkeit des Frameworks bei dieser Statistik einen erheblichen Unterschied macht. Weil die Statistik alle Webseiten abbildet unabhängig von der Virtuosität des Entwicklers, gibt es leichte Verzerrungen. Bedenkt man, dass Angular weitaus schwieriger zu optimieren ist als React und Vue sind die Ergebnisse naheliegend.
Skalierbarkeit
Was die Skalierbarkeit angeht, variieren die Einschätzungen. Einerseits bietet React durch seine wiederverwendbaren Komponenten und den Template-Code in JSX eine bessere Trennung der Funktionalität, sodass auch große Anwendungen weiterhin übersichtlich sind.
Angular hingegen arbeitet mit einer festen Model-View-Controller (MVC)-Architektur, die dafür sorgt, dass auch große Anwendungen sauber getrennt geschrieben werden. In React können schnell riesige Komponenten-Bäume entstehen, dessen Verflechtungen überfordern.
Vue bietet viele Add-ons, um mit React und Angular in Sachen Skalierbarkeit mitzuhalten. Gleichzeitig setzt Vue auf klassisches HTML, was je nach Geschmack etwas unübersichtlich sein kann.
Bei meiner Recherche bin ich aber auch auf viele Meinungen gestoßen, die weit über diese kurze Analyse hinausgehen und das Kriterium Skalierbarkeit im Generellen in Frage stellen. Da empfehle ich jedem, sich selber einzulesen…
Fazit
Mit jedem weiteren Artikel, den ich zum Vergleich der drei goldenen Javascript-Frameworks las, wurde mir umso deutlicher, dass sich wirklich kein objektiv besseres Framework feststellen lässt. Wenn Ihr mich fragt, kommt alles im Endeffekt auf die eigene Präferenz an.
Steht man lieber auf viel Gestaltungsspielraum oder auf vorgefertigte Bausteine? Bei welchem Framework wäre der Lernerfolg für mich am größten? Welche Anwendungen möchte ich bauen? Möchte ich einen Job in der Softwareentwicklung oder lieber hobbymäßig Apps bauen?
All diese Fragen muss jeder Interessierte für sich beantworten. Wie auch immer: Ich glaube, dass man bei diesen drei großen Frameworks keine falsche Wahl treffen kann. Das Wichtigste ist wahrscheinlich wie immer überhaupt erstmal anzufangen!