Angular vs. React vs. Vue 2022

Es gibt drei Frameworks zum Erstellen von Webanwendungen, von denen jeder Frontend-Entwickler gehört hat: React, Vue.js und Angular.

React ist eine UI-Bibliothek, Angular ist ein vollwertiges Frontend-Framework, während Vue.js ein progressives Framework ist.

Sie können fast austauschbar verwendet werden, um Front-End-Anwendungen zu erstellen, aber sie sind nicht zu 100 Prozent gleich, daher ist es sinnvoll, sie zu vergleichen und ihre Unterschiede zu verstehen.

Jedes Framework ist komponentenbasiert und ermöglicht die schnelle Erstellung von UI-Funktionen.

Sie haben jedoch alle eine andere Struktur und Architektur – also werden wir uns zuerst mit ihren architektonischen Unterschieden befassen, um die Philosophie dahinter zu verstehen.

Die Architektur

Reagieren

React erzwingt keine bestimmte Projektstruktur, und wie Sie dem offiziellen „Hello World“-Beispiel unten entnehmen können, können Sie React mit nur wenigen Codezeilen verwenden.

 ReactDOM.render(
  <h1>Hallo Welt!</h1>,
  document.getElementById('root')
);

React kann als UI-Bibliothek zum Rendern von Elementen verwendet werden, ohne eine bestimmte Projektstruktur zu erzwingen, und deshalb ist es nicht unbedingt ein Framework.

React-Elemente sind die kleinsten Bausteine ​​von React-Apps. Sie sind leistungsfähiger als DOM-Elemente, da das React-DOM sicherstellt, dass sie effizient aktualisiert werden, wenn sich etwas ändert.

Komponenten sind größere Bausteine, die unabhängige und wiederverwendbare Teile definieren, die in der gesamten Anwendung verwendet werden. Sie akzeptieren Eingaben, sogenannte Requisiten, und erzeugen Elemente, die dann dem Benutzer angezeigt werden.

React basiert auf JavaScript, wird aber meistens mit JSX (JavaScript XML) kombiniert, einer Syntaxerweiterung, mit der Sie Elemente erstellen können, die gleichzeitig HTML und JavaScript enthalten.

Alles, was Sie mit JSX erstellen, könnte auch mit der React JavaScript API erstellt werden, aber die meisten Entwickler bevorzugen JSX, weil es intuitiver ist.

Sehen

Die Vue.js-Kernbibliothek konzentriert sich nur auf die Ansichtsebene. Es wird als progressives Framework bezeichnet, da Sie seine Funktionalität mit offiziellen Paketen und Paketen von Drittanbietern wie Vue Router oder Vuex erweitern können, um es in ein tatsächliches Framework zu verwandeln.

Obwohl Vue nicht unbedingt mit dem MVVM-Muster (Model-View-ViewModel) verbunden ist, wurde sein Design teilweise davon inspiriert. Mit Vue arbeiten Sie hauptsächlich auf der ViewModel-Ebene, um sicherzustellen, dass die Anwendungsdaten so verarbeitet werden, dass das Framework eine aktuelle Ansicht rendern kann.

Mit der Templating-Syntax von Vue können Sie View-Komponenten erstellen und vertrautes HTML mit speziellen Anweisungen und Funktionen kombinieren. Diese Templating-Syntax wird bevorzugt, obwohl reines JavaScript und JSX ebenfalls unterstützt werden.

Komponenten in Vue sind klein, eigenständig und können in der gesamten Anwendung wiederverwendet werden. Single File Components (SFCs) mit der Erweiterung .vue enthalten HTML, CSS und JavaScript, sodass sich der gesamte relevante Code in einer Datei befindet.

SFCs sind die empfohlene Methode zum Organisieren von Code in Vue.js-Projekten, insbesondere in größeren. Tools wie Webpack oder Browserify sind erforderlich, um SFCs in funktionierenden JavaScript-Code zu transpilieren.

Eckig

In diesem Artikel bespreche ich Angular 2 und nicht die erste Version des Frameworks, das jetzt als AngularJS bekannt ist.

