Angular vs. React vs. Vue - Vergleich

Die Entscheidung für ein JavaScript-Framework für Ihre Webanwendung kann überwältigend sein. Angular und React sind heutzutage sehr beliebt, und es gibt einen Aufschwung, der in letzter Zeit viel Anklang gefunden hat: VueJS. Darüber hinaus sind dies nur einige der neuen Kinder im Block.

Javascripts im Jahr 2017 - heutzutage ist das nicht einfach!

Wie sollen wir uns entscheiden?

Bevor wir anfangen - SPA oder nicht?

Sie sollten zunächst eine klare Entscheidung treffen, ob Sie eine einseitige Anwendung (SPA) benötigen oder lieber einen mehrseitigen Ansatz wählen möchten.

Die Starter heute: Angular, React und Vue

Zunächst möchten wir über den Lebenszyklus und strategische Überlegungen sprechen. Dann gehen wir zu den Funktionen und Konzepten der drei Javascript-Frameworks über. Schließlich kommen wir zu einem Schluss.

Hier sind die Fragen, die wir heute beantworten werden:

  • Wie ausgereift sind die Frameworks / Bibliotheken?
  • Sind die Frameworks wahrscheinlich für eine Weile da?
  • Wie umfangreich und hilfreich sind die entsprechenden Communities?
  • Wie einfach ist es, Entwickler für jedes Framework zu finden?
  • Was sind die grundlegenden Programmierkonzepte der Frameworks?
  • Wie einfach ist es, die Frameworks für kleine oder große Anwendungen zu verwenden?
  • Wie sieht die Lernkurve für jedes Framework aus?
  • Welche Leistung können Sie von den Frameworks erwarten?
  • Wo kann man unter der Haube genauer hinsehen?
  • Wie können Sie mit dem gewählten Framework beginnen, sich zu entwickeln?

1. Lebenszyklus und strategische Überlegungen

1.1 Etwas Geschichte

Angular ist ein TypeScript-basiertes Javascript-Framework. Entwickelt und gewartet von Google, wird es als "Superheroic JavaScript MVWFramework" bezeichnet. Angular (auch „Angular 2+“, „Angular 2“ oder „ng2“) ist der umgeschriebene, meist inkompatible Nachfolger von AngularJS (auch „Angular.js“ oder „AngularJS 1.x“). Während AngularJS (das alte) ursprünglich im Oktober 2010 veröffentlicht wurde, werden immer noch Fehlerbehebungen usw. durchgeführt. Das neue Angular (ohne JS) wurde im September 2016 als Version 2 eingeführt. Die neueste Hauptversion ist Version 4, as Version 3 wurde übersprungen. Angular wird von Google, Wix, weather.com, healthcare.gov und Forbes verwendet (laut madewithangular, stackshare und libscore.com).

React wird als "JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen" bezeichnet. Ursprünglich im März 2013 veröffentlicht, wurde React von Facebook entwickelt und wird von Facebook gepflegt, das React-Komponenten auf mehreren Seiten verwendet (jedoch nicht als einseitige Anwendung). Laut diesem Artikel von Chris Cordle wird React bei Facebook weitaus häufiger verwendet als Angular bei Google. React wird auch von Airbnb, Uber, Netflix, Twitter, Pinterest, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart und anderen (laut Facebook, stackshare und libscore.com) verwendet.

Facebook arbeitet an der Veröffentlichung von React Fibre. Es wird sich ändern. Reagieren Sie unter der Haube - das Rendern soll infolgedessen viel schneller sein -, aber die Dinge werden nach den Änderungen abwärtskompatibel sein. Facebook sprach auf seiner Entwicklerkonferenz im April 2017 über die Änderungen, und ein inoffizieller Artikel über die neue Architektur wurde veröffentlicht. React Fibre wurde im September 2017 mit React 16 veröffentlicht.

Vue ist eines der am schnellsten wachsenden JS-Frameworks im Jahr 2016. Vue bezeichnet sich selbst als "Intuitive, schnelle und komponierbare MVVM zum Erstellen interaktiver Schnittstellen". Sie wurde erstmals im Februar 2014 von dem ehemaligen Google-Mitarbeiter Evan You (BTW: Evan schrieb einen interessanten Blogeintrag über die Marketingaktivitäten und -zahlen in der ersten Woche damals). Es war ein ziemlicher Erfolg, zumal Vue als Ein-Mann-Show ohne die Unterstützung eines großen Unternehmens so viel Anklang findet. Evan hat derzeit ein Team von Dutzenden Kernentwicklern. 2016 wurde Version 2 veröffentlicht. Vue wird von Alibaba, Baidu, Expedia, Nintendo und GitLab verwendet - eine Liste kleinerer Projekte finden Sie auf madewithvuejs.com.

Alle drei Frameworks sind unter der MIT-Lizenz erhältlich.

React wird mit einer speziellen BSD3-Lizenzdatei bis September 2017 ausgeliefert. Es gab viele Diskussionen über die Patentdatei. Wenn Sie sich für die Geschichte davon interessieren, können Sie diese Github-Ausgabediskussion lesen, die Gründe und die Geschichte hinter der Patentakte (von Ex-Facebook-Ingenieur James Ide), warum Sie keine Angst haben sollten (von Dennis Walsh) Warnung vor der Verwendung für Startups (von Raúl Kripalani) und eine frühere Erklärung von Facebook zu diesem Thema: Explaining Reacts Lizenz. Wie auch immer - alles sollte keine Rolle mehr spielen, da Facebook endlich bekannt gab, dass React die MIT-Lizenz erhalten wird.

1.2 Kernentwicklung

