Turbo Module a React Native-ban — mi ez, hogyan működik a JSI és az architektúra

Mi az a Turbo Module?

A Turbo Module a React Native új architektúrájának összetevője, amely a klasszikus Bridge-t helyettesíti a JavaScript és a natív kód közötti interakcióban. A Bridge-től eltérően, ahol minden üzenet JSON-ba szerializálódik és aszinkron módon kerül elküldésre, a Turbo Module a JSI-t használja — egy közbenső réteget, amely lehetővé teszi a JavaScript számára a C++-ban írt függvények közvetlen meghívását.

A Turbo Module architektúrát a Meta csapata mutatta be a React Conf 2021-en, a React Native nagyobb mértékű átalakításának részeként, „The New Architecture“ kódnéven. A Turbo Module mellett az új architektúra tartalmazza a Fabric-ot (új renderelő), a Codegen-t (kódgenerátor) és a JSI-t (kommunikációs interfész). Ezek az összetevők együtt oldják meg a React Native-ban 2015 óta felhalmozódott teljesítményproblémákat.

A Turbo Module három kulcsfontosságú problémát old meg a klasszikus natív modulokkal kapcsolatban: aszinkronitást (minden hívás soron keresztül megy), szerializációt (minden hívás JSON-konverziót igényel) és betöltést (minden modul inicializálódik az alkalmazás indításakor). A Turbo Module segítségével a natív metódusok szinkron módon hívhatók meg, az adatok másolás nélkül kerülnek átvitelre, és a modulok igény szerint töltődnek be.

Hogyan működik a JSI

A JSI (JavaScript Interface) egy C++ API, amely közbenső réteget hoz létre a JavaScript motor (Hermes vagy JSC) és a natív kód között. A JSI host-objektumokat biztosít — C++ objektumokat, amelyek úgy néznek ki, mint a hétköznapi JavaScript objektumok és metódusok. Amikor a JavaScript meghív egy ilyen objektum metódusát, a JSI közvetlenül végrehajtja a megfelelő C++ kódot szerializáció és szálváltás nélkül.

A JSI és a Bridge közötti kulcsfontosságú különbség — az adatmásolás hiánya. A Bridge-ben minden érték JSON-ba szerializálódik, egy soron keresztül kerül elküldésre, majd deszerializálódik. A JSI mutatókat ad át a memóriában lévő adatokhoz, ami lehetővé teszi a nagy adatmennyiségekkel való munkát teljesítményveszteség nélkül. A Meta tesztjei szerint a JSI hívások 5–10-szer gyorsabbak, mint a Bridge-en keresztüli hasonló hívások.

HostObject és szinkron hívások

A JSI meghatározza a HostObject interfészt — egy C++ osztályt, amelyet a React Native egy hétköznapi objektumként regisztrál a JS környezetben. Amikor a JS kód hozzáfér egy HostObject tulajdonságához vagy meghívja annak metódusát, a JSI elfogja a hívást és végrehajtja a C++ kódot. Ez lehetővé teszi a műveletek szinkron végrehajtását, a Bridge sorára való várakozás nélkül.

// JSI HostObject példa — szinkron natív hívás
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();
    }
};

A fenti kód bemutatja, hogyan dolgozza fel a JSI HostObject a compressImage hívást JavaScript-ből. A függvény két argumentumot (útvonal sztring és minőségi szám) fogad, meghívja a compressNative natív függvényt, és visszaadja az eredményt — mindezt szinkronban, Bridge és JSON nélkül. Ez a JSI legfontosabb előnye a klasszikus architektúrával szemben.

A JSI a React Native fő futásidejének része, és nem függ az adott JavaScript motortól. Mind a Hermes-szel, mind a JavaScriptCore-ral (JSC) működik, egységes interfészt biztosítva a natív környezettel való kommunikációhoz.

Turbo Module vs Bridge: összehasonlítás

A Turbo Module és a Bridge összehasonlítása megmutatja a React Native architektúra evolúcióját. A Bridge a React Native gyors elindítására készült 2015-ben, de az alkalmazások összetettségének növekedésével a korlátai kritikussá váltak. A Turbo Module ezeket a problémákat architektúra szinten oldja meg.

A gyakorlatban a különbség a natív metódusok gyakori hívásainál a legszembetűnőbb — például médiafeldolgozásnál vagy GPU-val való munka során. Ritka hívásoknál (munkamenetenként egyszer) a teljesítménykülönbség elhanyagolható. A Turbo Module emellett leegyszerűsíti a nagy bináris adatokkal — képekkel, videókkal, bináris protokollokkal — való munkát, amelyek a Bridge-ben fájlrendszeres megoldásokat igényeltek.

Példa Turbo Module létrehozására

A Turbo Module létrehozása a specifikáció TypeScript-ben történő meghatározásával kezdődik. A Codegen automatikusan generál C++ interfészeket és Objective-C/Java stub-okat a specifikáció alapján. Ez teljesen megváltoztatja a fejlesztési megközelítést — a fejlesztő egyszer leírja az API-t, a Codegen pedig létrehozza a többit.

// ImageCompressor.ts — Turbo Module specifikáció
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>;
}

Kódgenerálás a Codegen segítségével

A Codegen elemzi a TypeScript specifikációt, és C++ HostObject-t, Objective-C protokollt és Java interfészt generál. A fejlesztőnek csak a natív logikát kell implementálnia. Ez a megközelítés garantálja, hogy a típusok a JavaScript és a natív oldalon mindig megegyeznek, kiküszöbölve a kézi leképezés hibáit.

// TurboModule implementáció iOS-re (generált 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

Fontos előny — lusta betöltés. A Turbo Module nem inicializálódik az alkalmazás indításakor, hanem csak az első JavaScript-ből történő hozzáféréskor jön létre. Ez 30–50%-kal csökkenti az alkalmazás indítási idejét a klasszikus megközelítéshez képest, ahol az összes natív modul azonnal betöltődik.

Migráció Bridge-ről Turbo Module-ra

A Bridge-ről Turbo Module-ra való áttérés nem igényli az alkalmazás teljes újraírását. A React Native 0.73+ párhuzamosan támogatja mindkét architektúrát — a Bridge modulok továbbra is működnek, és az új modulok Turbo Module-ként hozhatók létre. Ez lehetővé teszi a fokozatos, modulonkénti migrációt.

Az új architektúra engedélyezéséhez egy React Native 0.76+ projektben állítsa a newArchEnabled jelzőt true értékre a react-native.config.js fájlban. Ezt követően az összes meglévő natív modul továbbra is a Bridge-en keresztül működik, az új modulok pedig Turbo Module-ként hozhatók létre. A Codegen automatikusan feldolgozza mindkét változatot.

// react-native.config.js — új architektúra engedélyezése
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Javasolt a migrációt a JavaScript-ből leggyakrabban hívott modulokkal kezdeni — ezek fogják a legnagyobb teljesítménynövekedést elérni. A ritkán hívott modulok (munkamenetenként egyszer) jelentős teljesítményveszteség nélkül a Bridge-en hagyhatók.

• Codegen — használjon TypeScript specifikációkat a natív interfészek automatikus generálásához.
• E2E tesztek — ellenőrizze a modulok működését mindkét architektúrán, különösen a React Native frissítés után.
• Tartalék terv — ha probléma adódik a Turbo Module-lal, ideiglenesen visszatérhet a Bridge-hez egy konfigurációs jelző segítségével.