AngularJS, das ursprüngliche Framework, ist ein MVC-Framework (Model-View-Controller). Aber in Angular 2 gibt es keine strikte Assoziation mit MV*-Mustern, da es auch komponentenbasiert ist.

Projekte in Angular sind in Module, Komponenten und Dienste strukturiert. Jede Angular-Anwendung hat mindestens eine Root-Komponente und ein Root-Modul.

Jede Komponente in Angular enthält ein Template, eine Klasse, die die Anwendungslogik definiert, und MetaData (Decorators). Die Metadaten für eine Komponente teilen Angular mit, wo die Bausteine ​​zu finden sind, die es zum Erstellen und Präsentieren seiner Ansicht benötigt.

Angular-Templates sind in HTML geschrieben, können aber unter anderem auch Angular-Template-Syntax mit speziellen Anweisungen enthalten, um reaktive Daten auszugeben und mehrere Elemente zu rendern.

Dienste in Angular werden von Komponenten verwendet, um Aufgaben der Geschäftslogik wie das Abrufen von Daten oder das Validieren von Eingaben zu delegieren. Sie sind ein eigenständiger Bestandteil von Angular-Anwendungen. Obwohl Angular ihre Verwendung nicht erzwingt, wird dringend empfohlen, Apps als eine Reihe von verschiedenen Diensten zu strukturieren, die wiederverwendet werden können.

Angular ist in TypeScript integriert, daher wird seine Verwendung empfohlen, um ein möglichst nahtloses Erlebnis zu erzielen, aber einfaches JavaScript wird ebenfalls unterstützt.

Popularität

Reagieren

React ist eines der beliebtesten JavaScript-Projekte mit 160.000 Sternen auf GitHub. Es wird von Facebook entwickelt und gepflegt und in vielen ihrer Projekte intern verwendet. Darüber hinaus betreibt es laut den Nutzungsstatistiken von BuiltWith über 2 Millionen Websites.

Sehen

Von den drei Frameworks hat Vue mit 176.000 Sternen die meisten Sterne auf GitHub. Das Projekt wird von Ex-Googler Evan You entwickelt und geleitet. Es ist ein sehr starkes, unabhängiges Projekt in der Open-Source-Community und wird laut BuiltWith von über 1 Million Websites verwendet.

Eckig

Angular wurde von Google entwickelt, aber überraschenderweise wird es in einigen ihrer Flaggschiff-Produkte wie Search oder Youtube nicht verwendet. Es wird häufig in Unternehmensprojekten verwendet und betreibt über 97.000 Websites, die auf den Daten von BuiltWith basieren.

Mit 68.000 Sternen auf GitHub ist es das am wenigsten markierte unter den drei Frameworks. Beim Wechsel von Angular 1 zu Angular 2 wurde jedoch ein völlig neues Repository erstellt, anstatt das AngularJS-Projekt fortzusetzen, das ebenfalls 59.000 Sterne hat.

Ökosystem

Open-Source-Pakete sparen Ihnen wertvolle Zeit bei der Entwicklung von Anwendungen. Nicht nur das, sie sind oft besser als maßgefertigte Komponenten und Pakete, weil sie kampferprobt sind.

Es ist wichtig, sich die Verfügbarkeit von gebrauchsfertigen Komponenten, Themen und anderen Tools anzusehen, die Ihnen helfen können, neue Funktionen einfacher zu erstellen.

Reagieren

Viele Front-End-Anwendungen verlassen sich auf die globale Zustandsverwaltung, um Informationen zu speichern, z. B. wer angemeldet ist, und andere Benutzereinstellungen.

Das beliebteste Projekt für die JavaScript-Zustandsverwaltung ist Redux. Die meisten Entwickler verwenden die offiziellen React-Bindungen für Redux, die vom Redux-Team gepflegt werden.

Aufgrund der Popularität von React ist das Auffinden von Eingabekomponenten und gebrauchsfertigen Elementen extrem einfach. Sie sind alle nur eine Google- oder GitHub-Suche entfernt.

Das React-Ökosystem umfasst auch React Native, mit dem Sie native iOS- und Android-Anwendungen aus einer einzigen in React geschriebenen Codebasis erstellen können. Daher kann React auch eine gute Wahl für die Erstellung mobiler Anwendungen mit Webtechnologien sein.