Wie bereits erwähnt, werden Angular und React von großen Unternehmen unterstützt und verwendet. Facebook, Instagram und WhatsApp verwenden es für ihre Seiten. Google verwendet es in vielen Projekten: Beispielsweise wurde die neue AdWords-Benutzeroberfläche mit Angular & Dart implementiert. Wieder wird Vue von einer Gruppe von Personen realisiert, deren Arbeit über Patreon und andere Sponsoring-Mittel unterstützt wird. Sie können selbst entscheiden, ob dies positiv oder negativ ist. Matthias Götzke hält das kleine Team von Vue für einen Vorteil, da es zu saubererem und weniger überarbeitetem Code / API führt.

Werfen wir einen Blick auf einige Statistiken: Angular listet 36 Personen auf ihrer Team-Seite auf, Vue listet 16 Personen auf und React hat keine Team-Seite. Auf Github hat Angular> 25.000 Sterne und 463 Mitwirkende, React hat> 70.000 Sterne und> 1.000 Mitwirkende, und Vue hat fast 60.000 Sterne und nur 120 Mitwirkende. Sie können auch die Github Stars History für Angular, React und Vue überprüfen. Vue scheint sich erneut sehr gut zu entwickeln. Laut bestof.js hat Angular 2 in den letzten drei Monaten durchschnittlich 31 Sterne pro Tag erhalten, React 74 Sterne und Vue.JS 107 Sterne.

Eine Github Stars Geschichte für Angular, React & Vue (Quelle)

Update: Danke an Paul Henschel für den Hinweis auf die npm-Trends. Sie zeigen die Anzahl der Downloads für die angegebenen npm-Pakete und sind noch hilfreicher als ein reiner Blick auf die Github-Stars:

Die npm-Download-Nummern für die angegebenen npm-Pakete in den letzten 2 Jahren.

1.3 Marktlebenszyklus

Aufgrund der verschiedenen Namen und Versionen ist es schwierig, Angular, React und Vue in Google Trends zu vergleichen. Eine Annäherungsmöglichkeit könnte die Suche in der Kategorie „Internet & Technologien“ sein. Hier ist das Ergebnis:

Naja. Vue wurde nicht vor 2014 erstellt - also stimmt hier etwas nicht. La Vue ist französisch für "view", "sight" oder "opinion". Vielleicht ist es das. Ein Vergleich von „VueJS“ und „Angular“ oder „React“ ist ebenfalls nicht fair, da VueJS im Vergleich zu den anderen kaum Ergebnisse erzielt.

Versuchen wir dann etwas anderes. Das Technologieradar von ThoughtWorks gibt einen guten Eindruck davon, wie sich Technologien im Laufe der Zeit entwickeln. Redux befindet sich in der Adoptionsphase (zur Übernahme in Projekte!) Und war für eine Reihe von ThoughtWorks-Projekten von unschätzbarem Wert. Vue.js befindet sich in der Testphase (probieren Sie es aus!). Es wird als leichte und flexible Alternative zu Angular mit einer geringeren Lernkurve beschrieben. Angular 2 befindet sich in der Bewertungsphase - es wird von ThoughtWork-Teams erfolgreich verwendet, ist jedoch noch keine überzeugende Empfehlung.

Laut der letzten Umfrage von Stackoverflow 2017 wird React von 67% der befragten Entwickler und AngularJS von 52% geliebt. „Kein Interesse, sich weiterzuentwickeln“ verzeichnet höhere Zahlen für AngularJS (48%) vs. React (33%). Vue ist in beiden Fällen nicht in den Top 10. Dann gibt es die statejs.com-Umfrage zum Vergleich von „Front-End-Frameworks“. Die interessantesten Fakten: React und Angular sind zu 100% bekannt und Vue ist 23% der befragten Personen unbekannt. In Bezug auf die Zufriedenheit erhielt React 92% für "würde wiederverwenden", Vue 89% und Angular 2 nur 65%.

Was ist mit einer weiteren Umfrage zur Kundenzufriedenheit? Eric Elliott hat im Oktober 2016 einen gestartet, um Angular 2 und React auszuwerten. Nur 38% der Befragten würden Angular 2 erneut verwenden, 84% würden React erneut verwenden.

1.4 Langzeitsupport und Migrationen

React APIs sind recht stabil, wie Facebook in ihren Designprinzipien festlegt. Es gibt auch einige Skripte, mit denen Sie von Ihrer aktuellen API zu einer neueren wechseln können: Check out react-codemod. Migrationen sind recht einfach und es gibt keine (erforderliche) Langzeit-Support-Version. In diesem Reddit-Beitrag wird darauf hingewiesen, dass die Upgrades nie wirklich ein Problem waren. Das React-Team schrieb einen Blogbeitrag über das Versionsschema. Wenn sie eine Verfallswarnung hinzufügen, behalten sie diese für den Rest der aktuellen Release-Version bei, bevor das Verhalten in der nächsten Hauptversion geändert wird. Es ist keine Änderung zu einer neuen Hauptversion geplant - v14 wurde im Oktober 2015 veröffentlicht, v15 wurde im April 2016 veröffentlicht und v16 hat noch kein Veröffentlichungsdatum. Das Upgrade sollte kein Problem darstellen, wie kürzlich von einem React Core-Entwickler festgestellt wurde.

