Part 1: Vergleich von Angular , React JS, Vue JS als Frontend Interface Entwicklung Framework für TypeScript und JavaScript

by Christian Derwein 09 Jun 22 15 minutes

[Sassy_Social_Share]

Architektur
React JS
React kann als UI-Bibliothek zum Rendern von Elementen verwendet werden, ohne eine bestimmte Projektstruktur zu erzwingen und ist deshalb kein Framework im eigentlichen Sinne. React Elements sind die kleinsten Bausteine von React-Anwendungen. Sie sind leistungsfähiger als DOM-Elemente, weil das React DOM dafür sorgt, 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, die Props genannt werden, und erzeugen Elemente, die dann dem Benutzer angezeigt werden. React basiert auf JavaScript, wird aber meist mit JSX (JS XML) kombiniert, einer Syntaxerweiterung, mit der Elemente erstellt werden können, die gleichzeitig HTML und JS enthalten. Alles, was mit JSX erstellt wird, könnte auch mit der React JS API erstellt werden, aber die meisten Entwickler bevorzugen JSX, weil es intuitiver ist.

Vue JS
Die Kernbibliothek von Vue.js konzentriert sich ausschließlich auf die Ansichtsschicht. Sie wird als progressives Framework bezeichnet, weil man ihre Funktionalität mit offiziellen und Drittanbieter-Paketen wie Vue Router oder Vuex erweitern kann, um sie zu einem echten Framework zu machen. Obwohl Vue nicht streng mit dem MVVM-Muster (Model-View-ViewModel) verbunden ist, wurde sein Design teilweise davon inspiriert. Mit Vue wird hauptsächlich auf der ViewModel-Schicht arbeiten, um sicherzustellen, dass die Anwendungsdaten so verarbeitet werden, dass das Framework eine aktuelle Ansicht rendern kann. Die Templating-Syntax von Vue ermöglicht die Erstellung von View-Komponenten und kombiniert vertrautes HTML mit speziellen Direktiven und Features. Diese Templating-Syntax wird bevorzugt, auch wenn rohes JS und JSX ebenfalls unterstützt werden. Komponenten in Vue sind klein, in sich geschlossen und können in der gesamten Anwendung wiederverwendet werden. Single File Components (SFCs) mit der Erweiterung .vue enthalten HTML, CSS und JS, so dass sich der gesamte relevante Code in einer Datei befindet. SFCs sind der empfohlene Weg, um Code in Vue.js-Projekten zu organisieren, insbesondere in größeren Projekten. Tools wie Webpack oder Browserify werden benötigt, um SFCs in funktionierenden JS-Code zu übersetzen.

AngularJS
In diesem Artikel geht es um AngularJS 2 und nicht um die erste Version des Frameworks, die jetzt als AngularJS bekannt ist. AngularJS, das ursprüngliche Framework, ist ein MVC (Model-View-Controller)-Framework. Aber in AngularJS 2 gibt es keine strikte Verbindung zu MV*-Mustern, da es auch komponentenbasiert ist. Projekte in AngularJS sind in Module, Komponenten und Dienste unterteilt. Jede AngularJS-Anwendung hat mindestens eine Stammkomponente und ein Stammmodul. Jede Komponente in AngularJS enthält eine Vorlage, eine Klasse, die die Anwendungslogik definiert, und Metadaten (Dekoratoren). Die Metadaten für eine Komponente teilen AngularJS mit, wo die Bausteine zu finden sind, die es zur Erstellung und Darstellung seiner Ansicht benötigt. Angular-Templates sind in HTML geschrieben, können aber auch AngularJS-Template-Syntax mit speziellen Direktiven enthalten, um u. a. reaktive Daten auszugeben und mehrere Elemente zu rendern. Dienste in AngularJS werden von Komponenten verwendet, um geschäftslogische Aufgaben wie das Abrufen von Daten oder die Validierung von Eingaben zu delegieren. Sie sind ein eigenständiger Teil von AngularJS-Anwendungen. Obwohl AngularJS ihre Verwendung nicht erzwingt, ist es sehr empfehlenswert, Anwendungen als eine Reihe von verschiedenen Services zu strukturieren, die wiederverwendet werden können. Da AngularJS in TypeScript entwickelt wurde, wird dessen Verwendung empfohlen, um ein möglichst nahtloses Erlebnis zu erhalten, aber auch einfaches JavaScript wird unterstützt.

