Ein Einblick in Facebook’s React

react-featured

React, Facebook’s JS Library für die Erstellung von User Interfaces, ist seit letztem Jahr mächtig im Aufwind. Der neuste Hype wurde durch die React Conf Keynote ausgelöst, an welcher React Native vorgestellt wurde: die Möglichkeit native iOS und Android Apps mit React zu entwickeln.

Aber was ist React eigentlich?

React sieht sich selbst als V im MVC Pattern, also als View-Layer. Gegenüber dem restlichen (Frontend) Stack der Anwendung ist React agnostisch, was es ermöglicht React isoliert auf einen kleinen Teil der Anwendung anzuwenden.

Um eine hohe Performanz zu gewährleisten verwendet React intern ein virtuelles DOM. Dieses wird neukalkuliert wenn sich eine Eigenschaft oder der Zustand einer Komponente ändert. Wie daran schon abzulesen ist, folgt React den Architekturprinzipien von Dataflow. Effektiv neu gerendert werden aber nur die entstandenen Unterschiede im Virtual DOM.

Eine einfache React-Komponente sieht so aus:

See the Pen vERYdr by Robert (@deniaz) on CodePen.

Im DOM ist ein Container-Element (div.hello-app), in welches der Inhalt der React Komponente injiziert wird. Diese Komponenten werden entweder in JSX oder als POJOs (Plain Old JavaScript Objects) geschrieben. JSX ist eine JavaScript Syntax Erweiterung, welche XML gleicht. Daher schreibt es sich sehr ähnlich wie HTML, mit Ausnahmen von den Attributen class und for, da diese reservierte Schlüsselwörter in JavaScript sind (werden in JSX durch className und htmlFor ersetzt).

React bildet also die Komponenten einer Applikation, aber wie werden diese Komponenten verknüpft? Facebook verwendet dazu das Architekturkonzept Flux, welches die React Komponenten mit einem unidirektionalen Datenfluss ergänzt.

react-flux

Vereinfachter Flux Workflow.

 

Eine Action wird von einem Dispatcher zu den entsprechenden Callbacks gemappt und delegiert. Die registrierten Callbacks gehören zu Stores und bilden Container für den Applikationszustand und die Domain Logik. Eine View reagiert auf den Zustand eines Stores und geben diese Eigenschaften an die Child-Komponenten. Eine View kann wiederum eine Action auslösen.

Eine Library, welche dabei hilft Flux zu implementieren ist reflux und ist mit über 13k Downloads im Januar 2015 überaus populär.

Das unidirektionale Denken erfordert zu Beginn ein ziemliches Umdenken, kann sich aber längerfristig durchaus auszahlen. Wer mehr darüber erfahren möchte, und warum Facebook sich von MVC abgewendet und Flux «entdeckt» hat, kann dies in folgendem Video tun:

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>