Jetzt als BETA-Version verfügbar, AngularJS 2 ist im Begriff, das heiße neue Framework im Jahr 2016 zu werden. Jetzt ist die Zeit für die Evaluierung. Mal sehen, wie es gegen den Liebling von 2015 abschneidet: ReactJS.
Disclamer : Ich habe sehr gerne mit Version 1 von AngularJS gearbeitet, bin aber 2015 zu ReactJS gewechselt. Ich bin vielleicht nicht ganz objektiv, aber glauben Sie mir, ich greife von beiden Seiten an.
Komm, lass uns bluten!

Bildnachweis: @jwcarrol

Versuchen Sie nicht, Obst und Gemüse zu vergleichen

Ja, AngularJS ist ein Framework, während ReactJS eine Bibliothek ist. Für einige macht dies einen objektiven Vergleich unmöglich. Das ist nicht meine Meinung!

Die Wahl zwischen AngularJS und ReactJS ist ein bisschen wie die Wahl zwischen dem Kauf eines startbereiten Computers oder dem Kauf von Ersatzteilen, um Ihren eigenen zu bauen.

Dieser Artikel widmet beiden Ansätzen besondere Aufmerksamkeit unter Berücksichtigung ihrer jeweiligen Vor- und Nachteile. Ich habe die Syntax und das Komponentenmodell von ReactJS und AngularJS verglichen. Dies entspricht daher dem Vergleich eines zusammengebauten Computerprozessors mit einem im Einzelhandel gekauften Prozessor, ein machbarer Vergleich.

Die Vorteile von AngularJS 2

Beginnen wir mit den Vorteilen von AngularJS 2 gegenüber ReactJS.

Keine komplizierte Entscheidung

AngularJS ist ein Framework, was bedeutet, dass es eine große Anzahl nativer Optionen und Funktionen bietet. Bei ReactJS ist es notwendig, externe Komponentenbibliotheken hinzuzufügen, um die gleiche Menge an Funktionalität zu haben. Sie müssen Elemente für das „Routing“ hinzufügen, um unidirektionale Flüsse zu erzwingen, APIs aufzurufen, Tests einzurichten, Abhängigkeiten zu verwalten usw. Der Entwickler entscheidet alles und die geringste technologische Entwicklung basiert auf seinen Entscheidungen.
AngularJS ermöglicht die direkte Nutzung einer Reihe von Optionen, was es ermöglicht, ein Projekt schneller zu starten, ohne sich von den beim Start zu treffenden Entscheidungen einschüchtern zu lassen. Diese Standardisierung macht es auch sehr einfach, Entwickler zu wechseln, da die Projekte auf eingebetteten und de facto Standardkomponenten basieren, was auch die Teamarbeit erleichtert.
Ich bewundere auch die Einführung von TypeScript durch das AngularJS-Entwicklungsteam, dies führt uns zum zweiten wichtigen Vorteil von AngularJS.

TypeScript = ClearPath

TypeScript ist sich nicht einig. AngularJS 2 hat die Essenz von JavaScript, auch wenn es nicht nur JavaScript ist. Die vorgestellten Beispiele von ReactJS sind ihrerseits mal in ES5, mal in ES6 in gleichen Proportionen. Und mit ReactJS können Sie jetzt drei verschiedene Deklarationen für dieselbe Aktion verwenden: die Komponentendeklaration. Dies hat den Effekt, Neuankömmlinge zu verwirren.
Auch wenn AngularJS 2 die Verwendung von TypeScript nicht einschränkt, drängt der harte Kern der AngularJS-Entwickler vor allem durch die Dokumentation stark in diese Richtung. Dies bedeutet, dass die meisten der in Open-Source-Projekten verfügbaren Beispiele eine Syntax bieten, die Entwicklern vertraut ist, die diesem Standard folgen, da die meisten diesem Standard folgen. AngularJS hat Beispiele, die zeigen, wie man den TypeScript-Compiler verwendet (Diese Demonstrationen sind übrigens bewundernswert, nicht jeder verwendet heutzutage TypeScript, aber ich wette, dass es bald zum Standard werden wird). Diese Arbeitsweise vermeidet Fehler im Zusammenhang mit einer schlechten Entscheidung, die in ReactJS auftreten könnten.

Abwanderung reduzieren

