Un viaje de cinco años hacia la perfección del rendimiento
Este mes, el equipo de React Native ha desvelado los puntos de referencia de rendimiento para su nueva arquitectura, marcando un hito importante en la evolución del framework. Este acontecimiento podría marcar el capítulo final de una saga de 5 años en la que React Native ha experimentado una transformación masiva. Demos un paso atrás y exploremos las razones que hay detrás de esta importante refactorización y el viaje que nos ha llevado hasta este punto de la historia de React Native.
El Puente: Se acabó el cuello de botella
React Native permite a los desarrolladores crear aplicaciones móviles multiplataforma utilizando JavaScript y React, en lugar de lenguajes nativos como Swift y Kotlin. Uno de los componentes clave que permitía esta funcionalidad era el "puente" de React Native.
El puente utilizaba mensajes JSON serializados para facilitar la comunicación entre el código React/JavaScript y la parte nativa de tu app, y viceversa.
"El puente puede ser imaginado como un bus donde la capa productora envía algunos datos para la capa consumidora".
React Native Docs
Si bien el enfoque del puente era funcional, venía con compensaciones de rendimiento debido al alto volumen de mensajes JSON que pasaban por un único canal de comunicación, entre otros factores. Con el tiempo, el puente se convirtió en un cuello de botella porque era asíncrono, de un solo subproceso y conllevaba sobrecarga. Estaba claro que se necesitaba una nueva solución.
Tendiendo puentes: El gran refactor de React Native
¿Cuál es el problema?
El gran refactor: En el segundo trimestre de 2018, el equipo de React Native comenzó a trabajar en la nueva arquitectura internamente para todas las más de 1000 superficies de aplicaciones de Facebook que usan RN. (Espero que se refirieran a esto como Operación Burning Bridges.) Y cuando empezaron a hablar de ello públicamente a finales de 2018, la comunidad React Native estaba entusiasmada.
Tomó casi 4 años de trabajo, pero en marzo de 2022, finalmente fuimos bendecidos con React Native 0.68, dando a los desarrolladores la oportunidad de optar por el Nuevo Architecture que consta de 4 pilares principales:
JSI (JavaScript Interface)
Una nueva API C++ para interactuar con cualquier motor JS. Esto sustituye el "puente" por una interfaz directa entre JS y C++ y elimina la necesidad de JSON-ificar los datos.
Fabric
El nuevo sistema de renderizado concurrente trajo todas las características de React 18 a RN.
Turbo Modules
Mejora el rendimiento cargando módulos sólo cuando son realmente necesarios y permite llamar a métodos nativos de forma sincrónica.
Codegen
Una herramienta opcional para automatizar la generación de código para mejorar la seguridad de tipos y la calidad del código.
Debería estar más entusiasmado con el rendimiento, porque estoy obsesionado con el núcleo vital de la web, pero en realidad estoy más entusiasmado con la herramienta codegen.
"Codegen no es un pilar propiamente dicho, pero es una herramienta que puede utilizarse para evitar escribir mucho código repetitivo. Utilizar Codegen no es obligatorio: todo el código que genera también puede escribirse manualmente. Sin embargo, genera código de andamiaje que puede ahorrarte mucho tiempo."
Soy todo herramientas de generación de código, como Playwright Test Generator y GitHub Copilot.
Si puedo generar código React Native con la nueva herramienta, entonces eso me ahorrará una enorme cantidad de tiempo desarrollando aplicaciones multiplataforma.
La nueva arquitectura
Solución de problemas de rendimiento y flexibilidad
La Nueva Arquitectura pretende resolver las limitaciones de la Arquitectura Antigua introduciendo la Interfaz JavaScript (JSI), que permite la invocación directa de métodos entre objetos JavaScript y C++.
"La JSI es una interfaz que permite a un objeto JavaScript mantener una referencia a un objeto C++ y viceversa.
Una vez que un objeto tiene una referencia al otro, puede invocar directamente métodos sobre él.
Así, por ejemplo, un objeto C++ puede ahora pedir a un objeto JavaScript que ejecute un método en el mundo JavaScript y viceversa."
El JSI de la Nueva Arquitectura tiene un montón de beneficios, incluyendo la ejecución síncrona, concurrencia, menor sobrecarga, código compartido, y la seguridad de tipos. El resultado es la base para el Nuevo Sistema de Módulos Nativo y un nuevo renderizador, con futuras mejoras ya en camino.
Benchmarks de rendimiento
Midiendo el impacto de la nueva arquitectura en las apps React Native
El equipo de React Native ha preparado una aplicación que consolida varios escenarios de rendimiento y permite a los desarrolladores alternar entre la antigua y la nueva arquitectura. Aunque los puntos de referencia sintéticos pueden no representar perfectamente los escenarios del mundo real, proporcionan una visión de las posibles ganancias de rendimiento logradas a través de la Nueva Arquitectura.
Profundizar en las mejoras de rendimiento
Los benchmarks de rendimiento demuestran que la Nueva Arquitectura ofrece mejoras en los tiempos de renderizado a través de múltiples escenarios tanto en dispositivos Android como iOS.
Por ejemplo, en un Google Pixel 4, la Nueva Arquitectura es en torno a un 8 % más rápida en determinados escenarios. En un iPhone 12 Pro, algunos casos muestran un impresionante tiempo de renderizado un 39 % más rápido.
Es importante tener en cuenta que estos puntos de referencia sintéticos podrían no traducirse completamente en mejoras de rendimiento en el mundo real para cada aplicación. Sin embargo, el equipo de React Native está comprometido con ofrecer los beneficios de la Nueva Arquitectura a los usuarios.
Escribir tus propios escenarios de rendimiento
Los desarrolladores interesados en comparar el rendimiento de sus componentes entre las arquitecturas antigua y nueva pueden hacerlo editando el archivo App.tsx de la aplicación proporcionada. A continuación, siguiendo las instrucciones del archivo README, los desarrolladores pueden medir los tiempos de renderización de sus componentes y alternar entre las arquitecturas antigua y nueva con facilidad.
Solución de las deficiencias de rendimiento en Edge
El equipo de React Native ya ha identificado y resuelto tres problemas de rendimiento en la Nueva Arquitectura, uno que afecta tanto a Android como a iOS, y otro específico de Android e iOS. Todos estos problemas se han solucionado en la versión 0.72.0-RC.1 de React Native.
El problema más importante era causado por la falta del indicador de compilador NDEBUG en las compilaciones optimizadas. Esta opción desactiva las funciones de depuración en programas C++, y sin ella, el núcleo de la Nueva Arquitectura realizaba comprobaciones sólo de depuración. Este problema ya se ha solucionado tanto para Android como para iOS, lo que garantiza un rendimiento óptimo en las versiones optimizadas.
También se han introducido mejoras en la infraestructura de renderizado de texto en ambas plataformas. En iOS, la creación de NSTextStorage se ha reducido de dos a una vez por cada elemento , lo que se traduce en una renderización un 20% más rápida de 5.000 elementos.
En Android, las optimizaciones en la medición de texto y las mejoras en el almacenamiento en caché han aumentado aún más el rendimiento. Todo esto solo es posible gracias a la Nueva Arquitectura.
El equipo de React Native ha hecho el proceso de migración lo más suave posible, pero los desarrolladores deben estar preparados para algunos ajustes y posibles puestas a punto para aprovechar al máximo las nuevas características y optimizaciones. Por mi parte, estoy encantado con la nueva versión.
React Native tiene un ecosistema floreciente
El entusiasmo de la comunidad React Native por la Nueva Arquitectura demuestra el potencial del framework y su capacidad para adaptarse y evolucionar. A medida que más desarrolladores adopten la nueva arquitectura, el ecosistema de React Native seguirá prosperando, con la aparición de nuevas bibliotecas, herramientas y prácticas recomendadas compatibles con el marco actualizado.
La naturaleza de código abierto de React Native permite a la comunidad aprender de las mejoras arquitectónicas, intercambiar ideas y contribuir al desarrollo continuo del proyecto. Este entorno de colaboración fomenta la creatividad y garantiza que React Native se mantenga a la vanguardia del desarrollo de aplicaciones móviles.
El camino por recorrer
El camino hacia la nueva arquitectura ha sido largo y difícil, pero el resultado es un testimonio de la dedicación del equipo de React Native y del apoyo de la comunidad. A medida que React Native sigue evolucionando, los desarrolladores pueden esperar nuevas mejoras, optimizaciones de rendimiento y un marco cada vez más sólido para crear aplicaciones móviles multiplataforma.
El futuro de React Native es brillante, y la Nueva Arquitectura sirve como base sólida para el próximo capítulo del framework. Acepta el cambio, disfruta de las mejoras de rendimiento y únete a la comunidad React Native para dar forma al futuro del desarrollo de aplicaciones móviles.
¡Feliz programación! 🥳