Turbo Module in React Native — was es ist, wie JSI funktioniert und Architektur

Was ist Turbo Module?

Turbo Module ist eine Komponente der neuen React Native Architektur, die die klassische Bridge für die Kommunikation zwischen JavaScript und nativem Code ersetzt. Im Gegensatz zu Bridge, wo jede Nachricht in JSON serialisiert und asynchron übertragen wird, verwendet Turbo Module JSI — eine Schicht, die es JavaScript ermöglicht, direkt Funktionen aufzurufen, die in C++ geschrieben sind.

Die Turbo Module Architektur wurde vom Meta-Team auf der React Conf 2021 als Teil einer größeren Umstrukturierung von React Native unter dem Codenamen „The New Architecture“ vorgestellt. Neben Turbo Module umfasst die neue Architektur Fabric (neuer Renderer), Codegen (Codegenerator) und JSI (Interaktionsschnittstelle). Zusammen lösen diese Komponenten Leistungsprobleme, die sich seit 2015 in React Native angesammelt haben.

Turbo Module löst drei Schlüsselprobleme klassischer nativer Module: Asynchronität (alle Aufrufe durchlaufen eine Warteschlange), Serialisierung (jeder Aufruf erfordert eine JSON-Transformation) und Laden (alle Module werden beim App-Start initialisiert). Mit Turbo Module werden native Methoden synchron aufgerufen, Daten werden ohne Kopieren übertragen und Module werden bei Bedarf geladen.

Wie funktioniert JSI

JSI (JavaScript Interface) ist eine C++ API, die eine Schicht zwischen der JavaScript-Engine (Hermes oder JSC) und nativem Code erstellt. JSI stellt Host-Objekte bereit — C++ Objekte, die wie normale JavaScript-Objekte und -Methoden aussehen. Wenn JavaScript eine Methode eines solchen Objekts aufruft, führt JSI direkt den entsprechenden C++ Code ohne Serialisierung und ohne Thread-Wechsel aus.

Der Hauptunterschied zwischen JSI und Bridge ist das Fehlen von Datenkopien. In Bridge wird jeder Wert in einen JSON-String serialisiert, durch eine Warteschlange geleitet und deserialisiert. JSI übergibt Zeiger auf Daten im Speicher, was die Arbeit mit großen Datenmengen ohne Leistungseinbußen ermöglicht. Laut Meta-Tests sind JSI-Aufrufe 5–10 Mal schneller als äquivalente Aufrufe über Bridge.

HostObject und synchrone Aufrufe

JSI definiert das HostObject-Interface — eine C++ Klasse, die React Native in der JS-Umgebung als normales Objekt registriert. Wenn JS-Code auf eine Eigenschaft zugreift oder eine Methode von HostObject aufruft, fängt JSI den Aufruf ab und führt C++ Code aus. Dies ermöglicht die synchrone Ausführung von Operationen ohne Warten auf die Bridge-Warteschlange.

// JSI HostObject Beispiel — synchroner nativer Aufruf
class ImageCompressorHostObject : public jsi::HostObject {

    jsi::Value get(
        jsi::Runtime& rt,
        const jsi::PropNameID& propName
    ) override {
        auto name = propName.utf8(rt);
        if (name == "compressImage") {
            return jsi::Function::createFromHostFunction(
                rt,
                jsi::PropNameID::forUtf8(rt, name),
                2,
                [](jsi::Runtime& rt,
                   const jsi::Value& thisValue,
                   const jsi::Value* args,
                   size_t count) -> jsi::Value {
                    return jsi::Value(rt, compressNative(
                        args[0].asString(rt).utf8(rt),
                        args[1].asNumber()
                    ));
                }
            );
        }
        return jsi::Value::undefined();
    }
};

Der obige Code zeigt, wie JSI HostObject den Aufruf compressImage aus JavaScript verarbeitet. Die Funktion nimmt zwei Argumente entgegen (einen Pfad-String und eine Qualitätszahl), ruft die native Funktion compressNative auf und gibt das Ergebnis zurück — alles synchron, ohne Bridge, ohne JSON. Dies ist der Hauptvorteil von JSI gegenüber der klassischen Architektur.

JSI ist Teil der React Native Hauptlaufzeit und unabhängig von einer bestimmten JavaScript-Engine. Es funktioniert sowohl mit Hermes als auch mit JavaScriptCore (JSC) und bietet eine einheitliche Schnittstelle für die Interaktion mit der nativen Umgebung.