In Bezug auf Angular gibt es einen Blog-Beitrag über die Versionierung und Veröffentlichung von Angular, beginnend mit der Version v2. Alle sechs Monate wird es ein größeres Update geben, und es wird einen Verfallszeitraum von mindestens sechs Monaten geben (zwei größere Releases). In der Dokumentation sind einige experimentelle APIs mit kürzeren Verfallszeiten gekennzeichnet. Es gibt noch keine offizielle Ankündigung, aber laut diesem Artikel hat das Angular-Team Langzeit-Support-Versionen angekündigt, die mit Angular 4 beginnen. Diese werden über die nächste Hauptversion hinaus mindestens ein Jahr lang unterstützt. Dies bedeutet, dass Angular 4 bis mindestens September 2018 mit Fehlerkorrekturen und wichtigen Patches unterstützt wird. In den meisten Fällen ist das Aktualisieren von Angular von v2 auf v4 so einfach wie das Aktualisieren der Angular-Abhängigkeiten. Angular bietet auch eine Anleitung mit Informationen darüber, ob weitere Änderungen erforderlich sind.

Der Update-Prozess für Vue 1.x auf 2.0 sollte für eine kleine App einfach sein - das Entwicklerteam hat behauptet, dass 90% der APIs gleich geblieben sind. Auf der Konsole befindet sich ein nettes Upgrade-Diagnose-Migrations-Hilfsprogramm. Ein Entwickler merkte an, dass das Update von v1 auf v2 in einer großen App immer noch keinen Spaß machte. Leider gibt es keine klare (öffentliche) Roadmap für die nächste Hauptversion oder Informationen zu Plänen für LTS-Versionen.

Eins noch: Angular ist ein vollständiges Framework und bietet eine Menge gebündelter Dinge. Reagieren Sie flexibler als mit Angular, und Sie werden wahrscheinlich mehr unabhängige, ungeklärte und sich schnell bewegende Bibliotheken verwenden. Dies bedeutet, dass Sie sich selbst um die entsprechenden Updates und Migrationen kümmern müssen. Es kann sich auch nachteilig auswirken, wenn bestimmte Pakete nicht mehr gewartet werden oder ein anderes Paket irgendwann zum De-facto-Standard wird.

1.5 Personal & Rekrutierung

Wenn Sie hauseigene HTML-Entwickler haben, die kein weiteres Javascript lernen möchten, ist es besser, Angular oder Vue zu wählen. Reagieren erfordert mehr Javascript (wir sprechen später darüber).

Arbeiten Designer in der Nähe des Codes? Der Benutzer "pier25" merkt bei Reddit an, dass React sinnvoll ist, wenn Sie für Facebook arbeiten, wo jeder ein Superheld-Entwickler ist. In der realen Welt gibt es nicht immer einen Designer, der JSX modifizieren kann. Daher wird die Arbeit mit HTML-Vorlagen viel einfacher.

Das Gute am Angular-Framework ist, dass sich ein neuer Angular 2-Entwickler eines anderen Unternehmens schnell mit allen erforderlichen Konventionen vertraut macht. Die reaktiven Projekte unterscheiden sich hinsichtlich der Architekturentscheidungen, und die Entwickler müssen sich mit dem jeweiligen Projektaufbau vertraut machen.

Angular ist auch gut, wenn Sie Entwickler mit objektorientiertem Hintergrund haben oder kein Javascript mögen. Um diesen Punkt nach Hause zu fahren, ist hier ein Zitat von Mahesh Chand:

Ich bin kein JavaScript-Entwickler. Mein Hintergrund ist der Aufbau großer Unternehmenssysteme mit „echten“ Softwareplattformen. Ich habe 1997 damit begonnen, Anwendungen mit C, C ++, Pascal, Ada und Fortran zu erstellen. (…) Ich kann klar sagen, dass JavaScript für mich nur Kauderwelsch ist. Als Microsoft MVP und Experte verstehe ich TypeScript sehr gut. Ich sehe Facebook auch nicht als Softwareentwicklungsunternehmen. Google und Microsoft sind jedoch bereits die größten Software-Innovatoren. Ich fühle mich wohler mit einem Produkt zu arbeiten, das von Google und Microsoft stark unterstützt wird. Auch (…) mit meinem Hintergrund weiß ich, dass Microsoft noch größere Pläne für TypeScript hat.

Na dann… Ich sollte wohl erwähnen, dass Mahesh Regional Director bei Microsoft ist.

2. Vergleich von React, Angular & Vue

2.1 Komponenten

Die fraglichen Frameworks sind alle komponentenbasiert. Eine Komponente erhält eine Eingabe und gibt nach einem internen Verhalten / Berechnen eine gerenderte UI-Vorlage (ein Anmelde- / Abmeldebereich oder ein Aufgabenlistenelement) als Ausgabe zurück. Die definierten Komponenten sollten auf der Webseite oder in anderen Komponenten leicht wiederzuverwenden sein. Beispielsweise könnten Sie eine Rasterkomponente (bestehend aus einer Kopfzeilenkomponente und mehreren Zeilenkomponenten) mit verschiedenen Eigenschaften (Spalten, Kopfzeileninformationen, Datenzeilen usw.) haben und die Komponente mit verschiedenen Datensätzen auf einer anderen Seite wiederverwenden können. Hier finden Sie einen umfassenden Artikel zu Komponenten, falls Sie mehr darüber erfahren möchten.

React und Vue zeichnen sich durch den Umgang mit dummen Komponenten aus: kleine, zustandslose Funktionen, die eine Eingabe erhalten und Elemente als Ausgabe zurückgeben.

2.2 Typescript vs. ES6 vs. ES5

React konzentriert sich auf die Verwendung von Javascript ES6. Vue verwendet Javascript ES5 oder ES6.

