React Native: Eine Codebasis für iOS und Android

Um zu verstehen, warum React Native heute so leistungsfähig ist, lohnt sich ein Blick auf die ursprüngliche Architektur. Der JavaScript-Code lief immer schon auf einem eigenen Thread, getrennt vom nativen UI-Thread von iOS und Android. Damit beide Seiten miteinander sprechen konnten, gab es die sogenannte "Bridge": Nachrichten wurden als JSON serialisiert, in Paketen gebündelt und asynchron zwischen den Threads hin- und hergeschickt. Man kann sich das wie zwei Personen vorstellen, die sich nur über handschriftliche Zettel verständigen, die ein Bote hin- und herträgt. Das funktioniert zuverlässig, kostet aber Zeit, besonders wenn viele kleine Nachrichten schnell hintereinander verschickt werden müssen, etwa bei komplexen, an Scroll- oder Wischgesten gekoppelten Animationen.

Genau dieses Nadelöhr hat die sogenannte "New Architecture" beseitigt, die inzwischen der Standard in jedem neuen React-Native-Projekt ist. Ihr Kern ist die JavaScript Interface (JSI), eine schlanke C++-Schicht, über die JavaScript- und nativer Code sich direkt und bei Bedarf synchron aufrufen können, ganz ohne den Umweg über Serialisierung und Boten. Im Bild von eben: Die beiden Personen sitzen jetzt im selben Raum und sprechen direkt miteinander.

Auf der JSI bauen zwei weitere Bausteine auf: Fabric, das neue Rendering-System, das native UI-Komponenten direkter erzeugt und aktualisiert und damit auch mit modernen React-Konzepten wie nebenläufigem Rendering zusammenspielt, sowie TurboModules, mit denen native Module erst dann geladen werden, wenn eine App sie tatsächlich braucht, statt alle beim Start vorzuladen. In Kombination mit der Hermes-JavaScript-Engine, die für mobile Geräte optimiert ist und Code bereits vorab in Bytecode übersetzt, ergibt sich ein Start- und Laufzeitverhalten, das dem einer rein nativen App inzwischen sehr nahekommt.

Drei Eigenschaften erklären, warum React Native seit zehn Jahren zu den führenden Cross-Platform-Technologien zählt.

Zehn Jahre nach dem ersten Release lässt sich die Verbreitung von React Native an konkreten Zahlen und bekannten Anwendungsfällen festmachen.

Wichtig für eine ehrliche Einordnung: Nicht jede genannte App nutzt React Native für 100 Prozent ihrer Oberfläche. Viele größere Unternehmen setzen bewusst auf einen hybriden Ansatz, bei dem einzelne, besonders performancekritische Screens nativ bleiben, während der Großteil der App auf React Native läuft.

Flutter von Google verfolgt einen anderen technischen Ansatz: Statt native UI-Komponenten zu verwenden, zeichnet Flutter jede Oberfläche selbst mit einer eigenen Rendering-Engine (Impeller beziehungsweise vormals Skia). Das Ergebnis ist ein pixelgenau identisches Erscheinungsbild auf allen Plattformen, erfordert aber, dass das Team die Sprache Dart neu lernt. React Native passt sich dagegen an native Plattform-Konventionen an, was je nach Projekt Vor- oder Nachteil sein kann.

Komplett native Entwicklung mit Swift/SwiftUI auf iOS und Kotlin/Jetpack Compose auf Android bleibt die Referenz für maximale Performance und den unmittelbarsten Zugriff auf neue Betriebssystem-Funktionen, verlangt dafür aber zwei getrennte Teams und zwei parallele Entwicklungszyklen. Die folgende Tabelle fasst die wichtigsten Unterschiede zusammen.

Einschätzung auf Basis der Aussagen in diesem Kapitel, Stand der Technologien zum Zeitpunkt der Veröffentlichung.

In der Praxis lässt sich die Entscheidung selten allein an technischen Kriterien festmachen. Wer bereits ein React-Web-Team hat und schnell zwei Stores bedienen muss, fährt mit React Native meist am besten. Wer ein eigenständiges, markenprägendes visuelles Design über viele Plattformen hinweg pixelgenau reproduzieren will, findet in Flutter oft die passendere Antwort. Und wer eine App baut, die von Tag eins an jede neue Betriebssystem-Funktion ohne jede Verzögerung nutzen muss, etwa im Umfeld von Wearables oder sehr spezieller Hardware-Integration, kommt an nativer Entwicklung selten vorbei. Alle drei Wege führen zu einer funktionierenden App, sie unterscheiden sich vor allem in Budget, Team-Struktur und Zeithorizont.