React ist Teil des MERN-Stacks, der MongoDB, ExpressJS, React und NodeJS enthält. Das Tolle an dieser Kombination ist, dass eine einzige Sprache – JavaScript – die gesamte Anwendung unterstützt.

Sehen

Obwohl Redux in Vue verwendet werden kann, gibt es keine offiziellen Bindungen. Aber das sollte Sie nicht beunruhigen, denn Vuex ist die offizielle staatliche Verwaltungsbibliothek, die speziell für Vue-Anwendungen entwickelt wurde. Abgesehen von der sehr guten Integration in Vue ist es einfach, mit den Entwicklertools von Vue Fehler zu beheben.

In den frühen Tagen von Vue war es schwieriger, gebrauchsfertige Komponenten zu finden. Da die Community gewachsen ist, gibt es eine große Auswahl an Eingabekomponenten und erweiterten Elementen, die Sie verwenden können, um Ihre Entwicklung zu beschleunigen.

Für die Entwicklung mobiler Apps gibt es ein aufstrebendes Projekt namens Weex. Weex wird von Alibaba entwickelt und verwendet, ist aber nicht so ausgereift und leistungsfähig wie React Native. Da das Projekt mehr in China entwickelt und verwendet wird, ist es außerdem schwieriger, Dokumentationen und Lösungen für Probleme auf Englisch zu finden.

Vue lässt sich gut in Laravel integrieren, weshalb sie oft zusammen verwendet werden. Laravel bietet ein vollständiges JavaScript- und CSS-Gerüst, um die Verwendung von Vue in neuen Projekten zu ermöglichen.

Eckig

Für die Zustandsverwaltung in Angular können Sie das NgRx-Projekt verwenden. Es wurde von Redux inspiriert, aber speziell für Angular entwickelt.

Wie bei Vue und React gibt es viele fertige Komponenten, die Sie in Ihre Projekte importieren können. Was bei Angular etwas anders ist, ist, dass es viele offizielle Komponenten im Angular Material-Projekt gibt. Dies ist ein offizielles Projekt von Google, das Material Design-Komponenten für Angular-Anwendungen anbietet.

Sie können plattformübergreifende mobile Anwendungen in Angular mit NativeScript erstellen. Es unterstützt auch Vue, aber die Angular-Unterstützung ist ausgereifter.

Angular ist Teil des bekannten MEAN-Stacks, der Angular mit MongoDB, ExpressJS und NodeJS kombiniert. Ähnlich wie der MERN-Stack stützt er sich sowohl für das Front-End als auch für das Back-End vollständig auf JavaScript.

Gemeinsame Technologien

Angular, React und Vue können alle zur Entwicklung von Progressive Web Apps, auch bekannt als PWAs, verwendet werden.

PWAs sind keine mobilen Anwendungen, sondern Webanwendungen, die Smartphone-Benutzer als Verknüpfungen zu ihrem Startbildschirm hinzufügen können und ein ähnliches Erscheinungsbild wie native mobile Apps bieten.

Sie können auch Premium-Vorlagen und vorgefertigte Anwendungen für jedes Framework finden, aber Angular und React bieten mehr Premium-Optionen als Vue.

Leistung

Bei der Auswahl eines Frameworks oder einer Bibliothek müssen Sie auch an die Leistung denken.

In vielen Fällen müssen Sie sich keine Gedanken über die Leistung machen, insbesondere wenn Sie ein kleines Projekt erstellen. Je mehr ein Projekt jedoch an Umfang und Komplexität zunimmt, kann (und wird) die Leistung zu einem Problem werden.

Es ist wichtig zu beachten, dass die Qualität der Entwicklung und das Befolgen von Best Practices in Bezug auf die Webleistung wichtiger sind als die Wahl des Frameworks.

Da es jedoch einige Leistungsmetriken und -unterschiede gibt, werde ich sie untersuchen und erklären, wie sich jede auf Ihre Entwicklungsbemühungen auswirken könnte.

JS-Framework-Benchmark: Angular vs. React vs. Vue

