Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular

Angular vs. React: 7 Hauptmerkmale im Vergleich

by
Length:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Angular vs React

Angular vs. React ist eine beliebte Debatte unter den Frontend-JavaScript-Entwicklern, und meistens neigt die Diskussion dazu, sich auf die eine oder andere Technologie zu konzentrieren. Angular und React, die von Google bzw. Facebook entwickelt wurden, sind die beiden beliebtesten Technologien, mit denen interaktive Einzelseitenanwendungen erstellt werden.

Ein umfassender Vergleich zwischen Angular und React ist unmittelbar bevorstehend, da es bestimmte Stellen gibt, an denen sie sich hinsichtlich ihres Angebots erheblich überschneiden, d.h. die Frontansicht Ihrer Anwendung und andere Stellen, an denen ihre Funktionalität unvollständig bleibt, sofern nicht eine Bibliothek eines Drittanbieters hilft. Die Übernahme einer Technologie gegenüber der anderen ist eine Frage, ob Angular oder React Ihr Problem besser löst und ein wenig Intuition. In diesem Tutorial werden sieben wichtige Funktionen von Angular und React verglichen.

Ich bin ein leidenschaftlicher Befürworter des Code-First-Ansatzes (Code spricht mehr als Worte, sagen sie). Vor diesem Hintergrund habe ich, wo immer möglich, Codebeispiele für Angular und React hinzugefügt, damit Sie auf Ihrer Intuition aufbauen und entscheiden können, welche für Sie funktionieren und welche nicht. Lassen Sie uns anfangen.

Framework vs. Bibliothek

Angular ist ein Framework, während React eine Bibliothek ist.

Was bedeutet das? Wenn Sie alleine reagieren, können Sie keine Webanwendung erstellen, da sie dazu dient, Ansichten zu erstellen (daher das 'V' in MVC). Mit React können Sie komponentenbasierte Ansichten erstellen, für die Daten an untergeordnete Ansichten weitergegeben werden können. Um diese Lücke zu füllen, hat Facebook Flux entwickelt, ein architektonisches Muster, das React ergänzt. Die Flussarchitektur bietet, wenn sie mit React gekoppelt ist, das folgende Szenario:

  1. Der Benutzer klickt auf ein React-Element.
  2. Eine Aktion wird ausgelöst. Diese Aktion wird über eine Dispatcher-Bibliothek an einen Store gesendet.
  3. Der Store verfolgt den Status der Anwendung und die Datenabrufmethoden. Jede Aktualisierung des Status wird in den Ansichten angezeigt. Das hilft, die Ansichten mit dem Status der Anwendung konsistent zu halten.

Machen Sie keinen Sinn Diese Figur sollte es für Sie klären.

An image that depicts how the Flux architecture complements React
Flux ergänzt React und implementiert das Konzept des unidirektionalen Datenflusses.
Angular ist ein Framework zum Erstellen von Clientanwendungen.

AngularJS wurde fest auf dem MVC-Muster aufgebaut, wodurch die Anwendung in drei verschiedene Schichten aufgeteilt wurde. Die Kombination von Modell, Ansicht und Controller sowie die zusätzliche Komplexität, die mit der Beherrschung von Anweisungen, Fabriken, Diensten und anderen Komponenten verbunden ist, um eine einseitige Anwendung zu erstellen, zwangen die Entwickler bei Google, auf eine komponentenbasierte Architektur umzustellen.

Wenn Ihre Anwendung jedoch wächst, ist es wichtig, eine solide Struktur zu haben, die die Geschäftslogik Ihrer Anwendung von den Komponenten fernhält. Angular ist ein Rahmen, in dem Sie die strukturelle Organisation durchsetzen können, indem Sie die Geschäftsregeln (mithilfe einer Kombination aus Modellklassen und Services) in ein Domänenmodell verschieben und das Modell über Abhängigkeitseingabe in Ihre Komponenten einfügen.

Hier ist ein Codebeispiel, das veranschaulicht, wie die Geschäftslogik in einem Benutzermodell und einem Benutzerservice und außerhalb unserer Komponente verkapselt wird.

Komponentenbasierter Ansatz

Komponenten sind der grundlegendste Baustein einer Benutzeroberfläche in einer Angular-Anwendung. Eine Angular-Anwendung ist ein Baum aus Angular-Komponenten.

Was sind Komponenten? In Angular sind Komponenten TypeScript-Klassen, über denen ein @Component-Dekorator markiert ist. Außerdem können Sie in diesen Dekoratoren definieren, wie Angular die Metadaten bezeichnet. Dazu gehören Vorlage, Stile, Selektoren usw.

