Hermes JavaScript: ¿Qué es y cómo funciona?

Hermes JavaScript es una alternativa al motor de JavaScript que viene por defecto en React Native, el cual se llama JavaScriptCore. Hermes fue desarrollado por Facebook y se ha convertido en la opción predeterminada para aplicaciones React Native a partir de la versión 0.64.

En este artículo, profundizaremos en Hermes JavaScript, explicaremos por qué es una opción más rápida y eficiente para aplicaciones móviles, y cómo puedes comenzar a utilizarlo en tus proyectos.

¿Por qué utilizar Hermes JavaScript?

Hermes JavaScript fue diseñado específicamente para aplicaciones móviles, lo que significa que está optimizado para ofrecer un rendimiento excepcional en dispositivos con recursos limitados. El objetivo de Hermes es reducir el tiempo de inicio de la aplicación, el tamaño de la aplicación y la cantidad de memoria utilizada.

Tiempo de inicio de la aplicación

Uno de los principales problemas que enfrentan las aplicaciones móviles es el tiempo de inicio. Si una aplicación tarda demasiado en iniciarse, es probable que los usuarios la abandonen antes de que siquiera tengan la oportunidad de usarla. Con Hermes, el tiempo de inicio se reduce significativamente. En las pruebas realizadas por Facebook, se encontró que el tiempo de inicio de una aplicación React Native con Hermes se redujo en un 20% en comparación con la misma aplicación que utiliza JavaScriptCore.

Tamaño de la aplicación

El tamaño de la aplicación también es un factor importante a considerar, especialmente para usuarios que tienen planes de datos limitados o dispositivos con poco espacio de almacenamiento. Una aplicación más pequeña es más fácil de descargar y ocupa menos espacio en el dispositivo. Hermes es capaz de reducir el tamaño de la aplicación en un 25% en comparación con JavaScriptCore.

Memoria utilizada

Las aplicaciones móviles también tienen una cantidad limitada de memoria disponible, por lo que es importante minimizar la cantidad de memoria utilizada por la aplicación. Hermes es capaz de reducir la cantidad de memoria utilizada por una aplicación React Native en un 35% en comparación con JavaScriptCore.

Rendimiento general

Además de los beneficios específicos mencionados anteriormente, Hermes también es capaz de ofrecer un rendimiento general mejorado para las aplicaciones React Native. En las pruebas realizadas por Facebook, se encontró que las aplicaciones que utilizan Hermes tienen un tiempo de ejecución de JavaScript significativamente más rápido que las aplicaciones que utilizan JavaScriptCore.

¿Cómo funciona Hermes JavaScript?

Hermes es un motor de JavaScript de un solo hilo y sin bloqueo que utiliza un compilador AOT (Ahead of Time) para generar código nativo para dispositivos móviles. El compilador AOT se encarga de transformar el código JavaScript en código nativo de la plataforma en la que se está ejecutando la aplicación, lo que significa que no hay necesidad de interpretar el código en tiempo de ejecución.

La compilación AOT es un proceso de dos pasos. En el primer paso, se analiza el código fuente JavaScript y se genera un grafo de funciones. En el segundo paso, el compilador AOT optimiza el grafo de funciones y lo transforma en código nativo de la plataforma de destino.

Además de la compilación AOT, Hermes también utiliza técnicas de compresión y eliminación de código no utilizado para reducir el tamaño de la aplicación.

Cómo utilizar Hermes JavaScript en tus proyectos

Si estás interesado en utilizar Hermes JavaScript en tus proyectos React Native, hay varios pasos que debes seguir para asegurarte de que tu aplicación esté configurada correctamente para utilizar Hermes.

Paso 1: Asegúrate de tener la versión correcta de React Native

Hermes JavaScript está disponible a partir de la versión 0.64 de React Native. Si estás utilizando una versión anterior, deberás actualizar a la última versión.

Paso 2: Configura tu proyecto para utilizar Hermes

Para configurar tu proyecto para utilizar Hermes, abre el archivo android/app/build.gradle y agrega la siguiente línea dentro del bloque dependencies:

def enableHermes = true
project.ext.react = [
    enableHermes: enableHermes,
]

Para iOS, abre el archivo ios/Podfile y agrega la siguiente línea al final del archivo:

use_frameworks!
config.build_settings['ENABLE_BITCODE'] = 'NO'

Paso 3: Compila tu aplicación utilizando Hermes

Una vez que hayas configurado tu proyecto para utilizar Hermes, puedes compilar tu aplicación utilizando el siguiente comando:

codereact-native run-android --variant=hermesDebug

Para iOS, utiliza el siguiente comando:

codereact-native run-ios --configuration=DebugHERMES

Ten en cuenta que Hermes solo está disponible en modo de depuración en React Native 0.64.0 y versiones posteriores.

Conclusión

Hermes JavaScript es una opción más rápida y eficiente para aplicaciones móviles React Native. Ofrece un tiempo de inicio de aplicación más rápido, un tamaño de aplicación más pequeño y una cantidad reducida de memoria utilizada. Además, Hermes también ofrece un rendimiento general mejorado para las aplicaciones React Native. Si estás interesado en utilizar Hermes en tus proyectos, asegúrate de tener la versión correcta de React Native y sigue los pasos de configuración necesarios para compilar tu aplicación utilizando Hermes.