React Native en todas partes

Para aquellos de ustedes que no me conocen, soy Taz Singh y estoy aquí para hablar sobre React Native en todas partes, y como mencionó Katalin, cuando digo en todas partes, sí, me refiero a todas partes, incluso aquí abajo con estos adorables pingüinos.

Para aquellos de ustedes que no me conocen, soy el fundador de Guild, una nueva plataforma que está en beta en este momento, destinada a elevar comunidades en todo el mundo. Actualmente nos estamos enfocando en eventos, como el que estamos presenciando, y presentaciones, como la que estoy dando, todas alojadas en la misma plataforma. Así que ven a charlar conmigo más tarde si tienes curiosidad por lo que estamos construyendo.

Estoy seguro de que a estas alturas habrán notado que mi acento ciertamente no es de aquí. Eso se debe a que comencé la comunidad de TorontoJS en 2010, que es de donde soy. Y como mencionó Katalin, para aquellos de ustedes que tengan preguntas, en realidad tengo estas codiciadas pegatinas de TorontoJS y CanadaJS para ustedes, si hacen una pregunta. Así que siéntanse libres de venir a buscar una conmigo después. Estas están muy solicitadas. Así que si encuentran a un canadiense y tienen una de estas, es posible que se la quiten.

De todos modos, en aquellos primeros días en 2010, fui objeto de muchas bromas sobre JavaScript. Decían: 'Oh, no eres un verdadero desarrollador a menos que programes en .NET, Java o C++ en aquel entonces. Y, como, me quedé sorprendido. En aquellos días, si alguna vez construías una aplicación en JavaScript, era inmensamente compleja en su naturaleza.

En los primeros años 2010, comenzamos a construir aplicaciones utilizando Backbone y Underscore. Que eran increíblemente complicados. Así que comencé TorontoJS solo para reunir a la gente y aprender unos de otros para elevar nuestra artesanía juntos. Gran parte de lo que hicimos en aquel entonces sirve como mi impulso para comenzar Guild hoy y estar involucrado con comunidades en todo el mundo. Porque rápidamente descubrí que comunidades como TorontoJS están en todas partes. Estamos en una aquí mismo ahora. De hecho, muchos de mis amigos más cercanos son amigos que conocí a través de la community. Algunos de ellos están aquí mismo en esta sala.

Así que empacé mis maletas en 2017 para mudarme a Londres y explorar esas comunidades en todo el mundo. Y fue entonces cuando también me presentaron a React Native en todas las plataformas. Y aquí me ven dando una charla al respecto en Londres justo después de mudarme en 2017. Este es un tweet de Eli, un organizador de ese evento donde hablé. También soy el maestro de ceremonias aquí. Y también un muy buen amigo. Pueden encontrar esa presentación publicada en Guild. Vayan a mi perfil, hagan clic en las presentaciones que he dado, hagan clic en la sexta y los llevará a un video que di en aquel entonces.

Pero solo para darles un resumen muy rápido de esa charla hoy, básicamente el objetivo es tener código común en todas las plataformas. Por supuesto, cada plataforma es diferente y requiere consideraciones únicas para abordar adecuadamente las ventajas de cada plataforma. Y eso, en mi opinión, es una de las fortalezas principales de React Native. Mantener el núcleo de tu plataforma común mientras empujas la singularidad a los límites. Cosas como selectores de fecha, entradas de archivos, notificaciones, mapas y más se pueden abordar en esos bordes, dejando que el interior de tu aplicación se enfoque en la experiencia común real. Para una startup en etapa inicial como la nuestra, es importante optimizar la eficiencia del desarrollador. Queremos que cada cambio en nuestra base de código sea lo más impactante posible. No queremos equipos separados trabajando en cada plataforma que resulten en ninguna compartición de código en absoluto. En un mundo ideal irrealista, queremos que todo nuestro código se comparta en todas las plataformas, pero eso no abordaría la singularidad de las plataformas individuales y, en mi opinión, React Native facilita abordar las ventajas de cada plataforma. Queremos que la gran mayoría de nuestro código se comparta en todas las plataformas, apuntando a un 95 por ciento de compartición de código y haciendo que nuestros desarrolladores sean lo más impactantes posible.