Die Komponentenhierarchie in Angular ist so konzipiert, dass Sie Struktur und Funktionalität unter einer einzigen Entität verknüpfen können. Hier finden Sie eine Übersicht über die Architektur der Komponenten und wie diese mit allen anderen Elementen in Angular verknüpft sind.

The architecture of Angular
Die Architektur von Angular. Komponente in der Mitte und alles andere dreht sich darum.

Datenaustausch zwischen Komponenten ist durch Verschachteln von Komponenten möglich, wie im Folgenden beispielhaft dargestellt.

Das Konzept der Komponenten ist in React ebenso tief verwurzelt wie in Angular. Facebook-Aufrufe React eine komponentenbasierte Bibliothek, mit der Sie interaktive Benutzeroberflächen erstellen können. Im Gegensatz zu Angular sind React-Komponenten jedoch nur JavaScript-Funktionen mit einer beliebigen Anzahl von Eingaben und einer Ausgabe. Der folgende Code zeigt eine Komponente, die mithilfe einer JavaScript-Funktion und einer ES6-Klasse definiert wurde.

Wir werden uns ab jetzt an die ES6-Standards für das Komponieren von Komponenten halten, da das von Facebook empfohlen wird. Jede React-Komponente akzeptiert eine beliebige Anzahl von Eingaben, die in einem Objekt namens props gespeichert werden.

Es hat auch eine render-Methode, und wie der Name vermuten lässt, bestimmt diese Methode, was gerendert wird, wenn die Komponente aufgerufen wird.Jede Komponente behält einen internen Status (via this.state) bei, und bei jeder Änderung des Status wird die Renderfunktion dieser Komponente erneut aufgerufen.

Sprachfunktionen: TypeScript vs. ES6

Angular-Anwendungen werden in TypeScript geschrieben, einer Obermenge von ECMA2015, die Ihre Transpiler verwendet, um Ihre stark typisierte .ts-Datei in eine einfache .js-Datei zu kompilieren. TypeScript bietet Spracherweiterungen, die das Schreiben in JavaScript vereinfachen. Außerdem werden Typinformationen mit JavaScript-Entitäten verknüpft, um die Typprüfung zu erzwingen und den Entwicklung-Arbeitsablauf zu verbessern.

Zu den wichtigsten Funktionen von TypeScript gehören die optionale statische Typisierung und Unterstützung für Schnittstellen, Klassen und Dekorateure. (Dekorateure sind Funktionen, denen ein '@' vorangestellt ist und unmittelbar eine Klasse, ein Parameter oder eine Eigenschaft folgt.)

Lassen Sie uns in React eintauchen, oder? Eine der wichtigsten Sprachfunktionen in React ist in diesem Codebeispiel offensichtlich.

Ist das nicht toll? Mit React können Sie XML/HTML-Tags in Ihre JavaScript-Datei einbetten. Dies geschieht über JSX, das JavaScript-Funktionen zur Syntaxerweiterung bietet. Wir müssen einen Compiler wie Babel verwenden, der unseren JSX-Code in das JavaScript übersetzt, das Browser verstehen können. Der obige Code kompiliert sich wie folgt:

Obwohl die Verwendung von JSX empfohlen wird, können Sie sich an React.createElement() halten, wenn Sie gegen das Einbetten von HTML-Tags in JavaScript sind.

Außerdem können Sie bei der Arbeit mit React entweder den ES6-Standard oder die traditionelle Form von JavaScript verwenden. ES6 ist zwar relativ neu, fügt jedoch eine Reihe von Funktionen hinzu, wie z. B. Klassen, Pfeilfunktionen, Vorlagenliterale, Zerstörung und die Verwendung von let und const. Der einzige Nachteil, den ich mir vorstellen kann, ist, dass ein wenig Boilerplate-Code hinzugefügt wird, z. B. die Notwendigkeit, super() jedes Mal aufzurufen, wenn Sie ein constructor() aufrufen, und und dass es nicht automatisch Methoden zur Ereignisbehandlung daran this bindet

Typüberprüfung in Angular vs. PropTypes in React

Die statische Typüberprüfung wird zur Kompilierzeit durchgeführt. Der Compiler warnt Sie vor möglichen Typabweichungen und erkennt bestimmte Fehler, die ansonsten unbemerkt bleiben würden. Wenn Sie einen Vertrag für eine Variable, eine Eigenschaft oder die Parameter einer Funktion definieren, kann der Code lesbarer und einfacher verwaltet werden.

