React Native: 2022 y más allá

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Slides
Rate this content

Desde la perspectiva de enviar innumerables aplicaciones de React Native en los últimos siete años, React Native ha crecido y continúa evolucionando. ¡Viene algunos cambios importantes! La mayoría de las personas han oído hablar de "el puente de React Native", pero ¿has oído hablar de TurboModules, Fabric y codegen? Esta charla es un pase rápido al frente de la fila en la nueva arquitectura próxima de React Native y cómo va a redefinir el desarrollo multiplataforma. Repasaremos lo que necesitas saber.

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

FAQ

React Native es una extensión de React, que encapsula funciones componibles para escribir componentes en JavaScript que parecen HTML. React Native permite el desarrollo de aplicaciones móviles utilizando JavaScript y React, utilizando un sistema de puente para la comunicación entre el código JavaScript y las plataformas de host nativas.

InfantRed comenzó su involucramiento con React Native en 2015 y desde entonces ha participado activamente en la comunidad, incluyendo tomar el control del boletín de noticias de React Native en 2016 y iniciar la conferencia Chain React en 2017.

Ignite es una plataforma desarrollada por InfantRed que proporciona una plantilla y conjunto de herramientas para la creación de aplicaciones en React Native. Ignite ha sido ampliamente aceptado y utilizado, con más de 14,000 estrellas en GitHub y numerosos casos de éxito en aplicaciones en producción.

La nueva arquitectura de React Native elimina el tradicional sistema de puente y lo reemplaza con JSI (JavaScript Interface) para una comunicación directa con un núcleo compartido en C++. Esto permite una mayor interoperabilidad y eficiencia en las comunicaciones entre JavaScript y el código nativo.

Los usuarios pueden contribuir al Ignite Cookbook enviando recetas a través de GitHub. Las recetas deben ser propuestas primero para asegurar que no se dupliquen y, tras una revisión, pueden ser aceptadas y añadidas al libro de cocina.

React Native Radio es un medio a través del cual InfantRed comparte noticias y actualizaciones sobre React Native. Desde 2020, InfantRed ha tomado el control de esta plataforma, contribuyendo significativamente a la difusión de información y recursos valiosos dentro de la comunidad de React Native.

Gant Laborde
Gant Laborde
27 min
21 Oct, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla cubre la experiencia del orador con React Native y su participación en iniciativas de React Native. Se discuten los desafíos enfrentados en los primeros días de React Native, la creación de Ignite para abordar problemas de entrega de aplicaciones y la introducción de React asíncrono y React Native síncrono con React 18. También se destacan las características y errores en Gatsby, la integración de bibliotecas a través del Ignite Cookbook y la nueva arquitectura que utiliza el motor de JavaScript Hermes y los módulos turbo. La charla concluye con la importancia de la colaboración comunitaria y la estabilidad y beneficios de Ignite.
Available in English: React Native: 2022 & Beyond

1. Introducción y experiencia con React Native

Short description:

Esta parte presenta al orador, su experiencia con React Native y su participación en diversas iniciativas de React Native.

Buenos días. Muy bien, perfecto. Muy bien, así que tenemos una charla relajada de tres horas, ¿verdad? Estamos hablando de React Native 2022 y más allá. Oh, 20 minutos. Podría acortarlo. No hay problema. Ya han oído hablar de mí. Soy el CIO de InfantRed, autor publicado. Tomen fotos de mí durante esta presentación y publíquenlas en Twitter, en mi cuenta @GantLaBoard. Traje una copia muy genial de mi libro y la puse en una especie de gabardina steampunk para el libro y todo eso. Súper increíble. Después seleccionaré a uno de ustedes para darle una copia firmada del libro. También soy GDE, MDE, Oracle Groundbreaker, Amazon Community Builder y, solo para completar el abecedario, puse LMNOP. Así que para hablar un poco de mi experiencia con React Native, comencé en 2015 con una maravillosa empresa llamada InfantRed, y si miras React Native, estamos en todas partes. En 2016, nos hicimos cargo del boletín de noticias de React Native. En 2017, comenzamos la conferencia Chain React, la conferencia de React Native en Estados Unidos, y en 2020, nos hicimos cargo de React Native Radio, por lo que si buscas noticias de React Native, estamos significativamente involucrados y hemos ayudado a muchas personas en el camino, ya que somos una consultoría.

2. Explorando React Native: Conceptos Clave de Hoy

Short description:

Esta parte presenta al orador, su experiencia con React Native y su participación en diversas iniciativas de React Native.

Así que todos están aquí para hablar un poco y aprender un poco sobre React Native, y es como uno de esos momentos en los que React Native funciona, ¿verdad? Todos somos adeptos a esto. Están en buenas manos hoy porque solo tengo 20 minutos para sumergirme con ustedes, pero tienen tantas charlas increíbles por venir. Estas son algunas charlas que se están llevando a cabo hoy en esta misma sala. Se tratarán sobre la nueva arquitectura, sobre React Native en todas partes, estos son todos los conceptos geniales que quiero asegurarme de que si no los cubro en esta charla, sé que se tratarán en charlas más adelante hoy. Estas personas se encargarán muy bien de ustedes.

3. React Native Origen y Desafíos

Short description:

Esta parte discute el origen de React Native y su conexión con React, el uso de componentes, el sistema de puente y los desafíos enfrentados en los primeros días. También menciona el artículo del autor sobre los puntos problemáticos de React Native en 2016 y las preguntas que la gente tenía sobre la comunicación nativa, la compatibilidad hacia atrás, asíncrono versus sincrónico y las elecciones de bibliotecas. La parte concluye con la mención de la lucha del navegador y el objetivo de compartir sabiduría en la comunidad de código abierto.

Entonces, esta es la primera charla de la mañana, así que tenemos que retroceder un poco y hablar sobre el origen de React Native y su conexión con React, el uso de componentes, el sistema de puente y los desafíos enfrentados en los primeros días. También menciono mi artículo sobre los puntos problemáticos de React Native en 2016 y las preguntas que la gente tenía sobre la comunicación nativa, la compatibilidad hacia atrás, asíncrono versus sincrónico y las elecciones de bibliotecas. La parte concluye con la mención de la lucha del navegador y el objetivo de compartir sabiduría en la comunidad de código abierto.

Entonces, esto es lo que sucede con React Native independiente de JavaScript. ¿Cuál es el origen aquí? Y solo porque nunca sé cómo será la audiencia, cuántas personas están familiarizadas con esto o no, pero React era una encapsulación de funciones componibles para escribir HTML, pero ahora estás escribiendo componentes en JavaScript. Tomó esta idea de estos componentes y luego los envolvió de manera muy elegante para ti, y lo hizo sentir como HTML, pero cada vez, como la mayoría de ustedes han hecho con React, cada vez que intentas establecer la clase, te das cuenta de que no puedes hacerlo porque en realidad todo está en JavaScript y la clase es una palabra clave dentro de JavaScript, por eso tienes que decir nombre de clase en React. Pero podría ser cualquier cosa ahí dentro.

Y luego realmente creamos componentes geniales y luego los renderizamos. Así es como funcionaba originalmente React Native. Tenías tus reglas de diseño del DOM que iban al diseño de yoga para el diseño de la plataforma de host en particular, y luego pudimos crear estas cosas realmente geniales. Podría haberse llamado de cualquier manera. Una vista podría haberse llamado un div. Creo que eso es retroceder en cierto grado, pero siempre es una vista y diferentes cosas. Pero en React Native, tienes estas ideas de nivel superior, vista, vista de desplazamiento, texto, entrada de texto, y luego en la parte inferior, tengo traducciones para las personas que solo han trabajado con React.

Y luego, por supuesto, como todos sabemos, aquí es donde entra en juego lo nativo, ¿verdad? Nativo, pongo un componente de texto allí, se convierte en una etiqueta de interfaz de usuario o una vista de texto dependiendo de en qué plataforma se esté ejecutando realmente. Y como todos sabemos, este es el infame sistema de puente que ha sido la pesadilla de algunas personas y no de muchas, pero aquí tienes tus plataformas de host o nativas comunicándose a través de cadenas serializadas directamente en JavaScript y comunicándolo de vuelta. Así es como era la idea clásica cuando comenzamos todo esto. Este era el puente, y fue una gran idea, pudimos tomar JavaScript, ejecutarlo y luego obtenerlo en una plataforma de host en particular, y eso fue todo. Estábamos conectando paquetes de npm directamente a aplicaciones móviles. Así se sentaron las bases, y luego, éxito, React Native está funcionando, todos estamos felices, no queda nada por hacer y estamos listos, excepto que no era un gran fanático de cómo era la experiencia al principio, aunque me encantaba React Native, había tantos dolores de cabeza, y escribí un artículo, por favor, todos, esto es tan llamativo, ¿verdad? Pero fue un artículo fantástico y escribí sobre lo que no funcionaba en React Native en 2016, y en realidad, todos esos problemas se resolvieron significativamente ahora, pero durante este caos de conectar por primera vez estas dos cosas a través de ese hilo único de este puente y todo lo demás, teníamos estas preguntas, la gente tenía preguntas sobre cómo hablar con lo nativo, no se entendía de inmediato al principio. La gente tenía preguntas sobre la compatibilidad hacia atrás a medida que React Native se actualizaba. La gente tenía preguntas sobre asíncrono versus sincrónico. Fue muy interesante porque en el mundo de React, no estabas acostumbrado a esta estructura asíncrona, no existía algo así como asíncrono dentro de React. Entonces vienes a React Native y todo lo que cruza el puente es asíncrono. Y luego la gente tenía preguntas sobre qué bibliotecas usar a medida que avanzamos en el camino. ¿Alguien ha estado usando React Native desde 2016? ¿Recuerdan los puntos problemáticos? Veo algunas manos doloridas. ¡Levanten! Y también, una cosa divertida, tenía esta parte en el artículo, la lucha del navegador, si recuerdan en ese entonces. Navegación. Afortunadamente, la gente mejoró eso significativamente. Pero nuestro objetivo era compartir la sabiduría. Y simplemente código abierto. Somos una empresa de código abierto. Así que, por supuesto, tenía esta solución.