Die Ergebnisse des JS-Framework-Benchmarks zeigen, dass sie alle bei den meisten Benchmarks, wie dem Erstellen oder Anhängen von Zeilen in einer Tabelle, recht gut abschneiden.

Wie Sie oben sehen können, ist Vue beim Auswählen von Zeilen erheblich langsamer als Angular und React. Auf der anderen Seite sind Angular und React nicht sehr effizient beim Vertauschen von Zeilen.

Dies sind die einzigen wesentlichen Unterschiede bei Rendering-Benchmarks – und in den meisten Fällen führen sie zu keinen merklichen Ergebnissen. Da das Auswählen von Zeilen eine häufigere Funktion ist als das Vertauschen von Zeilen, würde ich sagen, dass dieser Benchmark Vue auf den dritten Platz hinter Angular und React bringt, die sich die Spitzenposition teilen.

In Sachen Arbeitsspeicher und Bootzeit schneiden React und Vue sehr gut ab, Angular ist aber etwas langsamer. Angular kann 150 ms brauchen, um ein einfaches Skript zu booten, und benötigt mehr Arbeitsspeicher, um ausgeführt zu werden.

Performance-Track: Angular vs. React vs. Vue

Perf Track von Google Chrome Labs zeigt Produktionsdaten von Tausenden von Websites. Diese Statistiken werden von vielen anderen Dingen beeinflusst und nicht nur vom Rahmen der Wahl, sondern schauen wir uns die Zahlen an.

Erste zufriedene Farbe

Vue- und React-Websites rangieren für diese Metrik höher als Angular, das mehr Zeit zum Starten und Präsentieren von Inhalten für den Benutzer benötigen kann.

Größte zufriedene Farbe

Angular ist auch das langsamste unter den drei Frameworks beim Rendern einer vollständigen Seite, wobei nur 27 Prozent der Angular-Websites im akzeptablen Bereich abschneiden.

Erste Eingangsverzögerung

Bei allen drei Frameworks liegen mehr als 80 Prozent der Websites bei der ersten Eingabeverzögerung im akzeptablen Bereich, was zeigt, wie lange es dauert, bis der Nutzer mit der Seite interagieren kann.

JavaScript-Bytes

Die mit Abstand leichtesten Anwendungen sind die mit Vue entwickelten, wobei 68 Prozent der Vue-Apps weniger als 1 MB JavaScript laden. Auf der anderen Seite haben Angular- und React-Anwendungen tendenziell eine größere Codegröße.

So verwenden Sie diese Metriken

Sie können diesen Zahlen einen Trend entnehmen, aber Sie sollten nicht zu schnell Schlüsse ziehen. Für die letzte Abbildung könnte beispielsweise eine Erklärung sein, dass Vue verwendet wird, um leichtere Anwendungen zu entwickeln, während Angular für größere Projekte verwendet wird.

Die Statistiken können Ihnen helfen, eine gute Entscheidung zu treffen, aber Sie können sie nicht verwenden, um zu beweisen, dass ein Framework schneller oder besser als das andere ist.

Erweiterte Funktionen

Für fortgeschrittenere Anwendungen sollte das verwendete Front-End-Framework in der Lage sein, einige Aufgaben auszuführen, die die Leistung verbessern und besser skalieren können.

Zwei Schlüsseltechnologien sind serverseitiges Rendering (SSR) und Virtualisierung.

Reagieren

React unterstützt serverseitiges Rendering mit dem offiziellen ReactDOMServer-Paket. Für die Virtualisierung können Sie ein beliebtes Drittanbieter-Tool namens React Virtualized verwenden.

Sehen

Serverseitiges Rendern wird auch in Vue mit dem offiziellen SSR-Paket unterstützt. Darüber hinaus können Sie auch das Nuxt.js-Framework verwenden, das auf Vue aufbaut und SSR unterstützt.

Die Virtualisierungsmöglichkeiten in Vue sind leider nicht so stark. Vue Virtual Scroll List ist meiner Meinung nach die beste Lösung für virtuelles Scrollen, aber etwas fehlerhaft und nicht so stabil wie die Optionen für React und Angular.

Eckig

