Turbo Module v React Native — co to je, jak funguje JSI a architektura

Co je Turbo Module?

Turbo Module je komponenta nové architektury React Native, která nahrazuje klasický Bridge pro interakci JavaScriptu s nativním kódem. Na rozdíl od Bridge, kde je každá zpráva serializována do JSON a odesílána asynchronně, Turbo Module používá JSI — mezivrstvu, která umožňuje JavaScriptu přímo volat funkce napsané v C++.

Architektura Turbo Module byla představena týmem Meta na React Conf 2021 jako součást rozsáhlejší přestavby React Native pod kódovým označením „The New Architecture“. Kromě Turbo Module zahrnuje nová architektura Fabric (nový renderer), Codegen (generátor kódu) a JSI (komunikační rozhraní). Společně tyto komponenty řeší problémy s výkonem, které se v React Native nahromadily od roku 2015.

Turbo Module řeší tři klíčové problémy klasických nativních modulů: asynchronnost (všechna volání procházejí frontou), serializaci (každé volání vyžaduje JSON konverzi) a načítání (všechny moduly se inicializují při startu aplikace). S Turbo Module jsou nativní metody volány synchronně, data jsou přenášena bez kopírování a moduly se načítají na vyžádání.

Jak funguje JSI

JSI (JavaScript Interface) je C++ API, které vytváří mezivrstvu mezi JavaScript engine (Hermes nebo JSC) a nativním kódem. JSI poskytuje hostitelské objekty — C++ objekty, které vypadají jako běžné JavaScript objekty a metody. Když JavaScript zavolá metodu takového objektu, JSI přímo spustí odpovídající C++ kód bez serializace a bez přepínání vláken.

Klíčový rozdíl mezi JSI a Bridge — absence kopírování dat. V Bridge je každá hodnota serializována do JSON, odeslána přes frontu a deserializována. JSI předává ukazatele na data v paměti, což umožňuje práci s velkými objemy dat bez ztráty výkonu. Podle testů Meta jsou JSI volání 5–10krát rychlejší než analogická volání přes Bridge.

HostObject a synchronní volání

JSI definuje rozhraní HostObject — C++ třídu, kterou React Native registruje v JS prostředí jako běžný objekt. Když JS kód přistoupí k vlastnosti nebo zavolá metodu HostObject, JSI zachytí volání a provede C++ kód. To umožňuje provádět operace synchronně, bez čekání na frontu Bridge.

// Příklad JSI HostObject — synchronní nativní volání
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();
    }
};

Výše uvedený kód ukazuje, jak JSI HostObject zpracovává volání compressImage z JavaScriptu. Funkce přijímá dva argumenty (cestu a kvalitu), volá nativní funkci compressNative a vrací výsledek — vše synchronně, bez Bridge, bez JSON. To je klíčová výhoda JSI oproti klasické architektuře.

JSI je součástí hlavního běhového prostředí React Native a nezávisí na konkrétním JavaScript engine. Funguje jak s Hermes, tak s JavaScriptCore (JSC) a poskytuje jednotné rozhraní pro komunikaci s nativním prostředím.

Turbo Module vs Bridge: srovnání

Srovnání Turbo Module a Bridge ukazuje evoluci architektury React Native. Bridge byl navržen pro rychlé spuštění React Native v roce 2015, ale s rostoucí složitostí aplikací se jeho omezení stala kritickými. Turbo Module tyto problémy řeší na úrovni architektury.

V praxi je rozdíl nejvíce patrný při častých voláních nativních metod — například při zpracování médií nebo práci s GPU. Pro vzácná volání (jednou za relaci) je rozdíl ve výkonu zanedbatelný. Turbo Module také zjednodušuje práci s velkými binárními daty — obrázky, videy, binárními protokoly — které v Bridge vyžadovaly řešení se souborovým systémem.

Příklad vytvoření Turbo Module

Vytvoření Turbo Module začíná definicí specifikace v TypeScript. Codegen automaticky generuje C++ rozhraní a Objective-C/Java stuby na základě této specifikace. To zcela mění přístup k vývoji — vývojář popíše API jednou a Codegen vytvoří zbytek.

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

Generování kódu pomocí Codegen

Codegen analyzuje TypeScript specifikaci a generuje C++ HostObject, Objective-C protokol a Java rozhraní. Vývojáři zbývá pouze implementovat nativní logiku. Tento přístup zaručuje, že typy na JavaScript a nativní straně vždy souhlasí, čímž eliminuje chyby ručního mapování.

// Implementace TurboModule pro iOS (generovaný 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

Důležitá výhoda — líné načítání. Turbo Module se neinicializuje při spuštění aplikace, ale vytváří se až při prvním přístupu z JavaScriptu. To zkracuje dobu spouštění aplikace o 30–50% ve srovnání s klasickým přístupem, kde se všechny nativní moduly načítají okamžitě.

Migrace z Bridge na Turbo Module

Přechod z Bridge na Turbo Module nevyžaduje úplné přepsání aplikace. React Native 0.73+ podporuje obě architektury paralelně — Bridge moduly nadále fungují a nové moduly lze vytvářet jako Turbo Module. To umožňuje postupnou migraci, modul po modulu.

Pro povolení nové architektury v projektu React Native 0.76+ nastavte příznak newArchEnabled na true v souboru react-native.config.js. Poté všechny stávající nativní moduly nadále fungují přes Bridge a nové moduly mohou být vytvářeny jako Turbo Module. Codegen automaticky zpracovává obě varianty.

// react-native.config.js — povolení nové architektury
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Doporučuje se začít migraci s moduly, které jsou nejčastěji volány z JavaScriptu — ty získají největší nárůst výkonu. Moduly volané zřídka (jednou za relaci) lze ponechat na Bridge bez výrazné ztráty výkonu.

• Codegen — používejte TypeScript specifikace pro automatické generování nativních rozhraní.
• E2E testy — kontrolujte fungování modulů na obou architekturách, zejména po aktualizaci React Native.
• Záložní plán — při problémech s Turbo Module se můžete dočasně vrátit k Bridge přes konfigurační příznak.