4. Creating Ignite and New Challenges

Short description:

En 2017, el orador creó una solución integral, Ignite, para abordar los problemas de entrega de aplicaciones. Ignite ha tenido éxito con más de 14,000 estrellas y numerosas historias de éxito. El orador enfatiza la importancia de devolver a la comunidad de código abierto y la necesidad de que las consultorías contribuyan. Sin embargo, han surgido nuevos desafíos con la introducción de React asíncrono y React Native síncrono, así como cambios en la arquitectura con el Renderizador de Fabric y JSI.

Y en 2017, pensé que mi solución para esto era simplemente seguir adelante y crear una solución integral, Ignite, una especie de plantilla de información que dice, como, aquí es cómo entregamos aplicaciones en una consultoría paga. Aquí están los problemas que tenemos, aquí están nuestras soluciones y aquí lo tienes. Y funcionó de manera fantástica. Ignite tiene más de 14,000 estrellas. Funciona extremadamente bien. Tenemos toneladas de historias de éxito que la gente ha compartido con nosotros, en muchas y muchas aplicaciones en producción, y es agradable tener eso, ya sabes, la gente constantemente nos dice, ¿por qué están regalando todo esto? No puedo decirte cuántas bibliotecas de código abierto, estoy seguro de que todas las maravillosas empresas de código abierto nos escuchan todo el tiempo, Formidable, estoy seguro de que todos se preguntan, ¿cómo están regalando VictoryCharts, cosas así, cómo están regalando Ignite? ¿Cómo están haciendo todas estas cosas por nosotros? Regalamos cosas, y eso es lo que hacemos, eso es lo que las consultorías deben hacer, porque es una comunidad. Así que, ta-da, el problema está resuelto, ¿verdad? Les hemos dicho a todos cómo hacerlo.

5. React 18, Fabric Renderer, JSI, and Ignite

Short description:

React 18 introduce React asíncrono y React Native síncrono, junto con el Renderizador de Fabric, JSI y un núcleo compartido en C++. El puente está siendo reemplazado por JSI, y hay preguntas sobre la comunicación con el código nativo, la compatibilidad hacia atrás, la asincronía versus la sincronía y las opciones de biblioteca. Ignite es una gran solución, ahora en la versión 8, con características y soporte mejorados. Nuestra empresa está implementando una nueva arquitectura y aprendiendo de la primera iteración. Hemos invertido en mejoras significativas y estamos comprometidos a compartir nuestro conocimiento.

Entonces, avanzamos en el tiempo, todo funciona ahora, ¿cómo lo perfeccionamos? Tenemos algunos cambios importantes, ¿verdad? Como mencioné antes, tenemos a React siendo síncrono y a React Native siendo asíncrono, pero ahora con la llegada de React 18, en realidad tenemos la funcionalidad de tener React asíncrono y la capacidad de tener React Native síncrono. Esto está sorprendiendo a todos un poco, y estamos avanzando con el Renderizador de Fabric, que nos brinda características concurrentes, interoperabilidad y eventos síncronos.

Habrá muchas charlas, seguramente, sobre el Renderizador de Fabric más adelante. Pero tenemos esta nueva estructura, y luego está llegando con muchas nuevas funcionalidades. Ahora no tenemos más puente, tenemos JSI con acceso directo a través de un núcleo compartido en C++. Antes, la estructura de React Native estaba bajo iOS y Android, y bajo cada plataforma de host en particular, y ahora tenemos esta capa compartida en C++, por lo que si se te ocurre una optimización, no tienes que hacer inmediatamente cinco tareas para implementarla en todas las demás plataformas, ¿verdad? Tenemos una mayor capacidad de compartir y un inicio más rápido.