Beliebtheit
React JS
React ist eines der beliebtesten JS-Projekte mit 160k Sternen auf GitHub. Es wird von Facebook entwickelt und gepflegt und intern in vielen seiner Projekte verwendet. Außerdem werden laut BuiltWiths Nutzungsstatistiken über 2 Millionen Websites damit betrieben.

Vue JS
Von den drei Frameworks hat Vue die meisten Sterne auf GitHub, mit 176k Sternen. 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.

AngularJS
AngularJS wird von Google entwickelt, aber überraschenderweise wird es nicht in einigen ihrer Flaggschiffprodukte wie Search oder Youtube verwendet. Es wird häufig in Unternehmensprojekten eingesetzt und versorgt laut BuiltWith über 97.000 Websites. Es ist das am wenigsten bewertete der drei Frameworks, mit 68.000 Sternen auf GitHub. Beim Wechsel von AngularJS 1 zu AngularJS 2 wurde jedoch ein völlig neues Repository erstellt, anstatt das AngularJS-Projekt fortzuführen, das ebenfalls 59.000 Sterne hat.

Ökosystem
Open-Source-Pakete sparen bei der Frontend Entwicklung von Anwendungen wertvolle Zeit. Nicht nur das, sie sind auch oft besser als maßgeschneiderte Komponenten und Pakete, weil sie erprobt sind. Es ist wichtig, auf die Verfügbarkeit von gebrauchsfertigen Komponenten, Themes und anderen Tools zu achten, mit denen neue Funktionen leichter erstellt werden können.

React JS
Viele Front-End-Anwendungen sind auf eine globale Zustandsverwaltung angewiesen, um Informationen zu speichern, z. B. wer angemeldet ist und andere Benutzereinstellungen. Das beliebteste Projekt für die JS-Zustandsverwaltung ist Redux. Die meisten Entwickler verwenden die offiziellen React-Bindings für Redux, die vom Redux-Team gepflegt werden. Aufgrund der Popularität von React ist es extrem einfach, Eingabekomponenten und gebrauchsfertige Elemente zu finden. Sie sind alle nur eine Google- oder GitHub-Suche entfernt. Das React-Ökosystem umfasst auch React Native, mit dem native iOS- und Android-Anwendungen aus einer einzigen in React geschriebenen Codebasis erstellt werden können. React kann also auch eine gute Wahl für die Erstellung mobiler Anwendungen mit Webtechnologien sein. React ist Teil des MERN-Stacks, der aus MongoDB, ExpressJS, React und NodeJS besteht. Das Tolle an dieser Kombination ist, dass eine einzige Sprache – JS – die gesamte Anwendung steuert.

Vue JS
Auch wenn Redux in Vue verwendet werden kann, gibt es keine offiziellen Bindungen. Das sollte aber nicht beunruhigen, denn Vuex ist die offizielle State-Management-Bibliothek, die speziell für Vue-Anwendungen entwickelt wurde. Abgesehen davon, dass sie sich sehr gut in Vue integriert, ist sie mit den Vue-Entwickler-Tools leicht zu debuggen. In den frühen Tagen von Vue war es schwieriger, fertige Komponenten zu finden. Seitdem die Community gewachsen ist, gibt es eine breite Palette von Eingabekomponenten und fortgeschrittenen Elementen, die verwenden werden können, um die Frontend Entwicklung zu beschleunigen. Für die individuelle agile Software Entwicklung mobiler Anwendungen gibt es ein aufstrebendes Projekt namens Weex. Weex wird von Alibaba entwickelt und verwendet, ist aber nicht so ausgereift und leistungsstark wie React Native. Da das Projekt eher in China entwickelt und verwendet wird, ist es außerdem schwieriger, Dokumentation und Lösungen für Probleme auf Englisch zu finden. Vue lässt sich gut mit Laravel integrieren, weshalb sie oft zusammen verwendet werden. Laravel bietet ein vollständiges JS- und CSS-Gerüst, um die Verwendung von Vue in neuen Projekten zu ermöglichen.

