News

Neue React-Features: Concurrent Mode revolutioniert die User-Experience

React-Code. (Foto: Thongchai Kitiyanantawong/Shutterstock)

Das beliebte JavaScript-Framework React aus dem Hause Facebook stellt neue experimentelle Features vor: Der Concurrent Mode vereint mehrere neue Features, die eure React-Anwendungen in Zukunft ohne Stocken rendern lassen. Die Neuerung ist vergleichbar mit der Disruption des Entwicklungsworkflows, den Version Control Systeme mit sich brachten.

Mit der Einführung des neuen, noch experimentellen Features folgen die Entwickler hinter dem Framework Erkenntnissen aus der Mensch-Computer-Interaktionsforschung.

Der Status quo

Nach jetzigem Stand blockiert React das Rendering weiterer Komponenten, wenn schon ein anderer Rendering-Prozess im Gange ist. Eine wunderbare Analogie, die auch die React-Doku anführt, ist Version Control. Wenn ihr zu mehreren – oder auch alleine – an einem Projekt arbeitet, nutzt ihr höchstwahrscheinlich Git oder ein anderes Version Control System. Ihr arbeitet in Branches. Wenn ein Feature soweit fertig ist, merged ihr in den Masterbranch und die anderen können pullen. Soweit, so State of the Art. Vor Version Control Systemen wie Git mussten Entwickler, wollten sie etwas an den Dateien innerhalb eines Projektes ändern, ihre Teammitglieder anweisen, solange die Finger von dem Projekt zu lassen, bis sie die Änderung implementiert hatten. Der gesamte Entwicklungsprozess war für den Änderungszeitraum geblockt.

Etwa so kann man sich den Rendering-Prozess heutiger UI-Libraries vorstellen. Sobald ein Update gerendert wird, also zum Beispiel neue DOM-Nodes erstellt und Code innerhalb von Komponenten ausgeführt wird, kann die Library – zum Beispiel React – diesen Prozess nicht stoppen.

Bereits begonnene Renderings können unterbrochen werden

Was die Concurrent-Mode-Features so revolutionär macht, ist, dass damit der Rendering-Vorgang unterbrechbar wird. Damit soll die User-Experience signifikant besser werden. Wenn der User zukünftig beim Nutzen einer React-App eine Eingabe macht, hält React den Browser in Zukunft nicht mehr so lange davon ab, den Input zu updaten, bis der vorher in Gang gesetzte Rendering-Prozess abgeschlossen ist, sondern kann das Update des Inputs quasi zwischenschalten und die aktualisierte Liste im Hintergrund weiterrendern. Dann aktualisiert React den DOM und der Nutzer sieht die Änderungen auf dem Bildschirm.

Konzeptuell könntet ihr euch das vorstellen, als würde React jedes Update auf einem eigenen Branch vorbereiten: Dabei könnt ihr ein weniger wichtiges Feature auch einfach mal liegen lassen und an etwas anderem weitermachen.

Mit dem Concurrent Mode wird die Notwendigkeit von Debouncing und Drosselung des UI reduziert. Ihr müsst Renderings nicht mehr künstlich aufhalten, um stockende Interfaces zu verhindern. Sie beginnen zwar sofort, können bei Bedarf aber jederzeit unterbrochen werden.

Build-in intentional Loading Sequences

Folgendes Szenario: Der User navigiert zwischen zwei Screens in einer App. Manchmal sind vielleicht nicht genug Code und Daten geladen, um dem User einen ausreichenden Ladestatus anzuzeigen. Zu einem leeren Bildschirm zu wechseln oder ewig einen Spinner angezeigt zu bekommen, nervt. Eine elegantere Lösung ist es, solange auf der Ausgangsansicht zu bleiben, bis ausreichend Daten und Code geladen sind, um auch den zweiten vollständig anzuzeigen. Das geht, ist aber gar nicht so einfach – zumindest bisher: Mit Concurrent Mode ist dieses Feature der Default. React bereitet den neuen Screen im Hintergrund – will man bei der Git-Metapher bleiben: auf einem neuen Branch – bereits vor, währenddessen bleibt der Ausgangs-Screen aber vollständig erhalten. Der Wechsel zum neuen Screen erfolgt erst, wenn eure App soweit ist.

Für CPU-gebundene Updates wie das Erstellen von DOM-Nodes oder die Ausführung von Code bedeutet der Concurrent Mode, dass ein dringenderes Update ein weniger wichtiges Rendering unterbrechen kann. Für IO-gebundene Updates, wie Code oder Daten von einem Netzwerk zu fetchen, bedeutet Concurrency, dass React im Speicher bereits mit dem Rendern beginnt, bevor alle Daten verfügbar sind. Dem Nutzer wird in der Zwischenzeit anstelle eines leeren Screens oder Spinners einfach der vorherige Screen angezeigt. An der Art, wie ihr mit React arbeitet, wird der Concurrent Mode nichts ändern. Komponenten, State und Props funktionieren genau wie vorher auch. Wenn ihr die Ansicht aktualisieren wollt, setzt ihr den State. React entscheidet nach einer Heuristik, wie „dringend“ ein Update ist, die könnt ihr aber nach Bedarf im Einzelfall mit ein paar wenigen Zeilen Code anpassen.

TLDR: Beim Concurrent Mode geht es um Prioritäten. Nach Status quo kann React ein einmal begonnenes Rendering nicht unterbrechen. Mit Concurrency Mode hat React ein Auge auf Dinge, die sonst gerade anstehen: Gibt es eine Sache mit einer höheren Priorität – zum Beispiel ein anderes Update oder andere Aufgaben, die der Browser ausführen muss – wird React diese in Zukunft vorziehen. Die Priorisierung orientiert sich an Erkenntnissen aus der Mensch-Computer-Interaktionsforschung: Interaktionen wie zum Beispiel Texteingaben müssen in relativ kurzer Zeit stattfinden, bei Klicks oder Seitenwechseln darf das Ganze etwas länger dauern, ohne dass wir als Nutzer das Gefühl haben, das dauere jetzt zu lange.

Achtung: Noch ist die Neuerung im sogenannten Experimental State! Die Doku rät dringend davon ab, das neue Feature jetzt schon in euren Projekten zu nutzen. Zum Ausprobieren verfügbar ist das Ganze ab sofort für Neugierige und Experimentierfreudige – ausdrücklich in einem Rahmen, in dem ihr nicht wirklich etwas kaputt machen könnt. Wer gerne experimentiert und jetzt schon testen will: Viel Spaß!

Zum Weiterlesen: 

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung