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 вирішує три ключові проблеми класичних Native 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 є частиною головного рантайму React Native і не залежить від конкретного JavaScript-двигуна. Він працює як з Hermes, так і з JavaScriptCore (JSC), надаючи єдиний інтерфейс для взаємодії з нативним середовищем.

Turbo Module vs Bridge: порівняння

Порівняння Turbo Module та Bridge показує еволюцію архітектури React Native. Bridge був розроблений для швидкого запуску React Native у 2015 році, але зі зростанням складності додатків його обмеження стали критичними. Turbo Module вирішує ці проблеми на рівні архітектури.

На практиці різниця найбільш помітна при частих викликах нативних методів — наприклад, при обробці медіа або роботі з GPU. Для рідкісних викликів (один раз за сесію) різниця в продуктивності несуттєва. Турбо Модуль також спрощує роботу з великими бінарними даними — зображеннями, відео, бінарними протоколами — які в 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% порівняно з класичним підходом, де всі Native Module завантажуються одразу.

Міграція з Bridge на Turbo Module

Перехід з Bridge на Turbo Module не вимагає повного переписування додатку. React Native 0.73+ підтримує обидві архітектури паралельно — модулі Bridge продовжують працювати, а нові модулі можна створювати як Turbo Module. Це дозволяє мігрувати поступово, модуль за модулем.

Для включення нової архітектури в проекті React Native 0.76+ встановіть прапорець newArchEnabled у true у файлі react-native.config.js. Після цього всі існуючі Native Module продовжують працювати через 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 через прапорець конфігурації.