El Renderizador de Fabric está llegando, y por supuesto, tenemos JSI combinado con Hermes y React Native yendo a un árbol de sombras. Ahora tenemos este gran cambio. Lo que te mostré antes sobre pasar cadenas entre JavaScript y pasar cadenas de vuelta a la plataforma nativa, una de las cosas que está sucediendo es que el puente está siendo reemplazado por JSI. Tenemos esta nueva arquitectura. Estamos listos. Suena genial. ¿Cuándo podemos tenerlo? Todo va fantásticamente bien. Y luego la gente comienza a trabajar con la nueva arquitectura, y personalmente he visto muchas preguntas, incluyendo cómo comunicarme con el código nativo, ¿qué es la compatibilidad hacia atrás? Preguntas sobre la asincronía versus la sincronía. Preguntas sobre qué biblioteca usar mientras se avanza en el progreso, porque no todo está soportando la nueva arquitectura. He escuchado estas preguntas antes. No soy tan viejo. Soy viejo, pero no tanto. Así que sigo adelante, y creo que una de las mejores soluciones que hemos tenido es una gran solución nuevamente, y por supuesto, tengo que decir que es increíble, Ignite. Es una forma maravillosa, maravillosa, y ahora está en la versión 8, y debo decir que Ignite Maverick no tiene igual. Es una plantilla e información hermosa para todos, y nuestro objetivo es mejorar lo que aprendimos de la primera iteración. Aprendimos cómo ayudar a las personas más. Hemos tenido 110 solicitudes de extracción, más de 400 cambios, se agregaron más de 14,000 líneas y se eliminaron más de 22,000 líneas, y sí, hemos invertido más de 800 horas de desarrollo para mejorar esto, y eso es a tarifas estadounidenses, ¿de acuerdo? Si ves... Amplía en las lágrimas, si puedes. Personalmente, esto es el lanzamiento de nuestra empresa hacia la nueva arquitectura. Estamos aprendiendo cosas y luego las estamos implementando de una manera en la que sentimos que podemos compartirlas. Y así surge la pregunta, ¿qué es... Cuando creas una nueva aplicación de React Native, ¿qué tipo de cosas agregas? Siempre agregas a tus aplicaciones. ¿Alguien puede mencionar algunas? Tienes que agregar...

6. Ignite Features and Bug in Gatsby

Short description:

Ignite ofrece una variedad de características, incluyendo navegación, pruebas, informes de errores y componentes personalizables. Ofrece una configuración bien documentada con ejemplos de cómo crear componentes y aborda los desafíos comunes de implementación de aplicaciones. La infraestructura de Ignite Maverick está diseñada para respaldar nuevos proyectos, pruebas de concepto y trabajo con clientes. El orador destaca un error en Gatsby y pregunta si alguien conoce la solución, enfatizando el papel del MC.

¿Qué es eso? Navegación, sí. ¿Alguna otra? Pruebas. ¿Pruebas, sí? También tienes informes de errores, ¿verdad? Tienes algunas otras cosas. Así que quiero decir, siempre... Mi favorito personal. Siempre tengo que actualizar ese pequeño ícono cada vez que tengo un proyecto de fin de semana. Necesito que muestre inmediatamente el nombre de mi nueva aplicación y todas las demás cosas geniales. Estos son los problemas que resolvemos cada vez y no deberían venir con una implementación básica de una aplicación nativa de React. Pero estos son los problemas que vienen con Ignite. Tenemos todas estas características aquí.

Entonces, si quieres, esta es la pila tecnológica. Puedes ver TypeScript, un montón de bibliotecas de expo, solo detox. Así que estamos hablando de pruebas, hablando de estado, hablando de animaciones con reanimated. Estos vienen con ejemplos, preparándote y listo para comenzar. Y luego también tenemos un montón de componentes que hemos incluido. Casi siempre tenemos que hacer componentes personalizados. Al traer una biblioteca, te encuentras con la barrera donde se detiene la biblioteca. Aquí tienes ejemplos de cómo hacer esos componentes. Cómo tenerlo todo configurado. Una configuración extremadamente bien documentada de toda la infraestructura de Ignite Maverick.

Entonces, cuando creas un nuevo proyecto de fin de semana, o creas un nuevo proyecto como una prueba de concepto a la que podríamos migrar, o tienes cualquier otra configuración, no estás comenzando desde cero. Estás comenzando con lo que nosotros comenzamos. Con cada cliente que tenemos. Y aquí tienes un ejemplo. Por ejemplo, Gatsby, echa un vistazo a este pequeño error que ves aquí. Haces clic, ves ese pequeño temblor cuando salta ahí arriba. ¿Puedo ir a eso? ¿Alguien ha identificado exactamente si viste eso ahora mismo, sabrías exactamente cómo solucionarlo? ¿Sabes cuál es el problema y cómo solucionarlo? Y cómo evitar ese problema? No, todo eso estuvo mal. Puedo hacer eso. Él es el MC. Si hay una persona a la que puedes atacar, es el MC.

7. RView, Internationalization, Ignite Cookbook

Short description:

Si estás utilizando RView, la solicitud de extracción con el número 2234 soluciona un problema que no será visible al usar RView. Se admite la internacionalización, incluyendo de izquierda a derecha y de derecha a izquierda. Ignite ofrece características incorporadas como pantallas de presentación e iconos. El Ignite Cookbook es una nueva adición, donde las personas pueden contribuir con recetas. Visita ignitecookbook.com para obtener más información.