Angular hat das offizielle Angular Universal-Paket für SSR und eine offizielle Komponente für virtuelles Scrollen und effizientes Rendern großer Listen.

Lernkurve

Wie einfach ist es, jedes dieser Frameworks zu lernen?

Um diese Frage zu beantworten, müssen wir uns die Komplexität der einzelnen Frameworks und die Konzepte ansehen, die sie einführen.

Reagieren

In seinem grundlegendsten Anwendungsfall ist React das am wenigsten komplexe der drei Frameworks. Das liegt daran, dass Sie nur die Bibliothek importieren müssen und dann mit dem Schreiben Ihrer React-Anwendung mit ein paar Zeilen Code beginnen können.

Abgesehen vom Hello World-Beispiel sind die meisten React-Anwendungen jedoch komponentenbasiert und rendern nicht nur ein paar Elemente auf der Seite.

Eine Sache, die einige Entwickler an React seltsam oder schwierig finden, ist die Tatsache, dass das Erlernen von JSX eine Einbahnstraße ist. Sie können auch rohes JavaScript verwenden, aber da die meisten React-Entwickler JSX verwenden, ist es ziemlich unvermeidlich, es zu lernen.

Dies ist die Hauptsache, die die Lernkurve von React etwas steiler machen kann, aber abgesehen davon ist es eine Bibliothek, die für Entwickler, die sich mit JavaScript auskennen und Webentwicklungskonzepte verstehen, leicht zu erlernen ist.

Sehen

Vue ist etwas komplexer einzurichten als React. Sie können es als Bibliothek verwenden, um Komponenten zu definieren, die Sie in Ihrem gesamten HTML verwenden können – aber ähnlich wie bei React werden die meisten Projekte nicht so erstellt.

Die meisten Vue-Projekte haben eine Stammkomponente namens App.vue und eine Reihe von untergeordneten Komponenten zum Anzeigen verschiedener Dinge.

In Bezug auf die Syntax müssen Sie nur die Vorlagensyntax von Vue neu lernen, die sehr einfach zu verstehen ist, wenn Sie sich mit HTML auskennen. Grundlegende Anweisungen wie v-if und v-for für bedingtes Rendering und List-Rendering sind auch für Anfänger leicht verständlich.

Darüber hinaus halten die Single-File-Komponenten von Vue den gesamten Front-End-Code an einem Ort, was die Organisation neuer Projekte vereinfacht.

Vue ist meiner Meinung nach aufgrund seiner Einfachheit und intuitiven Syntax am einfachsten zu erlernen.

Eckig

Angular hat die komplexeste Projektstruktur der drei, und da es sich um ein vollwertiges Front-End-Framework handelt, stützt es sich auf mehr Konzepte.

Abgesehen von Komponenten unterstützt Angular Module und Dienste. Es erwartet Sie, dass Sie Ihre Codebasis auf eine bestimmte Weise schreiben und entwerfen, die Ihr Projekt beim Hochskalieren wartungsfreundlicher macht.

Was die Syntax betrifft, da Angular am besten mit TypeScript funktioniert, ist es wichtig, dass Sie TypeScript kennen, wenn Sie ein Angular-Projekt erstellen.

Genau wie bei Vue müssen Sie sich auch mit der HTML-ähnlichen Syntax vertraut machen, damit Sie mit Angular neue UI-Funktionen programmieren können.

Meiner Meinung nach ist Angular für den durchschnittlichen Entwickler am schwierigsten zu erlernen, da es komplexer ist und auf TypeScript basiert.

Zukunftsvorhersagen

Viele Open-Source-Projekte und -Frameworks geraten in Vergessenheit und werden nicht mehr gepflegt. Sollten Sie sich Sorgen über eines der hier diskutierten Frameworks machen?

Obwohl wir nicht vollständig vorhersagen können, was passieren wird, ist die laufende Entwicklungsarbeit ein guter Indikator für den Zustand dieser Projekte. Popularität und Wachstum sind ebenfalls wichtige Metriken, um die Langlebigkeit eines Projekts vorherzusagen, also werfen wir einen Blick auf jedes Framework.

Reagieren