Angular basiert auf TypeScript. Dies bietet mehr Konsistenz bei verwandten Beispielen und Open Source-Projekten (Reaktionsbeispiele sind in ES5 oder ES6 enthalten). Dies führt auch Konzepte wie Dekorateure und statische Typen ein. Statische Typen sind nützlich für Code-Intelligence-Tools wie automatisches Refactoring, Springen zu Definitionen usw. - sie sollen auch die Anzahl der Fehler in einer Anwendung verringern, obwohl es zu diesem Thema sicherlich keinen Konsens gibt. Eric Elliott widerspricht in seinem Artikel "Das schockierende Geheimnis über statische Typen". Daniel C Wang sagt, dass die Kosten für die Verwendung statischer Typen nicht schaden und dass es gut ist, sowohl testgetriebene Entwicklung (TDD) als auch statische Typisierung zu haben.

Sie sollten wahrscheinlich auch wissen, dass Sie Flow verwenden können, um die Typprüfung in React zu aktivieren. Es handelt sich um eine statische Typprüfung, die von Facebook für JavaScript entwickelt wurde. Flow kann auch in VueJS integriert werden.

Wenn Sie Ihren Code in TypeScript schreiben, schreiben Sie kein Standard-JavaScript mehr. Obwohl TypeScript wächst, hat es im Vergleich zur gesamten JavaScript-Sprache immer noch eine winzige Benutzerbasis. Ein Risiko könnte sein, dass Sie sich in die falsche Richtung bewegen, da TypeScript - so unwahrscheinlich es auch sein mag - mit der Zeit auch verschwindet. Darüber hinaus bringt TypeScript eine Menge (Lern-) Overhead in Projekte - mehr dazu im Vergleich Angular 2 vs. React von Eric Elliott.

2.3 Vorlagen - JSX oder HTML

Reagieren Sie auf Pausen mit bewährten Methoden. Jahrzehntelang haben Entwickler versucht, UI-Templates und Inline-Javascript-Logik zu trennen, aber mit JSX werden diese wieder miteinander vermischt. Das mag schrecklich klingen, aber Sie sollten sich den Vortrag von Peter Hunt "React: Rethinking best practices" (ab Oktober 2013) anhören. Er weist darauf hin, dass die Trennung von Vorlagen und Logik lediglich eine Trennung von Technologien und nicht von Bedenken ist. Sie sollten Komponenten anstelle von Vorlagen erstellen. Komponenten sind wiederverwendbar, zusammensetzbar und für Einheiten testbar.

JSX ist ein optionaler Präprozessor für HTML-ähnliche Syntax, die später in Javascript kompiliert wird. Es hat einige Macken - zum Beispiel müssen Sie className anstelle von class verwenden, da letzterer in Javascript ein geschützter Name ist. JSX ist ein großer Vorteil für die Entwicklung, da Sie alles an einem Ort haben und die Überprüfung der Code-Vervollständigung und der Kompilierungszeit besser funktioniert. Wenn Sie in JSX einen Tippfehler machen, wird React nicht kompiliert und gibt die Zeilennummer aus, in der der Tippfehler aufgetreten ist. Angular 2 schlägt zur Laufzeit leise fehl (dieses Argument ist wahrscheinlich ungültig, wenn Sie AOT mit Angular verwenden).

JSX impliziert, dass alles in React Javascript ist - es wird sowohl für die JSX-Vorlagen als auch für die Logik verwendet. Cory House weist in seinem Artikel vom Januar 2016 darauf hin: „Angular 2 setzt JS weiterhin in HTML ein. Mit React wird HTML in JS eingefügt. Das ist gut so, denn Javascript ist leistungsfähiger als HTML.

Bei den Angular-Vorlagen handelt es sich um HTML mit einer speziellen Angular-Sprache (z. B. ngIf oder ngFor). Während für React JavaScript-Kenntnisse erforderlich sind, werden Sie von Angular gezwungen, die Angular-spezifische Syntax zu erlernen.

Vue bietet "Single-File-Komponenten". Dies scheint ein Kompromiss in Bezug auf die Trennung von Bedenken zu sein - Vorlagen, Skripte und Stile befinden sich in einer Datei, aber in drei verschiedenen, geordneten Abschnitten. Dies bedeutet, dass Sie Syntaxhervorhebungen, CSS-Unterstützung und eine einfachere Verwendung von Präprozessoren wie Jade oder SCSS erhalten. Ich habe in anderen Artikeln gelesen, dass JSX leichter zu debuggen ist, da Vue keine schlechten HTML-Syntaxfehler anzeigt. Dies trifft nicht zu, da Vue HTML in Renderfunktionen konvertiert - so werden Fehler ohne Probleme angezeigt (Dank an Vinicius Reis für das Kommentieren und die Korrektur!).

Randnotiz: Wenn Sie die Idee von JSX mögen und sie in Vue verwenden möchten, können Sie babel-plugin-transform-vue-jsx verwenden.

2.4 Framework vs. Bibliothek

Angular ist eher ein Framework als eine Bibliothek, da es starke Meinungen darüber enthält, wie Ihre Anwendung strukturiert sein sollte, und darüber hinaus über mehr Funktionen verfügt, die sofort einsatzbereit sind. Angular ist eine „Komplettlösung“ - Batterien inklusive und bereit für einen angenehmen Start. Sie müssen keine Bibliotheken, Routing-Lösungen oder ähnliches analysieren - Sie können einfach mit der Arbeit beginnen.

React und Vue hingegen sind universell flexibel. Ihre Bibliotheken können mit allen Arten von Paketen gepaart werden (für React on npm gibt es eine Menge, aber Vue hat weniger Pakete, weil es noch recht jung ist). Mit React können Sie sogar die Bibliothek selbst gegen API-kompatible Alternativen wie Inferno austauschen. Mit großer Flexibilität geht jedoch auch große Verantwortung einher - bei React gibt es keine Regeln und eingeschränkte Richtlinien. Jedes Projekt erfordert eine Entscheidung bezüglich seiner Architektur, und es kann leichter schief gehen.