Turbo Module vs Bridge: Vergleich

Der Vergleich von Turbo Module und Bridge zeigt die Entwicklung der React Native Architektur. Bridge wurde für den schnellen Start von React Native im Jahr 2015 entwickelt, aber mit zunehmender Komplexität der Anwendungen wurden seine Einschränkungen kritisch. Turbo Module löst diese Probleme auf Architekturebene.

In der Praxis ist der Unterschied am deutlichsten bei häufigen nativen Methodenaufrufen — zum Beispiel bei der Medienverarbeitung oder der Arbeit mit GPU. Bei seltenen Aufrufen (einmal pro Sitzung) ist der Leistungsunterschied unbedeutend. Turbo Module vereinfacht auch die Arbeit mit großen Binärdaten — Bildern, Videos, binären Protokollen — die in Bridge Workarounds mit dem Dateisystem erforderten.

Beispiel zur Erstellung eines Turbo Module

Die Erstellung eines Turbo Module beginnt mit der Definition einer TypeScript-Spezifikation. Codegen generiert automatisch C++ Schnittstellen und Objective-C/Java-Stubs basierend auf dieser Spezifikation. Dies ändert den Entwicklungsansatz vollständig — der Entwickler beschreibt die API einmal und Codegen erstellt den Rest.

// ImageCompressor.ts — Turbo Module Spezifikation
import type { TurboModule } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  compressImage(
    imagePath: string,
    quality: Double
  ): Promise<string>;
}

Codegenerierung durch Codegen

Codegen analysiert die TypeScript-Spezifikation und generiert C++ HostObject, Objective-C-Protokoll und Java-Schnittstelle. Dem Entwickler bleibt nur die Implementierung der nativen Logik. Dieser Ansatz garantiert, dass Typen auf JavaScript- und nativer Seite immer übereinstimmen und schließt manuelle Mapping-Fehler aus.

// TurboModule Implementierung für iOS (generierter Stub)
@interface ImageCompressorModule ()
    RCT_EXPORT_MODULE(ImageCompressor)
@end

@implementation ImageCompressorModule

RCT_EXPORT_METHOD(compressImage:(NSString *)imagePath
                  quality:(NSNumber *)quality
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
    NSData *compressed = [ImageProcessor compressAtPath:imagePath
                                                    quality:quality.doubleValue];
    resolve([NSString stringWithUTF8String:compressed.UTF8String]);
}

@end

Ein wichtiger Vorteil ist das Lazy Loading. Turbo Module wird nicht beim App-Start initialisiert, sondern erst beim ersten Zugriff aus JavaScript erstellt. Dies verkürzt die App-Startzeit um 30–50% im Vergleich zum klassischen Ansatz, bei dem alle nativen Module sofort geladen werden.

Migration von Bridge zu Turbo Module

Der Übergang von Bridge zu Turbo Module erfordert kein vollständiges Umschreiben der Anwendung. React Native 0.73+ unterstützt beide Architekturen parallel — Bridge-Module arbeiten weiter und neue Module können als Turbo Module erstellt werden. Dies ermöglicht eine schrittweise Migration, Modul für Modul.

Um die neue Architektur in einem React Native 0.76+ Projekt zu aktivieren, setzen Sie das Flag newArchEnabled in der Datei react-native.config.js auf true. Danach arbeiten alle vorhandenen nativen Module weiter über Bridge, und neue Module können als Turbo Module erstellt werden. Codegen verarbeitet automatisch beide Optionen.

// react-native.config.js — neue Architektur aktivieren
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Es wird empfohlen, die Migration mit Modulen zu beginnen, die am häufigsten aus JavaScript aufgerufen werden — sie erhalten den größten Leistungsschub. Module, die selten aufgerufen werden (einmal pro Sitzung), können ohne wesentlichen Leistungsverlust auf Bridge belassen werden.

• Codegen — verwenden Sie TypeScript-Spezifikationen zur automatischen Generierung nativer Schnittstellen.
• E2E-Tests — überprüfen Sie die Modularbeit auf beiden Architekturen, besonders nach React Native Updates.
• Rückfallplan — bei Problemen mit Turbo Module können Sie vorübergehend über ein Konfigurationsflag zu Bridge zurückkehren.