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.

This talk has been presented at React Advanced 2022, check out the latest edition of this React Conference.

FAQ

La nueva arquitectura de React Native es un conjunto de mejoras estructurales diseñadas para eliminar el cuello de botella del puente en la comunicación. Incluye un nuevo renderizador llamado Fabric, un sistema de módulos nativos conocido como Turbo Modules y un componente de seguridad de tipos llamado CodeGen. Estos elementos juntos permiten un modo sin puente y una mejor integración en múltiples plataformas.

El código C++ se introdujo en los proyectos de React Native como parte de la nueva arquitectura para permitir la reescritura de componentes internos. Esto se hizo para que las optimizaciones y características puedan ser desarrolladas una sola vez y utilizadas en todas las plataformas que soportan React Native, mejorando así la eficiencia y la coherencia entre plataformas.

CodeGen es un componente que genera código a partir de especificaciones API proporcionadas, mejorando la seguridad de tipos en React Native. Facilita la escritura de archivos de especificación que definen cómo debe ser una API, y genera código correspondiente para Android e iOS que maneja tipos específicos de plataforma.

Hermes es un motor JavaScript optimizado para React Native, recomendado para usar con la nueva arquitectura. Ofrece mejoras en la experiencia de depuración y optimización de rendimiento. A partir de React Native 0.70, Hermes es el motor predeterminado, aunque los desarrolladores pueden optar por no usarlo si lo desean.

Para habilitar la nueva arquitectura en React Native, necesitas configurar algunas variables en los archivos de configuración del proyecto. En iOS, utiliza 'pod install' con la variable 'arc enabled' configurada en true. En Android, cambia la línea 'new arc enabled' de false a true en el archivo Gradle.properties y ejecuta el proyecto.

Con la nueva arquitectura, React Native ha introducido cambios significativos en las herramientas de compilación para mejorar la compatibilidad y la eficiencia. Específicamente, se han realizado ajustes en Gradle y se han introducido archivos CMake necesarios para compilar código C++. Además, se ha mejorado la integración con Cocoapods en iOS.

Migrar a la nueva arquitectura de React Native es crucial para aprovechar las mejoras de rendimiento, la eliminación de cuellos de botella y las nuevas características que se están desarrollando. La nueva arquitectura también permite una mayor coherencia y optimización en múltiples plataformas, lo que resulta esencial para el desarrollo futuro.

Nicola Corti
Nicola Corti
26 min
21 Oct, 2022

Comments

Sign in or register to post your comment.

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

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.

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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Entendiendo la Arquitectura Fiber de React
React Advanced 2022React Advanced 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
React Advanced 2023React Advanced 2023
29 min
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
WorkshopFree
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Introducción - Cleo & nuestra misión- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños- Comenzando con la configuración del entorno & “hola mundo”- Introducción a la animación de React Native- Paso 1: Hacer girar la rueda al presionar un botón- Paso 2: Arrastrar la rueda para darle velocidad- Paso 3: Agregar fricción a la rueda para frenarla- Paso 4 (extra): Agregar hápticos para una sensación inmersiva
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Pruebas Efectivas con Detox
React Advanced 2023React Advanced 2023
159 min
Pruebas Efectivas con Detox
Workshop
Josh Justice
Josh Justice
Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena?
En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario.
Tabla de contenidos:
- Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local
Prerrequisitos
- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio