JavaScript-Fundamente für Single Page Apps, Teil 2 Die Software-Bibliothek React

React ist laut State-of-JavaScript das derzeit populärste UI-Framework auf Client-Seite. Es lässt sich mit Node.js aber auch serverseitig rendern und kommt häufig als Grundgerüst für das Entwickeln von Single-Page-Webanwendungen zum Einsatz.

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

React wurde ursprünglich von Facebook entwickelt und zunächst intern verwendet, unter anderem für Instagram. Im Jahr 2013 hat Facebook React unter einer BSD-Lizenz mit Patentzusatz als Open-Source-Projekt freigegeben. Mit React 16, das im September 2017 erschienen ist, haben die Entwickler allerdings auf eine MIT-Lizenz umgestellt.

Bemerkenswert ist, dass die Popularität von React sogar noch stärker wächst, als die von JavaScript im Allgemeinen. Der Hauptgrund für den Zuspruch ist, dass es React besonders einfach macht, Frontend-Komponenten modular zu entwickeln, also übertragbar, wiederverwertbar und interaktiv zu machen.

Ein weiterer Grund ist nicht technischer Natur, denn das aggressive Marketing von Facebook trägt ebenfalls zur Popularität von React bei. Zudem nutzt Facebook selbst die Bibliothek für die eigenen Anwendungen, was sicher eine gewisse Vertrauensbasis in der Community schafft.

Was ist React?

Allgemein betrachtet ist React gar kein Framework, sondern eine Bibliothek zum Erstellen von Benutzeroberflächen. Die Unterscheidung ist insofern wichtig, da React z. B. keine Vorgaben für den Rest der Applikation macht.

JavaScript-Fundamente für Single Page Apps, Teil 1

Durchblick im JavaScript-Ökosystem

Genau genommen kümmert sich React im MVC-Modell (Modell-View-Controller) nur um den View-Teil, also das schlichte, aber äußerst performante Rendern von View-Elementen. Ferner arbeitet React „deklarativ“, also darum „Was“ auf der Oberfläche darstellt wird und nicht „Wie“ die Darstellung zu erfolgen hat („imperativ“). React kapselt gewissermaßen das „Wie“, also wie genau das Rendern von statten geht.

Wo liegen die Einstiegshürden

Nichtsdestotrotz stoßen Einsteiger in React auf augenscheinlich neue Konzepte wie den oben erwähnten Unidirectional-Dataflow oder auf Dinge wie Unveränderlichkeit (Immutability), Value Objects, Identität, Gleichheit, Pure Functions und vieles mehr. Dabei sind die genannten Konzepte in der Informatik gar nicht so neu.

Im Wesentlichen entstammen die Ansätze der funktionalen Programmierung und tragen ganz maßgeblich zur Eleganz von React bei. Leider sind die meisten Ein- und Umsteiger heute vom Paradigma der objektorientieren Programmierung wie in C++ oder Java geprägt, sodass ein Umdenken oft nicht leicht fällt.

Die Vorteile von React

Da React „nur“ eine Bibliothek und kein Framework wie z. B. Angular ist, widmet sich React einer einzigen Aufgabe, dem effizienten Rendern der Anzeige. Ein solcher Minimalismus muss aber kein Nachteil sein. Im Grunde hält der Entwickler mit React einen kleinen und überschaubaren Baustein im JavaScript-Ökosystem in der Hand und keinen großen monolithischen Klotz, wie bei einem Framework.

Legt man sich nämlich auf ein Framework fest, macht man sich vom Start weg in gewisser Weise abhängig und muss viele Design- und Architektur-Entscheidungen im Voraus treffen, ohne die späteren Auswirkungen abschätzen zu können. React ist eine ganz gewöhnliche JavaScript-Bibliothek, auch wenn es inzwischen Erweiterungen wie JSX gibt.

Einsteiger können React aber durchaus ohne JSX verwenden, wozu es vollkommen genügt, wenn man die Funktionsweise von JavaScript versteht. Bei Frameworks wie Angular hingegen muss der Nutzer erst zahlreiche Framework-spezifische proprietäre Konstrukte erlernen. Trotz der Einfachheit im Aufbau steht das inzwischen recht breite React-Ökosystem etwa in Form der erwähnten JSX-Erweiterung Einsteigern bei den ersten Schritten häufig sogar im Weg.

Einsteiger können und sollten daher React zunächst ohne Erweiterungen einsetzen, auch wenn erfahrene Entwickler heute meist JSX arbeiten, was wiederrum den Einsatz von Babel nach sich zieht. Nutzt man dann noch Erweiterungen wie Webpack, müssen doch wieder viele Dinge sauber ineinandergreifen, eine Notwendigkeit, die gerade pures React eigentlich umgeht.