React v17.0 wurde veröffentlicht, enthält aber überraschenderweise keine neuen Funktionen für Entwickler.

Die wichtigste Änderung besteht darin, dass diese neue Version es einfacher macht, React selbst zu aktualisieren. Sie können nur einige Teile von React von der älteren Version auf die neuere aktualisieren, ohne das gesamte Projekt aktualisieren zu müssen.

Wenn Ihre Anwendung auf Funktionen angewiesen ist, die sich mit der neuen Version ändern oder veraltet sind, können Sie die alte Version beibehalten, um diese Funktionalität aufrechtzuerhalten. Dieses Update macht React zu einer großartigen langfristigen Wahl, da es einfacher ist, mit neuen Versionen auf dem Laufenden zu bleiben.

React ist seit letztem Jahr bei den wöchentlichen npm-Downloads um 44 Prozent gewachsen. In absoluten Zahlen ist es immer noch das am häufigsten heruntergeladene der drei Projekte.

Sehen

Vue 3 wurde im September 2020 veröffentlicht und geht viele schwerwiegende Probleme an, die Vue 2 in großen Projekten hat. Es führt die Composition API ein, die von React Hooks inspiriert ist und es einfacher macht, Logik über Komponenten hinweg wiederzuverwenden.

Das gesamte Projekt wurde in TypeScript neu geschrieben, was die TypeScript-Unterstützung in neuen Vue-Projekten verbessert und gleichzeitig das Projekt wartungsfreundlicher macht.

Vue 3 ist ein dringend benötigtes Upgrade und macht Vue besser geeignet für große Projekte.

Die wöchentlichen Downloads von Vue sind seit letztem Jahr um 87 Prozent gestiegen, was Vue relativ gesehen zum am schnellsten wachsenden Framework macht. Wenn Vue diese Wachstumsrate halten kann, wird es Angular sicherlich bald übertreffen.

Eckig

Angular hat kürzlich den Ivy Compiler vorgestellt. Es reduziert Build-Zeiten, optimiert Assets, ermöglicht schnelleres Testen und verbessert im Allgemeinen das Entwicklererlebnis.

Das Angular-Team veröffentlicht mehrmals im Jahr große Updates, die neue Funktionen enthalten oder einfach nur das Framework mit neuen Browserversionen auf den neuesten Stand bringen können.

Angular ist seit letztem Jahr bei den wöchentlichen Downloads um rund 50 Prozent gewachsen, also ist es immer noch ein beliebtes Projekt.

Fazit

Angular, React und Vue befinden sich alle in sehr aktiver Entwicklung. Sie veröffentlichen regelmäßig neue Versionen und pflegen die bestehenden. Da die aktuelle Unterstützungsstufe jeweils hoch ist, können Sie jedes dieser Frameworks bedenkenlos verwenden.

Es ist wichtig zu beachten, dass Angular nicht so schnell wächst wie zuvor, während Vue – obwohl es erst vor kurzem gestartet wurde – stark zu wachsen scheint.

Wie bereits erwähnt, können wir nicht vorhersagen, welche Frameworks langfristig relevant bleiben, aber jedes Projekt hat eine großartige Community hinter sich und entwickelt sich ständig weiter.

Mein Ziel mit diesem Artikel war es, die architektonischen Unterschiede zu erklären, die Stärken und Schwächen jedes Frameworks aufzuschlüsseln und sie zu vergleichen, wo immer es anwendbar ist.

Bevor Sie in ein neues Framework einsteigen, sollten Sie einige Dinge beachten.

Erstens kann die Erfahrung Ihres Teams ein entscheidender Faktor bei der Auswahl einer neuen Technologie sein.

Ebenso müssen Sie die in Ihrer Nähe verfügbaren Talente berücksichtigen, damit Sie Entwickler für Ihr Projekt einstellen können.

Wenn es schließlich um das Projekt selbst geht, können die Komplexität und der Umfang auch die Wahl des Frameworks beeinflussen.

Ich hoffe, dass Sie unter Berücksichtigung aller wichtigen Unterschiede entscheiden können, welches das beste Front-End-Framework für Ihre Ziele und Bedürfnisse ist.