Variablen- und Funktionsdeklarationen werden durch die Deklaration ihrer Datentypen ausdrucksvoller. Weitere Informationen zu den verschiedenen primitiven Datentypen finden Sie in der TypeScript-Dokumentation.

Durch das Definieren der Signatur einer API über eine Schnittstelle wird der Code weniger eindeutig und verständlicher. Die Benutzeroberfläche dient als Schnellstartanleitung, mit der Sie sofort mit Code beginnen können und Zeit sparen, die Sie sonst beim Lesen der Dokumentation oder der eigentlichen Implementierung der Bibliothek benötigen.

Das type-Schlüsselwort in TypeScript kann zum Erstellen eines Alias für einen Typ verwendet werden.

Sie können dann neue Typen erstellen, bei denen es sich um eine Vereinigung oder einen Schnittpunkt dieser primitiven Typen handelt.React bietet nur eingeschränkte Unterstützung für die Typprüfung, da das zugrunde liegende ES6 dies nicht unterstützt. Trotzdem können Sie die Typprüfung mithilfe der vom React-Team entwickelten prop-types-Bibliothek implementieren. Die props-Typprüfung einer Komponente, um zu überprüfen, ob es sich um eine Zeichenfolge handelt, kann wie unten gezeigt ausgeführt werden.

prop-types sind jedoch nicht auf Zeichenfolgen, Zahlen und Boolesche Werte beschränkt. Sie können noch viel mehr tun, wie in der Dokumentation zur Bibliothek der Requisitentypen beschrieben. Wenn Sie jedoch die statische Typprüfung ernst nehmen, sollten Sie Flow verwenden, eine statische Typprüfungsbibliothek für JavaScript.

Gerüst: Angular CLI vs. Create-React-App

Ein Projekt von Grund auf zu starten, mag zunächst Spaß machen. Das Einrichten der Verzeichnisstruktur, das Schreiben von Boilerplate-Code für Komponenten und das Booten der Anwendung ist jedoch sinnlos und unproduktiv. Ihre Strategie sollte darin bestehen, so schnell wie möglich damit fortzufahren und sich auf die eigentliche Entwicklung der Anwendung zu konzentrieren. Dank Google und Facebook stehen Ihnen Werkzeuge zur Verfügung, mit denen Sie Ihre Anwendungen problemlos erstellen können.

Das Einrichten von Angular-CLI für Angular und Create-React-App für React ist mit npm unkompliziert.

Um eine neue Angular-Anwendung zu erstellen, sollten Sie den folgenden Befehl verwenden:

Aber das ist es nicht. Mit dem Befehl ng generate können Sie Komponenten, Routen, Pipes, Anweisungen und Dienste generieren.

Angular CLI kann viel mehr, z. B. das Erstellen eines Builds Ihrer Angular-App, Befehle zum Ausführen von Komponententests und End-to-End-Tests. Sie können mehr darüber auf GitHub lesen.

Auf der anderen Seite ist create-react-app die offiziell unterstützte Methode zum Erstellen einer React-App ohne Konfigurationsdateien.

$npm install -g create -react-app

Dadurch sollte eine funktionale React-App erstellt werden, die alle Abhängigkeiten von Babel und Webpack berücksichtigt. Sie können die App über npm start in Ihrem Browser ausführen.

Die für die Reakt-App verfügbaren Skripts finden Sie in der package.json-Datei.

Datenbindung: Zweiwegbindung vs. Unidirektionale Bindung

Datenbindung ist eine Funktion, die die Synchronisierung von Daten zwischen dem Anwendungsstatus (Modell) und der Ansicht ermöglicht. In einer unidirektionalen Datenbindungsroutine wird die Ansicht bei jeder Änderung des Anwendungsstatus automatisch aktualisiert. Im Gegensatz dazu bindet die bidirektionale Datenbindung Eigenschaften und Ereignisse unter einer einzigen Entität, d. h. jede Änderung des Modells aktualisiert die Ansicht und umgekehrt.

In React werden die Eigenschaften von übergeordneten an untergeordnete Komponenten übergeben, was als unidirektionaler oder Top-Down-Datenfluss bezeichnet wird.Der Zustand einer Komponente ist gekapselt und für andere Komponenten nicht zugänglich, es sei denn, er wird als Requisite an eine Kindkomponente weitergegeben, d. h. der Zustand einer Komponente wird zur Requisite der Kindkomponente.

Was aber, wenn Sie die Daten über den Komponentenbaum verbreiten müssen? Das geschieht durch untergeordnete Ereignisse und übergeordnete Rückrufe. Die React-Dokumentation enthält ein gutes Beispiel für ein solches Szenario.

Datenbindungstechniken, die in Angular verfügbar sind, gehören zu den wenigen Eigenschaften, die es interessant machen. Angular bietet sofortige Unterstützung für Interpolation, einseitige Bindung, bidirektionale Bindung und Ereignisbindung.

Interpolation ist die einfachste Methode, um Ihre Komponenteneigenschaft im Text zwischen Ihren HTML-Tags und Attributzuweisungen zu binden.

<p>Welcome back {{currentUser.name}}!<p>

Die Eigenschaftenbindung ähnelt der Interpolation in dem Sinne, dass Sie die Eigenschaften Ihrer Ansichtselemente an Komponenteneigenschaften binden können. Die Bindung von Eigenschaften favorisiert die Kommunikation mit Komponenten und ist identisch mit der Weitergabe von Requisiten in React.

<img [src]="userImgUrl">

<user-child [user]="currentUser"></user-child>

Ereignisbindungen ermöglichen den Datenfluss in die entgegengesetzte Richtung, d. h. Von einem Element zu einer Komponente. Hier ist click ein Zielereignis, und rechts befindet sich die onSave()-Methode, die aufgerufen wird, wenn das Ereignis auftritt

<button (click)="onSave()">Save</button>

Das wichtigste Feature ist jedoch die bidirektionale Bindung mit dem [(ngModel)]. Dadurch werden die Eigenschaftsbindung und die Ereignisbindung unter einer Direktive zusammengeführt. Das ist besonders bei Formularen und Eingabefeldern hilfreich.

Serverseitiges Rendering

Serverseitiges Rendering ist eine traditionelle Rendering-Technik. Hier gibt der Server auf Anforderung die gesamte HTML-Datei zurück, und der Browser muss sich nur noch den Benutzer anzeigen lassen. Auf der anderen Seite gibt das clientseitige Rendering ein HTML-Dokument, das Stylesheet und eine JavaScript-Datei zurück.

Das JavaScript fordert daraufhin auf, den Rest der Website mithilfe eines Browsers darzustellen. React, Angular und alle anderen modernen JavaScript-Front-End-Bibliotheken sind gute Beispiele für das clientseitige Rendering. Das ist offensichtlich, wenn Sie die Quelle Ihrer Angular/React-Anwendung anzeigen.

Das clientseitige Rendering hat jedoch den Nachteil, dass es für SEO nicht besonders gut geeignet ist und unvollständigen HTML-Inhalt zurückgibt, wenn Sie Ihren Link auf Social-Media-Sites freigeben. Angular bietet eine Lösung namens Angular Universal, die dafür sorgt, dass Ihre App suchmaschinenfreundlich und für soziale Medien geeignet ist. Es handelt sich um eine Bibliothek, die vom Angular-Team erstellt wurde.

Universal verwendet eine Pre-Rendering-Technik, bei der die gesamte Website zuerst vom Server gerendert wird und der Benutzer nach einigen Sekunden auf das clientseitige Rendering umgeschaltet wird. Da das alles unter der Haube geschieht, bemerkt der Benutzer nichts anderes.

Wenn Sie React with Redux verwenden, enthält die Redux-Dokumentation eine gute Anleitung zum Einrichten des Server-Renderings. Sie können React auch so einrichten, dass vom Server gerendert wird, indem Sie die BrowserRouter- und StaticRouter-Komponenten verwenden, die in der React-Router-Bibliothek verfügbar sind. Sie können mehr darüber in diesem Medium-Artikel lesen. Wenn Sie sich jedoch für Leistung und Optimierung interessieren, können Sie next.js ausprobieren, eine Bibliothek für SSR in React.

Verpacken

Was denken Sie über Angular vs. React? Teilen Sie sie in den Kommentaren unten mit.Ein umfassendes, funktionsreiches Framework mit einer robusten UI-Bibliothek zu vergleichen, erscheint möglicherweise nicht fair. Hierbei handelt es sich jedoch um fortgeschrittene JavaScript-Technologien, die zum Erstellen interaktiver Einzelseitenanwendungen verwendet werden. In diesem Zusammenhang sollte dieser Artikel Ihnen helfen, sich für die Auswahl einer dieser Anwendungen zu entscheiden.

Was denken Sie über Angular vs. React? Teilen Sie sie in den Kommentaren unten mit.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.