La nueva arquitectura de React Native

La nueva arquitectura de React Native introduce JSI, Fabric y Turbo Modules, mejorando significativamente la comunicación entre código JavaScript y nativo, eliminando la necesidad del bridge asíncrono. JSI permite una interacción directa y rápida con el código nativo. Fabric optimiza la renderización y Turbo Modules facilita la carga perezosa de módulos, mejorando el rendimiento general. Aunque la migración a esta arquitectura implica un esfuerzo considerable y algunos riesgos, los beneficios a largo plazo en términos de rendimiento y flexibilidad son notables. ALTEN apoya esta transición, ayudando a sus clientes en el proceso de migración.

Introducción

La nueva arquitectura de React Native representa un avance significativo en el desarrollo de aplicaciones móviles, ofreciendo mejoras en rendimiento y flexibilidad, que son esenciales para los desarrolladores modernos.

Con la introducción de JSI (JavaScript Interface), Fabric y Turbo Modules, esta arquitectura promete superar las limitaciones de la arquitectura anterior, especialmente en lo que respecta a la comunicación entre el código JavaScript y nativo.

Javascript Interface

Si hasta ahora la comunicación entre el código nativo y el código javascript se realizaba mediante el conocido como Bridge, el uso de la Javascript Interface (JSI) elimina la necesidad de este puente asíncrono tradicional, permitiendo una interacción directa y sincrónica con el código nativo, lo que se traduce en una reducción significativa de la sobrecarga y una mejora en la velocidad de ejecución.

La comunicación mediante el bridge consiste, a grandes rasgos, en serializar el código javascript y enviarlo a la capa nativa, que lo deserializará para interpretarlo. Este proceso se realiza de forma asíncrona y tiene un coste significativo.

Al prescindir del bridge, la JSI puede obtener referencias a objetos y funciones de C++ directamente, lo que reduce los posibles retardos en la comunicación. Esta es, sin duda, la característica más potente de la nueva arquitectura.

Fabric y Turbo modules

El sistema de renderizado Fabric, por otro lado, trae consigo las características de React 18, incluyendo la renderización concurrente y las Transiciones, lo que permite a los desarrolladores crear interfaces de usuario más fluidas y responsivas. Además, los Turbo Modules ofrecen una carga perezosa de módulos, lo que mejora el tiempo de inicio de las aplicaciones al cargar solo los módulos necesarios en el momento necesario.

Además, el sistema incorpora la generación de código mediante Codegen, lo cual permite al desarrollador abstraerse de las capas de más bajo nivel y centrarse en la implementación de sus módulos.

Migración de Native modules a Turbo Modules

Para migrar módulos nativos a Turbo Modules, es fundamental entender primero cómo funcionan y cómo se integran dentro del ecosistema de React Native. Los Turbo Modules permiten llamar a métodos nativos de forma sincrónica y son cargados de mediante “lazy loading”, lo que significa que no se cargan hasta que son realmente necesarios.
Esto no solo mejora el rendimiento, sino que también facilita la gestión de recursos dentro de la aplicación.

El proceso de migración implica la actualización de los módulos nativos existentes para que se ajusten a la nueva arquitectura. Esto puede requerir la reescritura de ciertas partes del código para aprovechar las nuevas interfaces y métodos proporcionados por los Turbo Modules. Además, es posible que se necesite utilizar Codegen para generar interfaces de JavaScript que aseguren la sincronización entre el código nativo y JavaScript.

resultados

Para todos aquellos interesados más en los números que en las palabras, un equipo se ha preocupado en medir el rendimiento de esta nueva propuesta. Tomando como ejemplo un Pixel 4 y un iPhone 12, estos son los resultados de aplicar la nueva arquitectura:

Se representa el tiempo de carga en ms tomado para renderizar los elementos indicados. Se aprecia una mejora significativa en los resultados de la medición tomando el iPhone 12, si bien en un Pixel 4 el rendimiento apenas mejora un 5%. Puedes consultar aquí los detalles de este benchmark.

riesgos, ¿puede fracasar?

Y es este el aspecto más controversial, la comunidad de React Native ha desarrollado módulos usando Native Modules durante años. Este cambio implica la reescritura completa de dichos módulos y esto implica un esfuerzo que no todos estarán dispuestos a hacer.

La mejora en el rendimiento existe, pero tampoco es disruptiva y cada equipo tendrá que evaluar si el esfuerzo merece la pena.

Lo cierto es que, si un equipo de desarrollo de producto decide hoy habilitar la nueva arquitectura, es muy probable que muchos de los módulos que pretenda usar no hayan sido migrados.

Y existe un riesgo adicional, y es que, si fracasa la migración de módulos, todo el ecosistema de React Native podría sufrir las consecuencias de un abandono de esta tecnología en pro de alguno de sus competidores en desarrollo multiplataforma, como son Ionic o Flutter.

Es importante destacar que, aunque los riesgos son reales y el aparente salto de rendimiento no es significativo, es probable que el potencial de mejora no sea tanto en casos de uso de los últimos años sino en casos de uso que estén por venir, por ejemplo, empleando herramientas de IA. No deberíamos desmerecer un gran trabajo solo porque hoy no sea espectacular.

conclusión

En resumen, la nueva arquitectura de React Native es un “game changer” para el desarrollo de aplicaciones móviles.

Con su enfoque en la optimización del rendimiento y la mejora de la experiencia del desarrollador, establece un nuevo estándar en el desarrollo multiplataforma. La migración a Turbo Modules es un paso esencial en este proceso, y aunque puede presentar desafíos, los beneficios a largo plazo son claros y valiosos para cualquier proyecto que busque aprovechar al máximo las capacidades de React Native.