Turbo Module en React Native — qué es, cómo funciona JSI y la arquitectura

¿Qué es Turbo Module?

Turbo Module es un componente de la nueva arquitectura de React Native que reemplaza el Bridge clásico para la comunicación entre JavaScript y el código nativo. A diferencia de Bridge, donde cada mensaje se serializa en JSON y se transmite de forma asíncrona, Turbo Module utiliza JSI — una capa que permite a JavaScript llamar directamente a funciones escritas en C++.

La arquitectura Turbo Module fue presentada por el equipo de Meta en React Conf 2021 como parte de una reestructuración más grande de React Native bajo el nombre clave «The New Architecture». Además de Turbo Module, la nueva arquitectura incluye Fabric (nuevo renderizador), Codegen (generador de código) y JSI (interfaz de interacción). Juntos, estos componentes resuelven problemas de rendimiento que se habían acumulado en React Native desde 2015.

Turbo Module resuelve tres problemas clave de los módulos nativos clásicos: asincronía (todas las llamadas pasan por una cola), serialización (cada llamada requiere transformación JSON) y carga (todos los módulos se inicializan al iniciar la aplicación). Con Turbo Module, los métodos nativos se llaman de forma síncrona, los datos se transfieren sin copia y los módulos se cargan bajo demanda.

Cómo funciona JSI

JSI (JavaScript Interface) es una API de C++ que crea una capa entre el motor de JavaScript (Hermes o JSC) y el código nativo. JSI proporciona objetos host — objetos de C++ que se ven como objetos y métodos JavaScript normales. Cuando JavaScript llama a un método de dicho objeto, JSI ejecuta directamente el código C++ correspondiente sin serialización y sin cambio de hilo.

La diferencia clave entre JSI y Bridge es la ausencia de copia de datos. En Bridge, cada valor se serializa en una cadena JSON, se pasa a través de una cola y se deserializa. JSI pasa punteros a los datos en memoria, lo que permite trabajar con grandes volúmenes de datos sin pérdida de rendimiento. Según las pruebas de Meta, las llamadas JSI se ejecutan de 5 a 10 veces más rápido que las llamadas equivalentes a través de Bridge.

HostObject y llamadas síncronas

JSI define la interfaz HostObject — una clase de C++ que React Native registra en el entorno JS como un objeto normal. Cuando el código JS accede a una propiedad o llama a un método de HostObject, JSI intercepta la llamada y ejecuta el código C++. Esto permite realizar operaciones de forma síncrona sin esperar la cola de Bridge.

// Ejemplo de JSI HostObject — llamada nativa síncrona
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();
    }
};

El código anterior demuestra cómo JSI HostObject maneja la llamada compressImage desde JavaScript. La función toma dos argumentos (una cadena de ruta y un número de calidad), llama a la función nativa compressNative y devuelve el resultado — todo de forma síncrona, sin Bridge, sin JSON. Esta es la ventaja clave de JSI sobre la arquitectura clásica.

JSI es parte del tiempo de ejecución principal de React Native y no depende de un motor JavaScript específico. Funciona tanto con Hermes como con JavaScriptCore (JSC), proporcionando una interfaz unificada para la interacción con el entorno nativo.

Turbo Module vs Bridge: comparación

La comparación de Turbo Module y Bridge muestra la evolución de la arquitectura de React Native. Bridge fue diseñado para el lanzamiento rápido de React Native en 2015, pero con el crecimiento de la complejidad de las aplicaciones, sus limitaciones se volvieron críticas. Turbo Module resuelve estos problemas a nivel de arquitectura.

En la práctica, la diferencia es más notable con llamadas frecuentes a métodos nativos — por ejemplo, al procesar medios o trabajar con GPU. Para llamadas poco frecuentes (una vez por sesión), la diferencia de rendimiento es insignificante. Turbo Module también simplifica el trabajo con grandes datos binarios — imágenes, videos, protocolos binarios — que en Bridge requerían soluciones alternativas con el sistema de archivos.

Ejemplo de creación de Turbo Module

La creación de un Turbo Module comienza con la definición de una especificación en TypeScript. Codegen genera automáticamente interfaces C++ y stubs Objective-C/Java basados en esta especificación. Esto cambia completamente el enfoque de desarrollo — el desarrollador describe la API una vez y Codegen crea todo lo demás.

// ImageCompressor.ts — especificación de 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>;
}

Generación de código mediante Codegen

Codegen analiza la especificación TypeScript y genera el HostObject C++, el protocolo Objective-C y la interfaz Java. Al desarrollador solo le queda implementar la lógica nativa. Este enfoque garantiza que los tipos en JavaScript y en el lado nativo siempre coincidan, eliminando errores de mapeo manual.

// Implementación de TurboModule para iOS (stub generado)
@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

Una ventaja importante es la carga diferida. Turbo Module no se inicializa al iniciar la aplicación, sino que se crea solo al primer acceso desde JavaScript. Esto reduce el tiempo de inicio de la aplicación en un 30–50% en comparación con el enfoque clásico donde todos los módulos nativos se cargan inmediatamente.

Migración de Bridge a Turbo Module

La transición de Bridge a Turbo Module no requiere reescribir completamente la aplicación. React Native 0.73+ admite ambas arquitecturas en paralelo — los módulos Bridge continúan funcionando y los nuevos módulos se pueden crear como Turbo Module. Esto permite migrar gradualmente, módulo por módulo.

Para habilitar la nueva arquitectura en un proyecto React Native 0.76+, establezca el indicador newArchEnabled en true en el archivo react-native.config.js. Después de eso, todos los módulos nativos existentes continúan funcionando a través de Bridge y los nuevos módulos se pueden crear como Turbo Module. Codegen maneja automáticamente ambas opciones.

// react-native.config.js — habilitar nueva arquitectura
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Se recomienda comenzar la migración con los módulos que se llaman con más frecuencia desde JavaScript — ellos obtendrán el mayor aumento de rendimiento. Los módulos que se llaman raramente (una vez por sesión) se pueden dejar en Bridge sin una pérdida significativa de rendimiento.

• Codegen — use especificaciones TypeScript para la generación automática de interfaces nativas.
• Pruebas E2E — verifique el funcionamiento de los módulos en ambas arquitecturas, especialmente después de actualizar React Native.
• Plan de respaldo — si surgen problemas con Turbo Module, puede volver temporalmente a Bridge mediante un indicador de configuración.