AngularJS
Für die Zustandsverwaltung in AngularJS kann das NgRx-Projekt verwendet werden. Es wurde von Redux inspiriert, ist aber speziell für AngularJS entwickelt worden. Wie bei Vue und React gibt es viele gebrauchsfertige Komponenten, die man in seine Projekte importieren kann. Der kleine Unterschied zu AngularJS ist, dass es viele offizielle Komponenten im AngularJS Material Projekt gibt. Dabei handelt es sich um ein offizielles Projekt von Google, das Material Design-Komponenten für AngularJS-Anwendungen anbietet. Mit NativeScript kann man in AngularJS plattformübergreifende mobile Anwendungen erstellen. Es unterstützt auch Vue, aber die Unterstützung für AngularJS ist ausgereifter. AngularJS ist Teil des bekannten MEAN-Stacks, der AngularJS mit MongoDB, ExpressJS und NodeJS kombiniert. Ähnlich wie der MERN-Stack stützt er sich sowohl im Front-End als auch im Back-End vollständig auf JS.

Gemeinsame Technologien
AngularJS, React und Vue können alle für die individuelle agile Software Entwicklung von Progressive Web Apps, auch PWAs genannt, verwendet werden. PWAs sind keine mobilen Anwendungen, sondern Webanwendungen, die Smartphone-Nutzer als Verknüpfungen zu ihrem Startbildschirm hinzufügen können und die ein ähnliches Erscheinungsbild wie native mobile Anwendungen bieten. Man kann auch Premium-Vorlagen und vorgefertigte Anwendungen für jedes Framework finden, aber AngularJS und React haben mehr Premium-Optionen zur Verfügung als Vue.

Leistung
Bei der Auswahl eines Frameworks oder einer Bibliothek muss auch an die Leistung gedacht werden. In vielen Fällen muss sich über die Leistung keine Gedanken gemacht werden, insbesondere bei der Frontend Interface Entwicklung eines kleinen Projektes. Je mehr ein Projekt jedoch an Umfang und Komplexität zunimmt, desto mehr kann (und wird) die Leistung zum Problem werden. Es ist wichtig zu beachten, dass die Qualität der Frontend Entwicklung und die Einhaltung von Best Practices in Bezug auf die Web-Performance wichtiger sind als die Wahl des Frameworks. Da es jedoch einige Leistungskennzahlen und -unterschiede gibt, werde ich sie näher beleuchten und erklären, wie sie sich auf die Entwicklungsarbeit auswirken können.

JavaScript-Framework-Benchmark: Angular vs. React vs. Vue
Die Ergebnisse des JS-Framework-Benchmarks zeigen, dass alle Frameworks bei den meisten Benchmarks recht gut abschneiden, z. B. beim Erstellen oder Anhängen von Zeilen in einer Tabelle. Vue ist bei der Auswahl von Zeilen deutlich langsamer als AngularJS und React. Auf der anderen Seite sind AngularJS und React nicht sehr effizient beim Austauschen von Zeilen. Dies sind die einzigen wesentlichen Unterschiede in den Rendering-Benchmarks – und in den meisten Fällen werden sie keine spürbaren Ergebnisse liefern. Da das Auswählen von Zeilen eine häufigere Funktionalität ist als das Austauschen von Zeilen, ist diese Benchmark Vue auf den dritten Platz hinter AngularJS und React, die sich die Spitzenposition teilen. Wenn es um den Speicher und die Bootzeit geht, schneiden React und Vue sehr gut ab, aber AngularJS ist ein bisschen langsamer. AngularJS braucht bis zu 150 ms, um ein einfaches Skript zu starten, und benötigt mehr Speicher für die Ausführung.

Perf 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 Framework der Wahl, aber sehen wir uns die Zahlen an.

Verzögerung bei der ersten Eingabe
Bei allen drei Frameworks liegen mehr als 80 Prozent der Websites im akzeptablen Bereich für die Verzögerung der ersten Eingabe, die angibt, wie lange es dauert, bis der Benutzer mit der Seite interagieren kann.

JavaScript-Bytes
Die schlanksten Anwendungen sind bei weitem die, die mit Vue entwickelt wurden. 68 Prozent der Vue-Anwendungen laden weniger als 1 MB JS. AngularJS- und React-Anwendungen haben dagegen tendenziell einen größeren Codeumfang.

Wie man diese Metriken verwendet
Aus diesen Zahlen lässt sich ein Trend ablesen, aber man sollte nicht zu schnell Schlussfolgerungen ziehen. Die letzte Zahl könnte zum Beispiel damit erklärt werden, dass Vue für die individuelle agile Software Entwicklung leichtgewichtigerer Anwendungen verwendet wird, während AngularJS für größere Projekte eingesetzt wird. Die Statistiken können helfen, eine gute Entscheidung zu treffen, aber sie können nicht als Beweis dafür verwendet werden, dass ein Framework schneller oder besser ist als ein anderes.

