Zusammenfassung der Verwendungsbeispiele für den Vergleich zwischen React und ArgularJs

                                                                                                                                                                                                                                                                                                                           

Heutzutage erfreuen sich die beiden JavaScript-Frameworks Angular und React großer Beliebtheit, und die Wahl dieser beiden Frameworks ist heutzutage die am häufigsten in Betracht gezogene Frage Von Architekturdesignern kann Ihnen dieser Artikel möglicherweise nicht sagen, welches Framework besser ist, aber versuchen Sie, die beiden aus mehreren Blickwinkeln zu vergleichen und Ihnen mehr Referenzmeinungen zu liefern, wenn Sie Ihre Wahl treffen.

Wie wählt man aus?

Vor der Auswahl versuchen wir, uns mit einigen Fragen das Framework (oder jedes Tool) anzusehen, das Sie auswählen möchten, und versuchen, die Antworten auf diese Fragen als Hilfe zu nutzen wir verstehen besser Frameworks erleichtern auch die Auswahl

Fragen zum Framework selbst:

• Ist es ausgereift? Wer steckt dahinter? Welche Funktionen hat

• ?

• Welche Architektur und welches Modell wird verwendet?

• Ist das Ökosystem reich?

Fragen zur Selbstreflexion:

• Können mein Team und ich leicht lernen und meistern? Ist

• für mein Projekt geeignet?

• Ist die Entwicklungserfahrung gut genug?

Genau genommen ist der Vergleich zwischen Angular und React unfair, da Angular ein funktionsreiches Framework ist, während React eine UI-Komponentenbibliothek ist, also werden wir in der Analyse einige Klasse Bibliotheken, die häufig mit React verwendet werden, werden gemeinsam besprochen.

OK, fangen wir an...

Reife

Als reifer Entwickler oder jemand, der die Richtung von Architektur und Technologie bestimmen kann, ein Muss Die Fähigkeit besteht darin, die Beziehung zwischen ausgereiften Technologien und modernsten Frameworks in Arbeit und Projekten auszubalancieren, um den Fortschritt von Personal und Technologie aufrechtzuerhalten und gleichzeitig die Lieferqualität von Projekten oder Produkten sicherzustellen Folgende mögliche Situationen: Risiken:

• Das Gerüst kann instabil sein.

• Der Hauptentwickler (Sponsor) kann plötzlich aufgeben.

• Wenn Sie Hilfe benötigen, ist möglicherweise keine große Wissensdatenbank oder Community verfügbar.

Glücklicherweise scheint es, egal ob Angular oder React, keinen Grund zur Sorge über die oben genannten Risiken zu geben

React

React ist entwickelt und von Facebook für eigene Produkte gepflegt, darunter Instagram und WhatsApp. Es ist jetzt etwa dreieinhalb Jahre her. Es ist auch eines der beliebtesten Projekte von GitHub.

Angular

Angular wird von Google verwaltet und in Googles AdWords- und Fiber-Projekten verwendet. Da AdWords für Google ein wichtiges Tool zum Geldverdienen ist, ist es verständlich, dass Angular wahrscheinlich nicht plötzlich stirbt.

Funktion

Wie bereits erwähnt, verfügt Angular selbst über viel mehr Funktionen als React. Natürlich sind umfangreichere Funktionen Vorteile für ein Framework. Beide Frameworks verfügen über einige der gleichen Kernfunktionen: Komponentisierung, Datenbindung und plattformunabhängiger Rendermechanismus .

Angular

Neben der Bereitstellung einiger Funktionen, die die neueste Browserunterstützung erfordern, bietet Angular auch die folgenden Standardfunktionen:

• Dependency Injection

• Vorlage

• Route (@angular/router)

• AJAX (@angular/http)

• Forms (@angular/forms)

• Komponentisierte CSS-Verpackung

• XSS-Schutz

• Unit-Test-Tools