Angular hingegen ist mit einer verwirrenden Sammlung von Bauwerkzeugen, Boilerplate, Linters und Time-Sinks ausgestattet. Dies gilt auch für React, wenn Starterkits oder Boilerplates verwendet werden. Sie sind natürlich sehr hilfreich, aber React funktioniert sofort und Sie sollten es wahrscheinlich so lernen. Manchmal wird die Vielfalt der Werkzeuge, die für das Arbeiten in einer Javascript-Umgebung benötigt werden, als "Javascript-Müdigkeit" bezeichnet. Es gibt einen Artikel von Eric Clemmons, der folgendes zu sagen hat:

Es gibt immer noch eine Reihe installierter Tools, an die Sie beim Starten mit dem Framework nicht gewöhnt sind. Diese werden generiert, aber wahrscheinlich verstehen viele Entwickler nicht, was unter der Haube passiert - oder es braucht viel Zeit, bis sie dies tun.

Vue scheint das sauberste und leichteste der drei Frameworks zu sein. GitLab hat einen Blogpost über seine Entscheidung bezüglich Vue.js (Oktober 2016):

Vue.js bietet die perfekte Balance zwischen dem, was es für Sie tun wird und dem, was Sie selbst tun müssen. (…) Vue.js ist immer in Reichweite, ein robustes, aber flexibles Sicherheitsnetz, das Ihnen dabei hilft, Ihre Programmierung effizient und effizient zu halten Ihr DOM-Leiden auf ein Minimum reduziert.

Sie mögen die Einfachheit und Benutzerfreundlichkeit - der Quellcode ist sehr gut lesbar und es werden keine Dokumentation oder externe Bibliotheken benötigt. Alles ist sehr einfach. Vue.js "macht auch in Bezug auf vieles keine großen Annahmen". Es gibt auch einen Podcast über die Entscheidung von GitLab.

Ein weiterer Blogpost über eine Verlagerung in Richtung Vue stammt von Pixeljets. React "war ein großer Fortschritt für JS World in Bezug auf das Zustandsbewusstsein, und es zeigte vielen Menschen auf eine gute, praktische Art und Weise die wirkliche funktionale Programmierung." Einer der großen Nachteile von React vs. Vue ist das Problem der Aufteilung von Komponenten in kleinere Komponenten aufgrund der JSX-Einschränkungen. Hier ist ein Zitat des Artikels:

Für mich und mein Team ist die Lesbarkeit von Code wichtig, aber es ist immer noch sehr wichtig, dass das Schreiben von Code Spaß macht. Es ist nicht lustig, 6 Komponenten zu erstellen, wenn Sie ein wirklich einfaches Taschenrechner-Widget implementieren. In vielen Fällen ist es auch schlecht in Bezug auf Wartung, Änderungen oder die visuelle Überarbeitung eines Widgets, da Sie mehrere Dateien / Funktionen umgehen und jeden kleinen Teil von HTML separat prüfen müssen. Auch hier schlage ich nicht vor, Monolithen zu schreiben - ich schlage vor, für die tägliche Entwicklung Komponenten anstelle von Mikrokomponenten zu verwenden.

Es gibt interessante Diskussionen über den Blogpost in Hacker News und Reddit - es gibt Argumente von Dissidenten und weiteren Befürwortern von Vue gleichermaßen.

2.5 State Management & Datenbindung

Das Erstellen von Benutzeroberflächen ist schwierig, da es überall Zustände gibt. Daten, die sich im Laufe der Zeit ändern, sind mit Komplexität verbunden. Definierte Status-Workflows sind eine große Hilfe, wenn Apps wachsen und komplexer werden. Für eingeschränkte Anwendungen ist dies wahrscheinlich ein Overkill und so etwas wie Vanilla JS würde ausreichen.

Wie funktioniert es? Komponenten beschreiben die Benutzeroberfläche zu jedem Zeitpunkt. Wenn sich Daten ändern, rendert das Framework die gesamte UI-Komponente neu - die angezeigten Daten sind immer aktuell. Wir können dieses Konzept "UI als Funktion" nennen.

Reagieren funktioniert oft gebündelt mit Redux. Redux beschreibt sich in drei Grundprinzipien:

  • Eine einzige Quelle der Wahrheit
  • Der Status ist schreibgeschützt
  • Änderungen werden mit reinen Funktionen vorgenommen

Mit anderen Worten: Der Status der vollständigen Bewerbung wird in einem Objektbaum in einem einzigen Geschäft gespeichert. Dies hilft beim Debuggen der Anwendung und einige Funktionen sind einfacher zu implementieren. Der Status ist schreibgeschützt und kann nur über Aktionen geändert werden, um Rennbedingungen zu vermeiden (dies hilft auch beim Debuggen). Reduzierungen werden geschrieben, um anzugeben, wie die Zustände durch Aktionen transformiert werden können.

Die meisten Tutorials und Boilerplates haben Redux bereits integriert, aber Sie können React auch ohne es verwenden (und Sie brauchen Redux möglicherweise überhaupt nicht in Ihrem Projekt). Redux fügt Ihrem Code Komplexität und ziemlich starke Einschränkungen hinzu. Wenn Sie Reagieren lernen, sollten Sie überlegen, ob Sie Reagieren lernen möchten, bevor Sie zu Redux gehen. Sie sollten auf jeden Fall lesen "Sie brauchen Redux nicht" von Dan Abramov.

