Turbo Module у React Native — шта је то, како ради JSI и архитектура

Шта је Turbo Module?

Turbo Module је компонента нове архитектуре React Native-а која замењује класични Bridge за интеракцију JavaScript-а са изворним кодом. За разлику од Bridge-а, где се свака порука серијализује у JSON и шаље асинхроно, Turbo Module користи JSI — слој који омогућава JavaScript-у да директно позива функције написане у C++-у.

Архитектура Turbo Module-а представљена је од стране тима Meta на React Conf 2021 као део већег преуређења React Native-а под кодним називом „The New Architecture“. Поред Turbo Module-а, нова архитектура укључује Fabric (нови рендерер), Codegen (генератор кода) и JSI (интерфејс за комуникацију). Заједно, ове компоненте решавају проблеме перформанси који су се нагомилавали у React Native-у од 2015. године.

Turbo Module решава три кључна проблема класичних изворних модула: асинхроност (сви позиви иду кроз ред), серијализацију (сваки позив захтева JSON конверзију) и учитавање (сви модули се иницијализују при покретању апликације). Са Turbo Module-ом, изворни методи се позивају синхроно, подаци се преносе без копирања, а модули се учитавају на захтев.

Како ради JSI

JSI (JavaScript Interface) је C++ API који ствара слој између JavaScript мотора (Hermes или JSC) и изворног кода. JSI обезбеђује хост објекте — C++ објекте који изгледају као обични JavaScript објекти и методи. Када JavaScript позове метод таквог објекта, JSI директно извршава одговарајући C++ код без серијализације и без пребацивања између нити.

Кључна разлика између JSI-ја и Bridge-а — одсуство копирања података. У Bridge-у, свака вредност се серијализује у JSON, шаље кроз ред и десеријализује. JSI преноси показиваче на податке у меморији, што омогућава рад са великим количинама података без губитка перформанси. Према тестовима Meta-е, JSI позиви су 5–10 пута бржи од аналогних позива кроз Bridge.

HostObject и синхрони позиви

JSI дефинише интерфејс HostObject — C++ класу коју React Native региструје у JS окружењу као обичан објекат. Када JS код приступи својству или позове метод HostObject-а, JSI пресреће позив и извршава C++ код. То омогућава извођење операција синхроно, без чекања на ред Bridge-а.

// JSI HostObject пример — синхрони изворни позив
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();
    }
};

Горњи код показује како JSI HostObject обрађује позив compressImage из JavaScript-а. Функција прима два аргумента (путању и квалитет), позива изворну функцију compressNative и враћа резултат — све синхроно, без Bridge-а, без JSON-а. Ово је кључна предност JSI-ја у односу на класичну архитектуру.

JSI је део главног runtime-а React Native-а и не зависи од конкретног JavaScript мотора. Ради и са Hermes-ом и са JavaScriptCore (JSC), пружајући јединствени интерфејс за комуникацију са изворним окружењем.

Turbo Module vs Bridge: поређење

Поређење Turbo Module-а и Bridge-а показује еволуцију архитектуре React Native-а. Bridge је дизајниран за брзо покретање React Native-а 2015. године, али како је сложеност апликација расла, његова ограничења су постала критична. Turbo Module решава ове проблеме на нивоу архитектуре.

У пракси, разлика је најприметнија код честих позива изворних метода — на пример, при обради медија или раду са GPU-ом. За ретке позиве (једном по сесији), разлика у перформансама је занемарљива. Turbo Module такође поједностављује рад са великим бинарним подацима — сликама, видеом, бинарним протоколима — који су у Bridge-у захтевали додатна решења са системом датотека.

Пример креирања Turbo Module-а

Креирање Turbo Module-а почиње дефинисањем спецификације у TypeScript-у. Codegen аутоматски генерише C++ интерфејсе и Objective-C/Java заглушке на основу ове спецификације. Ово потпуно мења приступ развоју — програмер једном опише API, а Codegen креира све остало.

// ImageCompressor.ts — спецификација 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>;
}

Генерисање кода путем Codegen-а

Codegen анализира TypeScript спецификацију и генерише C++ HostObject, Objective-C протокол и Java интерфејс. Програмеру остаје само да имплементира изворну логику. Овај приступ гарантује да се типови на JavaScript и изворној страни увек поклапају, елиминишући грешке ручног мапирања.

// Имплементација TurboModule-а за iOS (генерисани заглушак)
@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

Важна предност — лењо учитавање. Turbo Module се не иницијализује при покретању апликације, већ се креира тек при првом приступу из JavaScript-а. Ово скраћује време покретања апликације за 30–50% у поређењу са класичним приступом где се сви изворни модули учитавају одмах.

Миграција са Bridge-а на Turbo Module

Прелазак са Bridge-а на Turbo Module не захтева потпуно преписивање апликације. React Native 0.73+ подржава обе архитектуре паралелно — Bridge модули настављају да раде, а нови модули се могу креирати као Turbo Module. Ово омогућава постепену миграцију, модул по модул.

Да бисте укључили нову архитектуру у пројекту React Native 0.76+, поставите флаг newArchEnabled на true у датотеци react-native.config.js. Након тога, сви постојећи изворни модули настављају да раде кроз Bridge, а нови модули се могу креирати као Turbo Module. Codegen аутоматски обрађује обе варијанте.

// react-native.config.js — укључи нову архитектуру
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Препоручује се започињање миграције са модулима који се најчешће позивају из JavaScript-а — они ће добити највећи пораст перформанси. Модули који се ретко позивају (једном по сесији) могу остати на Bridge-у без значајног губитка перформанси.

• Codegen — користите TypeScript спецификације за аутоматско генерисање изворних интерфејса.
• E2E тестови — проверавајте рад модула на обе архитектуре, посебно након ажурирања React Native-а.
• Резервни план — у случају проблема са Turbo Module-ом, можете се привремено вратити на Bridge преко конфигурационог флага.