React ist eine JavaScript-Bibliothek zur Realisierung moderner Benutzeroberflächen (UI) für Webanwendungen. Mit über 110.000 Sternen auf GitHub ist es heute außerdem eines der anerkanntesten Frameworks der JavaScript-Familie. Aber was genau macht es zum Liebling der Frontendentwickler? Ein Erklärungsversuch.
Sein Debüt feierte React bei Facebook, wo es 2011 erstmalig im Newsfeed Verwendung fand, um dann schnell auch Einzug ins Frontend von Instagram zu halten. Seit 2013 ist das Framework nun Open-Source-Technologie und wird von einer weltweiten Community genutzt und weiterentwickelt.
React vs. Angular
Wenn React der Herausforderer ist, ist Angular der Platzhirsch. Beide Technologien haben gemeinsam, dass sie in modernen Webanwendungen heute ähnlich prominent vertreten sind – aber das war es dann auch schon mit den Ähnlichkeiten. Denn während Angular einen Full-Service-Ansatz verfolgt, der dem Frontendentwickler einen ganzen Fächer an Features aus einem einzigen Werkzeugkoffer vorhält (und vorgibt), konzentriert sich React auf die drei Kernkomponenten One Way Data Flow, Virtual DOM und JSX. Für den Entwickler von React-Anwendungen bedeutet das zwar, dass viele benötigten Funktionen nicht mitgeliefert werden, diese können allerdings aus dem bereits bekannten Ökosystem an Modulen entnommen werden. So kann der Entwickler bereits bekannte Technologien verwenden und muss nur Funktionen einbinden, die er auch wirklich benötigt.
One Way Data Flow
Wie der Begriff schon verrät, fließen beim unidirektionalen Datenfluss, anders als beim bidirektionalen Datenfluss, die Daten nur in eine Richtung, und zwar von ‚oben’ nach ‚unten’. In gegenläufiger Richtung werden nur Events weitergegeben. welche vom Nutzer über Aktionen im UI ausgelöst werden – z.B. durch den Klick auf einen Button wie „Jetzt kaufen“, „Senden“ oder dergleichen. Diese Events werden in der Regel so lange nach oben durchgereicht, bis sie in einer Komponente ankommen, die einen Teilzustand der Anwendung verwaltet. Dort wird anhand des Events aus dem aktuellen Zustand ein neuer Zustand berechnet, der dann von dort ausgehend an alle Unterkomponenten weitergegeben wird.
Durch den unidirektionalen Datenfluss lassen sich Zusammenhänge und Wechselwirkungen einer Applikation sehr gut überschauen, da der Informationsfluss ausschließlich in diesen beschriebenen Bahnen verläuft. Zudem können Komponenten durch die vereinheitlichten Schnittstellen von Daten und Events sehr gut wiederverwendet werden.
Virtual DOM
Eine Herausforderung bei dynamischen Webanwendungen ist die Performance. Um dynamische Webseiten zu ermöglichen, wird im Browser ein DOM (Document Object Model) aufgebaut, das alle auch noch so kleinen Elemente in einer Baumstruktur speichert, um auf diesen dann Operationen wie das Berechnen von Positionen oder Eigenschaften wie Farbe, Größe etc. auszuführen. Jedes Mal, wenn eine Änderung am DOM vorgenommen wird, müssen diese Eigenschaften neu berechnet werden. Da sich Elemente auf unterschiedlichste Art gegenseitig beeinflussen können, sind diese Berechnungen in der Regel ziemlich aufwändig.
React löst das damit einhergehende Performanceproblem, indem es die Anzahl der Aktualisierungen des DOMs minimiert. Dafür speichert React eine eigene Version des DOMs: das sogenannte Virtual DOM. Änderungen in diesem Virtual DOM sind sehr schnell, da hierbei keine Darstellung berechnet werden muss. React fasst nun diejenigen Änderungen zusammen, die nahezu gleichzeitig passieren, und führt diese zunächst im Virtual DOM aus, vergleicht sie dann mit dem „echten“ DOM und tauscht daraufhin alle geänderten Elemente in einer zusammengefassten Operation auf einmal aus. Das klingt zunächst aufwändig, aber da der Browser die Berechnungen für die Darstellung der Elemente so nur ein einziges Mal durchführen muss, ist dieses Vorgehen um ein Vielfaches schneller als viele kleine Updates.
JSX
Das dritte fundamentale Konzept von React ist JSX. JSX ist eine Erweiterung der Programmiersprache JavaScript und ermöglicht es, HTML-ähnliche Elemente nahtlos in JavaScript zu verwenden. Auf diese Weise verbindet React die (Anzeige-)Logik auf elegante Art mit dem Layout. Dabei bricht JSX mit dem weit verbreiteten Konzept, Layout und Logik strikt voneinander zu trennen. Viele andere UI Frameworks definieren Logik mit einer Programmiersprache, Layout jedoch mit einer Template-Sprache (für HTML). Die Idee hinter JSX ist hingegen, nicht mehr nach Technologie, sondern nach Zuständigkeit zu trennen. Dieses Konzept wird Separation of Concerns (SoC) genannt. Dadurch, dass eine Komponente nicht mehr aus zwei Entitäten kombiniert werden muss, trägt JSX dazu bei, in sich geschlossene Komponenten zu schreiben, die ihrerseits sehr gut wiederverwendbar sind.
Fazit
Alles in allem bekommt man mit React eine leichtgewichtige und erprobte UI-Bibliothek, die auf wenigen, aber gut durchdachten Konzepten basiert. In Sachen Skalierbarkeit, Performanz und Flexibilität ist es schwer, React zu übertreffen. Die große Beliebtheit und der stark wachsende Marktanteil zeigen, dass es sich React gut etabliert hat und mehr als nur eine Alternative zu Angular ist.
(pm, jw)
