Blog

React

Was ist das Besondere an React?

Im letzten Blog-Post habe ich bereits das obligatorische „Hello World“ in React gezeigt. Doch warum sollte man sich ausgerechnet mit React beschäftigen? Frameworks und Libraries kommen und gehen. Allerdings gibt es einige große Frameworks, die ihre Spuren zurückgelassen haben. Mit AJAX wurde jQuery groß: mit seiner Hilfe konnte man zum ersten Mal wirklich dynamische Websites entwickeln, denn es bot neben praktischen HTTP-Funktionen eine Abstraktion vom konkreten Webbrowser und führte zudem CSS-Queries ein. Später kamen Ember und Backbone dazu und zeigten, dass man auch im Frontend Software-Architektur betreiben kann. AngularJS trieb diesen architekturgetriebenen Ansatz auf die Spitze und führte gleichzeitig Komponenten (Directives), Services, Dependency Injection und das MVC-Pattern ein.

React ist nicht neu. Es ist eine von Facebook geschriebene JavaScript-Bibliothek, mit der man Benutzeroberflächen für das Web entwickeln kann. Facebook hat das Framework bereits 2013 als Open-Source-Lösung zur Verfügung gestellt und verwendet das Framework auch selbst als Basis für eine ganze Reihe von ihren Webseiten. Zum Beispiel ist Instagram komplett auf Basis von React entwickelt. Auch auf anderen großen Webseiten, wie zum Beispiel Netflix, Airbnb oder der des Wall Street Journals ist es im Einsatz.

Der Kern von React sind Komponenten und ihre Komposition zu einer Anwendung. Durch eine solche Komposition wird bestimmt, was dargestellt werden soll. Oder aus einer anderen Perspektive, wie man den Zustand einer Anwendung in ihre Darstellung transformiert. Dabei ist der Kern von React erst einmal losgelöst vom Web: React kann in unterschiedlichen Szenarien funktionieren, auch in nativen Anwendungen.

Was es besonders macht, ist, dass es die Art ändert, in der Webanwendungen seit Jahren – vor allem im jQuery-Kontext – entwickelt werden. Seit es das DOM gibt (das man in jQuery direkt manipuliert hat), folgen Webentwickler dem Rat: „Sei sparsam mit DOM-Manipulationen, denn das DOM ist langsam. Repaints und Reflows machen dir deine User-Experience kaputt. Statt einer Site, die mit flüssigen 60 fps rendert, wird deine Site springen, ruckeln und haken.“

Die Arbeit mit dem DOM ist mühsam. Wenn man es verändert, macht man die Seite langsam. Es ist leicht, Memory-Leaks einzuführen, wenn man den Überblick über DOM-Referenzen verliert. Zudem ist es komplex, denn man muss händisch Event-Handler an den richtigen Stellen registrieren und diese auch wieder entfernen. Natürlich gibt es Entwurfsmuster, um diesen Problemen zu begegnen, aber auch diese Entwurfsmuster ändern nicht fundamental die Art, wie man im Browser entwickelt. Oder, um John Resig – den Autor von jQuery – zu zitieren:

The DOM is a Mess.

React löst, wie du als Leser sicher schon vermutet hast, viele dieser Probleme.

React sitzt zwischen der Komponente und dem DOM. React verwendet eine interne Repräsentation des DOMs (Virtual DOM), berechnet bei Veränderungen des Zustands das Delta (Virtual DOM Diffing), das sich im DOM ergeben würde, und kann so nur diejenigen Änderungen im DOM durchführen, die notwendig sind. Zugriffe sind so nicht mehr langsam; Aktualiserungen können jetzt schnell sein.

React kümmert sich um das DOM und um Events, der Entwickler kümmert sich darum, wie eine Komponente in einem gegebenen Zustand aussehen soll.

Doch React hat noch weitere Vorteile:

  • Wiederverwendbare Komponenten: Einmal sauber implementiert, lässt sich eine Komponente immer wieder verwenden (ähnlich zu Directiven in Angular 1 oder Components in Angular 2).
  • Methoden und Markup gehören zusammen: da JSX in der Komponente selbst definiert wird, muss im Editor nicht ständig zwischen Markup und JavaScript gewechselt werden. Dies macht es einfach für den Entwickler, den Überblick zu behalten (oder sich in einer viel zu großen Datei zu verlieren).
  • JavaScript: React verwendet die neuesten Features von JavaScript und fremdelt nicht mit anderen Sprachen (TypeScript oder Java).
  • React fördert Purity: Eine „pure function“ in der Funktionalen Programmierung gibt einem für eine bestimmte Eingabe stets die gleiche Ausgabe. Aber was hat das mit UI-Programmierung zu tun? Ganz einfach: Eine React-Komponente gibt einem zu einem gegebenen Status (Input) immer die gleiche Ausgabe (gerendertes HTML). So überträgt React den Vorteil der Funktionalen Programmierung in die UI-Programmierung.
  • Server Rendering: Man kann den initialen Zustand einer React-App schon im Server vor-rendern. Das macht den initialen Seitenaufbau schnell.

Neben diesen Vorteilen gibt es noch einen Vorteil, den ich besonders angenehm finde: React ersetzt eine imperative API durch eine deklarative API. Deklarativer Code funktioniert vorhersehbarer als imperativer Code. Dies führt dazu, dass ein Entwickler mehr Vertrauen in seinen eigenen Code haben kann, da sich der Code vorhersehbarer verhält.

Zusammenfassung

React ist eine Frontend-Bibliothek für Webanwendungen. Es gehört sicher zu den großen Frameworks für moderne Webanwendungen. Anders als Angular (über Angular 2 werden wir hier sicher noch Blog-Beiträge schreiben) deckt React aber nur den View-Teil eines Frontend-Frameworks ab. Daher hat es einen Nachteil gegenüber Angular, den es aber mit einem großen Ökosystem aus begleitenden Libaries wieder wettmacht. Es wird, eben wegen der Vorteile, in immer mehr Projekten verwendet. Durch die starke Fokussierung auf Komponenten wird es für Frontend-Entwickler leichter, einzelne Komponenten zu optimieren, ohne dabei die ganze Applikation und deren Performance im Auge behalten zu müssen. Auch lässt es sich so leichter in großen und/oder verteilten Teams arbeiten, da einzelne Teams sich auf ihre Komponenten konzentrieren können.

Über den Autor

Oliver Ochs

Oliver baut Websites seit 1998 und verbringt seitdem nahezu jeden Tag damit, das Web besser, schneller und einfacher zu machen. Er gibt dazu Coachings, veranstaltet Workshops und arbeitet in Projekten. Dabei liebt er es, komplexe Performance- und Front-End-Probleme zu lösen. Er ist ein Frontend-Op, der sich als Full-Stack-Developer in Java und JS an der Schnittstelle zwischen UI und Backend am wohlsten fühlt.

Antwort hinterlassen