Der Vorteil umfangreicher Funktionen besteht darin, dass Sie keine zusätzliche Energie für die Auswahl von Klassenbibliotheken von Drittanbietern aufwenden müssen. Dies lässt Ihnen auch keine Wahl, auch wenn Sie diese Funktionen nicht benötigen (die neueste Version von Angular 4 scheint dieses Problem erkannt zu haben)

Reagieren

Im Vergleich Mit Angular sind die von React selbst bereitgestellten Funktionen relativ „einfach“:

• Keine Abhängigkeitsinjektion

• Verwenden Sie JSX anstelle herkömmlicher HTML-Vorlagen

• XSS-Schutz

• Unit-Test-Tools

Im Vergleich zu Angular bietet Ihnen React eine Menge Freiheit, Klassenbibliotheken von Drittanbietern auszuwählen, wie zum Beispiel:

• Routing (React-Router)

• AJAX (Fetch oder Axios)

• Verschiedene CSS-Pakete (Details siehe: https://github.com/MicheleBertoli/css-in-js)

• Leistungsstärkere Unit-Tests ( Enzym)

Sie können die erforderlichen Klassenbibliotheken entsprechend Ihren eigenen Bedürfnissen frei (oder anpassen) und diese Klassenbibliotheken von Drittanbietern sind leicht zu erlernen.

Sprache und Muster

Mit der Popularität der beiden Frameworks sind auch einige Konzepte und Technologien entstanden. Wenn Sie diese beiden Frameworks wirklich nutzen oder beherrschen möchten, A Framework ist es sehr wichtig, die Konzepte oder Technologien zu verstehen, die dabei herauskommen:

Reagieren

JSX

JSX ist ein sehr kontroverses Thema: Manche Leute mögen es, andere mögen es Ich sehe es als einen großen Schritt zurück. React entschied sich für die Verwendung einer XML-ähnlichen Sprache, um Markup und Code in Komponenten zu kombinieren und HTML-Markup direkt in JavaScript-Code zu schreiben.

Während das Thema der Vermischung von Markup mit JavaScript umstritten sein mag, hat es einen unbestreitbaren Vorteil: statische Analyse. Wenn im JSX-Markup ein Fehler auftritt, meldet der Compiler den Fehler sofort, anstatt ihn unerklärlichen Problemen zur Laufzeit auszusetzen. Dies hilft Entwicklern, Fehler schnell zu beheben und andere dumme Fehler wie Tippfehler zu vermeiden.

Flow

Flow ist ein von Facebook entwickeltes Tool zur JavaScript-Typprüfung. Es kann Code analysieren und auf häufige Typfehler wie implizite Konvertierungen oder Dereferenzierungen prüfen.

Im Gegensatz zu TypeScript für ähnliche Zwecke ist es für Entwickler nicht erforderlich, auf eine neue Sprache zu migrieren, und die Typprüfung funktioniert für Ihre Codeanmerkungen. Typanmerkungen sind während des Prozesses optional und können verwendet werden, um dem Analysator zusätzliche Hinweise bereitzustellen. Wenn Sie eine statische Codeanalyse verwenden und gleichzeitig das Umschreiben von vorhandenem Code vermeiden möchten, ist Flow eine gute Wahl.

Redux

Redux ist eine Bibliothek, die Zustandsänderungen auf übersichtliche Weise verwalten kann. Es ist von Flux inspiriert, jedoch mit einigen Vereinfachungen. Die Schlüsselidee von Redux besteht darin, dass der gesamte Zustand einer Anwendung durch ein einzelnes Objekt dargestellt wird, das durch Funktionen, die als Reduzierer bezeichnet werden, mutiert wird. Reduzierstücke selbst sind rein funktional und werden getrennt von Komponenten implementiert. Dies ermöglicht eine bessere Trennung von Problemen und Tests.

Wenn Sie an einem einfachen Projekt arbeiten, kann die Einführung von Redux ein gewisser Kompromiss sein, aber für mittlere und große Projekte ist es eine gute Wahl.

Angular

TypeScript

TypeScript ist eine neue Sprache, die auf JavaScript basiert und von Microsoft entwickelt wurde. es ist Javascript Eine Obermenge von ES2015 und enthält Funktionen neuerer Versionen der Sprache. Sie können es anstelle von Babel verwenden, um hochmodernes JavaScript zu schreiben. Es kann Ihren Code auch statisch analysieren, indem es eine Kombination aus Anmerkungen und Typinferenz verwendet.

Es gibt auch einen subtileren Vorteil. TypeScript ist stark von Java und .NET beeinflusst. Wenn Ihre Entwickler also über Hintergrundkenntnisse in einer dieser Sprachen verfügen, fällt es ihnen möglicherweise leichter, TypeScript zu finden als einfaches JavaScript (beachten Sie, wie wir von Tools auf Ihre persönliche Umgebung umgestiegen sind). Während Angular das erste große Framework war, das TypeScript aktiv einführte, kann es auch mit React verwendet werden.

RxJS

RxJS ist eine reaktive Programmierbibliothek, die asynchrone Vorgänge und Ereignisse flexibel verarbeiten kann. Es handelt sich um eine Kombination aus Observer- und Iterator-Mustern kombiniert mit funktionaler Programmierung. RxJS ermöglicht es Ihnen, alles als kontinuierlichen Stream zu behandeln und verschiedene Vorgänge darauf auszuführen, wie z. B. Mapping, Filterung, Aufteilung oder Zusammenführung.

Diese Bibliothek wurde von Angular für sein HTTP-Modul sowie für einige interne Zwecke übernommen. Wenn Sie eine HTTP-Anfrage ausführen, wird ein Observable anstelle des üblichen Promise zurückgegeben. Obwohl diese Bibliothek sehr leistungsfähig ist, ist sie auch komplex. Um es zu beherrschen, müssen Sie die verschiedenen Arten von „Observablen“, „Subjekten“ und etwa hundert Methoden und Operatoren kennen.

RxJS ist nützlich, wenn Sie viel mit kontinuierlichen Datenströmen (wie Web-Sockets) arbeiten, scheint aber für alles andere zu komplex zu sein. Unabhängig davon sollten Sie zumindest die Grundlagen von RxJS kennen, wenn Sie Angular verwenden.

TypeScript ist eine sehr wichtige Funktion in Angular. Erstens bietet es ursprünglichen C#/Java-Entwicklern die Möglichkeit, einfach in das Frontend einzusteigen. TypeScript möchte außerdem einfacher zu verstehen sein als JavaScript, insbesondere in Projekten mit viel Code oder komplexem Geschäft.

Ökosystem

Einer der Gründe, warum Open-Source-Frameworks so beliebt sind, ist, dass es um sie herum unzählige Tools, Klassenbibliotheken und Erweiterungen gibt, die das gesamte Framework unterstützen Manchmal sind diese Tools möglicherweise hilfreicher als das Framework selbst. Werfen wir daher einen Blick auf die beliebtesten Tools und Bibliotheken im Zusammenhang mit diesen beiden Frameworks.

Angular

Angular CLI

Ein beliebter Trend bei modernen Frameworks ist die Verwendung von CLI-Tools, die Ihnen beim Bootstrap Ihres Projekts helfen können, ohne den Build selbst konfigurieren zu müssen. Angular verfügt über Angular CLI. Es ermöglicht Ihnen, Projekte mit nur wenigen Befehlen zu erstellen und auszuführen. Alle Skripte, die für die Erstellung der Anwendung, das Starten des Entwicklungsservers und die Ausführung von Tests verantwortlich sind, sind in node_modules versteckt. Sie können es auch verwenden, um während der Entwicklung neuen Code zu generieren. Dadurch wird die Einrichtung neuer Projekte zum Kinderspiel.

Ionic 2

Ionic 2 ist die neue Version des beliebten Frameworks zur Entwicklung hybrider mobiler Anwendungen. Es bietet einen Cordova-Container, der sich perfekt in Angular 2 integrieren lässt, sowie eine schöne Bibliothek mit Materialkomponenten. Damit können Sie ganz einfach mobile Anwendungen einrichten und erstellen. Wenn Sie gerne mit Hybrid-Apps arbeiten, ist dies eine großartige Option.

Materialdesign-Komponenten

Wenn Sie leidenschaftlich gerne mit Material entwerfen, werden Sie erfreut sein zu hören, dass Angular über eine Materialkomponentenbibliothek verfügt.

Angular universal

Angular universal ist ein Seed-Projekt, mit dem Projekte erstellt werden können, die serverseitiges Rendering unterstützen.

@ngrx/store

@ngrx/store ist eine von Redux inspirierte Zustandsverwaltungsbibliothek für Angular, die auf einem durch reine Reduzierer mutierten Zustand basiert. Durch die Integration mit RxJS können Sie Push-Änderungserkennungsstrategien für eine bessere Leistung nutzen.

Weitere Informationen zu Angular-bezogenen Klassenbibliotheken und Tools finden Sie in der Awesome Angular-Liste

Reagieren

React-App erstellen

Erstellen-reagieren - app ist ein CLI-Tool zum schnellen Erstellen neuer React-Anwendungen. Sie können ein neues Projekt generieren, den Entwicklungsserver starten und Bindungen erstellen. Jest (ein Unit-Testing-Tool von Facebook) ist ebenfalls in die Create-react-App integriert, was es für uns einfacher macht, Unit-Tests durchzuführen.

React Native

React Native ist eine von Facebook entwickelte mobile Entwicklungsplattform, die auf React basiert. Mit dieser Plattform kann React eine wirklich native Benutzeroberfläche erstellen. Für die Bindung stehen eine Reihe von Standard-React-Komponenten zur Verfügung. Außerdem können Sie damit eigene Komponenten erstellen und diese an Objective-C-, Java- oder Swift-Code binden.

Material-Benutzeroberfläche

Für React ist auch eine Materialdesign-Komponente verfügbar. Im Vergleich zur Angular-Version ist diese Version ausgereifter und kann eine größere Auswahl an Komponenten verwenden.

Next.js

Next.js ist ein Framework für das serverseitige Rendern von React-Anwendungen. Es bietet eine flexible Möglichkeit, eine Anwendung ganz oder teilweise auf dem Server zu rendern, die Ergebnisse an den Client zurückzugeben und im Browser fortzufahren. Es versucht, die komplexe Aufgabe der Erstellung universeller Anwendungen so einfach wie möglich zu gestalten, sodass die Einrichtung so einfach wie möglich ist und eine minimale Anzahl neuer Grundelemente und Anforderungen an die Projektstruktur aufweist.

MobX

MobX ist eine alternative Bibliothek zur Verwaltung des Anwendungsstatus. Im Gegensatz zu Redux, das den Status in einem unveränderlichen Speicher speichert, empfiehlt es Ihnen, nur den minimal erforderlichen Status zu speichern und den Rest der Daten daraus zu beziehen. Es bietet eine Reihe von Dekoratoren zum Definieren von Observables und Observern und zum Einführen reaktiver Logik in Ihren Statusverwaltungscode.

Storybook

Storybook ist eine Komponentenentwicklungsumgebung für React. Damit können Sie schnell eine separate Anwendung zur Anzeige Ihrer Komponenten einrichten. Darüber hinaus bietet es zahlreiche Add-ons zum Dokumentieren, Entwickeln, Testen und Entwerfen Ihrer Komponenten.

Ebenso können Sie weitere Tools und Bibliotheken aus der Awesome React-Liste erfahren.

Lernkurve und Entwicklungserfahrung

Ein wichtiges Kriterium für die Auswahl einer neuen Technologie ist, ob sie leicht zu erlernen ist. Die Antwort hängt natürlich von einer Vielzahl von Faktoren ab, wie zum Beispiel Ihrer bisherigen Erfahrung und Ihrem allgemeinen Wissen über relevante Konzepte und Muster. Wenn wir davon ausgehen, dass Sie ES6+, Build-Tools und all das bereits kennen, schauen wir uns an, was Sie sonst noch wissen müssen.

Reagieren

Mit React werden Sie als Erstes auf JSX stoßen. Für einige Entwickler mag es zunächst umständlich erscheinen, aber es erhöht nicht die Komplexität; Es ist nur ein Ausdruck, es ist eigentlich JavaScript und es hat eine spezielle HTML-ähnliche Syntax. Sie müssen auch lernen, wie man Komponenten schreibt, Requisiten für die Konfiguration verwendet und den internen Status verwaltet. Es besteht keine Notwendigkeit, neue Logikstrukturen oder Schleifen zu erlernen, da alles reines JavaScript ist.

Das offizielle Tutorial ist ein großartiger Ort, um mit dem Erlernen von React zu beginnen. Nachdem Sie das offizielle Tutorial abgeschlossen haben, sollten Sie sich als Nächstes mit dem Routing-Mechanismus von React vertraut machen und ihn beherrschen. React Router v4 ist vielleicht etwas komplexer und unkonventioneller, aber machen Sie sich keine allzu großen Sorgen.

Die Verwendung von Redux erfordert einen Paradigmenwechsel, und der kostenlose Einführungsvideokurs zu Redux kann Kernkonzepte schnell einführen. Abhängig von der Größe und Komplexität des Projekts kann es schwierig sein, ein paar zusätzliche Bibliotheken zu finden und zu erlernen, aber danach sollte alles reibungslos verlaufen.

Tatsächlich ist der Einstieg in React sehr einfach. Der schwierigste Teil besteht möglicherweise darin, eine Klassenbibliothek auszuwählen, die für Ihr Projekt oder Produkt geeignet ist.

Angular

Angular führt Sie in mehr neue Konzepte als React ein. Zunächst müssen Sie TypeScript verwenden. Für Entwickler mit Erfahrung in statisch typisierten Sprachen wie Java oder .NET ist dies möglicherweise einfacher zu verstehen als JavaScript, aber für reine JavaScript-Entwickler erfordert dies möglicherweise etwas zusätzliches Lernen.

Die umfangreichen technischen Themen des Frameworks selbst können von den Grundlagen wie Modulen, Abhängigkeitsinjektion, Dekoratoren, Komponenten, Diensten, Pipelines, Vorlagen und Anweisungen bis hin zu fortgeschritteneren Themen wie Änderungserkennung, Zonen und AoT reichen Kompilierung und RxJS. Diese stehen alle in der Dokumentation. RxJS ist ein schweres Thema und wird auf der offiziellen Website ausführlich beschrieben. Während die Verwendung auf einer grundlegenden Funktionsebene relativ einfach ist, wird es komplizierter, wenn Sie zu erweiterten Anwendungen wechseln.

Alles in allem ist uns aufgefallen, dass Angular eine höhere Eintrittsbarriere hat als React. Die Anzahl der neuen Konzepte kann für Neulinge durchaus verwirrend sein. Wieder einmal bin ich auf einige Fragen gestoßen und musste Google verwenden, um die Antwort zu finden. Ob es jedoch geeignet ist oder nicht, hängt, wie bereits erwähnt, von weiteren Faktoren ab.

Aussichten

Angular

Im März 2017 hat Angular Version 4.0 veröffentlicht (kompatibel mit Version 2.x). Die offizielle Erklärung lautet: Die Version von Router, die Hauptkernkomponente, ist bereits 4.0.0. Wenn Angular immer noch 3.0 verwendet, führt dies zu Verwirrung, wie unten gezeigt:

Die wichtigsten Änderungen in Version 4.0 sind Erhebliche Reduzierungen Die Codegröße wird reduziert (60 %), die Ladegeschwindigkeit wird verbessert (soweit mit bloßem Auge sichtbar) und die Fehlermeldung ist klarer. Laut der offiziellen Dokumentation wird das Versions-Upgrade von Angular relativ schnell iteriert

Ob es sich um eine 6-monatige Iteration einer Hauptversion oder einen wöchentlichen Hotfix handelt Wie Sie sehen, möchte das Angular-Team mit einer schnellen Upgrade-Strategie schnell den Markt erobern.

React

Andererseits ist das Upgrade von React sehr vorsichtig, wie aus dem neuesten Newsblog zur Version 15.5.0 hervorgeht

Aus dem Blog geht jedoch hervor, dass React kurz vor der Einführung von Version 16 steht. Ich frage mich, welche Überraschungen uns das gesamte neu geschriebene React bringen wird. Es sollte jedoch erwähnt werden, dass Facebook Ende letzten Jahres React VR veröffentlicht hat. Interessierte Studenten können einen Blick darauf werfen.

Fitness

Egal welches Framework es ist, dasjenige, das zu Ihnen passt, ist „gut“, also müssen Sie es aus der Perspektive des Projekts (Produkts) messen ) selbst, wie folgt: Der Fragenkatalog ist vielleicht nicht vollständig, kann aber zumindest als Anfang dienen

