Der ultimative Vergleich der JavaScript-Frameworks: Angular vs. React

Eine Frage, die mir fast täglich gestellt wird, ist, ob ich mit ReactJS oder Angular anfangen soll? Bevor ich jedoch fortfahre, lassen Sie mich Ihnen einen Haftungsausschluss geben.

Es ist kein Blog, in dem ich das eine oder andere schlecht mache oder sage, dass man immer eines über dem anderen verwenden sollte. Jeder Entwickler und jedes Projekt sind völlig anders und haben unterschiedliche Anforderungen, daher ist es verdammt dumm zu sagen, dass Sie immer ReactJS oder immer Angular verwenden sollten.

Das logische Argument

Sie können argumentieren, dass Angular ein Framework ist und React technisch gesehen eine Bibliothek für sich ist. Ich leugne diese Tatsache nicht, aber auf dieses Argument möchte ich jetzt nicht eingehen. Es gibt Pakete, die Sie React hinzufügen können, die es in ein Framework verwandeln, das direkt mit Angular konkurriert. Wir vergleichen die beiden Ökosysteme, nicht das genaue Framework mit der genauen Bibliothek.

Die Lernkurve

Beginnen wir mit Angular. Noch ein weiterer Haftungsausschluss: Wenn ich Angular sage, spreche ich von Angular 4, nicht von AngularJS.

Angular ist ein großes Framework, was bedeutet, dass es mächtig ist und viel beinhaltet. Es gibt viel zu lernen. Sie werden eine Menge neuer einschüchternder Vokabeln wie Dependency Injection, Direktiven Decorators, Pipes usw. hören. Dann müssen Sie sich mit Typescript befassen, das JavaScript plus eine Reihe anderer Funktionen ist, einschließlich statischer Typisierung.

Angular ist eigensinniger als React, was meiner Meinung nach einer der Vorteile ist, denn mit React kann man dasselbe auf eine Million verschiedene Arten tun. Bei Angular gibt es im Allgemeinen ein oder zwei Möglichkeiten, bestimmte Dinge zu tun, was das Befolgen erleichtert und Ihnen viel klarere Anweisungen gibt, was Sie tun sollen.

Aber dann kommt es auch wieder auf die Präferenz an. Vielleicht gefällt Ihnen die Flexibilität, Dinge auf unterschiedliche Weise zu erledigen. Wie ich bereits erwähnt habe, ist ReactJS eine Bibliothek, wenn wir nur über die Kernbibliothek sprechen, sie ist viel kleiner und viel einfacher zu erlernen als das Angular-Framework. Sie können sagen, dass Sie React in kürzerer Zeit lernen werden. React ist selbst eine großartige Ansichtsbibliothek, aber für große Anwendungen ist sie nicht einmal annähernd so leistungsfähig. Wenn Sie Routing, Validierung und HTTP-Anforderungen in React möchten, müssen Sie andere Pakete installieren, und das trägt zur Lernkurve bei.

Wenn Sie sich React-Code von zwei verschiedenen Entwicklern ansehen, werden sie wahrscheinlich völlig unterschiedlich aussehen, unabhängig davon, ob sie HTTP-Anforderungen stellen oder Status und Eigenschaften verarbeiten. All diese Dinge können sehr unterschiedlich gehandhabt werden und oft kann es falsch sein.

Sie finden die besten Praktiken und alle Probleme verschwinden, aber das trägt zur Lernkurve bei.

Im Gegensatz zu Angular React werden keine Vorlagen verwendet. Es verwendet eine sogenannte JSX- oder JavaScript-Erweiterung oder JavaScript-Syntaxerweiterung, mit der wir HTML in JavaScript einbetten können. Auf den ersten Blick kann dies ein wenig skurril erscheinen. Vor allem, wenn Ihnen wahrscheinlich beigebracht wurde, Ihr Markup und Ihr JavaScript zu trennen.

Stellen Sie sich das so vor, als ob Sie HTML mit ein paar verschiedenen Änderungen in JavaScript einfügen: Sie können das Klassenattribut nicht verwenden und müssen den Klassennamen verwenden.

Schließlich haben wir Redux. React wird oft mit Redux oder Flux verwendet, die Zustandsmanager auf Anwendungsebene sind. Meiner Meinung nach ist Redux verdammt schwer, es einfach einzurichten und die Konzepte davon zu lernen, ist schwer.

