Turbo Module în React Native — ce este, cum funcționează JSI și arhitectura

Ce este Turbo Module?

Turbo Module este o componentă a noii arhitecturi React Native care înlocuiește Bridge-ul clasic pentru interacțiunea JavaScript cu codul nativ. Spre deosebire de Bridge, unde fiecare mesaj este serializat în JSON și transmis asincron, Turbo Module folosește JSI — un strat intermediar care permite JavaScript să apeleze direct funcții scrise în C++.

Arhitectura Turbo Module a fost prezentată de echipa Meta la React Conf 2021 ca parte a unei reconstrucții mai ample a React Native sub numele de cod „The New Architecture”. Pe lângă Turbo Module, noua arhitectură include Fabric (noul renderer), Codegen (generatorul de cod) și JSI (interfața de comunicare). Împreună, aceste componente rezolvă problemele de performanță care s-au acumulat în React Native din 2015.

Turbo Module rezolvă trei probleme cheie ale modulelor native clasice: asincronitatea (toate apelurile trec printr-o coadă), serializarea (fiecare apel necesită conversie JSON) și încărcarea (toate modulele se inițializează la pornirea aplicației). Cu Turbo Module, metodele native sunt apelate sincron, datele sunt transmise fără copiere, iar modulele sunt încărcate la cerere.

Cum funcționează JSI

JSI (JavaScript Interface) este o API în C++ care creează un strat intermediar între motorul JavaScript (Hermes sau JSC) și codul nativ. JSI furnizează obiecte gazdă — obiecte C++ care arată ca obiecte și metode JavaScript obișnuite. Când JavaScript apelează o metodă a unui astfel de obiect, JSI execută direct codul C++ corespunzător fără serializare și fără comutare între fire de execuție.

Diferența cheie dintre JSI și Bridge — absența copierii datelor. În Bridge, fiecare valoare este serializată în JSON, transmisă printr-o coadă și deserializată. JSI transmite pointeri către date în memorie, permițând lucrul cu volume mari de date fără pierdere de performanță. Conform testelor Meta, apelurile JSI sunt de 5–10 ori mai rapide decât apelurile similare prin Bridge.

HostObject și apelurile sincrone

JSI definește interfața HostObject — o clasă C++ pe care React Native o înregistrează în mediul JS ca un obiect obișnuit. Când codul JS accesează o proprietate sau apelează o metodă a HostObject, JSI interceptează apelul și execută codul C++. Acest lucru permite efectuarea operațiunilor sincron, fără a aștepta coada Bridge.

// Exemplu JSI HostObject — apel nativ sincron
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();
    }
};

Codul de mai sus demonstrează cum JSI HostObject procesează apelul compressImage din JavaScript. Funcția primește două argumente (calea și calitatea), apelează funcția nativă compressNative și returnează rezultatul — totul sincron, fără Bridge, fără JSON. Acesta este avantajul cheie al JSI față de arhitectura clasică.

JSI face parte din runtime-ul principal React Native și nu depinde de un motor JavaScript specific. Funcționează atât cu Hermes, cât și cu JavaScriptCore (JSC), oferind o interfață unificată pentru comunicarea cu mediul nativ.

Turbo Module vs Bridge: comparație

Comparația dintre Turbo Module și Bridge arată evoluția arhitecturii React Native. Bridge a fost proiectat pentru lansarea rapidă a React Native în 2015, dar odată cu creșterea complexității aplicațiilor, limitările sale au devenit critice. Turbo Module rezolvă aceste probleme la nivel de arhitectură.

În practică, diferența este cel mai vizibilă la apelurile frecvente ale metodelor native — de exemplu, la procesarea media sau lucrul cu GPU. Pentru apelurile rare (o dată pe sesiune), diferența de performanță este nesemnificativă. Turbo Module simplifică, de asemenea, lucrul cu date binare mari — imagini, video, protocoale binare — care în Bridge necesitau soluții alternative cu sistemul de fișiere.

Exemplu de creare a Turbo Module

Crearea unui Turbo Module începe cu definirea specificației în TypeScript. Codegen generează automat interfețe C++ și stub-uri Objective-C/Java pe baza acestei specificații. Acest lucru schimbă complet abordarea dezvoltării — dezvoltatorul descrie API-ul o dată, iar Codegen creează restul.

// ImageCompressor.ts — specificația 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>;
}

Generarea codului prin Codegen

Codegen analizează specificația TypeScript și generează HostObject C++, protocol Objective-C și interfață Java. Dezvoltatorului îi rămâne doar să implementeze logica nativă. Această abordare garantează că tipurile din JavaScript și din partea nativă coincid întotdeauna, eliminând erorile de mapare manuală.

// Implementare TurboModule pentru iOS (stub generat)
@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

Un avantaj important — încărcarea lazy. Turbo Module nu se inițializează la pornirea aplicației, ci se creează doar la prima accesare din JavaScript. Acest lucru reduce timpul de pornire a aplicației cu 30–50% comparativ cu abordarea clasică, unde toate modulele native sunt încărcate imediat.

Migrarea de la Bridge la Turbo Module

Trecerea de la Bridge la Turbo Module nu necesită rescrierea completă a aplicației. React Native 0.73+ suportă ambele arhitecturi în paralel — modulele Bridge continuă să funcționeze, iar modulele noi pot fi create ca Turbo Module. Acest lucru permite o migrare treptată, modul cu modul.

Pentru a activa noua arhitectură într-un proiect React Native 0.76+, setați flag-ul newArchEnabled la true în fișierul react-native.config.js. După aceasta, toate modulele native existente continuă să funcționeze prin Bridge, iar modulele noi pot fi create ca Turbo Module. Codegen procesează automat ambele variante.

// react-native.config.js — activați noua arhitectură
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Se recomandă începerea migrării cu modulele care sunt cel mai frecvent apelate din JavaScript — ele vor obține cea mai mare creștere de performanță. Modulele apelate rar (o dată pe sesiune) pot rămâne pe Bridge fără o pierdere semnificativă de performanță.

• Codegen — folosiți specificații TypeScript pentru generarea automată a interfețelor native.
• Teste E2E — verificați funcționarea modulelor pe ambele arhitecturi, în special după actualizarea React Native.
• Plan de rezervă — în caz de probleme cu Turbo Module, puteți reveni temporar la Bridge printr-un flag de configurare.