Erweiterte Funktionen
Für fortgeschrittene Anwendungen sollte das verwendete Front-End-Framework einige Aufgaben ausführen können, die die Leistung verbessern und besser skalierbar sind.

Zwei Schlüsseltechnologien sind das serverseitige Rendering (SSR) und die Virtualisierung.

React JS
React unterstützt das serverseitige Rendering mit dem offiziellen ReactDOMServer-Paket. Für die Virtualisierung kann ein beliebtes Drittanbieter-Tool namens React Virtualized verwendet werden.

Vue JS
Serverseitiges Rendering wird auch in Vue mit dem offiziellen SSR-Paket unterstützt. Darüber hinaus kann auch das Nuxt.js-Framework verwendet werden, das auf Vue aufbaut und SSR unterstützt. Die Virtualisierungsoptionen in Vue sind leider nicht so stark. Vue Virtual Scroll List ist die beste Lösung für virtuelles Scrollen, aber es ist ein bisschen “buggy” und nicht so stabil wie die Optionen für React und AngularJS.

AngularJS
AngularJS hat das offizielle AngularJS Universal Paket für SSR und eine offizielle Komponente für virtuelles Scrollen und effizientes Rendering von großen Listen.

Lernkurve
Wie einfach ist es, jedes dieser Frameworks zu erlernen? Um diese Frage zu beantworten, müssen wir uns die Komplexität der einzelnen Frameworks und die von ihnen eingeführten Konzepte ansehen.

React JS
In seinem grundlegendsten Anwendungsfall ist React das am wenigsten komplexe der drei Frameworks. Das liegt daran, dass man nur die Bibliothek importieren muss und dann die React-Anwendung mit ein paar Zeilen Code schreiben kann. Aber abgesehen von dem Hello World-Beispiel sind die meisten React-Anwendungen komponentenbasiert und rendern nicht nur ein paar Elemente auf der Seite. Eine Sache, die manche Entwickler an React seltsam oder schwierig finden, ist die Tatsache, dass das Erlernen von JSX eine Einbahnstraße ist. Man kann zwar auch rohes JS verwenden, aber da die meisten React-Entwickler JSX verwenden, ist das Erlernen von JSX so gut wie unumgänglich. Das ist der Hauptgrund, der die Lernkurve von React etwas steiler macht, aber abgesehen davon ist es eine Bibliothek, die für Entwickler, die JS kennen und Webentwicklungskonzepte verstehen, leicht zu erlernen ist.

Vue JS
Vue ist etwas komplizierter einzurichten als React. Man kann es als Bibliothek verwenden, um Komponenten zu definieren, die man in einem HTML-Code verwenden kann- aber ähnlich wie bei React werden die meisten Projekte nicht auf diese Weise aufgebaut. Die meisten Vue-Projekte haben eine Root-Komponente namens App.vue und eine Reihe von Child-Komponenten für die Anzeige verschiedener Dinge. Wenn es um die Syntax geht, ist die einzige neue Sache, die man lernen muss, die Template-Syntax von Vue, die sehr einfach zu verstehen ist, wenn man HTML kennt. Grundlegende Direktiven, wie v-if und v-for für bedingtes Rendering und Listenrendering, sind auch für Anfänger leicht zu verstehen. Darüber hinaus halten die Single-File-Komponenten von Vue den gesamten Front-End-Code an einem Ort und machen es einfach, neue Projekte zu organisieren. Meiner Meinung nach ist Vue aufgrund seiner Einfachheit und intuitiven Syntax am leichtesten zu erlernen.

AngularJS
AngularJS hat die komplexeste Projektstruktur der drei, und da es eine vollwertige Frontend Interface Entwicklung ist, beruht es auf mehr Konzepten. Abgesehen von Komponenten unterstützt AngularJS Module und Dienste. Es erwartet von Einem, dass man seine Codebasis auf eine bestimmte Art und Weise schreibt und entwerft, die das Projekt wartbarer macht, wenn es größer wird. Da AngularJS am besten mit TypeScript funktioniert, ist es wichtig, dass man TypeScript beherrscht, wenn man ein AngularJS-Projekt erstellt. Genau wie bei Vue muss man sich auch mit der HTML-ähnlichen Syntax vertraut machen, damit man mit AngularJS neue UI-Funktionen programmieren kann. AngularJS könnte also für den durchschnittlichen Entwickler am schwierigsten zu erlernen sein, da es komplexer ist und auf TypeScript basiert.