2015 war das Jahr, in dem einigem Vanilla-JavaScript die Puste ausging. ReactJS war einer der Akteure dieser Veränderung. Während React in Version A 1.0 ist, sollten in Zukunft weitere Änderungen folgen. Das Ökosystem rund um ReactJS leidet weiterhin unter einem Churn-Phänomen, insbesondere rund um die in Flux verwendeten Komponenten. Dies bedeutet, dass alles, was heute in ReactJS geschrieben wurde, wahrscheinlich veraltet ist, wenn ReactJS 1 veröffentlicht wird, oder zumindest eine umfassende Überarbeitung erfordert.
Im Gegensatz dazu ist AngularJS 2 eine methodische und sorgfältige Neuerfindung der vorherigen Version. Diese Version ist ausgereifter, verständlicher. Also ja, Updates auf eine neuere Version von AngularJS werden viel weniger schmerzhaft sein als die von ReactJS. Und wenn wir uns als vollständiges Framework für die Arbeit mit AngularJS entscheiden, wissen wir, dass die eingebetteten und nativ verfügbaren Elemente gut zusammenarbeiten, weil sie so ausgewählt wurden, dass sie zusammenarbeiten. In ReactJS liegt es in Ihrer Verantwortung, die Komponenten auszuwählen, die in einigen Fällen Probleme mit Kompatibilität, Leistung usw. haben können. Komponentenaktualisierungen können auch zusätzliche Schwierigkeiten und Debugging verursachen. Wir alle wissen, dass diese Phasen frustrierend sind, zeitaufwändig sein können und wirklich endlos erscheinen.

Eine große Auswahl an unterstützten Tools

Wie Sie unten sehen können, halte ich React JSX für einen großen Fortschritt, obwohl es notwendig ist, Komponenten auszuwählen, die JSX unterstützen. React ist so beliebt geworden, dass die Unterstützung für ein bestimmtes Tool selten ein Problem darstellt. Seien Sie einfach geduldig. Tatsächlich haben neue Tools selten JSX-Unterstützung, wenn sie gestartet werden (Beispiele: IDEs, Linters usw.). AngularJS 2-Templates und ihr String-Markup werden in separaten HTML-Dateien gespeichert. Tatsächlich erfordert diese Methode kein spezielles Werkzeug, um das Lesen zu erleichtern.

Kompatibel mit Webkomponenten

Das Design von AngularJS 2 respektiert die Standards von Webkomponenten. Kurz gesagt, Komponenten, die Sie in AngularJS 2 erstellen, sollten viel einfacher in reine Komponenten umgewandelt werden können als die in ReactJS erstellten. Die Browserunterstützung bleibt begrenzt, aber dies könnte beispielsweise während Ihrer Migrationen ein langfristiger Beschleuniger sein.
Nachdem wir nun die Highlights von AngularJS 2 besser verstanden haben, ist es an der Zeit, die Highlights von ReactJS zu überprüfen.

Die Vorteile von ReactJS

Was also unterscheidet React wirklich?

Jsx

JSX ist eine Pseudosprache mit einer HTML-ähnlichen Syntax, die von JavaScript kompiliert wurde. Das Markup und der Anwendungscode werden in derselben Datei zusammengesetzt. Der Vorteil ist, dass diese Architektur eine effiziente Autovervollständigung während der Entwicklung ermöglicht, insbesondere bei der Eingabe einer Variablen, eines Schlüsselworts usw. Dies ist ein wichtiger Unterschied zu AngularJS 2. Dadurch verfügt ReactJS in den meisten Editoren über eine gute, konsistente und vollständige Syntaxhervorhebung, oft noch dazu mit zumindest teilweiser Autovervollständigung und der Fähigkeit, Fehler zu erkennen ). Das heißt, AngularJS bietet ein hausgemachter Parser um diese Schwierigkeit zu überwinden (bravo!).
Wenn Sie allergisch auf Templates sind, die auf Strings wie in AngularJS basieren, ist es auch möglich, den Inhalt in mehrere Dateien aufzuteilen, jedoch auf Kosten der Rückkehr zu einer „altmodischen“ Dateiarchitektur.

ReactJS identifiziert Fehler schnell

Wenn wir in ReactJS einen Syntaxfehler machen, wird es nicht kompiliert. Es ist eine großartige Sache. So können Sie sofort erkennen, welche Zeile einen Fehler enthält. Der JSX-Compiler sagt uns das sofort B. wenn ein Element nicht geschlossen ist oder wenn eine Eigenschaft missbraucht wird oder im Kontext der Seite nicht existiert. Dieser Ansatz verkürzt die Entwicklungsphasen erheblich.
Im Gegensatz dazu, wenn in AngularJS 2 ein Fehler beim Referenztyp einer ungültigen Variablen gemacht wird, gibt es keinen Hinweis… AngularJS 2 stürzt lautlos ab, wird aber trotzdem kompiliert. Der Fehler wird beim Start identifiziert. Dies hat den Effekt, dass die Entwicklung verlangsamt wird. Wir laden die Anwendung und müssen uns dann fragen, warum die Daten zum Beispiel nicht geladen werden…

