React Native führt ab 0.76 die New Architecture ein

 (reactnative.dev)
5 Punkte von GN⁺ 2024-10-26 | 6 Kommentare | Auf WhatsApp teilen
  • React Native 0.76 wurde auf npm veröffentlicht. Diese Version enthält die neue Architektur standardmäßig und unterstützt die neuesten React-Funktionen vollständig.
  • Die neue Architektur unterstützt Funktionen wie Suspense, Transitions, Automatic Batching und useLayoutEffect und führt ein neues System für Native-Module und Komponenten ein, das typsicheren Code ermöglicht.
  • Sie ist das Ergebnis einer grundlegenden Neuschreibung von React Native seit 2018 und wurde so konzipiert, dass die meisten Apps schrittweise auf die neue Architektur umgestellt werden können.
  • React Native 0.76 kann von den meisten Apps mit einem ähnlichen Aufwand wie bei früheren Releases übernommen werden, und beliebte Libraries unterstützen die neue Architektur bereits.

Was ist die neue Architektur?

  • Die neue Architektur ist eine vollständige Neuschreibung der zentralen Systeme von React Native, einschließlich des Renderings von Komponenten, der Kommunikation zwischen JavaScript und nativen Abstraktionen sowie der Planung von Aufgaben zwischen Threads.
  • Die bisherige Architektur kommunizierte über eine asynchrone Bridge mit nativen Plattformen, die neue Architektur wurde jedoch so entworfen, dass sie sowohl synchrone als auch asynchrone Updates unterstützt.
  • Die neue Architektur besteht aus vier Hauptteilen: dem nativen Modulsystem, dem neuen Renderer, dem Event Loop und dem Wegfall der Bridge.

Neue Native-Module

  • In C++ geschrieben und mit folgenden neuen Möglichkeiten
    • synchrone Kommunikation mit der nativen Runtime
    • Typsicherheit zwischen JavaScript und nativem Code
    • gemeinsame Codebasis über Plattformen hinweg
    • standardmäßiges Lazy Module Loading
  • In JavaScript-/TypeScript-APIs können alle Funktionen der nativen C++-Implementierung genutzt werden.
  • Mit Codegen lassen sich starke Typverträge definieren.
  • Module werden nur dann in den Speicher geladen, wenn sie benötigt werden, was die Startzeit der App verkürzt.

Neuer Renderer

  • In C++ neu geschrieben und mit folgenden Vorteilen:
    • Rendering von Updates auf verschiedenen Threads mit unterschiedlicher Priorität
    • synchrones Auslesen des Layouts auf einem anderen Thread
    • plattformübergreifend gemeinsam genutzter C++-Code
  • Die View-Hierarchie wird nun als unveränderlicher Baum gespeichert.
    • Thread-sichere Verarbeitung von Updates
    • Verarbeitung mehrerer laufender Bäume, die verschiedene Versionen der Benutzeroberfläche darstellen
  • Updates mit niedriger Priorität können unterbrochen werden, um Dringendes wie Benutzereingaben zu rendern, und anschließend fortgesetzt werden.

Event Loop

  • Die neue Architektur implementiert ein klares Modell für die Verarbeitung im Event Loop und verringert damit die Unterschiede zwischen React DOM und React Native.
    • Umsetzung eines klar definierten Event-Loop-Verarbeitungsmodells für Aufgaben auf dem JavaScript-Thread
  • Der Event Loop ordnet Updates und Events vorhersehbar an, sodass Updates mit niedriger Priorität durch dringende Benutzerereignisse unterbrochen werden können.
  • Bessere Übereinstimmung mit Web-Standards
  • Wird künftig die Grundlage für weitere Browser-Funktionen bilden

Wegfall der Bridge

  • Die neue Architektur entfernt die Bridge und ermöglicht dadurch eine direkte und effiziente Kommunikation zwischen JavaScript und nativem Code.
  • Durch den Wegfall der Bridge verbessern sich die Startzeiten, Abstürze durch undefiniertes Verhalten werden reduziert und Fehlerberichte sowie Debugging werden einfacher.

Neue Funktionen

  • Transitions
    • Transitions, ein neues Konzept aus React 18, unterscheiden zwischen dringenden und nicht dringenden Updates.
    • Dringende Updates erfordern eine sofortige Reaktion, während Transition-Updates die UI von einer Ansicht in eine andere überführen.
  • Automatic Batching bündelt mehr Status-Updates gemeinsam, vermeidet das Rendern von Zwischenzuständen und sorgt dafür, dass React Native schneller und ohne Verzögerungen arbeitet.
  • Die neue Architektur unterstützt über useLayoutEffect das synchrone Auslesen von Layout-Informationen und das Aktualisieren der UI im selben Frame.
  • Die neue Architektur unterstützt Suspense aus React 18 vollständig, um Ladezustände zu verarbeiten und Benutzereingaben eine hohe Priorität zu geben.

