¡La Nueva Arquitectura Está Aquí... ¿Y Ahora Qué?

Rate this content
Bookmark
Slides

La nueva arquitectura de React Native ha estado "llegando el próximo año" desde 2019, ¡pero esta vez, realmente está aquí! Entonces... ¿y ahora qué? ¿Qué necesitamos hacer realmente para beneficiarnos de esta nueva y reluciente tecnología? En esta charla, quiero proporcionar algunos conocimientos y análisis en profundidad sobre el estado actual del proceso de migración a la nueva arquitectura, para ayudarte a ti y a tu equipo a evaluar y estimar cuándo y cómo y cuánto tiempo te llevará llegar al siguiente nivel!

FAQ

La nueva arquitectura de React Native elimina el puente, lo que se traduce en la desaparición de la comunicación a través de JSON y elimina cuellos de botella, permitiendo una mejor interoperabilidad nativa y concurrencia. Además, ofrece un inicio más rápido de la aplicación, mejor gestión de la memoria y mejora tanto la calidad del código como la experiencia del desarrollador.

El punto de partida para migrar a la nueva arquitectura de React Native es la documentación oficial, donde se encuentra una guía detallada para la migración. Esta guía explica cómo refactorizar bibliotecas y aplicaciones para adaptarlas a la nueva arquitectura.

Algunos desafíos incluyen la necesidad de escribir tipos en el código, configurar adecuadamente el entorno para la nueva arquitectura y garantizar la compatibilidad de las bibliotecas de terceros. Además, la integración con React 18 puede requerir migrar la biblioteca de gestión de estado a una versión compatible.

TypeScript juega un papel crucial en la nueva arquitectura de React Native, ya que la escritura de tipos es casi obligatoria. Aporta estructura y ayuda a manejar los requisitos de CodeGen y los módulos, aunque puede presentar limitaciones con tipos avanzados como los tipos de unión.

React 18 introduce características como el batching automático que pueden influir en cómo se manejan las optimizaciones dentro de React Native. Es necesario asegurar que las bibliotecas de gestión de estado sean compatibles con React 18 para aprovechar estas mejoras.

Para la migración, se pueden consultar recursos como la documentación oficial de React Native, el Directorio de React Native para bibliotecas compatibles, y herramientas como React Native Library o RNT Turbo Module Sorter. Además, el React Native Test App de Microsoft facilita la prueba de aplicaciones en la nueva arquitectura.

La nueva arquitectura de React Native permite optimizaciones que pueden hacer que ciertos componentes y aplicaciones sean más rápidos que sus contrapartes nativas, abriendo la puerta a mejoras significativas en el rendimiento y la eficiencia de las aplicaciones desarrolladas.

Lorenzo Sciandra
Lorenzo Sciandra
22 min
21 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla analiza la nueva arquitectura en React Native, destacando sus beneficios como interoperabilidad nativa, concurrencia, inicio más rápido, mejor gestión de memoria y mejora en la calidad del código. El proceso de migración a la nueva arquitectura implica refactorización, generación de código y ampliación de interfaces nativas. Los desafíos incluyen la tipificación, configuración y migración de bibliotecas de terceros. React 18 introduce la agrupación automática y la compatibilidad con la nueva arquitectura. Microsoft está expandiendo React Native para apuntar a plataformas de escritorio y tiene un repositorio dedicado de herramientas de código abierto. La charla enfatiza la importancia de contribuir al código abierto y establecer límites saludables.

1. Introducción a la Nueva Arquitectura

Short description:

Estoy aquí para hablar sobre la nueva arquitectura y lo que significa comenzar a usarla. La principal diferencia es la desaparición del puente, lo que permite la interoperabilidad nativa y la concurrencia. Esto conduce a un inicio más rápido, una mejor gestión de la memoria y una mayor calidad de código. La nueva arquitectura también proporciona una mejor experiencia para el desarrollador. Comencemos con la documentación.

Muy bien. Gracias, Kathleen. Me gusta la metáfora con Gandalf por dos razones. Una de ellas es que en un punto muy famoso de El Señor de los Anillos, casi muere y justo antes de hacerlo, dice: `¡Corred, insensatos!`. Así que siento que estoy en esa fase. No sé si apareceré el próximo año con el pelo blanco y una túnica blanca, pero, ya sabes, podemos hacer que las cosas sucedan. Ya veremos. De todos modos, estoy aquí para hablar sobre la nueva arquitectura, como ya hemos tenido a Gand, hemos tenido a Nicola hablando de ello. Así que estoy aquí respondiendo a la siguiente pregunta lógica, que es: bien, tenemos la nueva arquitectura, ¿y ahora qué? Kathleen ya hizo un gran trabajo presentándome. Solo quería reiterar que soy un ingeniero de software senior en Microsoft y he sido un mantenedor principal y un lanzador de React Native desde 2018. Así que, sí, he estado aquí por un tiempo. Y como Nicola y Gand hicieron un gran trabajo explicando los conceptos de la nueva arquitectura, voy a hacer trampa en mis primeras diapositivas diciendo: oh sí, vamos a ver, esta es la antigua arquitectura. Todos sabemos cómo se ve. Absolutamente todos lo sabemos. Y luego, boom, aquí está la nueva arquitectura. Sí, no necesitamos saber literalmente todo sobre ella. Está bien. Solo hagamos un breve resumen de las principales diferencias. La principal es la desaparición del puente. Y eso significa que ya no hay comunicación a través de JSON, ya no hay cuellos de botella. Esto significa interoperabilidad nativa y concurrencia, lo cual es genial y permite todas estas cosas elegantes de datos y demás. Debido a que tenemos una mejor estructura, también significa que tenemos un inicio más rápido porque ahora los componentes nativos se cargan solo cuando realmente se necesitan. Tenemos una mejor gestión de la memoria porque ahora el sistema operativo sabe más sobre lo que está sucediendo dentro de esta aplicación multiplataforma. Y también tenemos, bueno, al tener más estructura y estar vinculados de manera segura a cosas como Codegen, también tenemos, ya sabes, menos conflictos, una mejor calidad de código en general. Y técnicamente, a través de las nuevas herramientas, también tenemos una mejor experiencia para el desarrollador. Y sobre el papel, esto es genial. Ya sabes, tenemos a Gantt, tenemos a Nikolai elogiándolo, y yo soy un ingeniero. Así que lo primero que me viene a la mente cuando alguien dice algo positivo es: ¿cuándo presiono X en esta conversación? Así que intentemos hacer eso. Veamos qué significa realmente comenzar a usar la nueva arquitectura. Y el primer punto de partida, el lugar más fácil para comenzar, es en realidad

2. Migración a la Nueva Arquitectura

Short description:

La documentación para migrar a la nueva arquitectura está bien hecha. El proceso implica refactorizar, agregar codegen al paquete, ejecutar un comando y extender las interfaces nativas. Para las aplicaciones, el proceso de migración es un poco más complicado pero ofrece más granularidad. A partir de la versión 71 en adelante, los pasos se vuelven más pequeños y alcanzables. Sin embargo, hay complicaciones a tener en cuenta, como la escritura de tipos y los requisitos de CodeGen y módulos para el sistema de tipos.

la documentación. Así que si vas al sitio web de Rackintive, en la sección de guías, hay una hermosa página llamada Migración a la Nueva Arquitectura. Y en realidad, quiero tomar un segundo y aplaudir a Ricardo, Nikolai y el resto del equipo porque, como, la documentación está bastante bien hecha. Y, ya sabes, por lo general, suele estar bastante baja en la lista de prioridades. Pero, como pasar tiempo en tener una documentación adecuada es muy, muy bueno. Y también, ten esto en cuenta a partir de aquí en adelante, para estas primeras diapositivas la premisa es que estamos en la versión 67, la última versión antes de la nueva arquitectura y queremos migrar a la última, la versión que Nikolai estaba usando anteriormente, la 71. ¿Por qué eso? Lo verás en un segundo. Así que si miramos esa documentación y decimos, vale, tengo una biblioteca, necesito migrarla. Lo que terminamos teniendo en términos de cosas que tenemos que hacer es más o menos esto. Tenemos nuestra biblioteca, necesitamos hacer un poco de refactorización, agregamos el codegen al paquete y luego a través de eso ejecutamos un comando y tenemos las interfaces nativas y ahora solo necesitamos extenderlas. Debería ser bastante sencillo. Para las aplicaciones, las cosas se vuelven un poco más complicadas pero de buenas y malas maneras. Como, oh sí, sí, el dibujo es mucho más complicado, tiene más colores y cosas, pero al mismo tiempo, tiene un nivel de granularidad que nos permite migrar una parte primero y la segunda parte después. Pero en realidad, aquí es donde las cosas que Nicola mencionó antes con la 71, como las cosas van a cambiar porque ahora, a partir de la 71 en adelante, prácticamente todo ese borrador se reduce a esto, que es mucho más pequeño, los pasos son mucho más alcanzables. Espero que puedas leerlo, por cierto. Es un poco pequeño, pero el propósito es tener un gráfico grande, un gráfico más pequeño. Así que estamos bien. Ahora, ¿qué puede salir mal? Vale. Tenemos la documentación. Hemos visto que más o menos las cosas se están volviendo más fáciles. Tenemos los pasos, ya sabes. Bien, todo va a ser absolutamente perfecto. Bueno, ya te dije, no confío en nada positivo en el mundo, así que veamos algunas de las complicaciones. Ahora, con fines de anticipación, las llamé desafíos. ¿Por qué? Lo veremos en un segundo. Pero básicamente, he seleccionado tres que creo que son bastante importantes. Y el primero de ellos es la escritura de tipos. Como mencioné antes, la nueva arquitectura prácticamente te obliga a escribir tipos en tu código. Si estás usando JavaScript puro, aparentemente te gusta mucho el dolor, pero por favor, usa TypeScript o Flow. Y una vez que comienzas a investigar los requisitos de CodeGen y los módulos para tu sistema de tipos, te das cuenta de que, en un nivel superficial, todas las tipos principales funcionan bien. Pero luego comienzas a investigar las cosas más avanzadas...

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
¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.
Entendiendo la Arquitectura Fiber de React
React Advanced Conference 2022React Advanced Conference 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
Hemos escuchado mucho sobre la Arquitectura Fiber de React, pero parece que pocos de nosotros la entendemos en profundidad (o tenemos el tiempo para hacerlo). En esta charla, Tejas repasará su mejor intento de entender Fiber (revisado por otros expertos), y lo presentará de una manera 'explicar-como-si-tuviera-cinco años'.
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
React Advanced Conference 2023React Advanced Conference 2023
29 min
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
En Microsoft, estamos comprometidos a proporcionar a nuestros equipos las mejores herramientas y tecnologías para construir aplicaciones móviles de alta calidad. React Native ha sido durante mucho tiempo una opción preferida por su alto rendimiento y gran experiencia de usuario, pero conseguir que los stakeholders se suban al carro puede ser un desafío. En esta charla, compartiremos nuestro viaje de hacer de React Native una opción preferida para los stakeholders que priorizan la facilidad de integración y la experiencia del desarrollador. Discutiremos las estrategias específicas que utilizamos para alcanzar nuestro objetivo y los resultados que logramos.
Opensource Documentation—Tales from React and React Native
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
The Eternal Sunshine of the Zero Build Pipeline
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

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 Conference 2022React Advanced Conference 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
Pruebas Efectivas con Detox
React Advanced Conference 2023React Advanced Conference 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
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.