Warum ich von AngularJS zu React gewechselt bin

Veröffentlicht: 2022-03-11

Im Jahr 2011, als mein Code mit jQuery-Selektoren und Rückrufen unübersichtlich wurde, kam AngularJS als Lebensretter, der zu einer besseren Verwaltung, schnelleren Entwicklung und viel mehr sofort einsatzbereiten Funktionen beitrug. Die bidirektionale Bindung von AngularJS und die Philosophie des „Modells als einzige Wahrheitsquelle“ haben mich umgehauen und die Datenredundanz in meiner gesamten Anwendung reduziert.

Im Laufe der Zeit entdeckte ich jedoch, dass AngularJS einige eigene Schmerzpunkte hat. Diese frustrierten mich schließlich so sehr, dass ich anfing, mich nach alternativen Lösungen umzusehen.

Schmerzpunkte in AngularJS 1.x

  • DOM zur Ausführung

    Angular ist für seinen Ausführungsfluss stark auf das DOM angewiesen. Beim standardmäßigen Bootstrapping von Anwendungen scannt es das DOM und kompiliert es mit Prioritäten von Direktiven, was das Debuggen und Testen der Ausführungsreihenfolge erschwert.

  • Seine eigene Abhängigkeitsinjektion

    JavaScript hat keinen eigenen Paketmanager und Abhängigkeitsauflöser. Aber in letzter Zeit haben Implementierungen wie AMD, UMD und CommonJS dieses Problem sehr gut gelöst. Leider ist AngularJS mit keinem davon praktisch. Vielmehr führt es eine eigene Abhängigkeitsinjektion (DI) ein; obwohl es nicht offizielle AngularJS DI-Implementierungen gibt, die RequireJS verwenden.

  • Zwei-Wege-Bindung ist ein zweischneidiges Schwert

    Es ist verlockend, eine bidirektionale Bindung zu verwenden, aber wenn die Komplexität Ihrer Komponente zunimmt, kann dies zu einer Leistungskatastrophe führen.

    Wie wirkt sich die Zwei-Wege-Bindung auf die Leistung aus? Nun, JavaScript ES5 hat keine Implementierung, um Änderungen an seinen Variablen oder Objekten zu benachrichtigen, daher verwendet Angular etwas, das als „Dirty Checking“ bezeichnet wird, um Datenänderungen zu verfolgen und mit der Benutzeroberfläche zu synchronisieren. Dirty-Checking wird nach jeder Operation durchgeführt, die innerhalb des Bereichs von Angular ($digest-Zyklus) durchgeführt wird, was zu einer langsameren Leistung führt, wenn die Anzahl der Bindungen zunimmt.

    Ein weiteres Problem bei der Zwei-Wege-Bindung besteht darin, dass viele verschiedene Komponenten auf der Seite die Daten ändern können, was zu mehreren Quellen von Dateneingaben führt. Wenn es nicht gut gehandhabt wird, kann es zu einer mehrdeutigen Situation führen. Aber um fair zu sein, das ist ein reines Implementierungsproblem.

  • Angular hat seine eigene Welt

    Jede Operation in Angular muss ihren Digest-Zyklus durchlaufen, sonst werden Ihre Komponenten nicht mit Ihren Datenmodellen synchronisiert. Wenn Sie also eine vorhandene JavaScript-Bibliothek eines Drittanbieters verwenden, müssen Sie sie mit der $apply-Funktion von Angular umschließen, wenn es sich um Datenänderungen handelt, oder Sie müssen sie in einen Dienst konvertieren, wenn es sich um eine Dienstprogrammbibliothek handelt. Es ist, als würde man jedes verfügbare JavaScript-Modul für Angular neu erfinden.

  • Zu viele Konzepte und steile Lernkurve

    Das Erlernen von Angular erfordert das Erlernen einer Menge Konzepte, darunter Module, Controller, Anweisungen, Bereiche, Vorlagen, Verknüpfungsfunktionen, Filter und Abhängigkeitsinjektion.

Lernen Sie React kennen

React, die neue Open-Source-JS-Bibliothek von Facebook und Instagram, ist eine andere Art, JavaScript-Apps zu schreiben. Als es im Mai 2013 auf der JSConf EU vorgestellt wurde, war das Publikum von einigen seiner Designprinzipien wie „Datenfluss in eine Richtung“ und „Virtuelles DOM“ schockiert.

