Aus alt mach neu: Next Level Web Development mit React

Hintergrund

Bis jetzt fiel die Wahl bei unseren individuellen Softwarelösungen von Webapps meistens auf AngularJS. AngularJS ist ein Framework für Single-Page Applikationen in JavaScript. Da AngularJS eben ein Framework ist, bietet es bereits eine Reihe von Funktionen, die das Arbeiten erheblich erleichtern und den Aufwand reduzieren. AngularJS ist auch als Model View Controller (MVC) -Framework oder -Architektur bekannt, da die Anwendungen modular aufgebaut sind. Jede Ansicht ist in HTML definiert, das über ein JavaScript-Controller-Modul und ein Modell verfügt, um die Interaktionen zu steuern. Außerdem gibt es AngularJS mittlerweile lange genug, sodass die meisten Bugs bekannt sind und selten unerwartete oder unlösbare Fehler auftreten.

Hört sich doch eigentlich alles gut an oder? Warum will man dann eigentlich wechseln?

Zum einen gibt es da den Grund, dass AngularJS mittleiweile schon etwas in die Jahre gekommen ist. Initial von Google entwickelt, ist es derzeit ein Open-Source Framework. Da Google mittlerweile an Angular arbeitet (man sagt auch Angular 2, wobei aber mittlerweile 8) und dieses Framework nicht auf AngularJS aufbaut, wird es auch nicht mehr offiziell supportet. Seit knapp einem Jahr ist AngularJS daher in der LTS Phase, was früher oder später einen Wechsel außer Frage kommen lässt. Es heißt zwar „Never change a running system“, allerdings war es meiner Meinung nach doch der richtige Zeitpunkt auf den neuesten Trend zu folgen.

Da wir als Entwickler stets die neuesten Technologie-Trends verfolgen wollen und es uns Spaß macht, uns neues Wissen anzueignen, wurde uns der Umstieg dann umso leichter gemacht. Aber warum gerade React? React ist nicht nur das meistverwendete Frontend „Framework“, es öffnet mit der Verbindung zu React Native für Frontend Webentwickler auch noch den Weg zur mobilen Seite des Entwickelns. Wie bereits Stefan in seinem Blog über den React Wahnsinn beschrieben hat, gibt es doch recht große Gemeinsamkeiten in der Codebasis.

Was ist React?

React ist eine beliebte Library zum Erstellen von Single Page Applikationen. Während Angular ein voll funktionsfähiges Framework ist, ist React nur eine JavaScript-Bibliothek. Sowohl Angular, AngularJS als auch React erleichtern Front-End-Webentwicklern die Erstellung dynamischer, interaktiver Benutzeroberflächen für Webanwendungen. Anders als bei den Vorgängern wurde bei React der Fokus auf die Modularität gesetzt was Syntax und Ökosystem betrifft.

Wie bereits erwähnt, ist React kein Framework, sondern eine Library. Der große Unterschied ist, dass ein Framework bereits eine Menge an vordefinierten Funktionen mit sich bringt. Allerdings ist man als Entwickler dann an diese gebunden und hat nicht mehr viel Spielraum für Neues. Da React eine Library ist, muss beziehungsweise darf man sich seine Komponenten selbst zusammensuchen. React an sich ist nur für das Rendering des UI zuständig. Da es aber in letzter Zeit doch eine recht hohe Popularität genossen hat, wie man in der Statistik am Ende sehen kann, gibt es mittlerweile viele Module, die man ganz einfach per npm nachladen kann.

Dieses modulare Design macht es unter anderem einfacher, komplexe Apps mit React zu erstellen. Anstatt vierhundert Zeilen verworrenen Spaghetti-Code miteinander zu verknüpfen, wird eine Handvoll diskreter, kompakter, einfach zu handhabender Module verwendet. In dieser modularisierten Umgebung ist es viel einfacher, Fehler zu finden, Änderungen vorzunehmen und Funktionen hinzuzufügen. Schon begeistert? Zur Sicherheit werde ich noch eine Reihe von weiteren Vorteilen preisgeben, die React mit sich bringt.

Performance

Der wohl größte Benefit von React ist die einzigartige Schnelligkeit dieser Library. Bei komplexen Anwendungen kann es schonmal passieren, dass lange Ladezeiten dazu beitragen, die Nerven der Kunden zu strapazieren. React hat mit der Einführung der Virtual DOM eine Lösung gefunden, um lange Ladezeiten effizient zu unterbinden. Das Manipulieren der DOM (Document Object Model) ist an sich ein langsamer Prozess. Das Updaten der Virtual DOM ist dagegen weitaus schneller. Sobald die virtuelle DOM upgedated wird, vergleicht React das Ergebnis mit einem virtuellen Snapshot und findet heraus, was sich genau geändert hat. Daraufhin werden nur die Objekte upgedated, die auch wirklich verändert worden sind.

