Angular, React & Vue

Angular, React & Vue - Ein umfassender Vergleich der 3 Pokémons der Frontend Frameworks.

Dieser Beitrag ist ein umfassender Leitfaden darüber, was vielleicht die richtige Lösung für Sie ist: Angular vs. React vs. Vue.

Noch vor ein paar Jahren haben EntwicklerInnen hauptsächlich darüber debattiert, ob sie Angular oder React für ihre Projekte verwenden sollten. Aber in den letzten Jahren ist das Interesse eines dritten Players namens Vue.js gewachsen. Sie sind vermutlich EntwicklerIn und wollen den nächsten Schritt in Ihrer Karriere machen und stehen nun vor die Wahl für ein Frontend Framework.

Dieser Leitfaden hat das Ziel, Ihnen bei dieser Entscheidung zu helfen.

A wie Angular

Angular, das von Google entwickelt wurde, wurde erstmals 2010 veröffentlicht und ist damit das älteste von allen.

Es handelt sich um ein TypeScript-basiertes JavaScript-Framework. Mit der Veröffentlichung von Angular 2 (und dem Wegfall des "JS" aus dem ursprünglichen Namen - AngularJS) kam es 2016 zu einer grundlegenden Änderung. Angular 2+ ist nur noch als Angular bekannt.

Obwohl AngularJS (Version 1) immer noch Aktualisierungen erhält, werden wir uns in der Diskussion auf Angular konzentrieren.

R wie React

React wurde von Facebook entwickelt und 2013 erstmals veröffentlicht.

Facebook verwendet React ausgiebig in seinen Produkten (Facebook, Instagram und WhatsApp). Ähnlich wie bei Vue kündigen die React-Entwickler ihre neueste Version auch im Blog-Bereich der React-Website an.

V wie Vue

Vue, auch bekannt als Vue.js, ist das jüngste Mitglied der Gruppe.

Es wurde von dem ehemaligen Google-Mitarbeiter Evan You im Jahr 2014 entwickelt. In den letzten Jahren hat Vue stark an Popularität gewonnen, auch wenn es nicht von einem grossen Unternehmen unterstützt wird. Die aktuellste Version wird immer auf der offiziellen Vue-Website auf der Seite "Releases" angekündigt. Mitwirkende für Vue werden durch Patreon unterstützt.

Es sollte angemerkt werden, dass Vue auch sein eigenes GitHub Repo hat und mit TypeScript funktioniert.

Architekturen im Vergleich

Components

Komponenten sind integrale Bestandteile aller drei Frameworks, egal ob es sich um Vue, React oder Angular handelt.

Eine Komponente erhält in der Regel eine Eingabe und ändert ihr Verhalten auf der Grundlage dieser Eingabe. Diese Verhaltensänderung manifestiert sich in der Regel als eine Änderung der Benutzeroberfläche in einem Teil der Seite. Die Verwendung von Komponenten macht es einfach, Code wiederzuverwenden.

Eine Komponente kann ein Warenkorb auf einer E-Commerce-Website oder ein Anmeldefeld in einem sozialen Netzwerk sein.

Angular

In Angular werden die Komponenten als Direktiven bezeichnet. Direktiven sind lediglich Markierungen auf DOM-Elementen, die Angular verfolgen und mit einem bestimmten Verhalten versehen kann. Daher trennt Angular den UI-Teil von Komponenten als Attribute von HTML-Tags und ihr Verhalten in Form von JavaScript-Code. Das ist der Unterschied zwischen Angular und React.

React

React kombiniert interessanterweise die Benutzeroberfläche und das Verhalten von Komponenten. Hier ist zum Beispiel der Code zum Erstellen einer Hallo-Welt-Komponente in React. In React ist derselbe Teil des Codes für die Erstellung eines UI-Elements und die Vorgabe seines Verhaltens verantwortlich.

Vue

Im Vergleich zwischen Vue und React sind in Vue die Benutzeroberfläche und das Verhalten auch Teil der Komponenten, was die Dinge intuitiver macht. Ausserdem ist Vue in hohem Masse anpassbar, was es ermöglicht, die Benutzeroberfläche und das Verhalten von Komponenten innerhalb eines Skripts zu kombinieren. Darüber hinaus können Sie in Vue auch Präprozessoren statt CSS verwenden, was eine grossartige Funktionalität ist. Vue ist grossartig, wenn es um die Integration mit anderen Bibliotheken, wie Bootstrap, geht.

Who's the cool kid?

Nun schauen wir uns doch mal die Popularität unserer drei Frontend Frameworks an. Für diesen Vergleich habe ich vier Metriken ausgesucht, welche für EntwicklerInnen und Unternehmen relevant sind. Notiz: Die Zahlen stammen vom November 2022.

Github Stars

Angular hat aktuell 85'000 Sterne auf GitHub. Weiterhin sollte man beachten, dass Angular JS (also die Vorversion von Angular) 59'000 Sterne hat. Da Angular auf einem völlig neuen Repository entwickelt wurde, sind natürlich einige Sterne verloren gegangen. Was man Angular nicht nehmen kann sind die 1'655 Contributors, welche die grösste Gruppe unter den dreien ist.

React stolziert mit 198'000 Sternen auf GitHub herum. Somit belegt React Platz zwei in diesem Ranking. Dafür kann sich React mit seinen fast 1'600 Contributors wirklich zeigen.

Vue kann sich mit 201'000 Sternen brüsten und belegt hiermit den ersten Platz im Github Space. Weiterhin verfügt Vue über 350 Contributors. Etwa ein Fünftel von dem was React zu bieten hat.