ReactJS ist Javascript-zentriert

Hier ist der grundlegende Unterschied zwischen ReactJS und AngularJS 2. Leider bleibt AngularJS 2 eher HTML-zentriert als JavaScript-zentriert.. Dies ist eigentlich ein grundlegendes Designproblem:

AngularJS 2 fügt weiterhin JavaScript zu HTML hinzu. ReactJS legt HTML im Javascript an.

Dies wirkt sich grundlegend auf das Entwicklungserlebnis aus. Der HTML-zentrierte Ansatz ist die größte Schwäche von AngularJS. JavaScript ist viel mächtiger als HTML. Damit, Es erscheint logischer, dass JavaScript HTML-Markup unterstützt, als nicht. HTML und Javascript müssen zusammenarbeiten, sie sind verwandt. Der Javascript-Ansatz von ReactJS ist damit dem auf dem gegenteiligen Paradigma basierenden Ansatz von AngularJS, EmberJS oder Knockout grundsätzlich überlegen.
hier ist der Grund

ReactJS: JavaScript-zentriertes Design = Einfachheit

AngularJS 2 ist die Fortführung des AngularJS-Ansatzes. Der Ansatz ist immer, HTML mehr Macht zu geben. Wir verwenden daher die AngularJS 2-Syntax für einfache Verarbeitungen wie Schleifen, Bedingungen usw. Leider fehlt es hier an Standard. Beispielsweise bietet AngularJS 2 zwei Bindungsmethoden (einfach oder bidirektional) mit unterschiedlicher Syntax:

