Hermes: características y optimización para React Native

¿Qué es Hermes?

Hermes es un motor JavaScript compacto creado por el equipo de Meta específicamente para React Native. Se anunció en 2019 como alternativa a JavaScriptCore (JSC), que se usaba por defecto en React Native. El objetivo principal de Hermes es proporcionar el inicio más rápido posible para aplicaciones móviles, especialmente en Android con recursos limitados.

La característica clave de Hermes es la compilación anticipada (AOT — Ahead-of-Time). A diferencia de los motores JS tradicionales que compilan código en tiempo de ejecución (JIT — Just-in-Time), Hermes compila JavaScript en bytecode durante la fase de compilación de la app. Esto significa que no se realiza compilación en el dispositivo: el bytecode se ejecuta inmediatamente por la máquina virtual de Hermes.

Hermes no es un motor JS universal: está optimizado exclusivamente para escenarios de React Native. Carece de funcionalidades no necesarias en el desarrollo móvil: eval, generadores y algunas características de ES6. Esto permite que el motor sea más compacto y rápido. Según Meta, el tamaño de Hermes es de aproximadamente 200–300 KB comprimido, significativamente menor que JSC (unos 2–3 MB).

Arquitectura de Hermes y bytecode

La arquitectura de Hermes se diferencia de los motores JS tradicionales por carecer de compilador JIT. En su lugar, Hermes utiliza una máquina virtual (VM) eficiente que ejecuta bytecode precompilado. Abandonar JIT proporciona tres ventajas clave: rendimiento predecible, menor consumo de memoria y reducción del tiempo de inicio.

El bytecode de Hermes es una representación compacta del código JavaScript optimizada para una ejecución rápida. Durante la fase de compilación (a través de Metro), los archivos JavaScript se compilan en archivos .hbc (Hermes Bytecode). La app carga estos archivos y la VM de Hermes los ejecuta sin compilación adicional. El proceso de compilación se integra en Metro mediante el plugin hermes-transformer.

Etapas del procesamiento de código

El flujo de procesamiento de JavaScript en Hermes consta de tres etapas: Parse — análisis sintáctico del código fuente, Compile — traducción a bytecode, Execute — ejecución del bytecode por la máquina virtual. Las dos primeras etapas se ejecutan durante la fase de compilación, la tercera en el dispositivo. Esto es fundamentalmente diferente de JSC, donde las tres etapas se ejecutan en el dispositivo.

# Compilación de bytecode de Hermes durante la compilación
hermes -emit-binary -out index.hbc index.js

# Verificar el tamaño del bytecode generado
ls -lh index.hbc

# Mostrar estadísticas de bytecode
hermes -dump-bytecode index.hbc

# Optimizar bytecode para producción
hermes -O index.js -emit-binary -O target.hbc

Después de la compilación, todos los archivos .hbc se empaquetan en APK o IPA junto con el código nativo. Cuando la app se inicia, la VM de Hermes carga el bytecode y comienza la ejecución casi al instante: no se necesita tiempo de calentamiento JIT, típico de V8 y JSC.

Hermes vs JSC: comparativa

Comparar Hermes y JavaScriptCore (JSC) ayuda a entender cuándo elegir cada motor. JSC es un motor JS completo de Apple, utilizado en Safari. Hermes es un motor especializado para React Native. La elección entre ellos depende de las prioridades del proyecto.

Hermes gana en velocidad de inicio y consumo de memoria, pero queda detrás de JSC en rendimiento de cálculos complejos. La compilación JIT de JSC optimiza las rutas de código caliente durante la ejecución, lo que le da ventaja en operaciones intensivas de CPU. Para una app típica de React Native, donde las actualizaciones de UI y la navegación constituyen la carga de trabajo principal, Hermes proporciona una mejor experiencia de usuario gracias a su inicio rápido.

Optimizaciones de Hermes para React Native

Hermes incluye varias optimizaciones específicas para React Native. La principal es la integración con JSI (JavaScript Interface). Hermes soporta JSI de forma nativa, permitiendo usar la nueva arquitectura de React Native (Fabric + Turbo Modules) sin capas adicionales. Esto convierte a Hermes y la nueva arquitectura en el par ideal para el máximo rendimiento.

Gestión de memoria

Hermes utiliza un recolector de basura generacional (generational GC) optimizado para dispositivos móviles. A diferencia de JSC, donde la recolección de basura puede causar pausas notables en la UI (jank), Hermes realiza GC en pequeñas porciones entre fotogramas, minimizando el impacto en la experiencia del usuario. Según Meta, las pausas de GC en Hermes son 2–3 veces más cortas que en JSC en escenarios típicos de React Native.

Carga perezosa y constantes

Hermes soporta la carga perezosa de módulos: un módulo JavaScript se compila solo cuando realmente se necesita. Esto reduce el tamaño del bytecode y acelera el inicio. Además, Hermes evalúa expresiones constantes en tiempo de compilación, reemplazando llamadas a funciones con valores constantes cuando es posible.

// Ejemplo de optimizaciones específicas de Hermes

// 1. Hermes inlinea expresiones constantes
const TAX_RATE = 0.07;
const price = 100;
// Hermes precalcula: TAX_RATE * price durante la compilación
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes optimiza cadenas de acceso a propiedades
const config = { api: { timeout: 5000 } };
// Hermes almacena en caché el acceso a config.api internamente
const timeout = config.api.timeout;
fetch(url, { timeout });

Es importante destacar que Hermes soporta la depuración a través de Chrome DevTools (a partir de Hermes 0.12). Los desarrolladores pueden usar herramientas familiares: puntos de interrupción, perfilado de memoria, inspección de variables. Esto elimina una de las principales objeciones a Hermes en versiones tempranas, donde la depuración era limitada.

Configuración de Hermes en un proyecto React Native

La configuración de Hermes depende de la versión de React Native. A partir de React Native 0.70, Hermes está habilitado por defecto para nuevos proyectos. Para proyectos creados anteriormente, o al cambiar entre motores, la configuración se realiza a través de los ajustes de compilación.

Configuración para Android

Para Android, Hermes se habilita en el archivo android/app/build.gradle mediante la bandera hermesEnabled. Para iOS, la configuración se realiza en el Podfile mediante la variable :hermes_enabled. Después de cambiar la configuración, es necesario reinstalar los pods y recompilar el proyecto.

// android/app/build.gradle — habilitar Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — habilitar Hermes
hermes_enabled = true
pod 'hermes-engine'

Para verificar que Hermes se está ejecutando en tu app, ejecuta adb logcat | grep Hermes en Android o revisa la consola de Xcode en iOS. Al iniciar la app, Hermes muestra un mensaje como «Hermes VM initialized» o similar. También puedes comprobar globalThis.HermesInternal en el código JavaScript: si Hermes está activo, esta propiedad estará disponible.

// Verificar si Hermes está funcionando
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Motor Hermes activo');
  console.log(
    'Versión:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes no activo (fallback a JSC)');
}