npm Downloads

Ein Zeichen von Popularität bietet auch die Kennzahl wie oft ein Projekt heruntergeladen wurde.

In diesem Vergleich schauen wir die wöchentlichen Downloads der offiziellen npm website an. Angular belegt den dritten Platz mit 3.2 Millionen Downloads. Knapp darüber liegt Vue mit 3.7 Millionen Downloads. Klarer Sieger hier ist React mit 17.7 Millionen Downloads die Woche.

Wie viele Applikationen wurden gebaut?

In meiner Recherche wollte ich wissen, wie viele Websites denn mit diesen Technologien gebaut wurden.

Dafür konsultierte ich die Website builtWith um einige Zahlen zu erhalten. Auf builtWith sind 120'000 live Websites hinterlet, welche mit Angular gebaut wurden. Über 800 davon in der Schweiz. Bei Vue sind es 2.06 Millionen live Websites und 11'500 davon in der Schweiz. React brilliert hier mit 11.3 Millionen live Websites wobei 90'000 allein in der Schweiz sind.

Ein spannendes Muster. Die Zahlen weltweit sind ähnlich vergleichbar mit den Zahlen in der Schweiz (in Relation).

Arbeitsmarkt

Ein letztes Kriterium für die abschliessende Bewertung ist die Nachfrage des Frameworks auf dem Arbeitsmarkt.

Hier habe ich die Zahlen vom Schweizer Arbeitsmarkt genommen. Dafür konsultierte ich die Plattformen LinkedIn und Indeed. Dabei sind mir sehr interessante Ergebnisse auf den Schoss gefallen. Die untenstehenden Zahlen bilden das Total beider Plattformen nach der Suche "{angular, react, vue} developer".

  • Angular 1'122 jobs
  • React 1'045 jobs
  • Vue 842 jobs

Hingegen den obigen Kennzahlen spiegeln die Anzahl Jobs das komplette Gegenteil.

Jedoch muss ich noch hinzufügen, dass die Zahlen der Anzahl Jobs nicht wirklich aussagekräftig sind. Bei allen drei Suchen habe ich Stichprobenweise auf Anzeigen geklickt und die Kriterien angeschaut. Bei allen dreien sind Anzeigen aufgetaucht (in den Top 50) welche das Keyword Angular, React oder Vue nicht in der Job-Beschreibung enthalten haben.

1, 2 oder 3?

Angular ist das ausgereifteste der Frameworks, hat eine gute Unterstützung in Form von Mitwirkenden und ist ein Komplettpaket. Allerdings ist die Lernkurve steil und die Konzepte der Entwicklung in Angular können neue Entwickler abschrecken. Angular ist eine gute Wahl für Unternehmen mit grossen Teams und Entwicklern, die bereits TypeScript verwenden.

React ist gerade alt genug, um ausgereift zu sein und hat eine grosse Anzahl von Beiträgen aus der Community.

Es hat eine breite Akzeptanz gefunden. Der Arbeitsmarkt für React ist wirklich gut, und die Zukunft für dieses Framework sieht rosig aus. React scheint eine gute Wahl zu sein für Einsteiger in Front-End-JavaScript-Frameworks, Start-ups und Entwickler, die eine gewisse Flexibilität schätzen.

Die Fähigkeit, sich nahtlos in andere Frameworks zu integrieren, ist ein grosser Vorteil für alle, die eine gewisse Flexibilität in ihrem Code wünschen.

Vue ist ein Neuling auf dem Gebiet, ohne die Unterstützung eines grossen Unternehmens.

Dennoch hat es sich in den letzten Jahren zu einem starken Konkurrenten für Angular und React entwickelt, insbesondere mit der Veröffentlichung von Vue 3.0. Dies spielt vielleicht auch eine Rolle bei vielen chinesischen Giganten wie Alibaba und Baidu, die Vue als ihr primäres Frontend-JavaScript-Framework einsetzen.

Vue sollte Ihre Wahl sein, wenn Sie Einfachheit bevorzugen, aber auch Flexibilität mögen.


Quintessenz

Die Antwort auf die Debatte Angular vs. React vs. Vue ist, dass es keine absolut richtige Wahl gibt, eine Schlussfolgerung, die Sie wahrscheinlich erwartet haben.

Jede dieser Bibliotheken hat ihre eigenen Vor- und Nachteile. Je nach dem Projekt, an dem Sie arbeiten, und Ihren individuellen Anforderungen wird eine dieser Bibliotheken besser geeignet sein als die andere. Es ist immer wichtig, dass Sie sich selbst informieren, bevor Sie eine Entscheidung treffen, vor allem, wenn Sie an einem geschäftlichen Projekt und nicht an einem privaten Projekt arbeiten.


Verfügen Sie bereits über Kenntnisse in Vue und Django? Smartfactory entwickelt mit Herzblut und Sachverstand Software. Am Firmensitz in Biel setzen wir für namhafte Grossunternehmen und KMU in der ganzen Schweiz spannende Projekte um.

Nehmen Sie mit uns Kontakt auf und kommen Sie für ein unverbindliches Gespräch vorbei.


Leseratte? Hier haben wir noch weitere spannende Artikel von unserem Redaktionsteam:

Digitalisierung im Unternehmen - Dem Wettbewerb voraus sein

Wann und wie eine neue Software für das Unternehmen entwickeln

Unser neuer Trainee Software Engineering