Wo kommt die komponentenbasierte Library her, was kann sie und welche Alternativen gibt es?

React und seine Alternativen
Kommentare

Die von Facebook entworfene Open-Source-JavaScript-Library React hat seit ihrer ersten Anwendung 2011 einen fast kometenhaften Aufstieg erlebt, was vor allem auf die von ihr geforderte Komponentenstruktur und ihr virtuelles DOM-Rendering zurückzuführen ist. Wir gehen der Erfolgsgeschichte von React nach.

Man muss kein neues Theater bauen, nur weil man das Bühnenbild ändern möchte. Nach dieser Maxime geht das vor fünf Jahren erstmals im Kontext von Facebooks Newsfeed eingesetzte React (alternativ React.js oder ReactJS geschrieben) vor. Die bemerkenswerte User-Interface-Library hat seitdem eine ebenso bemerkenswerte Karriere hingelegt: von irritierten Reaktionen zu einer der GitHub-Repositories mit den meisten Sternen. Mittlerweile steht mit React Native eine Variante für die Entwicklung mobiler Android- und iOS-Apps zur Verfügung.

React

React begann als JavaScript-Port von XHP, einer PHP-Version, die Cross-Site-Scripting-Angriffe verhindern soll. Bei diesen XSS-Attacken werden zerstörerische Scripte in eine Webanwendung injiziert, um Daten vom User zu stehlen oder ihn anderweitig zu schädigen. XHP ist zwar in der Lage, dies zu verhindern, löst aber nicht das Grundproblem dynamischer Webanwendungen: nämlich bei jeder noch so kleinen DOM-Manipulation eine komplettes, performance-schädigendes Re-Rendering durchführen zu müssen. React wurde entwickelt, um dieses Problem zu beheben.

Aktuell nutzen neben Facebook der Streamingservice Netflix, die Zimmervermietungscommunity AirBnB sowie der Imagehoster Imgur die JavaScript-Library. Das Foto- und Video-Sharing-Netzwerk Instagram ist sogar vollständig damit programmiert. Grund genug also, sich die von Jordan Walke ursprünglich für Facebook entwickelte Software einmal genauer anzusehen. Was macht sie eigentlich aus, was ist ihr innovatives Element? Hauptsächlich zwei Aspekte sind hier zu nennen.

Komponenten statt Templates

Die auffallende, aber schwer zu verstehende Eigenschaft von React liegt in seiner zunächst krude anmutenden Mixtur aus JavaScript und HTML, sprich aus Funktionalität und View. Das Team stellt in Form von JSX dafür sogar eine mit XML vergleichbare, optionale JavaScript-Syntax-Erweiterung zur Verfügung. Zu beachten ist jedoch, dass die UI-Library nicht den Anspruch erhebt, ein vollständiges MVC-Framework darzustellen – es beschränkt sich auf den View-Part.

Der Grund für die Vermischung der mit den zwei Sprachen verbundenen, ansonsten strikt voneinander getrennten Aufgabenbereiche liegt in der andersartigen Projektstruktur, die React vorschlägt. Statt auf Templates oder HTML-Direktiven zu basieren, werden Webapplikationen auf sogenannte Komponenten heruntergebrochen. Diese sind teils ineinander verschachtelt und werden in Form einer Baumstruktur zu einer App kombiniert, die grob das User Interface nachbildet.

Die Besonderheit liegt darin, mittels der Komponenten HTML in JavaScript integrieren zu wollen, statt andersherum. Das kommt einerseits der Übersichtlichkeit des Codes zugute und andererseits lassen sich dadurch von Hand durchgeführte DOM-Manipulationen vermeiden, an denen bspw. Web Components und AngularJS weiterhin kranken (etwa im Fall von Data Binding).

Virtuelles DOM

In React werden Informationen unmittelbar im State einer Komponente gespeichert, wo sie etwa durch Aktionen der User verändert werden können. Sobald ein State verändert wird, muss die Komponente neu dargestellt werden, d.h. ihre render-Methode wird aufgerufen. Wir kommen jetzt zur eigentlichen Innovation: wo andere Libraries oder Frameworks bei der kleinsten Änderung des HTMLs gezwungen wären, das komplette DOM neu zu rendern, erlaubt React ein anderes Vorgehen.