Así que vean mi charla que di en 2017, donde hablo de esto con más profundidad y he estado buscando este resultado durante los últimos cinco años más o menos y estoy feliz de hablarles sobre la siguiente parte de mi viaje. Pero si quieren comenzar hoy, todo eso está incluido en Expo. Realmente disfruto cómo han empaquetado todo eso y lo han hecho fácil para que puedan comenzar dentro de cada base de código de plataforma. Recomiendo revisar la documentación, crear cualquier aplicación y ejecutarla en todas partes.

Hoy estoy aquí para hablar de la siguiente parte de mi viaje, comenzando con la composición receptiva. No es ningún secreto que existen múltiples factores de forma. Al construir una aplicación que funcione en todas partes, obviamente necesitas tener esto en cuenta. Uno esperaría que una plataforma como React Native lo hiciera bien, pero realmente solo proporciona las primitivas básicas. Y lo más importante, no hay CSS. Esto significa que no hay consultas de medios, no hay cuadrícula CSS, no hay selectores CSS en absoluto. No hay primer hijo, último hijo, soporte para hijos finales, nada de eso. Por lo tanto, el estilo en React Native está inspirado en CSS, en el sentido de que hay nombres de propiedades CSS y hay una implementación de Flexbox, pero CSS en sí mismo no existe realmente. Si alguna vez has construido una aplicación web receptiva antes, utilizando este tipo de primitivas, de repente, al no tenerlas, puedes comenzar a entender lo difícil que puede ser construir una experiencia verdaderamente multiplataforma utilizando React Native.

Entonces, ¿qué hago? Afortunadamente, fui a consultar a Bangalore en 2017 y los organizadores de la comunidad se pusieron en contacto conmigo para presentar en su comunidad. Después de todo, las comunidades están en todas partes. Acepté y aquí estoy presentando en un Pontiac Aztec, es un coche realmente magnífico. Tuve el placer de conocer a los organizadores de esa comunidad, uno de los cuales es Siddharth, quien está sentado a mi lado en esta foto, y gracias a Dios por eso, porque ahora es uno de los expertos más destacados en el espacio del sistema de diseño de React, a quien admiro por su conocimiento en esa área. Alrededor de la misma época en 2020, cuando estaba tratando de encontrar un sistema de diseño para mi aplicación React Native, Sidd creó React UI. Esto se toma del propio sitio web de React UI, donde dice que React UI viene con un conjunto de componentes accesibles, receptivos y personalizables. Eso suena exactamente a lo que quiero. También tiene una lista de componentes con los que se envía, así que leyendo desde la derecha hay Element, Link, Select, Text, Text Area, y así sucesivamente. Tiene de todo. Lo más importante es que en la parte inferior también hay Stack y Grid para ayudarme a construir un diseño con esos otros bloques de construcción. Pero el problema fundamental era que React UI está construido para web, y lo que yo quiero necesita ser compatible con React Native. Eso me hizo pensar. Tal vez podría crear lo mismo, pero para React Native. Así que intenté hacer exactamente eso, pero después de varios intentos y errores, finalmente logré que algo funcionara. Así que pensé en enviarle un mensaje a Sid, como, hey, amigo, ¿cómo te va? Disfrutando de Ámsterdam.

Quería comunicarme y decir que soy un gran fan de React UI. De hecho, soy tan fanático que terminé implementando gran parte de él para React Native de manera multiplataforma. Es una descarada copia de React UI, pero por supuesto, React UI es para la web y lo que he construido es para React Native. Sin emociones, sin CSS. Tuve que implementar el stack de manera un poco diferente, y así sucesivamente.