Así que no tienes que preocuparte por eso. Si estás utilizando RView, aquí está la solicitud de extracción y puedes ver que el número es 2234, la solicitud de extracción para solucionar eso, y eso lo soluciona en cada proyecto que se realice a partir de ahora. Así que ese es un problema resuelto. Simplemente utilizando RView, no verás ese problema. Estás obteniendo el valor R allí específicamente. Eso es lo que quiero decir.

No puedo competir con lo que todos pueden hacer. Es trabajar en equipo. Además, la internacionalización es genial. Tenemos de izquierda a derecha, de derecha a izquierda. Si todos pueden hacer eso. Tenemos miembros del equipo que han traducido eso. Es maravilloso. Mis favoritos personales, obtienes de inmediato una pantalla de presentación e iconos allí. Sé que todos tienen sus propios trucos para hacerlo y todas estas cosas, pero está incorporado. Y aquí estamos. Este es el resultado de proyectos reales, de nuestras experimentaciones que ocurren en pequeños incrementos. Y cuando descubrimos que funciona, lo llevamos a Ignite para que funcione para todos. Y así es como obtienes esta ventaja sin tener que hacer la experimentación tú mismo.

Esto trae algo que realmente creo que deberíamos haber hecho la primera vez, pero esto es genial. Esta vez estamos agregando... No puedes agregar todo allí. Es demasiado complicado. Ahora estamos agregando esta hermosa idea del Ignite Cookbook. Es gratuito. No es un libro publicado. Ni siquiera tiene sentido. Vas a ignitecookbook.com y hay recetas añadidas. Aquí es donde nos encantaría que la gente contribuyera. Has agregado una biblioteca en particular.

8. Library Integration and New Architecture

Short description:

Tu biblioteca se puede agregar a React Native a través del Ignite Cookbook. Maverick está utilizando la nueva arquitectura, incluyendo el motor JavaScript Hermes para un inicio más rápido y una disminución de la memoria. Está activado de forma predeterminada, lo que resulta en tamaños de aplicación más pequeños. Aunque aún no es compatible con Xbow Go iOS, se puede utilizar como una prueba de capacidad. Se está investigando la preparación de Fabric, con un enfoque en la amplia pila tecnológica y las animaciones. Se está utilizando React Native Reanimated, pero no la versión alfa que admite Fabric.

Tu biblioteca en particular debe agregarse a React Native. Agrégala al Ignite Cookbook y ahora es una fórmula paso a paso sobre cómo podemos agregarla. No son cosas que cada cliente necesitaría. Son cosas que un cliente podría necesitar. Es algo que podrías necesitar. Y eso está creciendo. Esa lista crece cada día. Así que espera que eso siga sucediendo. Ya hay una solicitud de extracción al respecto.

Entonces, aquí está la gran pregunta. ¿Cuánto está utilizando Maverick la nueva arquitectura? Como dije, es un traslado al nuevo sistema. En primer lugar, todos han oído hablar de Hermes y su inicio más rápido, disminución de la memoria. Es un motor JavaScript de código abierto que, creo, se ha activado de forma predeterminada. Eso es algo a lo que también le hemos dado el visto bueno. Activado de forma predeterminada. Da un tamaño de aplicación más pequeño. Lo hemos visto. Y funciona maravillosamente. Lo tenemos en iOS nativo, Android nativo, Xbow Go Android. Y luego, porque aún no es compatible, no está dentro de Xbow Go iOS. Pero si inicias una nueva aplicación, se activará. Por lo tanto, casi puedes usar eso como una prueba de lo que creemos que es capaz y compatible.

¿Y está listo para Fabric? Lo será. A medida que nos aventuramos, estamos investigando constantemente lo que estamos haciendo con Fabric. Pero como viste, tenemos una gran pila tecnológica detrás. Animaciones, cosas así. Tenemos React Native Reanimated. Pero estamos usando dos. No estamos usando la versión alfa que admite Fabric todavía.

9. Turbo Modules and New Architecture

Short description:

Maverick comenzará a utilizar los módulos turbo una vez que se active la bandera de la nueva arquitectura. El código ya está en su lugar, pero requiere la luz verde para funcionar.

Dado que no lo estamos utilizando en aplicaciones de clientes, aún no está dentro de Maverick. Tan pronto como podamos, lo estará, y así es como llegamos allí. Es casi como si siguiera eso como una prueba de lista. Y la gran pieza real de eso son los modules turbo. Porque, como dato curioso sobre los modules turbo, como sabes, en la arquitectura original, los modules nativos tenían todo tipo de problemas. La inicialización de Eagle sería genial. Pero tenían eager. Errores. Y repiten, no hay forma de hacer tree shaking o algo así. Entonces, lo que termina sucediendo es que obviamente las cosas se están trasladando a los modules turbo, que tienen un conjunto significativo de beneficios que están por venir. Entonces, obviamente, tan pronto como podamos, estaremos utilizando los modules turbo. Estoy bastante seguro de que escucharás sobre los modules turbo muchas veces. Estoy bastante seguro de que algunos de los oradores que vienen lo tienen tatuado, ¿verdad? ¿Es eso correcto? Sí. Entonces, Maverick y los modules turbo, ¿los tenemos? En cierta medida. Tan pronto como se active la bandera de la nueva arquitectura, comenzará a usarlo de inmediato. Entonces, pusimos el código allí de manera preventiva para asegurarnos de que todo esté listo. Pero desafortunadamente, solo funciona una vez que podemos activar todo en una nueva arquitectura. No hay una gradiente para ajustar estas cosas. Así que tenemos que esperar la luz verde para que funcione. Luego, activamos ese tipo de cosas.