Ich denke, es wird überstrapaziert. Ich denke, dass viele Entwickler Redux verwenden, wo es nicht benötigt wird. Sie brauchen es nicht für kleinere Anwendungen, aber viele Entwickler bestehen darauf, es zu verwenden. Das kommt wiederum auf die Präferenz an. Redux ist sehr mächtig, das möchte ich Ihnen nicht nehmen. Wenn man von der Lernkurve spricht, ist das verdammt schwer zu fassen.

Merkmale	Reagieren	Eckig
Programmiersprache	JavaScript	Typoskript
Codestruktur	Rechthaberisch	Flexibel
Core-Bibliothek	Klein	Sehr groß
Vorlagen	JSX	HTML
Kompetenz	Kleine Anwendungen	Anwendungen im großen Maßstab

Gewinner: Es ist ein Unentschieden

Leistung

Es ist nicht fair, die Leistung von Angular direkt mit React zu vergleichen. Angular ist ein komplettes Front-to-Back-Framework, das Routing, Formular-Tools, HTTP-Bibliothek, reaktive Erweiterungen usw. umfasst. All diese Funktionen blähen das Framework auf und machen es langsamer. React selbst ist jedoch nur eine Ansichtsbibliothek, die viel kleiner und schneller ist.

Sobald Sie anfangen, Pakete wie den Router, den HTTP-Client oder was auch immer Sie zu Ihrer React-Anwendung hinzufügen möchten, wird es ein wenig mehr zu Angular kommen, und dann können Sie anfangen, sie fair zu vergleichen, aber auch danach reagieren Sie noch gewinnt die Leistungsabteilung. Es ist im Allgemeinen eine sehr schnelle Technologie.

Durch den Wechsel von Angular 2 zu Angular 4 unter der Haube haben sie einiges getan, um die Leistung zu steigern. Angular 4 ist leistungsstärker als Angular 2. Trotzdem gewinnt React immer noch in der Leistungsabteilung.

Angular vs React. Quelle: Academind.com

Gewinner: Reagieren

Merkmale

Beide Frameworks haben viele der gleichen allgemeinen Funktionen und Vorteile: Sie organisieren Ihren Code, sie sind komponentenbasiert, sie bieten dynamisches Markup usw. Sie sind daran gewöhnt, viele der gleichen Dinge zu tun, und sie teilen sich a viele der gleichen Funktionen.

Merkmale	AngularJS	Reagieren
Erscheinungsdatum	2009	2013
Sprache	TypeScript, JavaScript	JavaScript
Marktanteil	0,3 %	<0,1 %
Modell	Ja	Nein
Aussicht	Ja	Ja
Regler	Ja	Nein
Lernkurve	Komplex	Einfach
Vorlagen	Ja	Nein
Versagen	Laufzeit	Kompilierzeit
Serve-Side-Rendering	Nein	Ja
Dom	Ja	Virtuell
Mobile Unterstützung	Ja	Ja
Serve-Side-Rendering	Nein	Ja

Wir werden uns einige der einzelnen Funktionen ansehen. Angular hat offensichtlich viel mehr Funktionen als React im Kern. Ich möchte Sie daran erinnern, dass wir über zwei Ökosysteme und gemeinsame Pakete sprechen, die mit React verwendet werden.

Angular ist ein allumfassendes Framework. Es enthält einen Komponenten-Router, reaktive Erweiterungen für Observables, einen HTTP-Client, ein Formularmodul zur Validierung und die Liste geht weiter. Darüber hinaus bietet es eine bidirektionale Datenbindung auf eine Weise, die kein anderes Framework wirklich bietet. Das Binden von Daten aus der Ansicht an das Modell ist mit der ng model-Direktive extrem einfach.

Angular unterstützt auch MVC (Model View Controller) oder zumindest andere Aspekte dieses Entwurfsmusters. Es verfügt auch über Funktionen, mit denen Sie Tests einfach implementieren können: sowohl Unit-Tests als auch End-to-End-Tests. Angular ist vollgepackt mit Funktionen zum Erstellen von Front-End-Anwendungen auf Unternehmensebene. React hingegen beinhaltet im Kern nicht viel. Es können jedoch Dinge hinzugefügt werden, um ihm die Funktionen zu geben, die Angular standardmäßig enthält, sowie einige zusätzliche.

React verwendet ein virtuelles DOM, das sehr leistungsfähig ist. Es erstellt eine eigene leichtgewichtige Version des eigentlichen Doms und enthält und aktualisiert nur das, was benötigt wird, anstatt das Ganze zu aktualisieren. Virtual DOM ist einer der Hauptgründe dafür, dass React unglaublich schnell ist.