Auf der offiziellen React-Website heißt es: „React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen“ und ja, nur Schnittstellen und sonst nichts. Es ist kein Framework wie AngularJS. Aber Sie können eigenständige Komponenten schreiben, die mehr oder weniger mit Angular-Direktiven vergleichbar sind. Schneller Überblick

React überdenkt die Best Practices in der Webentwicklung. Reach fördert den unidirektionalen Datenfluss und glaubt an die Philosophie, dass Komponenten Zustandsmaschinen sind, die von Daten gesteuert werden. Während die meisten anderen Frameworks gerne mit dem DOM arbeiten und es direkt manipulieren, hasst React das DOM und arbeitet daran, den Entwickler davor zu schützen. React bietet nur die grundlegende API, die zum Definieren von UI-Komponenten benötigt wird, und sonst nichts. Reach folgt der UNIX-Philosophie: Small is beautiful. Tun Sie eine Sache und tun Sie es am besten.

Dies ist ein sehr schöner Vergleich zwischen den beiden von Pete Hunt (vom Instagram-Team)

Es ist nur eine Bibliothek. Brauchen wir ein Framework mit React?

Kurze Antwort: Ihre Wahl.

Mit React können Sie Benutzeroberflächen erstellen, aber wir müssen immer noch Abhängigkeiten verwalten, AJAX-Aufrufe durchführen und Datenfilter anwenden. Wenn wir ein Framework brauchen, warum sollten wir AngularJS aufgeben?

Frameworks sind eine Reihe von Paketen und eine Reihe von Regeln. Was ist, wenn ich einige Pakete nicht benötige oder mit einem anderen Paket tauschen möchte? Wie mache ich es? Wir brauchen einen Paketmanager. Wie verwalten wir Pakete in AngularJS? Das ist Ihre Wahl, aber Angular hat seine eigene Welt. Sie müssen jedes äußere Paket in die Welt von Angular einpacken und es dann verwenden. Aber React ist nur JavaScript, und jedes in JavaScript geschriebene Paket muss in React nicht umschlossen werden.

Daher ist es besser, wenn wir unsere eigenen Pakete aus einem Paket-Repository wie npm auswählen und sie nach Belieben organisieren. Die gute Nachricht ist, dass React die Verwendung von npm fördert, das viele gebrauchsfertige Pakete enthält. Um mit React zu beginnen, möchten Sie vielleicht eines dieser Full-Stack-Starterkits verwenden

Vorteile von React

Warum bin ich dann wirklich zu React gewechselt?

Reagieren Sie schnell!

React verfolgt einen anderen Ansatz als andere Frameworks. Sie können damit nicht direkt mit dem DOM arbeiten. Vielmehr führt es eine Schicht von Virtual DOM zwischen Ihrer JavaScript-Logik und dem eigentlichen DOM ein. Dies hilft bei der Verbesserung der Geschwindigkeit drastisch. Bei aufeinanderfolgenden Renderings führt React einen Diff auf dem virtuellen DOM durch und aktualisiert nur den Teil des realen DOM, der aktualisiert werden muss.

Das Virtual DOM hilft auch bei der Lösung von Cross-Browser-Problemen, da es eine einheitliche Cross-Browser-API bietet, die sogar in Internet Explorer 8 funktioniert. (Puh!)

Alles ist eine Komponente (UI-Widget)

Das Schreiben eigenständiger UI-Komponenten modularisiert Ihre Anwendung und trennt die Bedenken für jede von ihnen. Jede Komponente kann isoliert entwickelt und getestet werden und wiederum andere Komponenten verwenden, um die Wartbarkeit zu erhöhen.

Datenfluss in eine Richtung für den Sieg!

Flux ist eine Architektur zum Erstellen von Einweg-Datenschichten in JavaScript-Anwendungen. Es wurde bei Facebook zusammen mit der React-Ansichtsbibliothek entworfen. Es vereinfacht die Entwicklung und erleichtert das Aufspüren und Beheben von Fehlern. Flux ist eher ein Konzept als eine Umsetzung. Es kann auch in anderen Frameworks implementiert werden. Alex Rattray hat eine sehr schöne Implementierung von Flux mit Backbone Collection und Model in React.

JavaScript und sonst nichts