10. Ignite Maverick Version 8.2.5 and Opportunities

Short description:

Ignite Maverick ya está en la versión 8.2.5, con numerosas mejoras. La charla no cubrió todas las características integradas, pero si tienes información valiosa para compartir, contáctanos. Puedes contribuir con recetas, ideas e incluso participar en el podcast de Jamin.

Como dije, Ignite Maverick ya está en la versión 8.2.5. Y acabamos de lanzar la versión 8, no hace mucho tiempo. Así que ya hay muchas mejoras. Y durante esta charla, como dije, ni siquiera pude cubrir todas las características geniales que hemos integrado en esto. Así que hay mucha información. Si tienes mucha información y estás buscando un buen lugar para compartirla, ven a hablar con nosotros. Puedes ver qué tipo de recetas, qué tipo de ideas tienes. Incluso podemos invitarte al podcast de Jamin y ver si puedes hablar sobre tus opiniones. Eso también sería divertido.

QnA

React Native, Ignite, and Q&A

Short description:

React Native ha sido una solución probada, resuelta y maravillosa con algunos obstáculos. Creemos en ir lejos juntos y construir productos con una comunidad. Gracias a los Ignite Pyromaniacs por sus inmensas contribuciones. Sígueme en Twitter y echa un vistazo a la cuenta de Twitter de Infinite Red. Gracias por tus ideas, Gant. Ahora pasemos a la sesión de preguntas y respuestas. La primera pregunta es sobre la compatibilidad de Maverick con React Native Web. Principalmente lo soporta a través de EXPO, y la versión 8 de Ignite, con el nombre en clave Maverick, se puede ejecutar en EXPO sin cambios.

Lo que estoy tratando de decir es que específicamente, cuando estás mirando todas estas cosas, React Native ha sido una solución probada, resuelta y maravillosa que tiene estos obstáculos, a medida que obtenemos estas nuevas características. Tenemos este panel de crecimiento. A medida que vemos que tiene éxito en múltiples plataformas, y Taz tiene una charla sobre React Native en todas las plataformas hoy, tenemos que pensar en cómo vamos a abordar esto. Tenemos este lema, es un antiguo proverbio que nos gusta decir, que si quieres ir rápido, ve solo. Pero si quieres llegar lejos, ve juntos. Y si estás buscando personas para asegurarte de que lo que estás hablando va a y que tu empresa puede construir sus productos a partir de eso, así es como puedes hacerlo.

Tengo que decir, muchas gracias a todas las maravillosas personas. Los llamo, de hecho, Jamin acuñó el término, pero me encanta, los Ignite Pyromaniacs son los contribuyentes. Hemos tenido más de 170 contribuyentes a Ignite. Estas personas han ayudado enormemente a aportar su información y su inteligencia al producto. Nuevamente, soy Gant Laborde. Definitivamente sígueme en Twitter, y definitivamente veré quién va a ganar un libro. Y luego Infinite Red, lo tenemos ahí abajo, esa es la cuenta de Twitter de Infinite Red. Y muchas gracias.

Gracias, Gant, por brindarnos información tan valiosa sobre Ignite. Gracias por poner tanto esfuerzo en Ignite, porque sí, V8 fue increíble, y todavía lo es. Tenemos algo de tiempo para algunas preguntas, pero antes de eso, también me gustaría llamar a Jaymon aquí para que suba al escenario y nos ayude con algunas preguntas también. Siéntate más cerca. Tienes el micrófono. Toma la silla cómoda. Tenemos algunas preguntas de la audiencia. Solo quiero que todos sepan que cuando llegué a la última diapositiva, este temporizador aquí llegó a 0, 0, 0. Fue como una película donde desactivo una bomba, pero solo estaba en mi cabeza. Ninguno de ustedes pudo ver el temporizador. Estaba muy orgulloso de eso. ¿Así que no has escuchado nada en la otra pista, verdad? ¿Nada? Comencemos con la primera pregunta. Ben pregunta qué tan compatible es Maverick con React Native Web. Principalmente lo soportamos a través de EXPO. Una de las cosas geniales de la versión 8 de Ignite, que estamos llamando Maverick, es que puedes ejecutarlo en EXPO sin cambios. Antes tenías que elegir algo como dash dash EXPO y solo funcionaba en EXPO y no funcionaba con el CLI de React Native básico. Ahora funciona con ambos de manera predeterminada, por lo que si quieres usarlo con React Native Web, realmente necesitas usarlo con EXPO, pero funciona bastante bien con EXPO.

