Interview mit Nils Hartmann

React Fiber versus Angular – wer gewinnt?

Hartmut Schlosser

(c) Shutterstock / WhiteDragon

 

Facebook baut sein JavaScript-Framework React um: Im Projekt React Fiber wird der Kern von React komplett neu geschrieben. Was bedeutet das für alte React-Anwendungen? JAX-Speaker Nils Hartmann klärt uns auf und wagt einen Vergleich zum anderen großen JavaScript Framework: Angular.

Was ist React eigentlich?

JAXenter: Für alle, die es noch nicht kennen – was ist das Alleinstellungsmerkmal von React? Wie unterscheidet sich das Framework von anderen JavaScript-Frameworks?

React bricht bewusst mit  Paradigmen, die eigentlich als „Best Practices“ gelten.

Nils Hartmann: „React ist eine JavaScript-Bibliothek zum Entwickeln von Benutzeroberflächen“, heißt es auf der Homepage von React. Zentrales Konzept von React sind Komponenten, die sich zu ganzen Anwendungen zusammensetzen lassen.

React wird von Facebook entwickelt und wird dort selber intern verwendet. 2013 hat Facebook das Framework dann als Open-Source-Lösung zur Verfügung gestellt und seitdem hat es sehr schnell eine hohe Verbreitung gefunden.

Das ist auch insofern interessant, als dass React bewusst mit einigen wichtigen Paradigmen bricht, die eigentlich als „Best Practices“ gelten.

So gibt es zum Beispiel keine Trennung von UI und Logik (z.B. in ein Model oder Controller und Templates). Stattdessen enthalten die Komponenten in React sowohl die Beschreibung des UI als auch der zur Darstellung notwendigen Logik. Dabei wird übrigens sowohl für die Logik als auch für das UI als Sprache JavaScript eingesetzt. Es gibt keine Template-Sprache, auch hierin unterscheidet sich React von vielen anderen Frameworks.

Mehr zum Thema: 5 Gründe, sich das JavaScript-Framework React genauer anzuschauen

Allerdings bringt React eine (optionale) Erweiterung für JavaScript mit, die sich JSX nennt und mit der man HTML-artige Konstrukte direkt in seinen JavaScript-Code schreiben kann. Mittels eines Compilers (z.B. Babel oder TypeScript) kann dieser Code dann in echtes JavaScript übersetzt werden. Diese „Kröten“ muss man schlucken, wenn man mit React entwickeln will!

Eine weitere Besonderheit von React: Das UI wird rein deklarativ beschrieben. Komponenten beschreiben deklarativ, wie der Zustand der Anwendung auf das UI gemappt wird. Man spricht daher auch vom UI als Funktion. Das macht die UI-Entwicklung angenehm einfach: Man beschreibt nur, wie die Oberfläche aussehen soll, aber nicht, wie sie dahin kommt. React sorgt intern dafür, dass der DOM entsprechend der Beschreibung aktualisiert wird. Technisch funktioniert das dadurch, dass die React-Komponenten in einen sogennanten „virtuellen DOM“ gerendert werden. Dabei handelt es sich um ein leichtgewichtiges JavaScript-Objekt-Modell, das von React in den „realen“ DOM überführt.

React Fiber – alles neu?

JAXenter: Nun hat Facebook angekündigt, React komplett umschreiben zu wollen. Das neue Projekt soll React Fiber heißen. Wie bewertest du diesen Schritt?

Nils Hartmann: Das React-Fiber-Projekt existiert schon eine ganze Weile – intern bei Facebook laufen die Überlegungen und Untersuchungen dafür schon seit über zwei Jahren. Nun hat Facebook auf der diesjährigen Entwicklerkonferenz F8 bekannt gegeben, dass React Fiber im Großen und Ganzen jetzt fertiggestellt ist und mit der React Version 16 (vermutlich im Sommer) ausgerollt werden soll.

Bei React Fiber geht es darum, den Kern von React grundlegend zu überarbeiten. Das Ziel dahinter ist einerseits, das Rendern zu verbessern und zu beschleunigen. Das soll z.B. dadurch erreicht werden, dass das Rendering teilweise abgebrochen oder pausiert und später fortgesetzt werden kann. React kann bei Bedarf also „wichtigere“ Teile im Render-Prozess vorziehen. Ein Anwendungsfall, der hiervon profitieren könnte, sind Animationen oder auch Layout-Algorithmen. Vielleicht können wir irgendwann einmal z.B. FlexBox-Layouts nicht mehr über CSS sondern als React-Komponenten schreiben.

Die Umstellungen im Zuge von React Fiber betrifft nur die interne Arbeitsweise von React.

Die Umstellungen im Zuge von React Fiber betrifft übrigens nur die interne Arbeitsweise von React. Als Entwickler müssen wir uns damit also eigentlich nicht beschäftigen, denn unsere Anwendungen werden einfach davon profitieren, ohne dass wir dazu etwas tun müssen!

Neben diesen Optimierungen soll Fiber auch die Grundlage für neue Features von React sein. So wird beispielsweise über eine Änderung des Context API nachgedacht. Außerdem soll es möglich werden, dass Komponenten, die als Funktion implementiert werden, State erhalten und verändern können. Auch die möglichen Rückgabewerte von Komponenten werden erweitert. Bislang darf eine Komponente nur genau ein (Root-)Element zurückgeben, künftigen können aber auch zum Beispiel Strings und numerische Werte zurückgegeben werden.

Diese und andere Ideen werden auf der Seite https://github.com/reactjs/react-future veröffentlicht und diskutiert.

Zusammenfassend kann man sagen, dass React Fiber den Weg für viele spannende Neuerungen öffnet.

JAXenter: Was bedeutet das für das „alte“ React Framework? Müssen jetzt alle React-Anwendungen umgeschrieben werden?

Nils Hartmann: Nein! React Fiber ist zwar eine große Umstellung, allerdings nur React-intern. React 16 wird nahezu API-kompatibel zur aktuellen Version von React (aktuell 15.5) sein. Von daher muss auch keine React-Anwendung umgeschrieben werden. Wer dennoch Sorge vor der neuen Version hat: Bei Facebook intern laufen bereits über 30.000 Komponenten mit React auf Fiber-Basis. Man kann also davon ausgehen, dass das gut getestet ist!

Allerdings wird React Fiber mit Version 16 von React ausgerollt werden, und mit Version 16 werden einige APIs entfernt, die bereits jetzt depreacted sind. Diese Änderungen haben allerdings nichts mit der Umstellung auf Fiber zu tun, sondern sind der „regulären“ Weiterentwicklung und Pflege von React geschuldet.

React Fiber wird mit Version 16 von React ausgerollt werden.

Mit der Anfang April erschienenen Version 15.5 von React sind die entsprechenden APIs bereits als deprecated und ein Migrationspfad beschrieben worden. Wer die Änderungen nicht von Hand vornehmen möchte, kann dazu auch ein Migrations-Tool (https://github.com/reactjs/react-codemod) verwenden, das Facebook zur Verfügung gestellt hat. Sobald in der eigenen Anwendung keine Deprecation-Warnungen ausgegeben werden, kann bei Erscheinen gefahrlos auf React 16 umgestellt werden.

Insgesamt sind die React APIs übrigens sehr stabil – was im Übrigen auch eine explizite Entscheidung von Facebook ist, die auch in den React Design Principles dokumentiert ist (https://facebook.github.io/react/contributing/design-principles.html#stability). Da Facebook React auch selber in großem Stil einsetzt, gibt es wohl auch die Garantie dafür, dass das so bleibt.

React versus Angular

Keine Angst vor JavaScript

Keine_Angst_vor_JavaScriptIn der Kolumne „Keine Angst vor JavaScript!“ zeigen Nils Hartmann und Oliver Zeigermann, wie man ein ganz entspanntes Verhältnis zum Thema JavaScript-Entwicklung bekommt – und dass das Arbeiten mit JavaScript sogar Spaß machen kann!

Wir betrachten dabei nicht nur die Sprache, sondern werden uns auch einen Überblick über Frameworks, Tools und Methoden ansehen, die im JavaScript-Universum eine Rolle spielen.

Bisher erschienen:

JAXenter: Zum Schluss der Vergleich zum anderen großen JavaScript-Framework: Angular! Wo liegen die jeweiligen Stärken und Schwächen von Angular bzw. React?

Nils Hartmann: Angular 2 ist mit TypeScript entwickelt worden. Angular-Anwendungen werden daher auch häufig mit TypeScript entwickelt. React Anwendungen können zwar auch mit TypeScript entwickelt werden, werden allerdings meist mit ES6 (oder neuer) entwickelt. Häufig kommt – sofern man ein Typensystem verwenden will – Flow von Facebook zum Einsatz.

Außerdem gibt es in Angular die Trennung von Logik und Template, wobei das Template auch in derselben Datei wie die Komponente liegen kann, aber nicht muss. Für die Templates kommt eine eigene Template-Sprache zum Einsatz.

Während sich React nur um das UI kümmert, bringt Angular auch für andere Aspekte einer Anwendungen Lösungen mit. So gibt es z.B. ein Konzept für Services, ein Dependency-Injection-Framework, einen Router und APIs für REST-Calls an den Server. Angular hat eine recht genaue Vorstellung davon, wie Angular-Anwendungen aufgebaut sein sollen. React macht hier deutlich weniger Vorgaben, so dass man sich als Entwickler selber Gedanken machen muss (oder darf!). Welcher Ansatz für einen besser funktioniert, kann man nur selber entscheiden.

JAXenter: React versus Angular – wer gewinnt aus deiner Sicht?

Nils Hartmann: Ich hoffe… beide 😉

Aus meiner Sicht haben beide Frameworks ihre Berechtigung und ihre Stärken. Nicht jeder z.B. findet es gut, dass – wie in React – UI und Logik sehr eng gekoppelt sind und möchte aus diesem Grund vielleicht lieber zu Angular greifen. Auf der anderen Seite sind nicht alle einverstanden mit den Architekturentscheidungen, die Angular vorgibt. In diesem Fall kann man dann besser React verwenden, da es hier praktisch keine Vorgaben gibt.

Außerdem belebt Konkurrenz ja bekanntlich das Geschäft und es bleibt zu hoffen, dass beide voneinander lernen und dass dadurch neue Ideen und Einfälle entstehen. Abgesehen von den beiden „Platzhirschen“ gibt es ja mittlerweile auch weitere interessante Frameworks, wie VueJS zum Beispiel. Es wird nicht langweilig!

JAXenter: Vielen Dank für dieses Interview!

Nils Hartmann ist Softwareentwickler und Softwarearchitekt. Er hat langjährige Erfahrung in der Entwicklung von großen Java-Enterprise-Anwendungen und beschäftigt sich mit dem server- und clientseitigen Einsatz von JavaScript. Nils ist unter www.nilshartmann.net zu erreichen. Twitter: @nilshartmann

Mehr zum Thema:

Die große JavaScript-Erschöpfung

Geschrieben von
Hartmut Schlosser
Hartmut Schlosser
Hartmut Schlosser ist Redakteur und Online-Koordinator bei Software & Support Media. Seine Spezialgebiete liegen bei Java-Enterprise-Technologien, JavaFX, Eclipse und DevOps. Vor seiner Tätigkeit bei S & S Media studierte er Musik, Informatik, französische Philologie und Ethnologie.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.