{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding

In ReactJS akzeptiert beide dieselbe Art von Syntax.

{myVar}

AngularJS 2 unterstützt eine 'Inline'-Syntax direkt im Element:

&lt;ul&gt;
&lt;li *ngFor="#hero of heroes"&gt;
    {{hero.name}}
  &lt;/li&gt;
&lt;/ul&gt;

Das obige Codebeispiel durchläuft ein Array mit dem Namen „Heroes“. Ich habe an dieser Stelle mehrere Fragen:

Ein „Master“-Modell muss durch eine vorangegangene Anweisung deklariert werden.
Der Hash (#) vor hero deklariert eine lokale Variable. Dieses Schlüsselkonzept in AngularJS klingt nach unnötigem Lärm. Sie können auch var verwenden, wenn Sie dies bevorzugen.
Die ngFor-Anweisung fügt dem HTML durch AngularJS-spezifische Attribute Schleifensemantik hinzu.

Es gibt einen wichtigen Kontrast zwischen der Syntax von AngularJS 2 oben und der von ReactJS, die in reinem Javascript vorliegt (unten).

&lt;ul&gt;
  { heroes.map(hero =&gt;
&lt;li key={hero.id}&gt;{hero.name}&lt;/li&gt;
  )}
&lt;/ul&gt;

Da JavaScript grundsätzlich Schleifen unterstützt, verwendet JSX von ReactJS die gesamte Leistungsfähigkeit von JavaScript direkt für diese Art von Operation und viele andere, wie Karten, Filter usw.

Um AngularJS zu lesen: Es ist wichtig, eine große Anzahl von Schlüsselwörtern zu kennen, die für AngularJS spezifisch sind.
Um ReactJS zu lesen: Sie müssen nur JavaScript beherrschen.

Die Syntax von ReactJS ist daher eine konzeptionell recht einfache Syntax im Vergleich zu anderen Frameworks, die Besonderheiten bieten.

Glut: {{jeweils #}}
Winkel 1: ng-Wiederholung
Winkel 2: ngFor
Knockout: data-bind="foreach"
Reagieren: NUR JS VERWENDEN. 🙂

Alle außer ReactJS verwenden bestimmte Schlüsselwörter, die die in JavaScript verfügbaren nativen Anweisungen ersetzen: eine Schleife. Hier ist die Schönheit von ReactJS. Dies respektiert die Konventionen von JavaScript und behält seine Macht. Es gibt keine bösen Überraschungen oder fragwürdige Grammatik.
Die Macken von AngularJS 2 setzen sich mit der Klickbindung fort:

(click)=”onSelect(hero)"

Im Gegensatz zur Natürlichkeit von nativem Javascript in ReactJS

onClick={this.onSelect.bind(this, hero)}

ReactJS enthält auch ein Ereignissystem (wie AngularJS 2 für diese Angelegenheit). Daher stellt das Deklarieren von Ereignissen kein Leistungsproblem dar, wenn Listener deklariert werden.
Warum eine Framework-spezifische Code-Syntax und -Grammatik lernen, wenn es möglich ist, nur reines Javascript im Auge zu behalten?

Ein luxuriöses Entwicklungserlebnis

Autocompletion-Unterstützung für JSX, Echtzeit-Validierung und eine Fülle von Fehlermeldungen können die Entwicklung erheblich beschleunigen.

Die Gewichtsfrage

Hier ist das Gewicht der beliebtesten Frameworks (Quelle)
Winkel 2: 566k (766k mit RxJS)
Angular 2 : 764k minimiert
Glut : 435k
Angular 1: 143k
Reagieren + Redux : 151k minimiert
AngularJS 2 ist also viermal schwerer als ReactJS + Redux, die von vergleichbarer Einfachheit sind. AngularJS 4 wird in den kommenden Monaten und vor der finalen Veröffentlichung der offiziellen Version wohl an Gewicht verlieren, aber immerhin!
Frameworks wie AngularJS oder EmberJS sind schwerer, da nativ viel mehr Funktionen verfügbar sind.
Dies wirft Fragen auf. Viele Anwendungen benötigen nicht alle diese Elemente, die in diesen Frameworks angeboten werden. In einer Welt, in der immer mehr Micro-Services oder Micro-Apps entstehen, bietet ReactJS eine gute Kapazitätsleistung, indem es Ihnen erlaubt, nur das Nötigste einzubetten. In einer Welt, die mehr als 200.000 NPM-artige Module kennt, ist dies eine interessante Positionierung.

ReactJS respektiert die Philosophie der UNIX-Welt

Denken Sie daran, dass ReactJS eine Bibliothek ist. Dies ist genau das Gegenteil der Philosophie größerer Frameworks wie AngularJS und EmberJS. Wenn Sie sich für ReactJS entscheiden, können Sie die beste moderne Komplementärbibliothek auswählen, um diese oder jene Schwierigkeit zu lösen. Javascript schreitet schnell voran und React ermöglicht es, im Handumdrehen von einem kleinen Stück Code zu einer Anwendung zu wechseln, die größere Bibliotheken einbettet.

Zusammengefasst

AngularJS 2 ist eine erhebliche Verbesserung gegenüber dem, was in seiner ersten Version angeboten wurde. Das neue Komponentenmodell ist einfacher zu verstehen und zu integrieren als die Direktiven der Version 1. Diese Version unterstützt Isomorphismus / universelles Rendering und verwendet eine virtuelle DOM-Version, die eine 3- bis 10-fach verbesserte Leistung bietet. Diese Änderungen machen AngularJS 2 zu einem Framework, das sich im Vergleich zu ReactJS nicht schämen muss. Wir können nicht leugnen, dass die von AngularJS 2 angebotenen Funktionen vollständig sind und erhebliche Vorteile bieten, indem das Schreiben von JavaScript reduziert wird.
Das Gewicht von AngularJS 2 und seine Syntax werfen jedoch Fragen auf. Die Tatsache, dass AngularJS HTML-zentriert ist, macht es schwierig, es mit ReactJS zu vergleichen, das JavaScript-zentriert ist. In React ist es nicht erforderlich, eine bestimmte Sprache zu lernen, um das Framework zu verwenden. Sie müssen lediglich JavaScript beherrschen. ReactJS schreibt jedoch nichts für den Entwickler, sodass insgesamt viel mehr Code geschrieben werden muss, selbst wenn es sich nur um JavaScript handelt. Das ist die Zukunft, an die ich glaube.
Originalartikel von Cory-Haus, veröffentlicht auf medium.freecodecamp.com
Übersetzt aus dem Englischen von Matthew Breton - CTO JS Republik
[separator type=““ size=““ icon=“star“] [actionbox color=“default“ title=““ description=“JS-REPUBLIC ist ein auf JavaScript-Entwicklung spezialisiertes Dienstleistungsunternehmen. Wir sind ein anerkanntes Ausbildungszentrum. Alle unsere technischen Schulungen finden Sie auf unserer Partnerseite für Schulungen“ btn_label=“Unser Training“ btn_link=“http://training.ux-republic.com“ btn_color=“primary“ btn_size=“big“ btn_icon=“star“ btn_external ="1"]

Angular 2 gegen ReactJS: Es wird Blut fließen!