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 example — 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();
    }
};

Код выше демонстрирует, как 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 spec
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 implementation for 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

Важное преимущество — ленивая загрузка. 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 — enable new architecture
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Рекомендуется начинать миграцию с модулей, которые чаще всего вызываются из JavaScript — именно они получат наибольший прирост производительности. Модули, вызываемые редко (один раз за сессию), можно оставить на Bridge без значительной потери производительности.

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