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!
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 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.
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.
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.
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.
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.
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.
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.
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
Top Content
WorkshopFree
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
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
- 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
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.
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
Comments