Turbo Module i React Native — vad är det, hur JSI fungerar och arkitektur

Vad är Turbo Module?

Turbo Module är en komponent i den nya React Native-arkitekturen som ersätter den klassiska Bridge för interaktion mellan JavaScript och native-kod. Till skillnad från Bridge, där varje meddelande serialiseras till JSON och skickas asynkront, använder Turbo Module JSI — ett mellanlager som gör att JavaScript direkt kan anropa funktioner skrivna i C++.

Turbo Module-arkitekturen presenterades av Meta-teamet på React Conf 2021 som en del av en större ombyggnad av React Native under kodnamnet “The New Architecture”. Förutom Turbo Module innehåller den nya arkitekturen Fabric (ny renderare), Codegen (kodgenerator) och JSI (kommunikationsgränssnitt). Tillsammans löser dessa komponenter de prestandaproblem som ackumulerats i React Native sedan 2015.

Turbo Module löser tre viktiga problem med klassiska native-moduler: asynkronicitet (alla anrop går via kö), serialisering (varje anrop kräver JSON-konvertering) och laddning (alla moduler initieras vid appstart). Med Turbo Module anropas native-metoder synkront, data överförs utan kopiering och moduler laddas på begäran.

Hur JSI fungerar

JSI (JavaScript Interface) är ett C++ API som skapar ett mellanlager mellan JavaScript-motorn (Hermes eller JSC) och native-kod. JSI tillhandahåller värdobjekt — C++-objekt som ser ut som vanliga JavaScript-objekt och -metoder. När JavaScript anropar en metod på ett sådant objekt kör JSI direkt motsvarande C++-kod utan serialisering och utan trådväxling.

Den viktigaste skillnaden mellan JSI och Bridge är avsaknaden av datakopiering. I Bridge serialiseras varje värde till JSON, skickas via en kö och deserialiseras. JSI skickar pekare till data i minnet, vilket gör det möjligt att arbeta med stora datamängder utan prestandaförlust. Enligt Metas tester är JSI-anrop 5–10 gånger snabbare än motsvarande anrop via Bridge.

HostObject och synkrona anrop

JSI definierar gränssnittet HostObject — en C++-klass som React Native registrerar i JS-miljön som ett vanligt objekt. När JS-kod kommer åt en egenskap eller anropar en metod på HostObject fångar JSI upp anropet och kör C++-koden. Detta gör att operationer kan utföras synkront, utan att vänta på Bridge-kön.

// JSI HostObject-exempel — synkront native-anrop
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();
    }
};

Koden ovan visar hur JSI HostObject hanterar anropet compressImage från JavaScript. Funktionen tar två argument (sökväg och kvalitet), anropar den inbyggda funktionen compressNative och returnerar resultatet — allt synkront, utan Bridge, utan JSON. Detta är JSI:s viktigaste fördel jämfört med den klassiska arkitekturen.

JSI är en del av huvudruntime för React Native och är oberoende av specifik JavaScript-motor. Det fungerar både med Hermes och JavaScriptCore (JSC) och tillhandahåller ett enhetligt gränssnitt för kommunikation med den inbyggda miljön.

Turbo Module vs Bridge: jämförelse

Jämförelsen mellan Turbo Module och Bridge visar utvecklingen av React Native-arkitekturen. Bridge designades för snabb lansering av React Native 2015, men när applikationernas komplexitet ökade blev dess begränsningar kritiska. Turbo Module löser dessa problem på arkitekturnivå.

I praktiken är skillnaden mest märkbar vid frekventa anrop av native-metoder — till exempel vid mediebehandling eller arbete med GPU. För sällsynta anrop (en gång per session) är prestandaskillnaden försumbar. Turbo Module förenklar också arbetet med stora binära data — bilder, videor, binära protokoll — som i Bridge krävde lösningar med filsystemet.

Exempel på att skapa Turbo Module

Att skapa en Turbo Module börjar med att definiera en specifikation i TypeScript. Codegen genererar automatiskt C++-gränssnitt och Objective-C/Java-stubbar baserat på denna specifikation. Detta förändrar utvecklingsmetoden helt — utvecklaren beskriver API:et en gång och Codegen skapar resten.

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

Kodgenerering via Codegen

Codegen analyserar TypeScript-specifikationen och genererar C++ HostObject, Objective-C-protokoll och Java-gränssnitt. Utvecklaren behöver bara implementera den inbyggda logiken. Detta tillvägagångssätt garanterar att typerna på JavaScript- och nativen alltid stämmer överens, vilket eliminerar fel vid manuell mappning.

// TurboModule-implementering för iOS (genererad 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

En viktig fördel — lazy loading. Turbo Module initieras inte vid appstart, utan skapas först vid första åtkomst från JavaScript. Detta minskar appens starttid med 30–50% jämfört med den klassiska metoden där alla native-moduler laddas omedelbart.

Migrering från Bridge till Turbo Module

Övergången från Bridge till Turbo Module kräver inte en fullständig omskrivning av appen. React Native 0.73+ stöder båda arkitekturerna parallellt — Bridge-moduler fortsätter att fungera och nya moduler kan skapas som Turbo Module. Detta möjliggör gradvis migrering, modul för modul.

För att aktivera den nya arkitekturen i ett React Native 0.76+-projekt, sätt flaggan newArchEnabled till true i filen react-native.config.js. Därefter fortsätter alla befintliga native-moduler att fungera via Bridge och nya moduler kan skapas som Turbo Module. Codegen bearbetar automatiskt båda varianterna.

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

Det rekommenderas att börja migreringen med moduler som anropas oftast från JavaScript — de kommer att få den största prestandaökningen. Moduler som anropas sällan (en gång per session) kan lämnas på Bridge utan betydande prestandaförlust.

• Codegen — använd TypeScript-specifikationer för automatisk generering av native-gränssnitt.
• E2E-tester — kontrollera modulernas funktion på båda arkitekturerna, särskilt efter React Native-uppdatering.
• Backup-plan — vid problem med Turbo Module kan du tillfälligt återgå till Bridge via en konfigurationsflagga.