Zukunftsprognosen
Viele Open-Source-Projekte und -Frameworks geraten in Vergessenheit und werden nicht mehr gewartet. Sollte man sich Sorgen um eines der Frameworks machen, die wir hier besprechen? Wir können zwar nicht vollständig vorhersagen, was passiert, aber die laufende Entwicklungsarbeit ist ein guter Indikator für den Zustand dieser Projekte. Popularität und Wachstum sind ebenfalls wichtige Indikatoren, um die Langlebigkeit eines Projekts vorherzusagen, also lassen Sie uns einen Blick auf jedes Framework werfen.

React JS
React v17.0 wurde veröffentlicht, aber überraschenderweise enthält es keine neuen Funktionen für Entwickler. Die wichtigste Änderung ist, dass diese neue Version es einfacher macht, React selbst zu aktualisieren. Man kann nur einige Teile von React von der älteren Version auf die neuere aktualisieren, ohne das gesamte Projekt aktualisieren zu müssen. Wenn eine Anwendung auf Funktionen angewiesen ist, die sich mit der neuen Version ändern oder veraltet sind, kann die alte Version beibehalten werden, um diese Funktionalität zu erhalten. Dieses Update macht React langfristig zu einer guten Wahl, denn es macht es einfacher, 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 meist heruntergeladene der drei Projekte.

Vue JS
Vue 3 wurde im September 2020 veröffentlicht und behebt viele gravierende Probleme, die Vue 2 in großen Projekten hat. Es führt die Composition API ein, die von React Hooks inspiriert ist und die Wiederverwendung von Logik über Komponenten hinweg erleichtert. Das gesamte Projekt wurde in TypeScript umgeschrieben, was die TypeScript-Unterstützung in neuen Vue-Projekten verbessert und das Projekt gleichzeitig wartbarer 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 beibehalten kann, dann wird es sicherlich bald AngularJS überholen.

AngularJS
AngularJS hat vor kurzem den Ivy Compiler eingeführt. Er verkürzt die Build-Zeiten, optimiert die Assets, ermöglicht schnellere Tests und verbessert generell die Erfahrung der Entwickler. Das AngularJS-Team veröffentlicht zweimal im Jahr größere Updates, die neue Funktionen enthalten oder das Framework einfach nur an neue Browserversionen anpassen. Die wöchentlichen Downloads von AngularJS sind seit letztem Jahr um etwa 50 Prozent gestiegen, es ist also immer noch ein beliebtes Projekt.

Fazit
AngularJS, React und Vue werden alle sehr aktiv weiterentwickelt. Sie bringen regelmäßig neue Versionen heraus und pflegen die bestehenden. Da der aktuelle Stand der Unterstützung in jedem Fall hoch ist, kann man jedes dieser Frameworks bedenkenlos verwenden. Es ist wichtig anzumerken, dass AngularJS nicht mehr so schnell wächst wie früher, während Vue – auch wenn es erst vor kurzem gestartet wurde – sehr stark zu wachsen scheint. Wie bereits erwähnt, können wir nicht vorhersagen, welche Frameworks langfristig relevant bleiben werden, aber jedes Projekt hat eine große Community hinter sich und entwickelt sich ständig weiter. Das Ziel mit diesem Artikel war es, die architektonischen Unterschiede zu erklären, die Stärken und Schwächen der einzelnen Frameworks aufzuschlüsseln und sie zu vergleichen, wo immer es angebracht ist. Bevor man sich auf ein neues Framework stürzt, sollte man einige Dinge bedenken. Erstens kann die Erfahrung eines Teams ein entscheidender Faktor bei der Wahl einer neuen Technologie sein. Ebenso muss man die in Ihrer Region verfügbaren Talente berücksichtigen, damit Sie Entwickler für Ihr Projekt einstellen können. Schließlich können auch die Komplexität und der Umfang des Projekts selbst die Wahl des Frameworks beeinflussen.

[ratemypost]

Christian Derwein

Today - Entrepreneur and CEO of moweex - mobile & web development agency

Former - Collaboration & IT-Manager for Austria biggest industry company. Developer, Consultant and project leader for web and mobile projects for small and medium-sized enterprises.

Goals: Do what you Love and do it often. This is your Life. Start doing things you love. Live your dream and share your passion.

Specialties: Webdesign, Webdevelopment, Mobile Development (iOS, REACT native, Ionic), ScrumMaster, Creating ideas and think one step ahead, Communication, Business Development

Show all articles by Christian Derwein