- La versión 0.76 de React Native fue lanzada en npm. Esta versión incluye por defecto la nueva arquitectura y ofrece soporte completo para las funciones más recientes de React.
- La nueva arquitectura admite funciones como Suspense, Transitions, automatic batching y
useLayoutEffect, e introduce un nuevo sistema de módulos y componentes nativos que permite escribir código con seguridad de tipos.
- Es el resultado de una reescritura fundamental de React Native iniciada en 2018, y fue diseñada para que la mayoría de las apps puedan migrar gradualmente a la nueva arquitectura.
- React Native 0.76 puede adoptarse en la mayoría de las apps con un nivel de esfuerzo similar al de lanzamientos anteriores, y las librerías populares ya son compatibles con la nueva arquitectura.
¿Qué es la nueva arquitectura?
- La nueva arquitectura es una reescritura completa de los sistemas principales de React Native, incluyendo el renderizado de componentes, la comunicación entre JavaScript y las abstracciones nativas, y la forma de programar tareas entre hilos.
- La arquitectura anterior se comunicaba con la plataforma nativa mediante un bridge asíncrono, pero la nueva arquitectura fue diseñada para admitir tanto actualizaciones síncronas como asíncronas.
- La nueva arquitectura se compone de cuatro partes principales: el sistema de módulos nativos, el nuevo renderizador, el event loop y la eliminación del bridge.
Nuevos módulos nativos
- Están escritos en C++ y ofrecen nuevas capacidades
- Permiten comunicación síncrona con el runtime nativo
- Proporcionan seguridad de tipos entre JavaScript y código nativo
- Permiten compartir código entre plataformas
- Ofrecen lazy module loading de forma predeterminada
- Desde la API de JavaScript/TypeScript se puede aprovechar toda la funcionalidad de la implementación nativa en C++
- Con Codegen se pueden definir contratos de tipos sólidos
- Los módulos se cargan en memoria solo cuando se necesitan, reduciendo el tiempo de arranque de la app
Nuevo renderizador
- Fue reescrito en C++ y ofrece las siguientes ventajas:
- Permite renderizar actualizaciones con distintas prioridades en diferentes hilos
- Permite leer el layout de forma síncrona desde otros hilos
- Código C++ compartido en todas las plataformas
- Ahora la jerarquía de vistas se almacena como una estructura de árbol inmutable
- Permite manejar actualizaciones seguras entre hilos
- Permite manejar múltiples árboles en curso que representan distintas versiones de la interfaz de usuario
- Es posible interrumpir actualizaciones de baja prioridad, renderizar tareas urgentes como la entrada del usuario y luego reanudar las actualizaciones de baja prioridad
Event loop
- La nueva arquitectura implementa un modelo claro de manejo del event loop para reducir las diferencias entre React DOM y React Native.
- Implementa un modelo bien definido de procesamiento del event loop que maneja las tareas en el hilo de JavaScript
- El event loop ordena actualizaciones y eventos de forma predecible, permitiendo interrumpir actualizaciones de baja prioridad por eventos urgentes del usuario.
- Se alinea mejor con las especificaciones web
- Será la base para más funciones de navegador en el futuro
Eliminación del bridge
- La nueva arquitectura elimina el bridge, permitiendo una comunicación directa y eficiente entre JavaScript y código nativo.
- Gracias a la eliminación del bridge, mejora el tiempo de arranque, disminuyen los crashes causados por comportamientos indefinidos y se facilita el reporte de errores y la depuración.
Nuevas funciones
- Transitions
- Transitions, un nuevo concepto de React 18, distingue entre actualizaciones urgentes y no urgentes.
- Las actualizaciones urgentes requieren una respuesta inmediata, mientras que las actualizaciones de Transitions cambian la UI de una vista a otra.
- Automatic batching agrupa más actualizaciones de estado para evitar renderizados de estados intermedios, haciendo que React Native funcione más rápido y sin retrasos.
- La nueva arquitectura permite leer información de layout de forma síncrona mediante
useLayoutEffect y actualizar la UI en el mismo frame.
- La nueva arquitectura ofrece soporte completo para Suspense, introducido en React 18, permitiendo manejar estados de carga y dar mayor prioridad a la entrada del usuario.
Cómo hacer el upgrade
- Al actualizar a la 0.76, la mayoría de las apps pueden hacerlo con un esfuerzo similar al de otros lanzamientos gracias a la capa de interoperabilidad
- Sin embargo, para aprovechar por completo la New Architecture y las funciones concurrentes, es necesario migrar los módulos y componentes nativos personalizados
- En el caso de los desarrolladores de apps
- Es necesario actualizar librerías, componentes nativos personalizados y módulos nativos personalizados para que sean totalmente compatibles con la New Architecture
- Se trabajó para que la mayoría de las librerías populares de React Native ya sean compatibles con la New Architecture
- En el caso de los maintainers de librerías, se recomienda migrarlas a las nuevas APIs de módulos y componentes nativos
Resumen de GN⁺
- La transición a la New Architecture parece ser un hito importante para el desarrollo con React Native. Al permitir tanto actualizaciones síncronas como asíncronas, resolver el cuello de botella del bridge y hacer posible leer el layout desde otros hilos, se esperan muchas mejoras en rendimiento y experiencia de usuario
- En especial, también vale la pena destacar que ahora ofrece soporte completo para las funciones concurrentes de React 18. Será posible crear experiencias de usuario más responsivas y naturales usando Suspense, Transition y más
- Aun así, parece que las apps y librerías existentes necesitarán trabajo de migración para ser totalmente compatibles con la New Architecture. Tendrá que hacerse de forma gradual, pero una vez completada la migración, podrán aprovechar plenamente sus ventajas
- Esta arquitectura ya se está usando en las apps de Facebook e Instagram de Meta, y hay casos exitosos como Expensify, Kraken y BlueSky
- En general, la New Architecture parece un gran avance para el futuro de React Native. Ojalá logre consolidarse bien con la colaboración de la comunidad
6 comentarios
Siento que fue hace muchísimo tiempo la primera vez que escuché de React Native. Aunque empezó en Facebook, sorprende más que todavía no haya llegado a la versión 1..
Nunca he usado RN, así que me da curiosidad. Por la impresión que me da, parecería que estaría más optimizado para Android, pero me sorprende que en la práctica el rendimiento sea mejor en iOS.
Parece que casi todos los crashes de nuestro lado ocurren en Android.
En Android es realmente terrible... está a un nivel terrible..
Parece que no hace mucho cambiaron el motor a Hermes, pero da la impresión de que otra vez lo rehicieron todo.
Opiniones en Hacker News
Tiene 4 años de experiencia desarrollando apps con React Native y APIs backend; migrarse a Expo resolvió muchos problemas, pero aún existen bugs. iOS es más estable y también rinde mejor que Android. Recomienda React Native porque es fácil de aprender y tiene un gran ecosistema de JS, aunque actualmente usa Flutter
Existen opiniones muy diversas sobre React Native; algunos se quejan de Expo y recomiendan Kotlin Multiplatform. También hay quien opina que las discusiones en Hacker News se están volviendo cada vez más inútiles
Como desarrollador de Flutter, cree que Swift UI y Compose son más adecuados para el desarrollo móvil, y que no usaría Flutter ni React Native para empezar una app nueva
React Native está bien en iOS, pero en Android es lento. Hermes es interesante, pero todavía requiere muchos polyfills. Espera el día en que la web reemplace a React Native
Están desarrollando Bluesky con Expo/RN, y en las pruebas iniciales de la nueva arquitectura el rendimiento en Android mejoró
Ha tenido una experiencia positiva usando React Native con Expo, y como desarrollador independiente RN le ha permitido hacer muchas cosas. Está esperando con interés la nueva arquitectura
La velocidad de renderizado de Flutter es 5 veces más rápida que la de React Native, y al usar React en la web la velocidad es mayor
Vio un tuit que decía que Capacitor es útil para portar una webapp de NextJS
React Native ha mejorado bastante este año, y cuando react-strict-dom esté listo traerá un gran cambio