Nehmen wir zum Beispiel eine große Anwendung in Echtzeit, bei der sich häufig Daten ändern. Jedes Mal, wenn Daten hinzugefügt oder aktualisiert werden, updatet React automatisch die spezifische Komponente, deren Status sich tatsächlich geändert hat. Dies erspart dem Browser das erneute Laden der gesamten Anwendung, um die Änderungen widerzuspiegeln. Vergleichsweise prüft Angular bei jeglicher User Interaktion die gesamte DOM und lädt daher unnötig viele Objekte neu, was wiederum ein sehr ineffizienter Prozess ist und die Leistung von Applikationen enorm verlangsamt.

Modularität

In React ist alles in Komponenten (components) gegliedert. Man kann dies mit einem Lego Haus vergleichen. Jeder Baustein ist ein Komponent und nur zusammen ergeben sie das finale Produkt.

Abbildung 1: React Component Model

Der größte Vorteil der Verwendung von Komponenten besteht darin, jede Komponente stets ändern zu können, ohne die übrigen Anwendungen zu beeinträchtigen. Diese Funktionalität geht Hand in Hand mit der virtuellen DOM. Ein weiterer Vorteil von Komponenten ist die Möglichkeit der Wiederverwendbarkeit. Oft sind kleinere Anwendungen ähnlich aufgebaut, sodass die Möglichkeit besteht, bereits entwickelte Komponenten mit kleinen Änderungen wiederzuverwenden, was wiederum die Effizienz erhöht und den Aufwand vermindert.

Durch die Verwendung von Komponenten wird der Code leichter zu lesen, zu entwickeln und auch zu warten. Einzelne Komponenten können individuell getestet werden, was es leichter macht, neue Features hinzuzufügen oder Bugs auszumerzen.

JSX & Dataflows

Wie Stefan bereits erwähnt hat, basiert React auf JSX. Durch die Verwendung dieser JSX Files verschmilzt der klassische HTML Code in ein JavaScript File oder besser gesagt JSX File. HTML Tags kann man nun in Variablen speichern. Der große Vorteil hier ist, dass alles in JavaScript gehalten wird. JavaScript Entwickler müssen sich nicht TypeScript aneignen, welches unter anderem von Angular verwendet wird. Daher ist auch die Lernkurve weitaus schneller als bei vergleichbaren Frameworks.

Ein weiterer großer Unterschied zu anderen Frameworks oder Libraries ist der Data-Flow. React verwendet hier die Methodik des One-Way-Bindings. Man kann daher Daten quasi nur in eine Richtung speichern, was das Denken über den State stark vereinfacht. Der State der Applikation ist daher in gewissen globalen Stores gespeichert. Da React, wie bereits erwähnt, „nur“ eine Library ist, muss man das State Management ebenfalls über ein Modul handhaben.
Die wohl bekanntesten Module hierfür wären Redux, Flux oder Mobx. Ich werde hier aber nicht weiter im Detail darauf eingehen, denn der Vergleich dieser Module oder auch nur die detaillierte Beschreibung von einem würde für etliche weitere Blogeinträge reichen. ?

Dass sich React dazu entschieden hat, das One-Way-Binding zu verwenden ist interessant, denn im Gegenzug dazu verwendet Angular das Two-Way-Binding. Der Trend ging zwischendurch sogar in Richtung 3-Way-Binding indem man zusätzlich noch direkt die Datenbank (Firebase) integriert.

React Native

Ganz kurz will ich auch noch auf React Native eingehen. React Native ist eben eine Erweiterung von React, die es Entwicklern erlaubt, zwar in JavaScript zu coden, aber für IOS oder Android danach zu kompilieren. Dadurch können klassische React Frontend Webentwickler in Zukunft auch für mobile Entwicklungen eingesetzt werden. Natürlich funktioniert das nicht auf Anhieb und man muss einige Requirements beachten, jedoch ist es auf alle Fälle ein guter Start für eine Zukunft in der mobilen Welt.

Zuletzt möchte ich noch mit einer kleinen Statistik zeigen, dass man mit React auf alle Fälle eine richtige Entscheidung getroffen hat. React ist so populär wie noch nie, was die unten folgende Grafik zeigt.

Abbildung 2: Downloads Vergleich

Ich hoffe ich habe euch einen kleinen Einblick geben können, warum man React verwenden sollte, warum wir uns dafür entschieden haben und warum ich mit der Entscheidung absolut zufrieden bin. Mit dieser Wahl sind wir der Zukunft wieder einen Schritt nähergekommen!