Die wichtigsten Konzepte von React

Ein Grund dafür, dass z. B. das Rendern auch komplexer Web-Anwendungen mit React besonders performant vonstattengeht, ist unter anderem das Konzept des unidirektionalen Datenflusses und des „Virtual DOM“. Dabei fällt es auf dem ersten Blick nicht leicht, sich gerade eine UI-Technologie ohne bidirektionale Datenbindung vorzustellen. Hat man den Ansatz von React aber einmal verinnerlicht, geht es dann doch. In jedem Fall erlaubt Unidirektionalität eine weitaus bessere Vorhersagbarkeit, in welcher Situation sich eine Anwendung wie verhält.

Ebenfalls zu den genannten Eigenschaften funktionaler Programmierung gehört das Konzept der Unveränderlichkeit (Immutability). Hierbei geht es darum, dass Daten sich im Lauf der Zeit nicht verändern, was bei klassischen Objekten beispielsweise nicht der Fall ist. Objekte haben schließlich per Definition einen veränderlichen Zustand, was in der Praxis große Probleme – etwa beim Parallelisieren von Code – mit sich bringt.

Unveränderlichkeit löst aber viele Probleme bei Single-Thread-Architekturen. So gilt bei React per Definition, dass sich ein Zustand nicht mehr ändern kann, wenn er einmal gesetzt ist. Allerdings müssen Entwickler dann freilich über einen grundlegend anderen Programmierstil und Dinge wie Typsystem oder Speicherverwaltung nachdenken, die das Konzept der Unveränderlichkeit nach sich zieht.

Eine weitere wichtige Eigenschaft ist, dass React auf Komponenten basiert. Komponenten sind in React immer hierarchisch aufgebaut und was die Syntax betrifft als selbst definierte HTML-Tags repräsentiert.

React 16

Die letzte größere Hauptversion von React (v 16.0) ist bereits im September letzten Jahres erschienen, auch wenn inzwischen zwei weitere Update 16.1 und 16.2 folgten. Hier gab es vor allem erhebliche Verbesserungen beim Error-Handling. Bei React-Versionen vor 16.0 verursachten Runtime-Fehler beim Rendering häufig kryptische Fehlermeldungen, die sich oft nur per Page-Refresh beheben ließen.

React 16 bietet nun eine deutlich bessere und robustere Error-Handling-Strategie, bei der Fehler mithilfe von sogenannten Error-Boundaries in einem Subtree gefunden werden; sodass anstelle der fehlerhaften Komponente eine Fallback-UI angezeigt wird.

Deutliche Verbesserungen gab es auch beim Server-seitigen Rendern. So bringt das neue React einen vollständig neu geschriebenen Server-Renderer mit, der laut Benchmark bis zu dreimal schneller ist, als der Renderer in React 15. Performanter ist React 16 aber auch deshalb, weil React v16 jetzt auch Custom-DOM-Attribute unterstützt, was zu einer verringerten Dateigröße führt.

Neben dem neuen Error-Handling und der Umstellung auf die MIT-Lizenz bringt React 16 aber noch viele weitere Neuerungen. So haben die Entwickler beispielsweise die Core-Architektur komplett neu geschrieben und auf den Namen React Fiber getauft. Mark Zuckerberg präsentierte die neue Architektur auf der F8-Entwicklerkonferenz im Frühjahr 2017 persönlich. Ferner brachte React v16 Unterstützung für zwei neue Render-Return-Types: Fragments und Strings.

Der in React 16 komplette neu geschriebene und Server-Renderer wurde in React 16.2 weiter optimiert, wobei vor allem Verbesserungen der sogenannten Fragments in Fokus standen. Fragments sehen wie leere JSX-Tags aus und ermöglichen es, eine Liste von Childs zu gruppieren, ohne zusätzliche Nodes zum DOM hinzufügen zu müssen. Statt die Children in ein DOM-Element zu wrappen, lassen sie sich nun in einem Array platzieren.

Damit aber die Schreib-Experience für Fragments konsistent bleibt, bietet React eine eigene Fragment-Komponente, die sich anstelle der Arrays nutzen lässt. Zudem gibt es ab React 16.2 auch syntaktischen Support für Fragments in JSX. Der Support der Fragment-Syntax in JSX hängt jedoch von den genutzten Tools ab und ist nur mit Babel, TypeScript und Flow bereits implementiert; an der Unterstützung für Create React App arbeiten die Entwickler noch.

(ID:45186046)