• Wie groß ist das Projekt (Produkt)?

• Wie lange dauert die Wartung?

• Sind alle Funktionen vorab klar definiert oder können sie flexibel geändert werden?

• Sind das Domänenmodell und die Geschäftslogik komplex?

• Auf welche Plattform zielen Sie ab? Web, mobil, Desktop?

• Benötigen Sie serverseitiges Rendering? Ist SEO wichtig?

• Verarbeiten Sie viele Echtzeit-Event-Streams?

• Wie groß ist Ihr Team?

• Wie erfahren sind Ihre Entwickler und welchen Hintergrund haben sie?

• Gibt es vorgefertigte Komponentenbibliotheken, die Sie gerne verwenden würden?

Wenn Sie an einem großen Projekt arbeiten und das Risiko falscher Entscheidungen minimieren möchten, sollten Sie zunächst eine Demo erstellen, um das Produktkonzept zu validieren. Wählen Sie einige Hauptfunktionen Ihres Projekts aus und versuchen Sie, diese mithilfe eines der Frameworks auf einfache Weise zu implementieren. Demos nehmen normalerweise nicht viel Zeit in Anspruch (und sollten es auch nicht), aber sie liefern wertvolle Erfahrungen, die Ihnen bei der Validierung wichtiger technischer Anforderungen helfen können. Wenn Sie mit den Ergebnissen zufrieden sind, können Sie mit einem vollständigen Build fortfahren. Wenn nicht, haben Sie ausreichend Zeit, sich erneut zu entscheiden. Während der Projektentwicklung können Sie auch einige Entwicklungstools verwenden, die Angular und React unterstützen, um die Entwicklungseffizienz zu verbessern, z. B. Wijmo, eine Reihe von Entwicklungskontrollsätzen, einschließlich HTML5 und JavaScript, die für die Entwicklung von Unternehmensanwendungen eingeführt wurden. Ganz gleich, ob Ihre Anwendung mobil oder auf dem PC ist oder IE6 unterstützen muss, Wijmo Enterprise kann Ihre Anforderungen erfüllen.

Zusammenfassung

Anhand der oben genannten 6 Aspekte haben wir React und Angular, die beiden derzeit heißesten Front-End-Frameworks, verglichen, in der Hoffnung, Ihnen bei der Erstellung einige Referenzen zu geben Ihre Wahl. Aber ob es wirklich für Sie geeignet ist, wissen Sie vielleicht erst, wenn Sie es ausprobieren.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendungsbeispiele für den Vergleich zwischen React und ArgularJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!