Llevando la Nueva Arquitectura de React Native a la Comunidad de OSS

Rate this content
Bookmark

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.

26 min
21 Oct, 2022

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.

Available in English

1. Introducción a la Nueva Arquitectura de React Native

Short description:

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

Short description:

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.

todas las plataformas que utilizan React Native se benefician de ella. Por ejemplo, la optimización de la vista, anteriormente solo disponible en Android, ahora se puede aprovechar en iOS gracias a que la hemos escrito en C++ y se comparte en todas las plataformas. También queríamos introducir la seguridad de tipos en nuestra arquitectura. Queríamos eliminar las referencias de cadena en todos los lugares posibles, y esto es posible gracias a un componente llamado CodeGen, que genera código a partir de una representación de la API que proporcionas a React Native. Por último, debes considerar la nueva arquitectura como la piedra angular para muchas nuevas capacidades que lanzaremos en el futuro. Algunas de ellas aún no se han lanzado, otras están en desarrollo, pero habrá muchas nuevas características basadas en esta nueva arquitectura. Es crucial que todos los usuarios migren a esta nueva arquitectura, ya que no se beneficiarán de las nuevas mejoras a partir de ahora. Entonces, ¿en qué consiste exactamente la nueva arquitectura? La llamamos así porque es un término general que nos ayuda a referirnos a un conjunto de pilares. El primero es nuestro nuevo renderizador, llamado fabric. Lo encontrarás en todas partes, en la web y en nuestra documentación. Luego, reescribimos el sistema de módulos nativos y lo llamamos turbo module. También introdujimos un componente para proporcionar seguridad de tipos en nuestra fórmula, llamado code gen. Y cuando todo esté en su lugar, cuando todos tus componentes sean compatibles con fabric y todos tus módulos sean compatibles con turbo modules, podrás prescindir del puente y eso es lo que llamamos el modo sin puente. Profundizar en cada uno de estos pilares llevaría mucho tiempo, pero quiero darte una idea de la seguridad de tipos a la que me refería antes. Así que me centraré un poco en el code gen. La idea detrás del code gen es que te permite escribir un archivo de especificación, una representación de cómo debería ser tu API. En este caso, proporcionarás un archivo de especificación que responderá a la pregunta definitiva, y lo registrarás. El code gen trabajará específicamente en esta función y entenderá que espera una entrada de cadena y devuelve un número como salida. A partir de esta información, el code gen generará código para Android e iOS. En Android, se verá así. Básicamente, es una clase abstracta en Java donde nos encargamos de todo el código de plantilla, como constructores, y generamos un método abstracto llamado answer the ultimate question. Entendemos los tipos y proporcionamos los tipos específicos de la plataforma, en este caso, cadena y doble. Esto es abstracto porque no podemos escribir mágicamente tu lógica empresarial.

3. Sistema de compilación de iOS y consideraciones meta

Short description:

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.

pero podemos ayudarte a escribir todo el esqueleto alrededor. En iOS, la historia es muy similar. Vamos a crear un protocolo Objective-C que, una vez más, comprenda los tipos y proporcione tus tipos específicos de plataforma, como NSString y NSNumber. A medida que implementamos la nueva arquitectura, nos dimos cuenta de que no se trata solo de esos componentes principales. Hay muchos otros aspectos y cosas en las que tenemos que investigar, uno de ellos son las herramientas de compilación. Las cosas meta son un poco diferentes internamente en comparación con cómo son en el espacio de código abierto. Específicamente, dentro de Meta, construimos todo con Buck. Pero no podemos esperar que las personas en el código abierto usen Buck para construir todo. Por eso tuvimos que tomar una postura en nuestro sistema de compilación.

4. Actualizaciones de las herramientas de compilación y el motor JavaScript

Short description:

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.

