¡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!

22 min
21 Oct, 2022

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.

Available in English

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...

3. Desafíos y Tendencias Evolutivas

Short description:

No puedo tener tipos de unión o tipos personalizados. Los tipos deben ser de solo lectura y tener las mismas firmas exactas. Las cosas han estado evolucionando, como mencionó Nikola, con mejoras en el soporte de TypeScript. Meta y Microsoft están colaborando para mejorarlo para todos.

y como, oh, espera un segundo. No puedo tener tipos de unión. No puedo realmente tener tipos personalizados. Los tipos deben ser de solo lectura y deben tener las mismas firmas exactas y las cosas comienzan a ponerse un poco más complicadas. Las cosas están evolucionando en la versión anterior de esta charla como la firma exacta que agrega un punto rojo porque quería mostrar que realmente necesitas agregarlo. Pero desde entonces, las cosas han estado evolucionando, como mencionó Nikola. Ellos realmente están escuchando. Realmente están cambiando las cosas en general. Así que sí, las cosas están evolucionando para mejor. Y también el soporte de TypeScript se siente mejor técnicamente. Esto es algo en lo que Meta y Microsoft están tratando de colaborar. Y tenemos un gran conjunto de PR que estamos enviando de ida y vuelta para tratar de hacerlo mejor para todos porque, ya sabes,

4. Desafío de Configuración de Newark

Short description:

El segundo desafío es la configuración de Newark, donde ciertas cosas no encajan correctamente. Por ejemplo, el comando para ejecutar el código gen difiere entre plataformas, lo que requiere atención. Puede ser necesario refactorizar la biblioteca, incluyendo mover el componente nativo requerido a un archivo separado.

la mayoría de las personas usan TypeScript en estos días. El segundo desafío es lo que yo llamaría la configuración de Newark. Y lo que quiero decir con eso, volvamos a la documentación un segundo, es que si te fijas bien, cuando dije refactorizar para tu biblioteca, dije, oh, sí, estará bien. En realidad, hay un montón de cosas que necesitas hacer. Y si tu biblioteca usa alguna de estas cosas, básicamente significa que necesitas cambiar tu biblioteca. Especialmente, como, incluso si no tienes la mayoría de estas cosas, como el componente nativo requerido literalmente te obliga a mover esa parte a un archivo separado. Así que aunque pienses, oh, estoy bien, no debería hacer nada, sí, en realidad todavía necesitas hacer el requerimiento del componente nativo. Y también en cuanto a la configuración de Newark, tenemos una combinación aquí porque, como, todavía hay ciertas cosas que no encajan correctamente. Como, por ejemplo, el comando para ejecutar el código gen es diferente entre las dos plataformas y ni siquiera es, como, oh, uno es un comando de yarn y el otro es en realidad, ya sabes, un comando de Gradle. Así que es como, oh, vale, sí, estas cosas deben abordarse.

5. Migración de Bibliotecas de Terceros

Short description:

El tercer desafío es la migración de bibliotecas de terceros a la nueva arquitectura. Actualmente, solo ocho más una bibliotecas están completamente migradas, con otras siete en progreso. Esto crea una disparidad entre el número de bibliotecas documentadas en el Directorio de React Native y las migradas a la nueva arquitectura.

Y el tercer desafío, que probablemente también mencionó Nicola antes, son las bibliotecas de terceros. Y lo que quiero decir con eso es que si vamos al Directorio de React Native, que es como este sitio web donde se documentan muchas bibliotecas y puedes encontrar rápidamente las que puedas necesitar. Tenemos más de 1,000 bibliotecas allí, ¿verdad? Y ahora, si vamos al Grupo de Trabajo de la Nueva Arquitectura de React Native que Nicola mencionó antes y vemos la sección dedicada a las bibliotecas de terceros, en realidad veremos que solo ocho más una bibliotecas están completamente migradas a la nueva arquitectura, lo cual es un poco menor que las mil que tenemos en el otro lado. Y, bueno, para ser justos, en realidad hay otras siete en progreso actualmente, y esto no significa que todas las bibliotecas estén documentadas en ambos lugares, pero aún así, hay una disparidad en términos de dónde deberíamos estar y dónde

6. React 18 y la Nueva Arquitectura

Short description:

React 18 introdujo el batching automático, que optimiza el rendimiento pero puede dificultar la comprensión de lo que está sucediendo. Al migrar a React 18, asegúrate de que tu biblioteca de gestión de estado también sea compatible. Un artículo de blog sobre desarrollo frontend proporciona información detallada sobre el soporte de React 18 y cómo interactúa con React Native. La nueva arquitectura tiene efectos en cadena que debemos considerar. Aunque no hay benchmarks disponibles, confía en que la nueva arquitectura es buena. Microsoft, un usuario intensivo de React Native, tiene cinco aplicaciones en su escaparate.