Adding Recipes to Cookbook and Benchmarks

Short description:

Todavía estamos trabajando en la posibilidad de llevar React Native Web más puro. EXPO ha hecho un gran trabajo. En la versión original de Ignite, había una gran separación entre EXPO e Ignite. Hemos estado trabajando en tener las mismas características. EXPO ha hecho un trabajo increíble. Están pionerando muchas cosas. Se explican los requisitos para agregar recetas al libro de cocina. Actualmente se acepta agregar recetas al libro de cocina. Todo en Ignite está bien evaluado. El libro de cocina tiene un estándar más bajo. Puede estar más enfocado en React Native. El libro de cocina es para la audiencia de Ignite. Se solicitan pruebas comparativas que muestren la diferencia entre la antigua y la nueva arquitectura de React Native.

Todavía estamos trabajando en la posibilidad de llevarlo a React Native Web más puro, pero eso es un trabajo bastante grande y EXPO ha hecho un gran trabajo para llegar a ese punto. En la versión original de Ignite, había una gran separación entre tener que elegir EXPO o elegir Ignite, y hemos estado trabajando durante mucho tiempo en la idea de cuándo podemos tener muchas de las mismas características y con los avances que han hecho en EXPO, estoy realmente feliz de que ya no sea una opción excluyente.

Sí, EXPO también ha hecho un trabajo increíble. Absolutamente. Están pionerando muchas cosas.

La siguiente pregunta es, Gant, ¿cuáles son los requisitos para agregar recetas al libro de cocina? OK, así que todo el sistema está bajo un docusource, creo, y estás enviando, así que cuando vengas, lo que haría es ir al GitHub. Podrás enlazar directamente al GitHub, por lo que ignitecookbook.com te llevará al GitHub, luego haces una pequeña propuesta diciendo, `oye, ¿alguien está trabajando en esto, es algo que quiero hacer?`, porque es posible que ya tengamos a alguien, estamos agregando cosas constantemente, y luego dices, ¿se aceptaría esto y es esto algo como parte de ello? Y lo más probable es que, diría que el 99%, a menos que ya estemos terminando esa receta en particular, simplemente diremos, sí, por favor, suena genial. Por supuesto, probablemente haremos una pequeña revisión y una solicitud de extracción para asegurarnos de que todo se lea correctamente, se represente correctamente, pero agregar recetas en este momento es un sí, por favor.

¿Puedo agregar algo? Sí, claro. Seguro, adelante, sí. Sí, absolutamente. Entonces, una de las cosas que quiero mencionar es que, como dijo Gant durante la charla, para que las cosas se incluyan en Ignite, deben ser realmente bien evaluadas por nosotros, por nuestros equipos, por nuestros proyectos, realmente pasar por uno o dos o tres proyectos antes de que las incluyamos en Ignite. Entonces, todo lo que ves en Ignite ya está bastante bien evaluado y sólido. No queremos que todo tenga que pasar por ese riguroso proceso. Por lo tanto, el libro de cocina tiene un estándar más bajo. Es como, esto es algo bastante genial. Es una idea. Quiero llegar a eso, quiero que esa información esté disponible. Tal vez no sea algo que esté en todos los proyectos. Ahí es donde entra el libro de cocina. No tiene que estar enfocado en Ignite. Puede estar más enfocado en React Native. Pero en general, será para una audiencia de Ignite, personas que usan Ignite. Tenlo en cuenta cuando envíes tus recetas. Genial. Muchas gracias. Y creo que tenemos suficiente tiempo. Sí, casi dos minutos para la última pregunta. ¿Tienes alguna prueba comparativa que muestre la diferencia entre la antigua y la nueva arquitectura de React Native? Oh, eso es definitivamente, sí.

Using Ignite and Personal Opinions

Short description:

Cuándo usar o no usar Ignite? El orador comparte su opinión sobre el uso de Ignite para nuevos proyectos y cuándo no se utiliza. Mencionan que Ignite se utiliza para proyectos estándar de iOS y Android, excepto en ciertos casos. Cuando los proyectos existentes no tienen Ignite, es necesario corregirlos para que se ajusten a las mejores prácticas de Ignite. El orador también discute la opción de eliminar ciertas partes de Ignite mientras se utiliza su estructura. Enfatizan la estabilidad y los beneficios de Ignite.

Sí, lo entendiste. Sí, eso está bien. Estamos trabajando en ello. Oh, eso fue rápido. De acuerdo. Así que en realidad tengo otra pregunta. También quiero decir que voy a regalar el libro después. No tengo mi teléfono para revisar Twitter y hacer eso. Así que iré atrás. Y luego regalaré el libro después.