y extenderlos. En Android, trabajamos mucho en Gradle, y sí, verás muchos cambios en nuestro pipeline de Gradle. Específicamente, introdujimos archivos CMake. Estos son necesarios para compilar código C++. También hay mucho código en Java y Kotlin, como siempre. Y esto es construido por el plugin Gradle de React Native, que es nuestro nuevo punto de integración de compilación para Android. Y esto está destinado a reemplazar el archivo Gradle de React, que era obsoleto e histórico. Y este es esencialmente el componente responsable de invocar la generación de código, permitirte optar por la nueva arquitectura, y demás. En iOS, de manera similar, trabajamos mucho en nuestra integración de Cocoapods. Escribimos muchos scripts en Ruby, escribimos mucha infraestructura de compilación heredada aquí. También la razón por la que menciono esto es porque podrías decir, sí, obviamente tienes Cocoapods y cosas de Gradle, pero de lo contrario la gente puede compilar. Este es uno de los primeros puntos de falla de React Native. Como, cuando, una de las mayores preocupaciones que recibimos es, actualizo. Nada se compila más. Bueno, había mucho código heredado que dentro de la arquitectura tomamos una postura, escribimos, escribimos muchas pruebas para ello. Así que con suerte las cosas mejorarán con el tiempo. También revisamos nuestro motor JavaScript. Y sí, hicimos mucho trabajo con el equipo de Hermes. Hermes es nuestro motor JavaScript interno. Actualmente se recomienda para la nueva arquitectura. Entonces, si lees la documentación, se señalará como uno de los componentes que debes usar. A partir de React Native 0.69, hicimos muchos cambios dentro de React Native y desarrollamos lo que se llama Hermes empaquetado. Esto significa que para cada versión de React Native estamos preparando una versión de Hermes que es completamente compatible con ella. A partir de React Native 0.70, también es el motor predeterminado. Si no quieres usarlo, tendrás que desactivarlo. La razón por la que menciono esto es porque, nuevamente, no es necesario para la arquitectura, pero se recomienda encarecidamente porque es donde estamos analizando más de cerca nuestra experiencia de depuración y donde tenemos un equipo dedicado que puede ayudarnos a comprender qué está sucediendo si tienes un fallo con Hermes activado. Si no tienes Hermes, será difícil para nosotros priorizarlo y será más difícil solucionar el error. También algunas actualizaciones en los lenguajes de programación. Porque este es un tema bastante peculiar y, nuevamente, muchos desarrolladores nos están pidiendo que usemos su lenguaje de programación favorito con React Native. Y aquí tenemos actualizaciones en cada capa. En la web, bueno, TypeScript.

5. Actualizaciones y Futuros Lanzamientos

Short description:

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

Short description:

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.

de React Native que admite React 18. Voy a hablar sobre las versiones de React 18 y React Native en la siguiente diapositiva, pero también otra característica es el dermis de paquete. Entonces, mejor soporte para firmas dentro de React Native. Luego, la versión 70. La versión 70 fue un lanzamiento importante para la nueva arquitectura porque nuevamente, toneladas de características que eran realmente críticas. Primero, dermis como predeterminado. Luego, agregamos soporte para autoenlace en Android para bibliotecas nativas. Entonces, antes de la versión 70, tendrías que enlazar manualmente tus bibliotecas de la nueva arquitectura, lo cual era bastante doloroso. Tuvimos soporte completo para CMake y el código y la configuración unificados. Entonces, para hablar brevemente sobre este último punto, antes de la versión 70, tenías que especificar el código y la configuración para Android y para iOS en dos archivos diferentes, lo que hacía que las cosas estuvieran realmente fragmentadas. Así que escuchamos a la comunidad y pensamos, bueno, esto es una mala experiencia para el desarrollador, así que vamos a solucionarlo. Y eso salió en la versión 70.

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

Short description:

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

Short description:

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.

También dedicamos tiempo a escribir documentos arquitectónicos. Estos son otros documentos muy solicitados que no hemos tenido tiempo de escribir en el pasado. Si vas a la pestaña de arquitectura en la parte superior, encontrarás la descripción general de la arquitectura. Y aquí tenemos análisis detallados y páginas que explican cómo funciona internamente Fabric o cómo se integra Hermes, y así sucesivamente.

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

Short description:

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.

cómo migrar un componente o un módulo a la nueva arquitectura. Finalmente, nuevamente, en este punto, lo realmente importante de la nueva arquitectura son las bibliotecas. Si dependes de una biblioteca que expone un componente o un módulo que no es compatible con la arquitectura nueva, tendrás problemas. Por eso es crucial que los mantenedores de bibliotecas comiencen a investigar la arquitectura y migrarlas. Ya tenemos un conjunto de bibliotecas que han sido migradas. Estamos recibiendo cada vez más informes de bibliotecas que se están actualizando a la nueva arquitectura. Pero nuevamente, si no has migrado tu aplicación o específicamente tu biblioteca, por favor avísanos qué te está bloqueando y sí, intentemos mejorar esto juntos. Y con esto, realmente espero que en un año a partir de ahora, seis meses a partir de ahora, o cuando busque React Native en tu arquitectura en Google, encuentre tu historia de migración. Nos encantaría escuchar qué funciona para ti y qué no funciona. Estamos haciendo nuestro mejor esfuerzo para escuchar a la comunidad, nuevamente, cuáles son los obstáculos y demás. Pero es crucial que nos cuentes qué funciona y qué realmente no funciona. Específicamente para esto, vamos a tener una sala de discusión hoy con algunas personas de Meta, de Infinite Red, de Microsoft, y demás, para hablar sobre el futuro de React Native en tu arquitectura. Asegúrate de unirte, pasar por allí y vamos a conversar sobre algunas de las cosas que mencioné hoy. Y con esto, quiero recordar que todas nuestras herramientas son de código abierto, y estamos muy emocionados de recibir tantas contribuciones, y quiero agradecerles mucho por escuchar.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.