React verwendet JSX, das leistungsfähiger ist als Standardvorlagen, da Sie absolut jede Art von JavaScript einfügen können, die Sie möchten. JSX ist nicht erforderlich, um React zu verwenden, aber es macht die Dinge verdammt viel einfacher. Ich kann mir keinen Grund vorstellen, warum Sie JSX nicht auch mit Angular verwenden würden. React leistet auch wirklich gute Arbeit bei der Verwaltung des Zustands und der Eigenschaften von Komponenten. Es macht es wirklich einfach, mit Daten zu arbeiten und sie zwischen Komponenten zu übertragen. Das Übergeben von Daten zwischen Komponenten ist in Angular viel schwieriger als in React.

Core React kann den Status auf App-Ebene nur schwer aufrechterhalten. Der Komponentenstatus ist einfach, aber wenn Sie eine echte Statusverwaltung auf App-Ebene wünschen, benötigen Sie Redux oder Flux, was, wie ich bereits sagte, ziemlich verwirrend zu lernen ist. Externe Pakete, die oft verwendet werden, wie die neue React-Router-Version 4, sind etwas schwierig zu verstehen, aber sie sind auch sehr leistungsfähig, sobald sie gelernt haben, sie auszuführen und einzurichten. Es gibt auch viele verschiedene Möglichkeiten, es zu verwenden. React hat keine HTTP-Kernkomponente wie Angular, aber Sie können Fetch oder Axios verwenden, einen externen HTTP-Client, und dann ist Enzyme beliebt, um React zu bestätigen. Es gibt einige der verschiedenen Pakete, die häufig mit React verwendet werden, obwohl sie nicht Teil der eigentlichen Bibliothek sind.

Während beide Technologien eine große Anzahl von Funktionen gemeinsam haben, ist Angular der Gewinner, wenn Sie nur die Kerntechnologien vergleichen.

Gewinner: Eckig

Werkzeuge

Angular und React haben einige ziemlich nette Befehlszeilenschnittstellen. Die Angular CLI und die Create React App sind beide ziemlich großartig und ermöglichen es uns wirklich, die Entwicklung zu rationalisieren. Die Angular-CLI ist etwas leistungsfähiger, da wir schnell Dinge wie Komponenten und Dienste generieren können. Create React kann das nicht. Bis auf die Dateien und die Grundstruktur müssen Sie alles selbst erstellen. Beide Systeme verwenden das Web Pack, haben ihre eigenen Entwicklungsserver zum automatischen Laden und verfügen über Kompilierungs- und Build-Tools. Offensichtlich hat Angular die zusätzliche Aufgabe, Typescript zu transpilieren. Die CLI hat dafür ein Skript, wenn wir ng serve ausführen. All das passierte hinter den Kulissen. Es verwendet dafür etwas namens TSC oder Typescript Compiler und beide haben auch Testwerkzeuge.

Merkmale	Eckig	Reagieren
Befehlszeilenschnittstelle	Winkel-CLI	Reaktion erstellen
Zusätzliche Aufgaben	Typoskript transpilieren	Keiner
Testen	Jasmin & Karma	Ist

Wenn es sich um eine Full-Stack-Anwendung handelt, sind diese wirklich wichtig. Sie müssen sie nicht verwenden. Mit dem Web Pack können Sie eine React-Anwendung von Grund auf erstellen. Diese machen es viel einfacher, die Anwendung nicht nur zu erstellen, sondern sie auch für die Produktion zu kompilieren und zu erstellen.

Sie sind beide hübsch, sogar in dieser Abteilung.

Gewinner: Eckig

Ökosystem

Wie ich bereits sagte, haben diese beiden Technologien ihre eigenen Ökosysteme, die sich jetzt weit über den Webbrowser hinaus ausbreiten.

Ionic ist ein beliebtes Hybrid-Framework, bei dem es sich um eine Angular-Anwendung handelt, die in einem nativen Wrapper für mobile Apps ausgeführt wird. Sie können mobile Apps mit Angular erstellen. Hybrid-Apps können im Vergleich zu nativen Anwendungen etwas klobig sein. Die Benutzererfahrung kann manchmal nicht so gut sein – nicht so schnell und reaktionsschnell. Unter den verschiedenen Hybrid-Frameworks ist Ionic 3 das beste. Es gibt auch NativeScript, mit dem wir echte native Apps für iOS und Android mit Angular und JavaScript erstellen können.

