Al final de 2021, implementamos con éxito la Nueva Arquitectura de React Native en la aplicación de Facebook. Ahora es el momento de capacitar a todos los desarrolladores de React Native en el mundo para que utilicen la Nueva Arquitectura de React Native, tanto el nuevo renderizador Fabric como el nuevo sistema TurboModule. Pero migrar todo un ecosistema a una Nueva Arquitectura no es una tarea fácil. Para apoyar a toda la comunidad en este esfuerzo, hemos preparado un conjunto de herramientas y materiales que ayudarán tanto a los desarrolladores de aplicaciones como a los desarrolladores de bibliotecas a unirse a nosotros en este viaje. En la charla, presentaremos cómo se ve la Nueva Arquitectura de React Native en el espacio OSS. Discutiremos el impacto que esto tendrá en el desarrollo de proyectos de React Native. Por último, cubriremos lo que aprendimos de la migración a la Nueva Arquitectura de React Native en Meta, y cómo pueden abordar su migración en su organización.
Llevando la Nueva Arquitectura de React Native a la Comunidad de OSS
Video Summary and Transcription
La comunidad de React Native se ha centrado en la nueva arquitectura, que tiene como objetivo mejorar el rendimiento al reescribir los componentes internos utilizando C++. La nueva arquitectura trae características como aplanamiento de vistas, CodeGen y modo sin puente. También incluye actualizaciones de herramientas de compilación y el motor de JavaScript, como Hermes. React Native 0.71 incluirá tipos de TypeScript empaquetados en el paquete NPM, y Kotlin es completamente compatible en Android. La nueva arquitectura ofrece una transición desde el renderizador heredado y características concurrentes, y hay recursos disponibles para la migración y el apoyo de la comunidad.
1. Introducción a la Nueva Arquitectura de React Native
El tema candente en el Ecosistema de React Native es la nueva arquitectura. Hoy hablaré sobre cómo llevar la nueva arquitectura a la comunidad de código abierto y los desafíos que enfrentamos. La nueva arquitectura se trata de eliminar el cuello de botella del puente. Reescribimos nuestras partes internas utilizando C++, lo que nos permite escribir características y optimizaciones una vez y beneficiar a todas las plataformas que utilizan React Native.
Hola a todos. Muchas gracias por estar aquí. Como escucharon antes, el tema candente en el Ecosistema de React Native es la nueva arquitectura. Así que hoy tengo el placer de hablar sobre cómo llevar la nueva arquitectura a la comunidad de código abierto. Y bueno, es posible que ya hayan visto esta charla antes a principios de año, pero muchas cosas han cambiado y mi equipo, el equipo de React, ha estado desarrollando muchas características nuevas y mejoras para que puedan disfrutar de la nueva arquitectura. Así que hoy nos vamos a centrar en algunas de esas también. Y bueno, un par de palabras sobre mí, como mencioné, soy un ingeniero de Android en el equipo de React Native, pueden encontrarme en línea como Kurtinico en Twitter y en GitHub. Así que empecemos porque tenemos mucho que cubrir. Y si buscaran 'React Native nueva arquitectura' en Google o en YouTube hoy, encontrarán bastante contenido y en realidad quiero centrarme en algunos de ellos. Específicamente en YouTube, encontrarán esos videos. Y si miran las fechas, son bastante indicativas de cuánto tiempo hemos pasado construyendo la nueva arquitectura. Empezamos a hablar de ello en 2018, pero recién en 2021 implementamos completamente la nueva arquitectura internamente. Y bueno, esto es un testimonio de lo complicada que es realmente esta nueva arquitectura. Y sí, quiero enfatizar nuevamente la línea de tiempo aquí. Empezamos en 2018 en el segundo trimestre, y esto comenzó inicialmente como un proyecto de seis meses. Literalmente hacemos planificación cada medio año en Meta y Facebook en ese entonces. Y simplemente pensamos que sí, en seis meses lo lograremos y actualizaremos las partes internas y nos beneficiaremos de ello y todos estarán felices. Eso no resultó ser del todo cierto porque específicamente dentro de la aplicación de Facebook, React Native se utiliza extensivamente en miles de superficies y los ingenieros de producto han estado exprimiendo cualquier posible mejora de rendimiento de React Native, de la antigua arquitectura ya. Así que intentar cambiar el motor mientras el avión volaba bastante rápido resultó ser realmente desafiante.
Así que nos llevó casi tres años y luego dijimos, bueno, ya terminamos. Increíble. ¿Cómo permitimos ahora que la comunidad de código abierto lo use? Y, bueno, aquí es básicamente más o menos donde entré en el equipo y me di cuenta de que esto es realmente un desafío asombroso y bastante intrincado. Así que hoy nos vamos a centrar en cuáles son esos desafíos en detalle, qué hay en tu arquitectura y qué estamos haciendo para permitir que la comunidad de código abierto lo use. Entonces, si Gant aún no te ha convencido de por qué deberías investigar la nueva arquitectura, permíteme reiterarlo. La nueva arquitectura se trata de eliminar el cuello de botella del puente. Además, tomamos una postura y realizamos algunos cambios arquitectónicos bastante importantes, que afectarán a todos los desarrolladores de React Native. Primero, reescribimos nuestras partes internas utilizando un lenguaje de programación multiplataforma, en este caso, C++. Esa también es la razón por la cual muchos desarrolladores vinieron a nosotros y nos dijeron: ¿por qué veo código C++ en mi proyecto? No estoy seguro de querer ver eso. Pero lo bueno de esto es que ahora podemos escribir características y optimizaciones solo una vez en nuestro renderizado compartido, y asegurarnos de que
2. La Nueva Arquitectura de React Native
La nueva arquitectura de React Native, escrita en C++, permite la optimización de la vista en Android e iOS. El componente CodeGen elimina las referencias de cadena y genera código basado en la representación de la API. Esta arquitectura sirve como base para futuras capacidades, como el renderizador de tela, los módulos turbo y el modo sin puente. CodeGen simplifica la escritura de código específico de plataforma al generar plantillas. Además, hay otras consideraciones, como las herramientas de compilación, dentro de la nueva arquitectura.
3. Sistema de compilación de iOS y consideraciones meta
En iOS, creamos un protocolo Objective-C que comprende los tipos y proporciona tipos específicos de plataforma. La nueva arquitectura va más allá de los componentes principales e incluye consideraciones para las herramientas de compilación. El uso interno de Buck por parte de Meta nos llevó a ampliar nuestro sistema de compilación para adaptarse al espacio de código abierto.
4. Actualizaciones de las herramientas de compilación y el motor JavaScript
En Android, introdujimos archivos CMake para compilar código C++ y realizamos cambios en el pipeline de Gradle. También nos enfocamos en la integración de Cocoapods en iOS y mejoramos nuestro motor JavaScript con Hermes. Se recomienda utilizar Hermes para la nueva arquitectura y a partir de React Native 0.70, es el motor predeterminado. También tenemos actualizaciones en los lenguajes de programación, incluyendo TypeScript en la web.
5. Actualizaciones y Futuros Lanzamientos
Cuando lanzamos la primera versión de la nueva documentación de arquitectura, recibimos comentarios sobre no querer escribir especificaciones en Flow. Para abordar esto, agregamos soporte para archivos de especificación en TypeScript. React Native 0.71 incluirá tipos de TypeScript empaquetados en el paquete NPM. En Android, Kotlin está completamente soportado, lo que permite a los desarrolladores escribir aplicaciones sin Java. El sitio web ha sido reescrito para ser bilingüe, con ejemplos ahora disponibles en Java y Kotlin. La situación para Swift en iOS es más complicada debido a la interoperabilidad con C++. Lanzamos React Native 68 con soporte para la nueva arquitectura y recibimos comentarios que llevaron al desarrollo de nuevas características, incluido el soporte de React 18 en React Native 69.
Cuando lanzamos la primera versión de la nueva documentación de arquitectura, el comentario número uno fue: No quiero escribir mis especificaciones en Flow. Gracias. Y entiendo completamente eso. Es por eso que dedicamos tiempo a escribir una versión del código que entiende archivos de especificación en TypeScript. Así que hoy puedes escribir archivos de especificación en TypeScript y todo funciona. En este punto, también, React Native 0.71 incluirá tipos de TypeScript empaquetados en el paquete NPM, con suerte facilitando la vida de los desarrolladores de React Native.
En la capa de plataforma en Android, tenemos Kotlin. Personalmente, soy un gran fanático de Kotlin. Estoy feliz de hablar más al respecto después si quieres saber más. Pero ya está completamente soportado en React Native, por lo que puedes escribir tu aplicación en Kotlin y ya no necesitas Java. También reescribimos todo el sitio web para que sea bilingüe. Esto fue un esfuerzo impulsado por la comunidad y recibimos muchas solicitudes de extracción para convertir nuestros fragmentos de código de solo Java a Java y Kotlin. Ahora encontrarás ejemplos en ambos lenguajes. Y en el futuro, es posible que esperes que la plantilla se convierta realmente a Kotlin. Hay varios beneficios de tener un único lenguaje de JVM en tu flujo de trabajo, por lo que vamos a investigar eso en el futuro. Mientras tanto, para iOS, la situación es un poco más complicada. A la gente le encantaría usar Swift y estamos investigando eso. El problema aquí es el soporte de interoperabilidad entre Swift y C++. Hay actualizaciones, pero aún no tenemos nada que compartir en esta etapa.
Así que ahora he hablado mucho sobre actualizaciones y cosas que están por venir. En realidad, quiero hacer mi punto un poco más concreto hablando sobre la línea de tiempo, como cuándo sucedieron las cosas. Así que veamos las versiones de React Native que lanzamos y lanzaremos en el futuro. A principios de este año lanzamos React Native 68. Esta es la primera versión de React Native que agrega soporte para la nueva arquitectura. Teóricamente, la nueva arquitectura ya estaba allí desde React Native 64, aunque era muy difícil de usar, por lo que la versión 68 es la primera versión que agrega una línea de código que te permite habilitar o deshabilitar la nueva arquitectura. A partir de ahí, recibimos toneladas de comentarios y la gente nos dijo que esto es genial, pero... y esos `peros` se convirtieron en características que desarrollamos y lanzamos en las versiones siguientes. Así que en React Native 69 lanzamos un par de cosas críticas. La primera es el soporte de React 18. Por lo tanto, la versión 69 es la primera versión
6. React 18, Versions 70-72, and Community Feedback
Voy a hablar sobre React 18 y las versiones de React Native en la siguiente diapositiva. La versión 70 fue un lanzamiento importante para la nueva arquitectura, introduciendo dermis como predeterminado y soporte para autoenlace en Android. En la versión 71, la nueva plantilla de la aplicación se simplificará, mejorando la experiencia del desarrollador. La versión 72 abordará los problemas planteados por la comunidad e implementará cambios basados en los comentarios.
Pero entonces, ¿qué sigue? Así que tenemos la versión 71. La versión 71 se lanzará muy pronto. No sé cuándo, pero en un futuro cercano. Y, bueno, ya tenemos algunas cosas planeadas. Primero, la nueva plantilla de la aplicación se simplificará enormemente en la versión 71. Uno de los comentarios que recibimos fue que cuando creo un nuevo proyecto, veo siete archivos C++ y no sé qué hacen. ¿Necesito tenerlos aquí? ¿Necesito saber qué hacen? Y así sucesivamente. Y sentimos que probablemente no necesitamos exponer los archivos C++ a nuestros usuarios. Podemos intentar mejorar y encapsularlos. Este es uno de los cambios entre muchos que estamos implementando en la versión 71. Entonces, nuevamente, en la versión 71 nos estamos enfocando en nuestra nueva arquitectura y haciendo las cosas más fáciles para nuestros desarrolladores. Y hay muchos otros cambios que se describen en las notas de la versión 71.
Y luego la versión 72. Bueno, con el infinito y más allá, diría yo, porque muchos de esos cambios se han implementado porque la gente nos detuvo en conferencias y reuniones y nos dijo, oye, probé la nueva arquitectura pero no funciona para mí porque, o no puedo migrar mi biblioteca porque esto y aquello. Entonces, por favor, aprovecha la oportunidad. Hoy somos cinco o seis del equipo de React, del equipo de React Native aquí hoy. Entonces, por favor, detente. Dinos si esto no funciona, es una porquería completa, porque, o esto es increíble porque. Así que, por favor, úsanos tanto como puedas.
7. Soporte de React 18 y React Native
Si estás en React Native 67 o 68, estás efectivamente en React 17. Para estar en React 18, debes estar en la versión 69 o la siguiente característica. La nueva arquitectura ofrece características concurrentes y una transición desde el renderizador heredado. Ahora es un buen momento para migrar, ya que nos enfocamos en la historia de migración y escuchamos a la comunidad. Consulta la documentación oficial en el sitio web reactnative.dev, incluida la guía de la nueva arquitectura y la guía de migración a la nueva arquitectura.
Así que, prometo hablar brevemente sobre el soporte de React 18 y React Native. Y aquí está. Esta bonita tabla. Entonces, si estás en React Native 67 o 68, estás efectivamente en React 17. El truco aquí es que no puedes simplemente ir a tu package.JSON y cambiar la versión de React, hacer yarn install y pretender que eso funcionará. Así no es como React y React Native interactúan entre sí. React Native vuelve a empaquetar el renderizador de React a una versión que decidimos cuando cortamos la rama de React Native. Entonces, decidimos qué versión de React vas a usar. Así es como sucede la magia. Entonces, si quieres estar en la versión 18, en realidad necesitas estar en la versión 69 o la siguiente característica. Y aquí está el truco. El equipo de React viene con muchas nuevas características concurrentes como nuevos hooks, como start transition, use transition, y así sucesivamente. Si quieres beneficiarte de esas características concurrentes, necesitas estar en la nueva arquitectura. Si estás en la arquitectura antigua, estás usando efectivamente un renderizador heredado de React. Estamos ofreciendo estos dos modos de renderizado para permitir que las personas hagan una transición gradual a la nueva arquitectura. Pero si me preguntaras cuándo es un buen momento para migrar a la nueva arquitectura, ya sabes la respuesta. Es ahora. Así que comienza a investigar al respecto. Porque estamos poniendo mucho esfuerzo en la historia de migración y escuchando a la comunidad. Ahora es un buen momento para hacer migraciones. Más adelante, será más difícil y doloroso. Ahora, veamos algunos de los materiales que hemos preparado para que puedas comenzar con la nueva arquitectura y entender qué hacer. Y permíteme enfatizar cuán importantes creemos que son los documentos aquí. Realmente se trata de los documentos. Recuerdo haber escuchado este episodio de React Native Show y mencionaban cómo algunas bibliotecas ya estaban aprovechando algunas de las nuevas capacidades de la arquitectura mediante la ingeniería inversa de nuestro código, lo cual no es realmente genial. Así que por eso pensamos, OK. Escribamos algunos documentos oficiales. Y encontrarás en el sitio web reactnative.dev una nueva guía en la parte izquierda llamada la nueva arquitectura, que te brinda una introducción sobre esos pilares, qué hacen, por qué los hicimos, y así sucesivamente. Y también hay otra guía justo debajo llamada migración a la nueva arquitectura, que explica tanto a los desarrolladores de aplicaciones como a los desarrolladores de bibliotecas cómo migrar sus componentes y módulos a la nueva arquitectura.
8. New Architecture Overview and Migration
Tenemos una descripción general de la arquitectura y profundizamos en cómo funciona la integración de Fabric y Hermes. Para comenzar con la nueva arquitectura, solo cambia una línea en el pod install en iOS y Gradle.properties en Android. Metro confirmará que la nueva arquitectura está habilitada. Únete al grupo de trabajo de la nueva arquitectura en GitHub para obtener soporte y acceso a ejemplos que demuestran la migración paso a paso de aplicaciones, componentes y módulos.
Actualizamos la nueva plantilla de la aplicación para que puedas comenzar con el nuevo proyecto. Así que creemos que el punto de entrada para la nueva arquitectura debería ser solo una línea cuando creas una nueva aplicación. ¿Cómo se vería? Bueno, vas a crear tu aplicación con React Native en ella, y luego en iOS, el punto de entrada está en el pod install. Entonces, normalmente solo harías pod install en tu proyecto, y estarías bien, mientras que dentro de tu arquitectura, volverás a ejecutar pod install, pero con esta nueva variable arc enabled establecida en true. Luego, una vez que ejecutes iOS, estarás ejecutando efectivamente una aplicación de iOS dentro de tu arquitectura, y podrás comenzar a jugar y así sucesivamente. En Android, una historia similar. Tenemos un archivo llamado Gradle.properties con una línea llamada new arc enabled. Solo cámbialo de false a true, y ejecuta Android, y listo. Y una vez que lo ejecutes, Metro te dirá en la consola que tu aplicación se está ejecutando con Fabric configurado en true y concurrent roots configurado en true. Eso significa que todo está habilitado, experimentarás el nuevo renderizado, todo, magia, cosas increíbles, y así sucesivamente. Y también asegúrate de ver la charla de Lorenzo justo después de la mía, porque ahora te digo, como, sí, esto es increíble. Solo cambia una línea y comienza, todo funciona. Y siempre y cuando no tengas dependencias externas que no se hayan migrado a la nueva arquitectura. Y Lorenzo va a hablar realmente de eso porque es un punto crucial.
Para ayudar a las personas a migrar esas bibliotecas, en realidad, una iniciativa que comenzamos es el grupo de trabajo de la nueva arquitectura. Esto se basa en la experiencia que construimos como parte del grupo de trabajo de React 18 y es esencialmente un repositorio de discusión solo en GitHub al que puedes unirte. Y hay varias secciones. Nuevamente, algunas sobre documentos, algunas sobre bibliotecas. Entonces si eres autor de una biblioteca, puedes unirte, puedes solicitar soporte. Tenemos algunas bibliotecas en el pasado que se quedaron atascadas y así sucesivamente. El grupo de trabajo puede parecer de solo lectura, pero si solicitas unirte usando el enlace en el archivo Léame, revisaremos la solicitud y te dejaremos pasar. Solo estamos haciendo una prevención de spam con este formulario. Y también escribimos algunos ejemplos. Entonces, específicamente, tenemos el repositorio de ejemplos de aplicaciones que es básicamente una aplicación, como una colección de ramas donde en cada rama mostramos cómo migrar una aplicación de una versión de React Native a otra paso a paso. Así que efectivamente verás cada confirmación con un mensaje informativo y instrucciones sobre por qué hicimos ese paso y así sucesivamente. Y estamos haciendo esto para diferentes versiones de React Native para mostrarte cómo estas serie de pasos se reducen a medida que hacemos esta historia de migración más fácil. También tenemos un repositorio de ejemplos de bibliotecas que sigue un enfoque similar pero explica
9. Library Migration and Future Discussion
El éxito de la nueva arquitectura depende de la compatibilidad de las bibliotecas. Los mantenedores de bibliotecas deben migrar sus componentes y módulos. Queremos conocer tus experiencias de migración y cualquier obstáculo que encuentres. Únete a la sala de discusión con expertos de la industria para hablar sobre el futuro de React Native en tu arquitectura.