Turbo Module in React Native — wat is het, hoe werkt JSI en architectuur

Wat is Turbo Module?

Turbo Module is een component van de nieuwe React Native-architectuur die de klassieke Bridge vervangt voor interactie tussen JavaScript en native code. In tegenstelling tot Bridge, waar elk bericht in JSON wordt geserialiseerd en asynchroon wordt verzonden, gebruikt Turbo Module JSI — een tussenlaag die JavaScript toestaat direct functies aan te roepen die in C++ zijn geschreven.

De Turbo Module-architectuur werd door het Meta-team gepresenteerd op React Conf 2021 als onderdeel van een grootschalige herziening van React Native onder de codenaam „The New Architecture“. Naast Turbo Module omvat de nieuwe architectuur Fabric (nieuwe renderer), Codegen (codegenerator) en JSI (communicatie-interface). Samen lossen deze componenten de prestatieproblemen op die zich sinds 2015 in React Native hebben opgestapeld.

Turbo Module lost drie belangrijke problemen van klassieke Native Modules op: asynchroniteit (alle aanroepen gaan via een wachtrij), serialisatie (elke aanroep vereist JSON-conversie) en laden (alle modules worden geïnitialiseerd bij het starten van de app). Met Turbo Module worden native methoden synchroon aangeroepen, worden gegevens zonder kopiëren overgedragen en worden modules op aanvraag geladen.

Hoe werkt JSI

JSI (JavaScript Interface) is een C++ API die een tussenlaag creëert tussen de JavaScript-engine (Hermes of JSC) en native code. JSI biedt host-objecten — C++-objecten die eruitzien als gewone JavaScript-objecten en -methoden. Wanneer JavaScript een methode van zo'n object aanroept, voert JSI direct de bijbehorende C++-code uit zonder serialisatie en zonder thread-switching.

Het belangrijkste verschil tussen JSI en Bridge is het ontbreken van datakopiëring. In Bridge wordt elke waarde naar JSON geserialiseerd, via een wachtrij verzonden en gedeserialiseerd. JSI geeft pointers naar gegevens in het geheugen door, waardoor grote hoeveelheden gegevens kunnen worden verwerkt zonder prestatieverlies. Volgens Meta's tests zijn JSI-aanroepen 5–10 keer sneller dan vergelijkbare aanroepen via Bridge.

HostObject en synchrone aanroepen

JSI definieert de interface HostObject — een C++-klasse die React Native in de JS-omgeving registreert als een gewoon object. Wanneer JS-code een eigenschap van HostObject benadert of een methode aanroept, onderschept JSI de aanroep en voert de C++-code uit. Dit maakt synchrone bewerkingen mogelijk, zonder te wachten op de Bridge-wachtrij.

// JSI HostObject-voorbeeld — synchrone native aanroep
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();
    }
};

Bovenstaande code laat zien hoe JSI HostObject de aanroep van compressImage vanuit JavaScript verwerkt. De functie ontvangt twee argumenten (padstring en kwaliteitsnummer), roept de native functie compressNative aan en retourneert het resultaat — alles synchroon, zonder Bridge, zonder JSON. Dit is het belangrijkste voordeel van JSI ten opzichte van de klassieke architectuur.

JSI maakt deel uit van de hoofdruntime van React Native en is onafhankelijk van de specifieke JavaScript-engine. Het werkt zowel met Hermes als met JavaScriptCore (JSC) en biedt een uniforme interface voor communicatie met de native omgeving.

Turbo Module vs Bridge: vergelijking

De vergelijking tussen Turbo Module en Bridge toont de evolutie van de React Native-architectuur. Bridge is ontworpen voor de snelle lancering van React Native in 2015, maar naarmate de complexiteit van apps toenam, werden de beperkingen ervan kritiek. Turbo Module lost deze problemen op architectuurniveau op.

In de praktijk is het verschil het meest merkbaar bij frequente aanroepen van native methoden — bijvoorbeeld bij mediaverwerking of werken met GPU. Voor zeldzame aanroepen (eenmaal per sessie) is het prestatieverschil verwaarloosbaar. Turbo Module vereenvoudigt ook het werken met grote binaire gegevens — afbeeldingen, video's, binaire protocollen — die in Bridge oplossingen met het bestandssysteem vereisten.

Voorbeeld van het maken van een Turbo Module

Het maken van een Turbo Module begint met het definiëren van een specificatie in TypeScript. Codegen genereert automatisch C++-interfaces en Objective-C/Java-stubs op basis van deze specificatie. Dit verandert de ontwikkelingsaanpak volledig — de ontwikkelaar beschrijft de API eenmalig en Codegen creëert de rest.

// ImageCompressor.ts — Turbo Module-specificatie
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>;
}

Codegeneratie via Codegen

Codegen analyseert de TypeScript-specificatie en genereert C++ HostObject, Objective-C-protocol en Java-interface. De ontwikkelaar hoeft alleen de native logica te implementeren. Deze aanpak garandeert dat de types aan zowel de JavaScript- als de native kant altijd overeenkomen, waardoor fouten door handmatige mapping worden geëlimineerd.

// TurboModule-implementatie voor iOS (gegenereerde 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

Een belangrijk voordeel is lazy loading. Turbo Module wordt niet geïnitialiseerd bij het starten van de app, maar pas bij de eerste toegang vanuit JavaScript. Dit verkort de opstarttijd van de app met 30–50% in vergelijking met de klassieke aanpak waarbij alle native modules onmiddellijk worden geladen.

Migratie van Bridge naar Turbo Module

De overstap van Bridge naar Turbo Module vereist geen volledige herschrijving van de app. React Native 0.73+ ondersteunt beide architecturen parallel — Bridge-modules blijven werken en nieuwe modules kunnen als Turbo Module worden gemaakt. Dit maakt geleidelijke migratie mogelijk, module voor module.

Om de nieuwe architectuur in een React Native 0.76+-project in te schakelen, stelt u de vlag newArchEnabled in op true in het bestand react-native.config.js. Daarna blijven alle bestaande native modules via Bridge werken en kunnen nieuwe modules als Turbo Module worden gemaakt. Codegen verwerkt automatisch beide varianten.

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

Het wordt aanbevolen de migratie te beginnen met modules die het vaakst vanuit JavaScript worden aangeroepen — zij zullen de grootste prestatieverbetering krijgen. Modules die zelden worden aangeroepen (eenmaal per sessie) kunnen zonder significant prestatieverlies op Bridge blijven.

• Codegen — gebruik TypeScript-specificaties voor automatische generatie van native interfaces.
• E2E-tests — controleer de werking van modules op beide architecturen, vooral na een React Native-update.
• Back-upplan — bij problemen met Turbo Module kunt u tijdelijk terugkeren naar Bridge via een configuratievlag.