Sid respondió amablemente, eso es realmente genial. Así que React UI es una copia de Theme UI. La copia está en todas partes. Como siempre digo, los buenos artistas copian, los grandes artistas roban, ¿verdad? Pero al mirar las fechas de esos mensajes, fue durante el pico del confinamiento en 2020 cuando estaba trabajando en esto. Me gustaría mostrarte lo que construí. Aquí tienes un ejemplo de eso. En realidad, esto es lo que alimenta la experiencia web de Guild en este momento. Si vas a Guild.host, puedes ver esto en vivo ahora mismo. Fundamentalmente, si miras el código a la izquierda, espero que puedas ver cómo se renderiza la experiencia a la derecha. La construcción crítica que hace que todo esto sea componible es el componente stack. Todo lo que tienes que hacer es establecer la propiedad gap y el resto se renderiza en función de eso. No más pasar una prop de estilo por todo. No más pasar estilos o lo que quieras llamar a eso. Solo estableces un gap y eso es todo. Todo funciona automáticamente.

En la parte inferior, tengo ese componente user item del cual muestro el código aquí. Nuevamente, es solo un stack, esta vez horizontal. Renderiza la foto principal del usuario y un componente de enlace con el nombre del usuario. Todo es altamente declarativo y altamente componible. Solo necesito agregar más elementos a esta página y el resto se colocará automáticamente en función de la propiedad gap del stack. Eso es todo. Horizontal, vertical, lo que necesites, eso es básicamente todo. Creo que al componer stacks de esta manera, esto es lo que se llama ser un desarrollador full-stack. Ahora podemos tomar todo eso y ponerlo en una cuadrícula, que puedes ver que tengo aquí. Cada stack es una fila.

Y tenemos una cuadrícula con columnas dentro de cada fila. Al simplemente componer estas pilas en una cuadrícula con columnas, podemos construir toda la experiencia receptiva a la derecha. Eso es todo. Te he mostrado todo el código directamente desde una base de código de producción, nada oculto. Esto es exactamente lo que impulsa GIL hoy. Y como puedes ver, estoy bastante contento con ello. Te lo estoy mostrando todo aquí mismo ahora mismo. Estoy bastante orgulloso de básicamente lo que construí durante ese tiempo. Así que estoy bastante contento con la implementación.

Sabes, quiero compartirlo con todos ustedes. Realmente se estaba preparando para un lanzamiento público de todo esto. Pero primero, obviamente, tienes que encontrar un nombre genial y llamativo. Así que se me ocurrió el nombre Mondrian. Fue inspirado por el famoso ingeniero del sistema de diseño holandés, Piet Mondrian, conocido por componer pilas en interfaces de usuario como esta. Así que creé un repositorio vacío en GitHub. Comencé a prepararme para un lanzamiento público. Y estaba realmente emocionado de compartir Mondrian con todos ustedes y el resto del mundo.

Y ahí es cuando descubrí Nativebase. Entonces... Para aquellos de ustedes que no están familiarizados con Nativebase, comparemoslo con Mondrian. En primer lugar, Nativebase también es un sistema de diseño React Native en todas las plataformas. Funciona en todas partes. Es mucho más completo que lo que hemos construido. Han lanzado su tercera versión. Están en la versión 3.4.19 y nosotros estamos en la versión alfa 3. Han dedicado mucho más tiempo a la accesibilidad de lo que hemos hecho nosotros. No creo que hayamos pensado mucho en ello todavía. Han dedicado mucho tiempo a pensarlo. Tienen documentación y nosotros no. Y fundamentalmente, lo más importante, están construidos en Bangalore, que fue la inspiración central de Mondrian y toda mi experiencia de diseño desde el principio.

En estos días, si tuviera que recomendar una solución, recomendaría comenzar con Nativebase. Han hecho un trabajo fantástico, está muy bien hecho y funciona en todas partes. Pero daré un pequeño paso atrás por un momento. He estado escribiendo esta charla y conociendo a personas fantásticas como Katalin y muchos otros amigos. He tenido el placer de aprender más sobre las últimas novedades en el espacio del sistema de diseño y me he enterado de otro. Tamagui. Ni siquiera estoy seguro de si lo estoy pronunciando correctamente. No lo sé. Tamagotchi. No lo sé. Así como el creador de Tamagui, Nate, le gustaba tanto el término React Native en todas partes que lo tomó prestado para su propio sitio web. Luego dijo que Tamagui, o realmente creo que esto se aplica a los sistemas de diseño de React Native en general, cubre aproximadamente el 40% de la experiencia multiplataforma solo mediante el intercambio de código a través del contexto del sistema de diseño en sí mismo. Y personalmente para mí es genial ver más competidores en este espacio, es bueno tener más opciones al construir un sistema de diseño de React Native y también es genial ver que la community está evolucionando y tomando este espacio más en serio.

Y volviendo al ejemplo que mencioné antes, ¿dónde estamos ahora con nuestro viaje de compartir código del 95%? Si Tamagui menciona que proporcionan el 40% de eso, componer eso en pantallas o páginas nos lleva al 60%, otro 80% es proporcionado por una capa de datos, pero ¿qué queda en esa sección inferior? ¿Qué nos falta para llegar al 95%? Y realmente eso es el siguiente nivel de lo que estamos descubriendo ahora mismo en el espacio de React Native, y eso es la navegación.

La navegación ha sido históricamente difícil y desafiante de resolver en todas las plataformas, porque fundamentalmente existe la navegación interna, y lo que quiero decir con eso es cuando navegas utilizando la interfaz de usuario en sí. La experiencia de navegación real es interna a la interfaz de usuario, y eso es lo que encontrarás en una experiencia móvil, tocarás un botón y navegarás a una nueva página, tocarás un botón de retroceso y dentro de la interfaz de usuario navegarás hacia atrás. La principal excepción a eso es el botón de retroceso de Android, por supuesto, que es externo a la interfaz de usuario, pero no dedicaré mucho tiempo a eso. Luego, por supuesto, está la navegación externa, como lo que encontramos en la web, y si has usado un navegador antes, sabes que hay un botón de retroceso, un botón de avance, un botón de actualización y una barra de URL, así como pestañas, todos externos a la interfaz de usuario de la aplicación que estás construyendo. Todos estos manipulan el estado de navegación de la aplicación, completamente externos a la aplicación en sí, por supuesto. No tengo que explicar cómo funciona un navegador, pero lo principal es la barra de URL, y eso es fundamentalmente diferente y está ausente en una experiencia de navegación interna, pero está presente en una experiencia de navegación externa. Deberías poder copiar esa URL en una nueva pestaña y simplemente cargar la misma página para ti. Debería funcionar sin problemas. Y para demostrar un ejemplo de eso, tengo una grabación de la página de Instagram de mi gato. ¿No es adorable? Si navegamos utilizando la interfaz de usuario, como internamente en esa experiencia, puedes ver que se abre un modal. Se abre contextualmente sobre lo que hay detrás porque sabe lo que hay detrás porque todo ese estado de la aplicación es manejado por la aplicación en sí. Esto es similar a cómo podría funcionar la navegación móvil y de escritorio. Pero como puedes ver, copiar esa URL en una nueva pestaña abre la misma página pero no sabe qué poner detrás, por lo que la renderiza como una página completa. Esto es, nuevamente, como funciona la navegación externa en la web. Por lo tanto, para construir una solución de navegación en cada plataforma, necesitamos admitir ambas. Navegación interna y navegación externa, todo dentro de la misma experiencia. Esto ha sido históricamente muy difícil de hacer, especialmente en React Native. ¿Cómo empezamos a construir esto? Bueno, está React Router, por supuesto, que anuncia soporte para enrutamiento basado en DOM para navegadores, así como para React Native. Y si bien esto funciona muy bien, carece de enlaces nativos en dispositivos móviles para hacer cosas como arrastrar desde el borde de la pantalla para navegar hacia atrás. Simplemente no se siente nativo. La gestión del estado funciona, pero no se siente nativa en esas plataformas. Luego está React Navigation, que es una experiencia de navegación completa orientada a dispositivos móviles. Si has trabajado con React Native antes, es probable que hayas usado React Navigation. Utiliza pantallas de React Native de Software Mansion para proporcionar esa funcionalidad de arrastrar desde el borde de la pantalla para retroceder. Y en dispositivos móviles, funciona muy bien. En los últimos años, también han lanzado soporte web, como muestro aquí, y terminamos probándolo en Guild y simplemente no se sintió adecuado en la web. Si bien técnicamente funciona, varias cosas simplemente se sintieron extrañas. Cosas como la carga incremental de rutas, que obviamente deseas en la web, no quieres enviar todo en una carga masiva. También reescribiría la barra de URL de forma incremental, por lo que verías cómo se reescribe la barra de URL mientras esperas que se cargue el resto de la página, lo cual se sintió extraño. Y si presionas los botones de retroceso y avance, pondría la aplicación en un estado extraño donde simplemente no podía recuperarse, por lo que tendrías que volver a cargarla y la barra de URL se reescribiría nuevamente, por lo que simplemente se sintió completamente extraño.

Pero para resumir, básicamente, React Router tiene un excelente manejo del estado, pero no se siente nativo en plataformas que no son web, y el manejo del estado de React Navigation es un poco complicado, pero tiene esa sensación nativa. Entonces, si apuntamos a compartir más del 95 por ciento del código en todas las plataformas, elegimos React Navigation a pesar de sus defectos en la web. La experiencia de usuario no será ideal, pero al menos los usuarios tendrán que vivir con ella por ahora. Su complejidad es lo mejor que tenemos. Y sé que el equipo es inteligente y está trabajando muy duro en esto, los conozco muy bien y sé que están dedicando mucho tiempo y esfuerzo en esto. He intentado ayudar enviando solicitudes de extracción, pero el estado del código base estaba más allá de mi comprensión para contribuir adecuadamente, así que tendremos que esperar y actualizar a medida que lancen nuevas características. Con suerte, la experiencia de usuario mejorará después de cada lanzamiento, y eso es realmente lo mejor que tenemos hoy en día. Eso es básicamente lo que elegimos.

Más recientemente, al hablar con otras personas en la community, todos me han hablado de Solido. Ha habido mucho marketing alrededor de Solido resolviendo la navegación multiplataforma. Y mi opinión es que Solido facilita la gestión de una pila de navegación web, impulsada por Next.js, por separado de una pila de navegación nativa impulsada por React Navigation. Tienes dos pilas de navegación completamente diferentes. Así es como esta solución supera los desafíos que mencioné antes. Puedes ver en su documentación que al crear una ruta, te pide que definas una ruta en la web, y luego definas otra ruta por completo en nativa. Son dos pilas de navegación completamente diferentes. Por design, esto no es compartir código en un 95% o más. Son dos pilas de navegación completamente diferentes. Y Solido hace un trabajo fantástico al facilitar la gestión de dos pilas de navegación diferentes. Pero no es realmente lo que buscamos si nos centramos en compartir código. Si se tratara de compartir código, eso sería solo un paso. Simplemente creas una pantalla. Eso sería todo.

Durante mis viajes, tuve la suerte de encontrarme con el equipo de Expo en abril, durante el evento React Miami, porque las comunidades están en todas partes, después de todo. React Miami fue una comunidad fantástica. Estoy aquí con Brent, uno de los principales mantenedores de React Navigation, así como Evan y Charlie. Tuve una buena conversación con ellos y les dije: `Hey, Evan, tenemos que hablar un poco más sobre todas las plataformas`. Al día siguiente, nos sentamos a hablar sobre herramientas de construcción, navegación y empaquetado, y lo grabamos todo para nuestro canal de YouTube. Puedes verlo más abajo.

Evan tenía algunas ideas increíbles en aquel entonces en abril, y seis meses después, es genial ver que finalmente se ha hecho realidad en Expo Router. Honestamente, esto se ve increíble. Para crear una pantalla, simplemente creas una pantalla. Eso es todo. Es un solo paso. Estás listo. Fundamentalmente, unifica la navegación nativa alrededor de las URL, lo que facilita mucho la creación de tu pila de navegación en todas las plataformas, ya que una ruta de URL es una construcción de primera clase en todas partes. Otro efecto secundario interesante es que la vinculación profunda en dispositivos móviles es mucho más fácil. Simplemente te refieres a la misma URL que usarías en la web. URLs. ¿Quién hubiera pensado que eso resolvería la navegación?

Este enrutador está en beta en este momento, ya que el equipo de Expo está buscando comentarios para mejorarlo antes de su lanzamiento público oficial. En mi opinión, aún no está listo para su uso en la web, porque solo admite el bundler de Metro, que no realiza la división de código. Aún se envía todo como una carga gigantesca. Pero nuevamente, esto es realmente un comentario para que el equipo vea si este enfoque funciona. Según el equipo, lo siguiente en lo que trabajarán es en herramientas de construcción y empaquetado adecuadas basadas en web. Estoy muy emocionado por la dirección que está tomando esto. Esto se ve legítimamente increíble. Es posible compartir más del 95% del código gracias a esto. No puedo esperar al lanzamiento final para que sea oficialmente posible. Pero como mencioné antes, aún no está del todo listo. Por ahora, tendremos que seguir utilizando React Navigation y lidiar con todos los fallos que tiene. Eso es realmente todo en mi charla. Gracias.

Muchas gracias, Taz. Os engañé. ¡Oh! ¿Había otro? No puedo terminar una charla así. Vamos. ¿Qué piensan? ¿Qué esperan? Incluso engañé a Cattelan. Es una forma terrible de terminar una charla. ¿Me están tomando el pelo? No hay una solución real al final de eso. Estoy decepcionado con todos ustedes. Estoy decepcionado con todos ustedes por eso. Vamos. Deberían esperar más de mí.

A estas alturas ya deberían saber que si resuelvo todos mis problemas en la community con quejas incesantes a los miembros de la community. Y esta vez me quejé con mi buen amigo Lorenzo, aquí en la foto de la boda de mis amigos, Phil y Cindy. Es la única foto que tengo con él y es una lástima que no esté aquí hoy. Voy a tomar otra foto con él, ya saben, solo él y yo esta vez. Así que para resolver cualquier ambigüedad aquí, en caso de que se pregunten cómo funciona esto. Leyendo de izquierda a derecha, claramente soy el padrino y Lorenzo es claramente el segundo padrino y no hay otra forma de interpretar esta foto. Y es bueno que Lorenzo no esté aquí para decírtelo tampoco. Pero de todos modos, Lorenzo también fue un antiguo mantenedor de React navigation y también estuvo muy involucrado en los esfuerzos de la React Native community. A menudo, cuando no sé cómo proceder en el espacio de React Native, simplemente le pregunto a Lorenzo. Porque tiende a saber sobre los acontecimientos de la community antes que muchos de nosotros. Y esta vez, tuvo éxito. Me habló de una nueva biblioteca llamada React Native URL router. Y eso suena exactamente a lo que quiero, un router de React Native pero con URLs. Así que eché un vistazo a su documentation y encontré este ejemplo. No estoy seguro si pueden ver el texto pequeño a la izquierda, pero básicamente son todas las mejores partes de React router y su excelente state management fusionadas con las mejores partes de React Native screens para proporcionar esa experiencia de navegación desde el borde que es nativa en dispositivos móviles. Esto se veía increíble. Así que fui a probarlo y descubrí que simplemente no funcionaba en la web en absoluto. Simplemente no se compilaba. Simplemente no funcionaba.

Aún es experimental. Principalmente construido para dispositivos móviles. Pero agregar soporte web parecía bastante sencillo. Si puedes ver ese contorno rojo allí, parecía que solo era necesario reemplazar esos dos componentes y eso es todo. Reemplazar un enrutador nativo por un enrutador de navegador y reemplazar un navegador de pila por un componente de enrutador de React. Al reemplazar dos componentes, parecía que el resto de esto funcionaría muy bien en la web.

Pero no quería hacer todo el esfuerzo de enviar solicitudes de extracción solo para que los mantenedores las rechazaran durante la revisión debido a que no estaban alineadas con su dirección. Así que quería consultar con los mantenedores antes de contribuir esencialmente a este proyecto. Me puse en contacto con Alec de Software Mansion y le pedí que tuviéramos una charla rápida sobre la dirección antes de comenzar a enviar solicitudes de extracción. Y lo que obtuve realmente me sorprendió.

Alec organizó una llamada e invitó a Christoph, a quien busqué en LinkedIn antes porque no sabía quién era. Decía que era el director de ingeniería en Software Mansion y yo estaba preparado para algo como, bueno Taz, somos una consultoría. Y si quieres contratarnos como consultoría, aquí está nuestra lista de tarifas. Y estaremos encantados de ayudarte con cualquier cosa que necesites según esa lista de tarifas. Pero lo que obtuve en cambio realmente me sorprendió. Recibí mucho apoyo y amabilidad de ambos que realmente me sorprendió.

Me dijeron que están aquí para ayudar en cualquier aspecto de uso de su biblioteca y no pidieron nada a cambio, solo comentarios amables sobre cómo podemos mejorar juntos. De hecho, estaban más interesados en la dirección de Guild como plataforma y querían ayudar a apoyar el esfuerzo de la comunidad junto con nosotros. Debo decir que llevo más de dos décadas en el negocio del software. No creo haber visto tanto amor y dedicación a la artesanía como he visto en estos dos. Fue realmente asombroso. Solo puedo hablar de ellos en los términos más altos y te recomendaría que también eches un vistazo a sus esfuerzos en la comunidad. Acordamos asociarnos en React Native URL Router para utilizar Guild como una aplicación de ejemplo de cómo funciona como una aplicación completa y lista para producción, y podemos probar el paradigma, solucionar cualquier problema y hacer que esa biblioteca funcione para todos en la comunidad también. Así que me remangué. Reescribí toda nuestra aplicación. Arranqué ese React Navigation y lo envolví en React Router como un paso intermedio hacia React Native URL Router y aquí están las estadísticas de esa solicitud de extracción. Como puedes ver, eliminé más del doble del código que introduje. En general, la aplicación se siente mucho más ágil ahora porque toda la navegación basada en el navegador se siente mucho más natural. Creo que la mejor manera de preguntar si valió la pena es preguntarte a ti. ¿Lo notaste siquiera? ¿Notaste que Guild está usando React Native Web? ¿Notaste que Guild está construido utilizando un sistema de diseño experimental propio? ¿Notaste que también está utilizando un marco de navegación experimental? ¿O pensaste que era una aplicación ordinaria construida de manera ordinaria todo el tiempo? Hablé mucho sobre ejecutarse en cada plataforma.

Pero por ahora nos enfocamos solo en la web. Pero esperamos lanzar gradualmente una aplicación móvil y de escritorio en el futuro porque toda nuestra infraestructura está construida para acomodar eso. Es mucho más fácil lanzarlo desde donde estamos hoy que comenzar una base de código completamente nueva. Pero si has aprendido algo de esta charla, debería ser que solo somos tan buenos como la community que nos rodea. A lo largo de este viaje, tengo la suerte y el privilegio de haber conocido a las personas que he conocido a través de la community. Sin ellos y sin su apoyo, no estaría en ninguna parte. No es que sea especial. Simplemente asisto a eventos y hablo con las personas allí y aprendo de ellas. Por eso comenzamos TorontoJS en 2010, y por eso estamos trabajando en Guild ahora. Porque al final del día, las comunidades están en todas partes. Y ahora tu tecnología también lo está.

Gracias. Gracias. Muchas gracias, Taz. Muchas gracias. ¿Está bien ahora? ¡Sí! No se preparó nada, por cierto, pero sí, fue realmente bueno al final. Así que sí, muchas gracias por la charla. Gracias. No, oh, sí, tenemos suficiente tiempo para algunas preguntas y respuestas. Disculpen por la charla anterior. Si han hecho alguna pregunta, parece que no he moderado el foro, así que adelante diríjanse a Lorenzo y hagan la pregunta personalmente. Espera, ¿y Lorenzo está aquí? De todos modos, hice preguntas. Así que por favor háganlo. Y me siento mal por eso y realmente mal, sí, vergonzoso. Hablando de preguntas, no he... Ahora mismo la moderación automática está desactivada, así que si están haciendo algo, podrán verlo en la pantalla. Pero yo también he preparado algunas preguntas por mi cuenta.

¿Dónde ves a React y React Native en el futuro, en términos de componentes integrables? ¡Oh, estoy muy contento de que hayas hecho esa pregunta! Básicamente, nuestro viaje y compromiso con React Native en todas partes significa que nos referimos literalmente a todas partes. En este momento, como mencioné, hace cinco años estábamos obsesionados con cómo se ejecuta físicamente en cada plataforma. ¿Cuál es el método de ejecución para ejecutar el mismo código en todas las plataformas? Eso era lo más importante hace cinco años. Hoy en día, se trata de sistemas de diseño y navegación, y estoy muy contento de ver muchas soluciones excelentes disponibles, como mencioné en mi charla. Pero creo que el siguiente desafío será la integrabilidad. ¿Cómo llevamos la experiencia que hemos construido y la colocamos donde existe el tráfico? Por ejemplo, en Guild, somos un sitio web orientado a eventos, que incluye la venta de entradas. Es posible que tengas un sitio web de conferencias y quieras colocar la experiencia de venta de entradas en el sitio de la conferencia. Eso requiere la integrabilidad de una experiencia. Y creemos que esa será la próxima frontera en términos de cómo nos integramos en diferentes experiencias web, esencialmente para React Native en todas partes. Del mismo modo, ¿cómo nos integramos en experiencias móviles? ¿Cómo llevas la misma experiencia y la integras en otra aplicación? ¿Cómo tomas esa misma experiencia y la coses sin problemas en cualquier lugar? Hemos experimentado con la integración de React Native en Flutter porque, al final del día, ambos se basan en vistas móviles nativas. Es técnicamente posible coser vistas nativas. Puedes coser una vista nativa impulsada por React Native en otra vista nativa. Lo mismo ocurre al coser React Native en cualquier experiencia web. Solo necesitas envolverlo en un contenedor y luego puedes enviarlo. Gran parte de este trabajo se basa en los micro frontends. Sé que Alex LaBerra y Ruben Casa están aquí para hablar de eso también. Pero esa es la próxima frontera en la que pensamos, cómo pasar de donde estamos ahora a crear una experiencia verdaderamente integrable en cada plataforma. Esa fue una respuesta realmente buena. Muchas gracias. De hecho, para cerrar toda esta sección de React Native, me gustaría preguntarte, ¿por qué crees que las comunidades son importantes? Para mí es personal. Estoy aquí hoy gracias a la comunidad. Aprendí todo lo que sé a través de la comunidad. Es a través de eventos como este y personas más inteligentes por ahí con las que tuve la oportunidad de hablar y aprender de ellas. Y creo que tú y tu canal de YouTube probablemente hayan inspirado a muchas personas también, y eso es realmente una comunidad al final del día. Y para mí, porque he recibido tanto de la comunidad, siento que debo devolver algo. Y creo que eso es por qué significa tanto para mí, es en ese viaje personal, pero también espero que todos ustedes también puedan aprender y apreciar de la misma manera que yo, obviamente, están aquí hoy por esa razón, ¿verdad? Así que, sí. Sí, con eso, muchas gracias de nuevo, Taz, y aplaudamos. Y también, como nos quedan dos minutos, creo que sería inteligente pedirle a Lorenzo que venga y se tome una selfie con nosotros. No sé, alguien, tenemos a un fotógrafo profesional aquí que puede ayudarnos con la foto. Este chico. Aquí vamos. Aquí vamos.