React Native: 2022 y más allá

Rate this content
Bookmark
Slides

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.

27 min
21 Oct, 2022

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

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

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 Day Berlin 2023React Day Berlin 2023
29 min
Bringing React Server Components to React Native
React Server Components are new topic in community, bunch of frameworks are implementing them, people are discussing around this topic. But what if we could use React Server Components in React Native? And bring all optimisation features that RSC allows to mobile apps? In this talk I would present what we are able to do with RSC in React Native!
React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React & React Native in combination.

Workshops on related topic

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 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
React Advanced Conference 2022React Advanced Conference 2022
131 min
Introduction to React Native Testing Library
Workshop
Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.
But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.you will know:- The different kinds React Native tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting text, image, and native code elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RNTL tests and how to handle them- Options for handling native functions and components in your JavaScript tests
Prerequisites:- Familiarity with building applications with React Native- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Native Testing Library- Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/