en el que nos encontramos ahora mismo. Y luego, oh, ¿qué está pasando aquí? Oh, no. La premonición está sucediendo. Hay un nuevo desafío. Y, sí, básicamente lo que quería hablar un segundo es sobre React 18 porque, sí, React es genial, absolutamente. Sabes, React solía ser como esta cosa muy suave y lineal, lógicamente lineal, y piensas, vale, sí, si renderizo algo arriba, todo va, y renderizo las cosas abajo y, ya sabes, es solo en una dirección y conoces todos los pasos del camino. Y luego llegó React 18. Introdujeron el batching automático que es perfecto, es una optimización, pero al mismo tiempo eso significa que la biblioteca está diciendo, sabes, sé cómo optimizar cosas, y eso implica que a veces no sabes realmente qué está sucediendo. Así que, básicamente, cuando te muevas a React 18, que es un requisito para Fabric, también debes migrar tu biblioteca de gestión de estado a una versión más nueva que sea compatible con React 18. A menos que tu biblioteca diga, sí, sé cómo manejar cosas de React Native, por favor, revísalo. Y para ayudarte con eso, encontré este muy buen artículo de blog. No sé quién lo escribió, pero es este blog de algo relacionado con el frontend. Y este artículo de blog realmente profundiza en este soporte de React 18, batching automático y cosas así. Y también, como mencionamos antes, hey, creo que ya lo vi antes. Sí, cómo React y React 18 e interactúan con React Native es un poco más complicado. No se trata solo de la versión que establezco en mi package.json. Así que, ya sabes, cuando comienzas a pensar en la nueva arquitectura, también debes comenzar a pensar en todos estos efectos en cadena. Y, ya sabes, por falta de tiempo, digamos que hay muchas más cosas. Pero por favor, confía en mí, la nueva arquitectura es buena. Es buena. Es buena. Absolutamente. Y también, ya que esto también surgió como una pregunta antes, sí, no hay benchmarks. La razón de esto es que hay algunos que están surgiendo. Pero honestamente, no me siento lo suficientemente seguro en ninguno de esos equipos de React, los estoy mirando a ustedes, porque, sí, son casos extremos y cosas así que realmente no siento que pueda mostrar correctamente benchmarks como, oh, esto es lo malo que es. Así que pasando a la última parte, vale, hemos visto que hay una implementación para eso. Hemos echado un vistazo muy rápido y ahora tenemos una idea de cuáles serán los desafíos. ¿Cómo planeamos todo esto? Como mencioné, soy de Microsoft. Y Microsoft, usamos React

7. Migrando Bibliotecas y Código Nativo

Short description:

Para habilitar que tu aplicación migre a la nueva arquitectura, comienza migrando tus bibliotecas o extrayendo código nativo personalizado en una biblioteca. Consulta el sitio web del Directorio de React Native para encontrar bibliotecas que admitan la nueva arquitectura. Considera utilizar React Native Library, RNT Turbo Module Sorter y React Native Test App para un proceso de migración más fluido.