Einige Entwickler schlagen die Verwendung von Mobx anstelle von Redux vor. Sie können es sich als „automatisches Redux“ vorstellen, das die Bedienung und das Verständnis von Anfang an erheblich erleichtert. Wenn Sie einen Blick darauf werfen möchten, sollten Sie mit der Einführung beginnen. Sie können auch diesen nützlichen Vergleich zwischen Redux & MobX von Robin lesen. Der gleiche Autor bietet auch Informationen zum Wechsel von Redux zu MobX. Diese Liste ist nützlich, wenn Sie andere Flux-Bibliotheken überprüfen möchten. Und wenn Sie aus einer MVC-Welt kommen, sollten Sie den Artikel "Thinking in Redux (wenn Sie nur MVC kennen)" von Mikhail Levkovsky lesen.

Vue kann Redux nutzen - bietet aber Vuex als eigene Lösung an.

Ein großer Unterschied zwischen React und Angular besteht in der Bindung in eine Richtung oder in zwei Richtungen. Die bidirektionale Bindung von Angular ändert den Modellstatus, wenn das Benutzeroberflächenelement (z. B. eine Benutzereingabe) aktualisiert wird. Reagieren geht nur in eine Richtung: Es aktualisiert zuerst das Modell und rendert dann das UI-Element. Angulars Methode ist sauberer im Code und für den Entwickler einfacher zu implementieren. Die Reaktionsweise führt zu einer besseren Datenübersicht, da die Daten nur in eine Richtung fließen (dies erleichtert das Debuggen).

Beide Konzepte haben Vor- und Nachteile. Sie müssen die Konzepte verstehen und feststellen, ob dies Ihre Rahmenentscheidung beeinflusst. Der Artikel „Bidirektionale Datenbindung: Angular 2 und React“ und diese Stackoverflow-Frage bieten beide eine gute Erklärung. Hier finden Sie einige interaktive Codebeispiele (3 Jahre alt, nur für Angular 1 & React). Last but not least unterstützt Vue sowohl Einwegbindung als auch Zweiwegbindung (standardmäßig Einwegbindung).

Es gibt einen langen Artikel über verschiedene Arten von Zuständen und die Zustandsverwaltung in Angular-Anwendungen (von Victor Savkin), wenn Sie weiterlesen möchten.

2.6 Andere Programmierkonzepte

Angular umfasst die Abhängigkeitsinjektion, ein Muster, bei dem ein Objekt die Abhängigkeiten (einen Dienst) an ein anderes Objekt (einen Client) liefert. Dies führt zu mehr Flexibilität und saubererem Code. Der Artikel „Grundlegendes zur Abhängigkeitsinjektion“ erläutert dieses Konzept ausführlicher.

Das Model-View-Controller-Pattern (MVC) unterteilt ein Projekt in drei Komponenten: Model, View und Controller. Angular als MVC-Framework bietet MVC ab Werk. Reagieren hat nur das V - Sie müssen das M und das C selbst lösen.

2.7 Flexibilität & Downsizing auf Microservices

Sie können mit React oder Vue arbeiten, indem Sie einfach die Javascript-Bibliothek zum Quellcode hinzufügen. Dies ist mit Angular aufgrund der Verwendung von TypeScript nicht möglich.

Wir bewegen uns jetzt mehr in Richtung Microservices und Microapps. React and Vue gibt Ihnen mehr Kontrolle über die Größe einer Anwendung, indem Sie nur die Dinge auswählen, die wirklich notwendig sind. Sie bieten mehr Flexibilität beim Wechsel von einem SPA zu Mikrodienstleistungen unter Verwendung von Teilen einer früheren Anwendung. Winkelarbeit am besten für SPA, da es wahrscheinlich zu aufgebläht ist, um für Microservices verwendet zu werden.

Wie Cory House bemerkt:

JavaScript bewegt sich schnell und mit React können Sie kleine Teile Ihrer Anwendung gegen bessere Bibliotheken austauschen, anstatt zu warten und zu hoffen, dass Ihr Framework innovativ wird. Die Philosophie der kleinen zusammensetzbaren Einzweckwerkzeuge kommt nie aus der Mode.

Einige Benutzer verwenden React auch für Nicht-SPA-Websites (z. B. für komplexe Formulare oder Assistenten). Auch Facebook nutzt React - nicht für die Hauptseite, sondern für bestimmte Seiten und Features.

2.8 Größe und Leistung

Alle Funktionen haben eine Kehrseite: Das Angular-Framework ist ziemlich aufgebläht. Die Größe der komprimierten Datei beträgt 143 KB, verglichen mit 23 KB für Vue und 43 KB für React.

React und Vue haben beide ein virtuelles DOM, das die Leistung verbessern soll. Wenn Sie daran interessiert sind, können Sie die Unterschiede zwischen Virtual DOM und DOM sowie die tatsächlichen Vorteile von Virtual DOM in react.js nachlesen. Außerdem beantwortet einer der Autoren des Virtual-DOM selbst eine leistungsbezogene Frage zum Stackoverflow.

Um die Performance zu überprüfen, habe ich mir den tollen js-framework-benchmark angeschaut. Sie können es selbst herunterladen und ausführen oder sich die interaktive Ergebnistabelle ansehen. Bevor Sie die Ergebnisse überprüfen, sollten Sie wissen, dass die Frameworks Benchmarks betrügen - eine solche Leistungsüberprüfung sollte nicht verwendet werden, um Entscheidungen zu treffen.

Die Performance von Angular, React und VueSpeicherbelegung in MB

Zusammenfassend lässt sich sagen: Vue bietet eine hervorragende Leistung und die tiefste Speicherzuweisung, aber alle diese Frameworks sind im Vergleich zu besonders langsamen oder schnellen Frameworks (wie Inferno) sehr nahe beieinander. Nochmals: Die Performance-Benchmarks sollten nur als Randnotiz und nicht als Urteil gewertet werden.

2.9 Testen

Facebook verwendet Jest, um seinen Reaktionscode zu testen. Hier ist ein Vergleich zwischen Jest und Mokka - und es gibt einen Artikel darüber, wie man Enzyme mit Mokka verwendet. Enzyme ist ein JavaScript-Testprogramm, das bei Airbnb (in Verbindung mit Jest, Karma und anderen Testläufern) verwendet wird. Wenn Sie mehr lesen möchten, gibt es einige ältere Artikel zum Testen in React (hier und hier).

Dann gibt es Jasmine als Test-Framework in Angular 2. In einem Artikel von Eric Elliott heißt es laut Jasmine: "Es gibt Millionen von Möglichkeiten, Tests und Behauptungen zu schreiben, die sorgfältig gelesen werden müssen, um zu verstehen, was sie tun." Die Ausgabe ist auch sehr aufgebläht und mühsam zu lesen. Es gibt einige informative Artikel zur Integration von Angular 2 mit Karma und Mocha. Hier ist ein altes Video (ab 2015) über die Teststrategien mit Angular 2.

Vue hat keine Testanleitung, aber Evan schrieb in seiner Vorschau 2017, dass das Team daran arbeiten will. Sie empfehlen die Verwendung von Karma. Vue arbeitet mit Jest zusammen und es gibt auch Avoriaz als Testdienstprogramm.

2.10 Universelle und native Apps

Universelle Apps führen Apps ins Web, auf den Desktop und in die Welt der nativen Apps ein.

React und Angular unterstützen beide die native Entwicklung. Angular hat NativeScript (unterstützt von Telerik) für native Apps und Ionic Framework für hybride Apps. Mit React können Sie den React-Native-Renderer auschecken, um plattformübergreifende iOS- und Android-Apps zu erstellen, oder für native Apps React-Native. Viele Apps (einschließlich Facebook; weitere Informationen finden Sie im Showcase) wurden mit Reactive-Native erstellt.

Javascript-Frameworks rendern Seiten auf dem Client. Dies ist schlecht für die wahrgenommene Leistung, die allgemeine Benutzererfahrung und die Suchmaschinenoptimierung. Serverseitiges Pre-Rendering ist von Vorteil. Alle drei Frameworks haben Bibliotheken, um Hilfe zu finden. Für React gibt es next.js, Vue hat nuxt.js und Angular hat ... Angular Universal.

2.11 Lernkurve

Es gibt definitiv eine steile Lernkurve für Angular. Es hat eine umfassende Dokumentation, aber manchmal sind Sie vielleicht frustriert, weil die Dinge schwieriger sind als sie klingen. Selbst wenn Sie ein tiefes Verständnis von Javascript haben, müssen Sie lernen, was unter der Haube des Frameworks vor sich geht. Setup ist am Anfang magisch und bietet eine Menge enthaltener Pakete und Code. Dies kann als negativ angesehen werden, da es ein großes, bereits vorhandenes Ökosystem gibt, das Sie im Laufe der Zeit lernen müssen. Andererseits könnte es in einer bestimmten Situation gut sein, weil bereits viele Entscheidungen getroffen wurden. Mit React müssen Sie wahrscheinlich viele wichtige Entscheidungen in Bezug auf Bibliotheken von Drittanbietern treffen. In React alone stehen 16 verschiedene Flussmittelpakete für die Zustandsverwaltung zur Auswahl.

Vue ist ziemlich leicht zu lernen. Unternehmen wechseln zu Vue, weil es für Nachwuchsentwickler viel einfacher zu sein scheint. Hier können Sie über jemanden lesen, der den Wechsel seines Teams von Angular nach Vue beschreibt. Einem anderen Benutzer zufolge war die React-App in seinem Unternehmen so komplex, dass ein neuer Entwickler mit dem Code nicht Schritt halten konnte. Mit Vue verringert sich die Kluft zwischen Junior- und Senior-Entwicklern, und sie können einfacher und mit weniger Fehlern, Problemen und Entwicklungszeit zusammenarbeiten.

Einige Leute behaupten, dass Dinge, die sie in React getan haben, besser in Vue geschrieben worden wären. Wenn Sie ein unerfahrener Javascript-Entwickler sind oder in den letzten zehn Jahren hauptsächlich mit jQuery gearbeitet haben, sollten Sie über die Verwendung von Vue nachdenken. Der Paradigmenwechsel ist ausgeprägter, wenn Sie zu Reagieren wechseln. Vue ähnelt eher einfachem Javascript, bietet aber auch einige neue Ideen: Komponenten, ein ereignisgesteuertes Modell und Einwegdatenfluss. Es hat auch einen kleinen Platzbedarf.

In der Zwischenzeit haben Angular und React ihre eigene Art, Dinge zu tun. Sie können Ihnen im Weg stehen, weil Sie Ihre Praktiken anpassen müssen, damit die Dinge auf ihre Weise funktionieren. Dies kann sich nachteilig auswirken, da Sie weniger flexibel sind und die Lernkurve steiler ist. Dies kann auch von Vorteil sein, da Sie gezwungen sind, beim Erlernen der Technologie die richtigen Konzepte zu erlernen. Mit Vue können Sie die Dinge auf die altmodische Art von Javascript erledigen. Dies kann am Anfang einfacher sein, könnte aber auf lange Sicht zu einem Problem werden, wenn die Dinge nicht richtig gemacht werden.

