La nueva arquitectura

Una de las novedades más destacadas del último año ha sido la adopción gradual de la nueva arquitectura de React Native.

Con el objetivo de mejorar el rendimiento y la capacidad de respuesta de las aplicaciones, el equipo de React Native ha revisado su arquitectura y ha cambiado la forma en que funcionan los módulos y componentes nativos. Si quieres conocer más información sobre por qué migrar a la nueva arquitectura, puedes visitar este enlace enlace.

Los cambios importantes de esta nueva arquitectura son:

• Turbo Modules, que permite una integración eficiente y flexible con código nativo.
• Fabric, que ofrece un mejor rendimiento en el renderizado y consistencia entre las plataformas.
• Codegen, que genera el código C++ compartido entre plataformas.

La nueva arquitectura mantiene los conceptos básicos de React Native. Los módulos nativos son la forma más recomendada de crear bibliotecas que aprovechen las API específicas de cada plataforma, mientras que los componentes nativos son la manera más recomendada de crear componentes de interfaz de usuario reutilizables y ofrecer una experiencia nativa a los usuarios.

La nueva arquitectura supone un gran avance debido a que permite compartir gran parte del código entre Android e iOS y suele tener un impacto muy significativo en el rendimiento.

• Turbo Modules

  Si has trabajado previamente con React Native, es posible que conozcas los módulos nativos (Native Modules), que permiten la comunicación entre código JavaScript y código nativo de la plataforma a través de un puente.

Los Turbo Modules son la evolución de los módulos nativos y utilizan JSI (Javascript Interface) que es un elemento clave en la nueva arquitectura, facilitando la comunicación entre Javascript. Esto permite un aumento significativo del rendimiento, ya que anteriormente la comunicación se realizaba mediante serialización JSON.

• Fabric

  Se trata de un nuevo sistema de renderizado para React Native diseñado para ofrecer experiencias de usuario mejores que no eran posibles con la arquitectura anterior. Gracias a la adición de un motor de renderizado concurrente y JSI, Fabric permite:

• Un rendimiento mejorado y un inicio más rápido de las aplicaciones.

• Una menor serialización de datos entre el código JS y el código nativo.

• Un núcleo C++ compartido entre plataformas.

• Concurrent Render API

  React 18 incluye el tan esperado renderizador concurrente, un mecanismo que le permite preparar varias versiones de la interfaz de usuario al mismo tiempo. Además, el proceso de renderizado se vuelve asincrónico y se puede interrumpir, lo que permite a los desarrolladores ofrecer una experiencia de usuario más fluida.

En versiones anteriores de React Native, esto no era posible debido a que la arquitectura antigua se basaba en la mutación de los árboles nativos, lo que no permitía a React preparar varias versiones del árbol al mismo tiempo.

Para hacer uso de la nueva API de renderizado concurrente, es necesario actualizar el código; por ello, se espera que sean las librerías y los frameworks los primeros en adoptar estas mejoras.

• Automatic batching

  El procesamiento por lotes automático permite a React procesar múltiples cambios de estado en una sola renderización, lo que mejora el rendimiento.

setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
}, 1000);

Por ejemplo, en el siguiente código actualiza dos estados dentro de un setTimeout, en versiones anteriores a React 18 se habrían realizado dos renderizados independientes. Sin embargo, con la nueva versión, React es capaz de agrupar las actualizaciones y reducir el número de renderizados. Esta característica es transparente para el desarrollador, ya que no es necesario hacer cambios en el código.

• Transitions

  Las transiciones son un concepto nuevo en React permite a los desarrolladores marcar ciertos cambios como no urgentes. Esto significa que estos cambios pueden ser interrumpidos por acciones prioritarias, como escribir en un campo de texto o hacer clic en un botón.

Para marcar las actualizaciones de estado como no urgentes, los desarrolladores pueden envolverlas con el nuevo método startTransition como en el siguiente ejemplo:

setInputValue(input);

startTransition(() => {
  setSearchQuery(input);
});

Hermes

Expo ha incluido en su última actualización Hermes por defecto, un motor optimizado para React Native que mejora el tiempo de inicio, reduce el uso de memoria y el tamaño de la aplicación en comparación con JavaScriptCore.

Hermes utiliza un enfoque de compilación anticipada (AOT), lo que significa que el trabajo pesado del motor JavaScript se realiza en tiempo de compilación, en lugar de durante la ejecución. Esto mejora el tiempo de carga de la aplicación y reduce el uso de la memoria. Además, Hermes implementa un sistema de recolección de basura para regular el uso de la memoria y el tamaño de la aplicación se reduce hasta un 30%. Aunque es experimental, su uso es transparente para los usuarios de React Native y es compatible con el depurador de Chrome

En resumen, la última actualización de Expo trae consigo una serie de mejoras significativas en términos de rendimiento y facilidad de desarrollo. Estos cambios son fundamentales para Expo y esperamos que los desarrolladores adopten gradualmente estas novedades para obtener aplicaciones aún mejores.

¡Anímate a probar Expo y sigue leyendo nuestro blog para mantenerte al tanto de las últimas noticias y mejoras!