React hält eine Repräsentation des DOMs, ein sogenanntes virtuelles DOM, vorrätig, auf das die Änderungen zunächst angewandt werden. Das reale DOM nutzt einen sogenannten Diffing-Algorithmus, um sich mit dem virtuellen DOM abzugleichen, und rendert dann nur diejenigen Komponenten, deren State geändert wurde. Ein weiterer Vorteil: mehrere winzige Änderungen können gebündelt und in einer konzentrierten Aktion neu gerendert werden. Da weniger Reflows durchgeführt werden, verbessert sich die Performance erheblich. Ein schöne Visualisierung des Vorgangs kommt von Marcin Skirzynski:

Quelle: http://reactjs.de/posts/virtuelles-dom-mit-react-js

Quelle: http://reactjs.de/posts/virtuelles-dom-mit-react-js

Wenn also das Bühnenbild oder die Stuhlreihen eines Theaters erneuert werden müssen, versucht React nicht, jedesmal das Theater von Grund auf neu zu errichten, sondern nur die betreffenden Komponenten in einer konzertierten Aktion.

Weitere Vorteile

Natürlich gibt es noch einige weitere Vorzüge, die hier nur kurz aufgelistet seien:

  • es erlaubt serverseitiges Rendern: In React teilen Server und Client sich denselben Code, wodurch isomorphisches Rendern ermöglicht wird, also Rendern sowohl auf Client- als auch auf Serverseite. Da ausladenden Apps auf Client-Engines Performance-Einbußen verursachen können, empfiehlt es sich, den Server die Arbeit übernehmen zu lassen.
  • Hohe SEO-Eignung: JavaScript-Seiten werden von vielen Suchmaschinen nicht wahrgenommen, da sie wenig HTML-Content aufweisen. Durch seine Eigenschaft, serverseitig rendern zu lassen, wird jedoch eine reguläre Webseite zum User zurückgegeben, die dann von Google & Co. gecrawlt werden kann.
  • Browserevents: React verfügt über ein eigenes Eventsystem, um Problemen mit der Browserimplementierung vorzubeugen. Es übernimmt Browserevents, übersetzt sie ins eigene Eventsystem und kann sie von dort aus weiterprozessieren.

Alternativen

Wie jede erfolgreichere Software hat React bereits einige Modifikationen und Alternativen hervorgebracht. Im Folgenden wird nur eine kleine Auswahl vorgestellt:

Riot.js: Neben vereinfachter Syntax und geringerem Volumen unterscheidet sich das von Muut entwickelte Riot von React, dessen Komponentenkonzept es übernimmt, durch die Herangehensweise an die Initialisierung von Komponenten: im Gegensatz zum Vorbild nutzt Riot eine fixe HTML-Struktur. Während React einen String ausliest, durchläuft Riot lediglich einen DOM-Baum. Updates werden ebenfalls nur nach Abgleich des virtuellen mit dem tatsächlichen DOM durchgeführt.

Vue.js basiert ebenfalls auf einer Komponentenstruktur, verwendet aber kein virtuelles DOM. Stattdessen verwendet es das DOM als Template und referenziert DOM-Nodes nur für Data Bindings. Will man das DOM doch manuell manipulieren, ist man mit Vue.js besser beraten. Außerdem zielt Vue.js darauf, qua Template den Code dem User Interface noch ähnlicher zu machen, um beim Programmieren noch bildlicher über das Design nachdenken zu können.

Deku versucht ebenfalls, kleiner und funktionaler als sein Vorbild zu sein. Dazu verzichtet das Entwicklerteam um Anthony Short darauf, die Komponenten mit einem State auszustatten und delegiert das State-Management an externe Lösungen wie bspw. Redux.

Fazit

Das Erscheinen von React kam einer Revolution gleich, deren Auswirkungen wir heute immer noch nicht ermessen können. Komponentenbasiertes Programmieren und virtuelle DOMs werden auch in Zukunft das WebApp-Development gehörig durcheinander wirbeln. Darüber hinaus zeigen die zahllosen neuen Alternativen, dass die Entwicklung noch lange nicht an ihr Ende gekommen ist.

Name React (React.js / ReactJS)
Entwickler Jordan Walke
Projektwebsite https://facebook.github.io/react/
GitHub https://github.com/facebook/react
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -