Turbo Module sa React Native — ano ito, paano gumagana ang JSI at arkitektura

Ano ang Turbo Module?

Turbo Module ay isang bahagi ng bagong arkitektura ng React Native na pumapalit sa klasikong Bridge para sa interaksyon ng JavaScript sa native code. Hindi tulad ng Bridge, kung saan ang bawat mensahe ay serialized sa JSON at ipinapadala nang asynchronous, ang Turbo Module ay gumagamit ng JSI — isang intermediate layer na nagpapahintulot sa JavaScript na direktang tumawag ng mga function na nakasulat sa C++.

Ang arkitektura ng Turbo Module ay ipinakita ng Meta team sa React Conf 2021 bilang bahagi ng mas malawak na muling pagtatayo ng React Native sa ilalim ng code name na “The New Architecture”. Bukod sa Turbo Module, kasama sa bagong arkitektura ang Fabric (bagong renderer), Codegen (code generator), at JSI (communication interface). Sama-sama, ang mga bahaging ito ay lumulutas ng mga problema sa performance na naipon sa React Native mula noong 2015.

Nilulutas ng Turbo Module ang tatlong pangunahing problema ng klasikong Native Module: asynchrony (lahat ng tawag ay dumadaan sa queue), serialization (bawat tawag ay nangangailangan ng JSON conversion), at pag-load (lahat ng module ay sinisimulan sa pagsisimula ng app). Sa Turbo Module, ang mga native method ay tinatawag nang synchronous, ang data ay inililipat nang walang pagkopya, at ang mga module ay nilo-load on demand.

Paano gumagana ang JSI

Ang JSI (JavaScript Interface) ay isang C++ API na lumilikha ng intermediate layer sa pagitan ng JavaScript engine (Hermes o JSC) at native code. Ang JSI ay nagbibigay ng host objects — mga C++ object na mukhang ordinaryong JavaScript object at method. Kapag ang JavaScript ay tumawag ng isang method ng naturang object, direktang isinasagawa ng JSI ang kaukulang C++ code nang walang serialization at walang thread switching.

Ang pangunahing pagkakaiba sa pagitan ng JSI at Bridge ay ang kawalan ng pagkopya ng data. Sa Bridge, ang bawat halaga ay serialized sa JSON, ipinapadala sa pamamagitan ng queue, at deserialized. Ang JSI ay nagpapadala ng mga pointer sa data sa memory, na nagpapahintulot sa pagtatrabaho sa malalaking volume ng data nang walang pagkawala ng performance. Ayon sa mga pagsubok ng Meta, ang JSI calls ay 5–10 beses na mas mabilis kaysa sa mga katulad na tawag sa pamamagitan ng Bridge.

HostObject at synchronous na mga tawag

Ang JSI ay tumutukoy sa interface HostObject — isang C++ class na irinerehistro ng React Native sa JS environment bilang isang ordinaryong object. Kapag ang JS code ay nag-access ng property o tumawag ng method ng HostObject, hinaharang ng JSI ang tawag at isinasagawa ang C++ code. Ito ay nagpapahintulot sa mga operasyon na maisagawa nang synchronous, nang hindi naghihintay sa Bridge queue.

// Halimbawa ng JSI HostObject — synchronous native call
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();
    }
};

Ang code sa itaas ay nagpapakita kung paano pinoproseso ng JSI HostObject ang tawag na compressImage mula sa JavaScript. Ang function ay tumatanggap ng dalawang argumento (path string at quality number), tinatawagan ang native function na compressNative at ibinabalik ang resulta — lahat ay synchronous, walang Bridge, walang JSON. Ito ang pangunahing bentahe ng JSI kumpara sa klasikong arkitektura.

Ang JSI ay bahagi ng pangunahing runtime ng React Native at hindi nakadepende sa partikular na JavaScript engine. Ito ay gumagana sa parehong Hermes at JavaScriptCore (JSC), na nagbibigay ng pinag-isang interface para sa komunikasyon sa native environment.

Turbo Module vs Bridge: paghahambing

Ang paghahambing ng Turbo Module at Bridge ay nagpapakita ng ebolusyon ng arkitektura ng React Native. Ang Bridge ay dinisenyo para sa mabilis na paglunsad ng React Native noong 2015, ngunit sa pagtaas ng pagiging kumplikado ng mga app, ang mga limitasyon nito ay naging kritikal. Nilulutas ng Turbo Module ang mga problemang ito sa antas ng arkitektura.

Sa praktika, ang pagkakaiba ay pinaka-kapansin-pansin sa mga madalas na tawag ng native methods — halimbawa, sa pagproseso ng media o pagtatrabaho sa GPU. Para sa mga bihirang tawag (isang beses bawat session), ang pagkakaiba sa performance ay hindi gaanong mahalaga. Pinapasimple rin ng Turbo Module ang pagtatrabaho sa malalaking binary data — mga imahe, video, binary protocol — na sa Bridge ay nangangailangan ng mga solusyon sa file system.

Halimbawa ng paggawa ng Turbo Module

Ang paggawa ng Turbo Module ay nagsisimula sa pagtukoy ng spec sa TypeScript. Awtomatikong bumubuo ang Codegen ng C++ interfaces at Objective-C/Java stubs batay sa spec na ito. Ito ay ganap na nagbabago sa approach sa development — inilalarawan ng developer ang API nang isang beses, at ang Codegen ang lumilikha ng natitira.

// ImageCompressor.ts — spec ng 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>;
}

Pagbuo ng code sa pamamagitan ng Codegen

Ang Codegen ay nagsusuri ng TypeScript spec at bumubuo ng C++ HostObject, Objective-C protocol, at Java interface. Ang kailangan na lang gawin ng developer ay i-implement ang native logic. Ang approach na ito ay ginagarantiya na ang mga uri sa JavaScript at native side ay laging tugma, na inaalis ang mga error ng manual mapping.

// Implementasyon ng TurboModule para sa iOS (generated 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

Isang mahalagang bentahe — lazy loading. Ang Turbo Module ay hindi sinisimulan sa pagsisimula ng app, kundi nililikha lamang sa unang pag-access mula sa JavaScript. Ito ay nagpapababa ng startup time ng app ng 30–50% kumpara sa klasikong approach kung saan lahat ng native module ay agad na nilo-load.

Paglipat mula Bridge patungong Turbo Module

Ang paglipat mula Bridge patungong Turbo Module ay hindi nangangailangan ng kumpletong muling pagsulat ng app. Ang React Native 0.73+ ay sumusuporta sa parehong arkitektura nang magkasabay — ang Bridge modules ay patuloy na gumagana at ang mga bagong module ay maaaring gawin bilang Turbo Module. Ito ay nagpapahintulot ng unti-unting paglipat, module bawat module.

Upang i-activate ang bagong arkitektura sa isang React Native 0.76+ project, itakda ang flag na newArchEnabled sa true sa react-native.config.js file. Pagkatapos nito, lahat ng umiiral na native module ay patuloy na gumagana sa pamamagitan ng Bridge, at ang mga bagong module ay maaaring gawin bilang Turbo Module. Awtomatikong pinoproseso ng Codegen ang parehong variant.

// react-native.config.js — i-activate ang bagong arkitektura
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Inirerekomenda na simulan ang paglipat sa mga module na pinakamadalas tawagan mula sa JavaScript — sila ang makakakuha ng pinakamalaking pagtaas sa performance. Ang mga module na bihirang tawagan (isang beses bawat session) ay maaaring manatili sa Bridge nang walang makabuluhang pagkawala ng performance.

• Codegen — gumamit ng TypeScript specs para sa awtomatikong pagbuo ng native interfaces.
• E2E tests — suriin ang paggana ng mga module sa parehong arkitektura, lalo na pagkatapos ng React Native update.
• Backup plan — kung may problema sa Turbo Module, maaari kang pansamantalang bumalik sa Bridge sa pamamagitan ng config flag.