brainbits Blog

Performante Web-Projekte umsetzen - mit React

Niklas Köhler03.03.2017Code • Frontend • Anwendungsentwicklung

Was ist React?

React ist eine JavaScript-Library, welche die Ausgabe von User-Interface-Komponenten in HTML ermöglicht. Sie wurde erstmals im Jahre 2011 von Facebook für den Newsfeed eingesetzt. Seit 2013 steht sie als Open-Source-Projekt zur Verfügung.

Der große Unterschied zu Frameworks wie Angular, Backbone oder Ember ist, dass man React nur als View-Layer einsetzt, sprich: DOM-Manipulation vornimmt. Für weitere Funktionionalitäten, wie z. B. das Absenden von Ajax-Requests, müssen weitere Bibliotheken hinzugenommen werden.

Die drei Kernkonzepte von React sind Unidirektionaler Datenfluss, das Virtual DOM und JavaScript Syntax Extension.

Unidirektionaler Datenfluss über Komponenten

Das Grundprinzip von React ist das Zerlegen einer Website oder App in unabhängige Einzelteile (Komponenten). Komponenten erhalten ihre Informationen über Properties. Ändert sich einer dieser Werte, wird die Komponente komplett neu gerendert. Außerdem kann über diese Properties eine Callback-Funktion hereingereicht werden, die wiederum übergeordnete Komponenten beeinflusst. Über diese beiden Möglichkeiten kann man Events in eine Komponente herein-, aber auch wieder heraus“feuern”. Man spart sich somit in diesem Zuge komplexes Event-Handling. 

Darüber hinaus kommt der React-Komponenten-Ansatz unserem CSS-Komponenten-Ansatz entgegen.

Unidirektionaler Datenfluss über Komponenten - React

Virtual DOM und DOM-Diffing

Muss eine Komponente - wie oben erwähnt - neu gerendert werden, so müssen auch alle in ihr verschachtelten Komponenten neu gerendert werden. Das kann in der Praxis zu einem großen Performance-Problem werden. Deshalb wurde das “Virtual DOM” geschaffen. Das virtuelle DOM ist sozusagen eine objektbasierte Kopie des aktuellen DOM. Ändert sich ein Wert, werden beide Objekte miteinander verglichen. Daraus resultierende Änderungen werden auf das DOM angewandt.

Virtual DOM and DOM-Diffing imit React

Bild-Quellennachweis

Mehr zum Thema virtuelles DOM gibt es auf reactjs.de zum Nachlesen.

JavaScript Syntax Extension (JSX)

React selbst setzt hauptsächlich auf JavaScript. Jedoch ist das Schreiben des Codes zur Erzeugung von Elementen recht aufwändig. Um dies zu vereinfachen, wurde eine Erweiterung der JavaScript-Syntax entworfen, mit der Elementkonstrukte – ähnlich wie HTML – geschrieben werden können. Mit Tools wie Webpack oder Browserify lässt sich diese Syntax in ein browserlesbares JavaScript umwandeln. Um browserfähiges Javascript generieren zu können, muss das JSX also erst durch einen Transpiler laufen.

Beispiel einer React Komponente ohne JSX:

Beispiel eines aus JSX generierten Codes in React

Lesbarere Syntax von JSX:

Beispiel eines JSX-Codes in React

Wer setzt React ein?

Prinzipiell setzt man React auf Seiten oder auch bei Single-Page-Applikationen ein, die großen Wert auf schnelles Rendering legen und in denen an verschiedenen Stellen im DOM Teile aktualisiert werden. Das sind z. B. Atlassian, Facebook, Instagram, Pinterest und viele mehr. Eine von der Community gepflegte Liste gibt es auf Github: Sites Using React.

Wofür nutzen wir bei brainbits React?

Einer unserer Kunden wollte einen digitalen Bestell-Katalog für Messen bereitstellen. Hierzu musste der Kunde nur die Produkte in unserem hauseigenen CMS pflegen. Diese wurden dann per RESTful-API an die React-App übergeben. Da die App später auch auf der Website zum Einsatz kommen sollte, stellten wir eine mobile Web-App zur Verfügung. Diese ließ sich dann ohne Probleme in die Website integrieren.

Prozessbeispiel React - RESTful API - CMS

Fazit

React ist nicht als Allrounder konzipiert, sondern legt den Fokus auf ein spezielles Thema: das performante Rendern von Inhalten. Deshalb ist es - anders als bei Frameworks wie Angular oder Ember - nicht sinnvoll, vollständige Web-Applikationen allein mit React zu bauen. Beim gleichzeitigen Einsatz von React und JSX ist außerdem für das spätere Generieren der App ein Precompiler erforderlich - was aber in der heutigen Zeit kein Problem darstellt, da durch den Einsatz neuer ECMAScript-Features ohnehin ein Transpiler vonnöten ist. Wenn es um Apps oder Websites mit hohem Anspruch an Performanz geht, bildet React aber immer eine äußerst wertvolle Unterstützung.

Niklas ist seit 2013 Frontend-Developer bei brainbits. Als Experte für CSS, Responsive Webdesign und mobiles Internet sorgt er dafür, dass auch hinter der schicken Oberfläche alles seine Ordnung hat.

Zurück zur Übersicht