Upgrade-Anleitung

  • Beim Upgrade auf 0.76 ist es für die meisten Apps dank der Interop-Schicht mit einem ähnlichen Aufwand wie bei anderen Releases möglich.
  • Um die New Architecture und Concurrent-Funktionen jedoch vollständig zu nutzen, müssen benutzerdefinierte Native-Module und Komponenten migriert werden.
  • Für App-Entwickler
    • Libraries, benutzerdefinierte native Komponenten und benutzerdefinierte Native-Module müssen so aktualisiert werden, dass sie die New Architecture vollständig unterstützen.
    • Für die Unterstützung der New Architecture wurde mit den meisten beliebten React-Native-Libraries bereits zusammengearbeitet.
  • Library-Maintainern wird empfohlen, ihre Libraries auf die neuen APIs für Native-Module und Komponenten zu migrieren.

Zusammenfassung von GN⁺

  • Der Übergang zur New Architecture dürfte ein wichtiger Meilenstein für die Entwicklung mit React Native sein. Dass sowohl synchrone als auch asynchrone Updates möglich werden, Bridge-Engpässe beseitigt werden und Layouts auf anderen Threads gelesen werden können, verspricht viele Verbesserungen bei Performance und Nutzererlebnis.
  • Besonders bemerkenswert ist auch die vollständige Unterstützung der Concurrent-Funktionen aus React 18. Mit Suspense, Transition und ähnlichen Funktionen lassen sich reaktionsschnellere und natürlichere UX-Erlebnisse umsetzen.
  • Bestehende Apps und Libraries werden allerdings voraussichtlich Migrationsarbeit leisten müssen, um die New Architecture vollständig zu unterstützen. Das wird schrittweise erfolgen müssen, aber nach Abschluss der Migration lassen sich die Vorteile der New Architecture voll ausschöpfen.
  • Diese Architektur wird bereits in den Facebook- und Instagram-Apps von Meta eingesetzt, und es gibt erfolgreiche Beispiele wie Expensify, Kraken und BlueSky.
  • Insgesamt ist die New Architecture ein großer Fortschritt für die Zukunft von React Native. Es bleibt zu hoffen, dass sie sich mit Unterstützung der Community gut etabliert.

Verwandte Beiträge

6 Kommentare

 
codemonkey 2024-10-28

Es kommt mir so vor, als wäre es schon sehr lange her, dass ich zum ersten Mal von React Native gehört habe. Obwohl es bei Facebook gestartet ist, überrascht es mich eher, dass es noch immer nicht bei Version 1 angekommen ist..
 
dongwon 2024-10-26

Ich habe RN noch nie verwendet und bin deshalb neugierig, aber meinem Gefühl nach scheint es für Android optimiert zu sein. Umso erstaunlicher ist es, dass die Performance in der Praxis auf iOS besser sein soll.
 
hilft 2024-10-27

Bei uns scheinen fast alle Abstürze unter Android aufzutreten.
 
nemorize 2024-10-26

Unter Android ist es absolut furchtbar ... auf einem wirklich schlimmen Niveau ..
 
yangeok 2024-10-26

Es fühlt sich an, als wäre der Wechsel der Engine zu Hermes noch gar nicht so lange her, und jetzt haben sie schon wieder alles umgekrempelt.
 
GN⁺ 2024-10-26
Hacker-News-Kommentare

  • Ich habe vier Jahre lang React-Native-Apps und Backend-APIs entwickelt; der Wechsel zu Expo hat viele Probleme gelöst, aber es gibt weiterhin Bugs. iOS ist stabiler als Android und bietet auch bessere Performance. React Native ist leicht zu lernen und verfügt über ein großes JS-Ökosystem, daher ist es empfehlenswert, aber derzeit nutze ich Flutter.

  • Zu React Native gibt es unterschiedliche Meinungen; einige beschweren sich über Expo und empfehlen Kotlin Multiplatform. Es gibt auch die Ansicht, dass die Diskussionen auf Hacker News zunehmend sinnlos werden.

  • Als Flutter-Entwickler denke ich, dass Swift UI und Compose besser für die Mobile-Entwicklung geeignet sind, und würde beim Start einer neuen App weder Flutter noch React Native verwenden.

  • React Native ist unter iOS in Ordnung, aber auf Android langsam. Hermes ist interessant, aber es werden immer noch viele Polyfills benötigt. Ich freue mich auf den Tag, an dem das Web React Native ersetzt.

  • Bluesky wird mit Expo/RN entwickelt, und in ersten Tests der neuen Architektur hat sich die Android-Performance verbessert.

  • Ich habe positive Erfahrungen mit React Native zusammen mit Expo gemacht, und als Solo-Entwickler ermöglicht mir RN sehr vieles. Ich freue mich auf die neue Architektur.

  • Die Rendering-Geschwindigkeit von Flutter ist fünfmal höher als die von React Native, und bei der Nutzung von React im Web ist die Geschwindigkeit ebenfalls höher.

  • Ich habe einen Tweet gesehen, dass Capacitor nützlich für das Portieren einer NextJS-Web-App ist.

  • React Native ist in diesem Jahr deutlich besser geworden, und sobald react-strict-dom bereit ist, wird das eine große Veränderung bringen.