Native mucho. Esto es del escaparate. Y hay cinco aplicaciones. Es posible que hayas visto algunas de estas. No sé si, ya sabes, eres un jugador o si te gusta trabajar en general. Esas cosas tienden a aparecer. Lo siento si necesitas usar Teams, pero no, está bien. No, estoy bromeando. Estoy bromeando. Pero esto es un subconjunto. Para ser, como, completamente serios, esto es un subconjunto. Podríamos haber hecho tres filas más, pero entonces habría parecido a React Native y luego Microsoft y luego todo el camino hasta allá, todo lo demás. Así que pensamos, bueno, elijamos solo cinco. Pero básicamente esto significa que internamente necesito idear algunas ideas que pueda compartir con todos los demás. Pensamos, vale, así es como lo vamos a hacer porque estos proyectos son enormes y necesitamos asegurarnos de que las cosas funcionen. Así que se me ocurrió esto porque me gustan los gráficos. Tal vez te hayas dado cuenta hasta ahora. Y sé que es pequeño, así que intentaré hacerlo un poco más grande, probablemente aún ilegible. Pero la idea básica es que quieres estar en la última versión de React Native disponible en cualquier momento porque, como dijo Nicola, seguimos intentando mejorar las cosas cada vez y en cada ocasión que tenemos. Pero luego, como las bibliotecas son lo que necesitas migrar para habilitar que tu aplicación migre a la nueva arquitectura, ese es el primer paso. Si tienes una biblioteca, migra la biblioteca. Si no tienes una biblioteca pero tienes código nativo personalizado, extráelo en una biblioteca y luego migra eso por separado. Comienza por las bibliotecas. Eso es más o menos todo. En el sitio web del Directorio de[142 bibliotecas que admiten la nueva arquitectura. Eso debería ayudarte a evaluar, vale, estoy usando estas bibliotecas, veamos en el sitio web si aparecen en esta lista. Si no, migremos o interactuemos y veamos qué podemos hacer para ayudar a migrarlas. Y especialmente, si estás considerando extraer tus módulos nativos, también echa un vistazo a React Native Library o RNT Turbo Module Sorter, esas dos bibliotecas te ayudan a iniciar tu nueva biblioteca compatible con Turbo Module. Y también puedes usar React Native Test App, que es una biblioteca nuestra en Microsoft como una aplicación de prueba porque facilita mucho las cosas. Ya admite tu arquitectura, solo cambias una opción y funciona. Y, sí, ese es más o menos el plan que estoy considerando internamente. Espero que también te ayude. Pero, por supuesto, hay una gran pregunta

8. Feedback Loop and New Architecture

Short description:

El ciclo de retroalimentación a través del repositorio dedicado es algo único. Aprovecha esta oportunidad para informar problemas y mejorar React Native. Hay una discusión separada sobre cómo mejorar React Native. La nueva arquitectura es impresionante y será muy importante. Prepárate para ello y permite que las bibliotecas del sistema operativo se migren. Prueba rápido, falla rápido y cuéntaselo a todos.

lo cual es como ¿por qué empezar ahora? Como está claro que las cosas siguen evolucionando. Pero para ser honesto, como alguien que ha estado involucrado con React Native en gran medida, incluso tratando de ser un mantenedor y comunicándome mucho, puedo decirte que en este momento, el ciclo de retroalimentación que existe a través de este repositorio dedicado es realmente algo especial. Como el hecho de que puedas informar algo y, como, hey, por cierto, no creo que esto funcione muy bien, se soluciona. No es algo que suceda todos los días. Como que Meta no ha sido así para siempre. Y tal vez no lo sea en el futuro. Así que aprovecha esta oportunidad mientras puedas. Y hablando de aprovechar tus oportunidades mientras puedas, en este momento también hay una discusión separada sobre cómo podemos mejorar React Native en general. Pero esto es literalmente solo el martes. Así que aprovecha tus oportunidades. Ve allí. Sé parte del equipo de React Native. Esto es lo que me gustaría que hagas mejor. Es bueno. Están muy atentos. Son muy proactivos en ayudar. Así que aprovecha esta oportunidad. En resumen, nos quedan 30 segundos. Sí. Sí. La nueva architecture es bastante impresionante. De nuevo, aquí hice trampa y solo te mostré un par de borradores, pero por favor confía en mí. Desde una perspectiva de architecture, es mucho mejor. La segunda cosa, que espero que puedas transmitir a tus gerentes y compañeros, es que, por cierto, la nueva architecture será muy importante. Necesitamos prepararnos para ello. Y luego, por supuesto, permitir que las bibliotecas del sistema operativo se migren a la nueva architecture es clave. Necesitas que tus bibliotecas funcionen dentro de tu architecture para poder migrar tú mismo. Así que si tuviera que resumirlo, si necesitas escribir un tweet al respecto, es simplemente esto. Prueba rápido, falla rápido y cuéntaselo a todos. Porque si no nos ayudamos mutuamente, esto será mucho más complicado. Y gracias a todos.

9. React Native at Microsoft

Short description:

Amamos React Native y lo estamos expandiendo para apuntar a plataformas de escritorio con React Native Windows y React Native macOS. Tenemos equipos dedicados y un repositorio de herramientas de código abierto llamado RNX kit, que incluye un alineador de dependencias y otras herramientas críticas. También hemos agregado tree-shaking a Metro a través de uno de los complementos y hemos desarrollado React Native desktop, que tiene mucho potencial en el futuro.

Gracias. Wow. Muchas gracias, Lorenzo. Sí. Y nuevamente, el trabajo que has realizado dentro de esta comunidad de React Native es enorme. Gracias. Enorme. Y sí. Muchas gracias. ¿Tenemos tiempo, verdad, para preguntas? Sí. Entonces, si aún no lo has hecho, ve a Slido del uno al cuatro. No te olvides de la pista anterior. Haz la pregunta allí y las revisaremos. De lo contrario, si aún no hay preguntas disponibles, déjame revisarlo. Mientras tanto, tengo una pregunta preparada para ti. Me gustan las preguntas. Estás hablando de Microsoft y el ecosistema de React Native dentro de Microsoft. Si puedes darnos más detalles sobre lo que está sucediendo dentro de Microsoft en términos de React Native. Oh sí. Quiero decir, como dije, amamos React Native y estamos haciendo muchas cosas. Tal vez algunas de las más famosas son, ya sabes, estamos expandiéndolo en términos de plataformas, como React Native en iOS y Android. En Microsoft, realmente creemos tanto en esa idea que hemos creado React Native Windows y React Native macOS para apuntar a las plataformas de escritorio. Así que tenemos equipos dedicados para eso. Y también, insinué que tenemos todo un conjunto de herramientas que estamos compartiendo como código abierto para los desarrolladores de React Native, porque eso es lo que la gente usa internamente. Así que tenemos el repositorio RNX kit, que es básicamente donde intentamos poner todas nuestras herramientas. Por ejemplo, encontrarás un alineador de dependencias y otras herramientas críticas allí. Agregamos tree-shaking a Metro a través de uno de los complementos allí. Y también tenemos el React Native desktop, que es como este sandbox, que es bastante bueno. Estamos invirtiendo mucho en él porque creemos que tiene mucho potencial en el futuro.

10. Contribución de código abierto y manejo del estrés

Short description:

RNX kit es increíble. Encuentra un proyecto pequeño al que contribuir y establece una comunicación directa con el mantenedor. Cada contribución cuenta. Establece límites saludables en el código abierto y no te apresures. El estrés en el código abierto es común, establece límites y no sientas la necesidad de responder de inmediato. La nueva arquitectura abre oportunidades para optimizaciones que no son alcanzables con código nativo.

Eso es genial. Sí. RNX kit, es increíble. Realmente me gustaría invitar a todos a echarle un vistazo, especialmente si quieres actualizar tu aplicación de React Native, deberías hacerlo. Tengo una pregunta más. ¿Cuál es tu consejo para los recién llegados al código abierto? O sí, porque eres la mejor persona para preguntar, si puedes darnos, como, soy un recién llegado a la comunidad de código abierto, ¿qué debo hacer primero y qué crees que es, cuál es tu consejo aquí? Sí, quiero decir, creo que el código abierto puede realmente sentirse como algo masivo, y el repositorio de React Native, en particular, es tan masivo que la gente puede asustarse fácilmente. Mi sugerencia es encontrar un proyecto pequeño que uses, como, digamos una biblioteca de React Native que uses, pero que tenga menos de 100 estrellas, algo pequeño, e intentar establecer una comunicación directa con el mantenedor. Como, decir, hey, me gustaría aprender código abierto, me gustaría ayudar con esta biblioteca, y, ya sabes, por lo general lo que sucede, especialmente con estas bibliotecas más pequeñas, es que la persona realmente puede, sabes, guiarte y darte una idea de lo que se necesita y cómo hacer contribuciones, y también, la otra mitad de esto es que cada contribución es una buena contribución. No es como, oh, presenté, arreglé el error tipográfico, y eso no cuenta, no, literalmente todo, así es como empecé. Había un sitio web que mostraba tu primer PR, y era como, arreglé el error tipográfico en un sitio web de ruby o algo así, se trata de comenzar y aprender cómo funciona la herramienta, y luego todas las cosas sucederán con el tiempo, simplemente no te apresures.

De acuerdo, eso es genial, y como una pregunta de seguimiento a esto, quiero decir, supongamos que sabes cómo empezar con el código abierto, has contribuido un poco o bastante, ¿cómo lidiar con el estrés en el código abierto, y sí, tal vez el síndrome del impostor, pero el estrés en general. Oh, sí. Hacer código abierto puede ser realmente estresante, como que soy un poco del uno por ciento de las personas que, como, cuando hago clic en lanzar, no quiero pensar en los números de descarga porque si no, nunca voy a lanzar nada. Pero, como, es difícil. Necesitas establecer límites saludables y, como, no te dejes arrastrar por la cultura de, oh, necesito hacerlo todos los días, necesito responder inmediatamente a cada problema, como, está bien, puede esperar. A menos que estés trabajando en, por alguna razón, un proyecto de código abierto que mantiene con vida a un hospital, está bien. Si tarda una semana más de lo previsto, está bien. Como, sabes, se trata de crear límites, creo. Hablando de hospitales, solo un paréntesis aquí. Tenemos una charla el lunes sobre baños públicos en el Reino Unido, definitivamente deberías echarle un vistazo, que es de código abierto, por cierto. Sí, gracias, Lorenzo, lamentablemente se nos acabó el tiempo. Si quieres hacer alguna pregunta, búscalo. En realidad tenemos una, okay. ¿Cuáles son las oportunidades que surgen de la nueva arquitectura que te emocionan más? Oh, okay, sí. Trataré de ser breve, porque se nos acabó el tiempo. Pero creo que la nueva arquitectura especialmente abre la puerta a optimizaciones que normalmente con código nativo no son alcanzables. Así que puedo prever un futuro en el que algunas aplicaciones y componentes basados en React Native sean realmente más rápidos que sus contrapartes nativas. Eso es técnicamente posible, así que estoy deseando ver que eso suceda en el futuro. Eso es genial, sí. Muchas gracias y una vez más, aplaudamos a Lorenzo. Gracias.

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.