Moderne Web-Apps funktionieren anders als das traditionelle Web. Die Ansichtsebene muss mit Benutzerinteraktionen aktualisiert werden, ohne den Server zu treffen. Und daher müssen sich View und Controller stark aufeinander verlassen. Viele andere Frameworks verwenden Templating-Engines wie Handlebars und Moustache für ihre Ansichtsebene, aber React glaubt, dass die beiden Teile so voneinander abhängig sind, dass sie sich an einem einzigen Ort befinden müssen, ohne die Verwendung einer Templating-Engine eines Drittanbieters und ohne den Bereich von zu verlassen JavaScript.

Isomorphes JavaScript

Der größte Nachteil von Single-Page-JavaScript-Webanwendungen besteht darin, dass sie beim Crawlen durch Suchmaschinen Einschränkungen unterliegen. React hat dafür eine Lösung. React kann Apps auf dem Server vorab rendern, bevor sie an den Browser gesendet werden, und es kann auch denselben Zustand in der Live-Anwendung aus den vorab gerenderten statischen Inhalten vom Server wiederherstellen. Da sich Suchmaschinen-Crawler stark auf die Serverantwort und nicht auf die Ausführung von JavaScript verlassen, hilft das Vorab-Rendering solcher Apps bei der Suchmaschinenoptimierung.

React spielt gut mit RequireJS, Browserify und Webpack

Loader und Bundler werden dringend benötigt, wenn Sie eine große Anwendung erstellen. Leider bietet die aktuelle Version von JavaScript keinen Modul-Bundler oder -Loader, obwohl dies in der kommenden Version von EcmaScript 6 (System.import) vorgeschlagen wird. Glücklicherweise haben wir einige Alternativen wie RequireJS und Webpack, die ziemlich anständig sind.

React wurde mit Browserify erstellt, aber wenn Sie Bild-Assets einfügen und LESS oder CoffeeScript kompilieren möchten, ist Webpack wahrscheinlich die bessere Option.

Ich wechselte mit einigen Schmerzen zu React.

  • Da es sich bei AngularJS um ein Framework handelt, bringt es viele Goodies mit, darunter einen AJAX-Wrapper im $http-Service, $q als Promise-Service, ng-show, ng-hide, ng-class und ng-if als Controlling-Anweisungen für Vorlage.

  • React ist kein Framework, sondern eine Bibliothek zum Erstellen der Benutzeroberfläche. Sie müssen also selbst über alle anderen Teile nachdenken. Ich arbeite an einem Open-Source-Projekt, das mit React verwendet werden kann, um Ihre Entwicklung zu erleichtern, und die Community trägt auch aktiv zu ähnlichen wiederverwendbaren Komponenten bei.

    React-components.com ist eine inoffizielle Verzeichnis-Website, auf der Sie solche Open-Source-Komponenten finden können.

  • Die Philosophie von React ermutigt Sie nicht, eine Zwei-Wege-Bindung zu verwenden, die viel Ärger mit sich bringt, wenn Sie mit Formularelementen und bearbeitbaren Datengittern arbeiten. Wenn Sie jedoch beginnen, den Flux-Datenfluss und die Stores zu verstehen, werden die Dinge klarer, einfacher und einfacher.

React ist neu und daher wird es einige Zeit dauern, bis die Community wächst.

Angular hat in letzter Zeit sehr an Popularität gewonnen und verfügt über eine relativ große Anzahl von Erweiterungen wie AngularUI und Restangular. Die Open-Source-Community von React ist neu, wächst aber schnell, mit Erweiterungen wie React Bootstrap. Es ist nur eine Frage der Zeit, bis wir weitere Komponenten zur Verfügung haben, und React kann problemlos für die schnelle Entwicklung von Webanwendungen verwendet werden.

Fazit

Wenn Sie AngularJS schon einmal verwendet haben, dann hassen Sie React vielleicht zunächst, hauptsächlich wegen des Datenflusses in eine Richtung und des Mangels an „Framework“, in dem Sie sich um viele andere Dinge selbst kümmern müssen. Aber sobald Sie sich mit dem Flux-Designmuster und der Philosophie von React vertraut gemacht haben, werden Sie seine Schönheit erkennen.

Facebook und Instagram verwenden beide React. Der neue Atom-Editor von Github wird mit React erstellt. Das kommende Yahoo Mail wird in React neu erstellt. Welche anderen Beispiele brauchen Sie? Probieren Sie React noch heute aus.