Merkmale	Eckig	Reagieren
Hybride App-Entwicklung	Ionisch	*Nicht benötigt
Native App-Entwicklung	NativeScript	Nativ reagieren
Serverseitiges Rendern	Eckig Universal	DAS
Staatliche Verwaltungsbibliothek	NgRx-Shop	Reax Redux, MobX
Material-UI-Bibliothek	Kantiges Material	Material-UI
Virtuelle Realität	Reaktive VR	DAS

Dennoch scheint NativeScript zumindest an dieser Stelle nicht so gut zu sein wie Facebooks React Native. Angular hat auch eine Materialdesign-Komponentenbibliothek, wenn Sie ein Fan von Materialdesign sind. Angular Universal ist ein Seed-Projekt, mit dem Angular serverseitig gerendert werden kann. Es gibt auch den NgRx-Speicher, eine Zustandsverwaltungsbibliothek, die von Reax Redux inspiriert ist. Es basiert auf einem Zustand, der von Peer-Reduzierern mutiert wird. Es hat auch eine Integration mit Reactive-Erweiterungen.

Sie hätten es bemerkt. Einmal macht einer von ihnen etwas, was die anderen auf andere Weise kopieren. React und Angular sind zu Microsoft- und Apple-JavaScript-Frameworks geworden.

React hat ein ziemliches Ökosystem. Es hat React native, was beliebt ist. Es ist der beste Weg, mobile Apps mit Webtechnologien zu erstellen. React Native ist schnell und viele der Anwendungen, wenn sie richtig erstellt wurden, sind gleichauf mit nativen Anwendungen, die auf Swift oder Java basieren. React verfügt über eine Materialdesign-Bibliothek namens Material-UI, die der Materialdesign-Komponente von Angular sehr ähnlich ist, aber ausgereifter ist. JS ist ein Framework zum Rendern serverseitiger React-Anwendungen. Es zielt darauf ab, dies auf die einfachste Art und Weise zu tun, damit dies mit Angular Universal verglichen werden kann. MobX ist eine weitere Möglichkeit, den Status zu verwalten. Es funktioniert etwas anders als Redux. Es stellt eine Reihe von Dekoratoren bereit, um Observables und Beobachter zu definieren, und es führt reaktive Logik in Ihren Zustand ein.

Storybook ist eine Entwicklungsumgebung für React. Es ermöglicht Ihnen, eine Komponentenbibliothek zu durchsuchen, verschiedene Zustände jeder Komponente anzuzeigen und Komponenten interaktiv zu entwickeln und zu testen. Reactive VR bringt React in die virtuelle Realität. React Desktop ist eine JavaScript-Bibliothek, die auf der Reacts-Bibliothek aufbaut und angeblich ein natives Desktop-Erlebnis mit vielen macOS- und Windows 10-Komponenten ins Web bringt. Das React-Ökosystem ist extrem groß und leistungsfähig. React bahnt sich seinen Weg in jeden Aspekt der Technologie und ist ein klarer Gewinner.

Gewinner: Reagieren

Die Leute in Anzug und Krawatte verwenden Angular und die Hipster mit den struppigen Bärten verwenden React.

	AngularJS	Reagieren
Hauptentwickler	Google	Facebook+Instagram
Das Alter	6Jahr	2 Jahre
Erweiterbarkeit	Ja	Ja
Geschwindigkeit*	1,35 Sekunden	310 Millisekunden
Dom	Browser	Virtuell; rendert nur geänderte Daten mit Patch-Mechanismus neu
Die Architektur	Vollständiges MVC-Framework	Nur die View-Komponente
Lernkurve	Anfangs schwierig; erfordert Kenntnisse über spezifische Konzepte wie DOM-Richtlinien, Filter und Fabriken.	Einfacher zu starten; enthält eine vereinfachte API und Syntax
Struktur und Komponenten	HTML, JS und CSS	Dasselbe; kann aber HTML mit JS integrieren, indem JSX verwendet wird

Fazit: Es ist ein Unentschieden

Wenn Sie sich zwischen diesen Frameworks entscheiden, schauen Sie sich die verschiedenen Kategorien an und sehen Sie, was Sie interessiert. Probieren Sie beide aus und sehen Sie, welches Sie schneller abholen. Recherchieren Sie mehr als in diesem Blog. Sie werden nie alle Informationen, die Sie brauchen, aus einem einzigen Blog bekommen, also lesen Sie mehr.

Wenn Sie sich ein größeres Ökosystem ansehen, das die Entwicklung nativer mobiler Apps umfasst, wählen Sie React, ohne darüber nachzudenken. Wenn Sie nach Funktionen suchen, ist Angular riesig. Es gibt mehr Funktionen, als Sie benötigen.