Wenn es um das Debuggen geht, ist es ein Plus, dass React und Vue weniger Magie haben. Die Suche nach Fehlern ist einfacher, da weniger Stellen zum Suchen zur Verfügung stehen und die Stack-Traces besser zwischen ihrem eigenen Code und dem der Bibliotheken unterscheiden. Leute, die mit React arbeiten, berichten, dass sie niemals den Quellcode der Bibliothek lesen müssen. Beim Debuggen Ihrer Angular-Anwendung müssen Sie jedoch häufig die Interna von Angular debuggen, um das zugrunde liegende Modell zu verstehen. Positiv zu vermerken ist, dass die Fehlermeldungen ab Angular 4 klarer und informativer sein sollen.

2.12 Angular, React und Vue unter der Haube

Möchten Sie den Quellcode selbst überprüfen? Möchten Sie sehen, wie sich die Dinge anfühlen?

Sie sollten sich wahrscheinlich zuerst die Github-Repositorys ansehen: React (github.com/facebook/react), Angular (github.com/angular/angular) und Vue (github.com/vuejs/vue).

Wie sieht die Syntax aus? ValueCoders vergleicht die Syntax für Angular, React und Vue.

Es ist auch gut, Dinge in der Produktion zu sehen - in Verbindung mit dem zugrunde liegenden Quellcode. TodoMVC listet Dutzende derselben Todo-App auf, die mit verschiedenen Javascript-Frameworks geschrieben wurden - Sie können die Angular-, Reactand Vue-Lösungen vergleichen. RealWorld erstellt eine Real-World-Anwendung (einen Medium-Clone) und hält Lösungen für Angular (4+) und React (with Redux) bereit. Vue ist in Arbeit.

Es gibt auch einige reale Apps, die Sie sich ansehen können. Hier sind Lösungen für React:

  • Do (eine praktische Anwendung zur Verwaltung von Notizen, die mit React & Redux erstellt wurde)
  • Sound-Redux (ein mit React & Redux erstellter Soundcloud-Client)
  • Brainfock (eine mit React erstellte Projekt- und Teammanagementlösung)
  • React-Hn & React-News (Hacker News Klone)
  • React-Native-WhatsApp-UI + Tutorial (WhatsApp-Klon mit React-Native)
  • Phoenix-Trello (Trello-Klon)
  • Slack-Clone + ein weiteres Tutorial (Slack-Clones)

Es gibt einige Apps für Angular:

  • angle2-hn & hn-ng2 (Hacker News klont + ein nettes Tutorial zum Erstellen eines weiteren von Ashwin Sureshkumar)
  • Redux-and-angular-2 (ein Twitter-Klon)

Es gibt auch Lösungen für Vue:

  • vue-hackernews-2.0 & Loopa news (Hacker News Klone)
  • vue-soundcloud (eine Soundcloud-Demo)

Fazit

Entscheiden Sie sich jetzt für ein Framework

React, Angular und Vue sind alle ziemlich cool und keiner von ihnen steht klar über den anderen. Vertraue deinem Bauchgefühl. Dieses letzte bisschen unterhaltsamer Zynismus könnte Ihnen bei Ihrer Entscheidung helfen:

Das dreckige kleine Geheimnis ist, dass die meisten „modernen JavaScript-Entwicklungen“ nichts mit dem eigentlichen Erstellen von Websites zu tun haben - es sind Pakete, die von Leuten verwendet werden können, die Bibliotheken erstellen, die von Leuten verwendet werden können, die Frameworks erstellen, die Tutorials schreiben und Kurse halten Ich bin nicht sicher, ob jemand tatsächlich etwas erstellt, mit dem tatsächliche Benutzer interagieren können.

Das ist natürlich übertrieben, aber es steckt wahrscheinlich ein Körnchen Wahrheit dahinter. Ja, im Javascript-Ökosystem ist viel los. Wahrscheinlich werden Sie während Ihrer Suche viele andere attraktive Alternativen finden - lassen Sie sich nicht vom neuesten, glänzendsten Framework blenden.

Was soll ich wählen?

Wenn Sie bei Google arbeiten: Angular

Wenn Sie TypeScript lieben: Angular (oder React)

Wenn Sie objektorientierte Programmierung (OOP) lieben: Angular

Wenn Sie Führung, Struktur und Hilfe benötigen: Angular

Wenn Sie bei Facebook arbeiten: Reagieren Sie

Wenn Sie Flexibilität mögen: Reagieren Sie

Wenn Sie große Ökosysteme lieben: Reagieren Sie

Wenn Sie unter Dutzenden von Paketen wählen möchten: Reagieren Sie

Wenn Sie JS und den "Alles-ist-Javascript-Ansatz" lieben: Reagieren Sie

Wenn Sie wirklich sauberen Code mögen: Vue

Wenn Sie die einfachste Lernkurve wünschen: Vue

Wenn Sie das leichteste Framework wünschen: Vue

Wenn Sie Bedenken in einer Datei trennen möchten: Vue

Wenn Sie alleine arbeiten oder ein kleines Team haben: Vue (oder React)

Wenn Ihre App sehr groß wird: Angular (oder React)

Wenn Sie mit react-native eine App erstellen möchten: React

Wenn Sie viele Entwickler im Pool haben möchten: Angular oder React

Wenn Sie mit Designern arbeiten und saubere HTML-Dateien benötigen: Angular oder Vue

Wenn Sie Vue mögen, aber Angst vor dem eingeschränkten Ökosystem haben: Reagieren Sie

Wenn Sie sich nicht entscheiden können, lernen Sie zuerst Reagieren, dann Vue und dann Angular.

https://pixxel.ml/angularjs-vs-reactjs-vs-vuejs-comparison/