De acuerdo, eso será genial. En realidad, tengo una pregunta personal. ¿Cuándo usar o no usar Ignite? Oh, esa es una gran pregunta. Tengo mis opiniones. Pero esto será diferente. Bueno, serán dos opiniones diferentes. Tú primero. De acuerdo. Entonces, cuando tenemos una opción, usamos Ignite cada vez. Como para un nuevo proyecto. Con la excepción de si es algo como un proyecto de tvOS o algo un poco más extravagante. Pero para tu proyecto estándar de iOS y Android, vamos a usar Ignite. Son nuestras mejores prácticas. Es cómo nos gusta hacer las cosas. Donde terminamos no usando Ignite es cuando la gente viene a nosotros con un proyecto que ya ha comenzado. Y como no usaron Ignite, está todo desordenado. Así que tenemos que arreglarlo para ellos. Vamos a hacerlo más parecido a Ignite. Eso es genial. Eso es más cierto de lo que piensas. Y luego diré específicamente que tenemos esta opción de eliminar la demo, tenemos un montón de comandos de eliminación que también están ahí. Así que una sensación que solía tener a veces es, como, obtienes todo el paquete completo, y no quieres todo, o no quieres alguna parte de él, o algo así. Descubrimos que obtener muchas de estas opciones, y luego eliminar una pieza o eliminar una gran parte de ella y seguir utilizando esa estructura funciona bien. Así que en mi opinión, incluso si hubiera algo completamente nuevo, y dijeras, oh, Ignite es estable y quiero hacer algo loco, probablemente solo tomaría el 90% de las cosas estables y cambiaría las partes locas por la mayoría de ellas. Así que esa es una excelente manera de obtener la mayoría de los beneficios.

Muchas gracias. Desafortunadamente, nos quedamos sin tiempo, pero si tienes preguntas, no dudes en ir a la sala de preguntas y respuestas del orador o simplemente molestar a esos dos desarrolladores increíbles y hermosos que vinieron desde Estados Unidos. Así que una vez más, un aplauso para ellos.

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

Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
React Advanced 2023React Advanced 2023
29 min
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
Llevando los Componentes del Servidor React a React Native
React Day Berlin 2023React Day Berlin 2023
29 min
Llevando los Componentes del Servidor React a React Native
Top Content
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
Herramienta Multiplataforma de React Native Kotlin
React Day Berlin 2022React Day Berlin 2022
26 min
Herramienta Multiplataforma de React Native Kotlin
Top Content
The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.
“Microfrontends” para móviles en React Native
React Advanced 2023React Advanced 2023
24 min
“Microfrontends” para móviles en React Native
Top Content
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
React Advanced 2021React Advanced 2021
21 min
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
Top Content
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.

Workshops on related topic

Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
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
Workshop
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Introducción - Cleo & nuestra misión- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños- Comenzando con la configuración del entorno & “hola mundo”- Introducción a la animación de React Native- Paso 1: Hacer girar la rueda al presionar un botón- Paso 2: Arrastrar la rueda para darle velocidad- Paso 3: Agregar fricción a la rueda para frenarla- Paso 4 (extra): Agregar hápticos para una sensación inmersiva
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Pruebas Efectivas con Detox
React Advanced 2023React Advanced 2023
159 min
Pruebas Efectivas con Detox
Workshop
Josh Justice
Josh Justice
Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena?
En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario.
Tabla de contenidos:
- Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local
Prerrequisitos
- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio
Creación para Web y Móvil con Expo
React Day Berlin 2022React Day Berlin 2022
155 min
Creación para Web y Móvil con Expo
Workshop
Josh Justice
Josh Justice
Sabemos que React es para la web y React Native es para Android e iOS. Pero ¿has oído hablar de react-native-web? ¡Para escribir una aplicación para Android, iOS y la web en un solo código base! Al igual que React Native abstrae los detalles de iOS y Android, React Native Web también abstrae los detalles del navegador. Esto abre la posibilidad de compartir aún más código entre plataformas.
En este masterclass, aprenderás a configurar el esqueleto de una aplicación React Native Web que funcione de manera excelente y se vea increíble. Puedes utilizar el código resultante como base para construir la aplicación que desees, utilizando los paradigmas de React y muchas bibliotecas de JavaScript a las que estás acostumbrado. ¡Te sorprenderá la cantidad de tipos de aplicaciones que realmente no requieren un código base separado para móvil y web!
Qué se incluye1. Configuración de navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta2. Configuración de React Navigation con URLs3. Configuración de React Native Paper, incluyendo el estilo del cajón y los encabezados de React Navigation4. Configuración de un tema de color personalizado que admita el modo oscuro5. Configuración de favicons/iconos de aplicaciones y metadatos6. Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil
Requisitos previos- Familiaridad con la construcción de aplicaciones con React o React Native. No es necesario conocer ambos.- Configuración de la máquina: Node LTS, Yarn, ser capaz de crear y ejecutar correctamente una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/