React Native en todas partes

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
Rate this content

Desarrollar para cada plataforma individualmente es tan 2010s. En estos días, con el sistema de componentes de React Native proporcionando construcciones de UI de nivel base, podemos desarrollar de manera eficiente para cada plataforma sin sacrificar la singularidad de ninguna plataforma en particular. Taz revisará el enfoque que han tomado al desarrollar Guild y la creación de su sistema de diseño receptivo Mondrian multiplataforma, así como cómo han acomodado las diferencias en las experiencias de navegación entre plataformas para lograr una base de código que se puede compartir en un 95% o más en todas las plataformas.

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

FAQ

Taz Singh es el fundador de Gild, una plataforma que aloja eventos y presentaciones. Es originario de Toronto y ha sido un pionero en la comunidad de desarrollo, especialmente conocido por su trabajo con JavaScript y React Native.

Gild es una plataforma nueva actualmente en beta que tiene como objetivo elevar comunidades en todo el mundo. Se enfoca en alojar eventos y presentaciones para fomentar el aprendizaje y la colaboración entre los usuarios.

React Native permite mantener un núcleo de código común para todas las plataformas, adaptando elementos específicos como selectores de fecha y mapas a cada plataforma. Esto optimiza la eficiencia del desarrollador y permite una mayor compartición de código entre plataformas.

Taz Singh ha explorado la creación de un sistema de diseño propio para React Native, inspirado en React UI, que facilita la composición responsiva utilizando componentes como stack y grid para ajustar la interfaz de usuario según el factor de forma.

Taz descubrió React Native URL Router, que combina lo mejor de React Router y las pantallas de React Native para ofrecer una experiencia de navegación que se siente nativa y bien integrada en dispositivos móviles.

Taz recomienda utilizar un sistema de tokens definidos centralmente para manejar variables de diseño como colores y tamaños de fuente, permitiendo una personalización efectiva y coherente en todas las plataformas.

Taz Singh
Taz Singh
22 min
17 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
React Native en todas partes permite compartir código y mantener la individualidad de la plataforma, la composición receptiva y la navegación son áreas clave de enfoque, la comunidad de React Bangalore ha desempeñado un papel en el desarrollo de sistemas de diseño de React Native, React Native URL Router proporciona una sensación nativa con navegación de arrastre desde el borde, la colaboración con Software Mansion ha sido beneficiosa y la centralización basada en tokens es importante para la adaptación consistente de los sistemas de diseño.
Available in English: React Native Everywhere

1. Introducción a React Native Everywhere

Short description:

Soy Taz Singh, el fundador de Gild, una plataforma destinada a elevar comunidades en todo el mundo. Comencé la comunidad de Toronto JS en 2010 y ahora estoy en Londres explorando comunidades en todo el mundo. Me presentaron a React Native en todas las plataformas y su fortaleza principal es la capacidad de tener código común en todas las plataformas, al tiempo que aborda la singularidad de cada plataforma. Esto optimiza la eficiencia del desarrollador.

♪ Soy Taz Singh y hoy estoy aquí para hablar sobre React Native en todas partes. Y 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 Gild. Es una nueva plataforma que está en beta en este momento y tiene como objetivo elevar comunidades en todo el mundo. Actualmente, nos enfocamos en eventos, como el que estamos presenciando ahora mismo, y presentaciones, como la que estoy dando, todas alojadas en la misma plataforma. Así que ven a hablar conmigo más tarde si tienes curiosidad sobre la plataforma.

Pero a estas alturas, es posible que hayas notado que mi acento ciertamente no es de aquí. Y eso se debe a que soy de Toronto, donde comencé la comunidad de Toronto JS en 2010. En aquellos primeros días, fui objeto de muchas bromas sobre JavaScript. Oh, no eres un verdadero desarrollador, solían decir, a menos que programes en C++ o .NET o Java. Y para mí, fue como un golpe, porque si alguna vez has construido una aplicación web en JavaScript, sabes cuánta diligencia se requiere. Alrededor de 2010, comenzamos a construir aplicaciones utilizando Backbone y Underscore, que eran bestias inmensamente complejas. Así que comencé Toronto JS para reunir a las personas y aprender unos de otros, para elevar la artesanía juntos. Y gran parte de lo que hicimos en aquel entonces sirve como mi impulso para comenzar Guild hoy. Eso se debe a que rápidamente descubrí que comunidades como Toronto JS están en todas partes. Estamos en una comunidad similar aquí en este momento. De hecho, muchos de mis amigos más cercanos son personas que conocí a través de la comunidad, algunos de los cuales están en esta misma sala.

Así que empacé mis maletas y me mudé a Londres en 2017 para explorar esas comunidades en todo el mundo. Y también fue entonces cuando me presentaron a React Native en todas las plataformas. Aquí me puedes ver dando una charla sobre eso en Londres justo después de mudarme. Este tweet es de Ellie, que está justo allí. Ella es una organizadora de ese evento donde hablé y ahora también es una muy buena amiga. Puedes encontrar esa presentación publicada en Guild yendo a mi perfil, haciendo clic en las presentaciones que he dado, o haciendo clic en 6 y 1, eso te llevará a un video de la charla que di en ese entonces. Así que siéntete libre de echarle un vistazo.

Pero para darte un resumen muy rápido de esa charla, básicamente el objetivo era 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. Esta es una de las fortalezas principales de React Native. Podemos llevar esa singularidad a los límites y mantener el núcleo de tu base de código común para todas las plataformas. Cosas como selectores de fecha, entradas de archivos, notificaciones, mapas y más pueden abordarse en los bordes, dejando que el interior de tu aplicación se enfoque en la experiencia común. Para nosotros, una startup en etapa inicial, es importante optimizar la eficiencia del desarrollador.

2. Compartir código e individualidad de la plataforma

Short description:

Queremos que cada cambio en nuestra base de código sea lo más impactante posible. React Native facilita respetar la individualidad de cada plataforma y crear experiencias móviles verdaderamente únicas. Realísticamente, apuntamos a compartir más del 95% del código en todas las plataformas.

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 resultaría en ninguna compartición de código en absoluto. No queremos un bajo nivel de compartición de código donde tal vez algunos elementos se compartan, pero la mayoría aún está separada. En un mundo ideal irrealísticamente perfecto, querríamos que el 100% de 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 lo hace fácil respetar la individualidad de cada plataforma y al aprovechar eso, puedes crear experiencias móviles verdaderamente únicas, o perdón, experiencias nativas. Realísticamente, lo que queremos es que la gran mayoría de nuestro código se comparta en todas las plataformas, apuntando a compartir más del 95% del código y hacer que nuestros desarrolladores sean lo más impactantes posible.

3. Composición Responsiva y Navegación

Short description:

Hoy, me gustaría centrarme en la composición responsiva y la navegación. React Native proporciona los elementos básicos para construir aplicaciones que funcionan en múltiples factores de forma. Sin embargo, carece de CSS, lo que dificulta la creación de interfaces de usuario responsivas sin los constructos familiares basados en la web. Discutamos la composición. Al renderizar una lista de elementos, agregar relleno y espaciado puede dar lugar a resultados inconsistentes. El código se vuelve repetitivo, requiriendo el paso de props de estilo para cada componente. Este enfoque es engorroso, especialmente en un entorno de equipo. La composición necesita mejorar.

Por supuesto, siéntete libre de consultar mi charla de 2017, donde hablo más a fondo sobre esto y también incluyo toda la configuración de webpack para que suceda. Pero en estos días, todo eso está empaquetado con Expo. Echa un vistazo a lo que tienen. Recomiendo consultar su documentación y tienen excelentes guías para comenzar y ejecutar en cada plataforma. Haz cualquier aplicación, ejecútala en todas partes.

Hoy me gustaría centrarme en la siguiente etapa de mi viaje, la composición responsiva y la navegación. Comencemos con la responsividad. No es ningún secreto que existen múltiples factores de forma. Al construir una aplicación que funcione en todas partes, obviamente necesitamos tener esto en cuenta. Uno esperaría que una plataforma como React Native tuviera esto en cuenta, pero realmente solo proporciona los elementos básicos. Y lo más importante, no hay CSS, lo que significa que no hay consultas de medios, no hay cuadrícula CSS, no hay selectores CSS en absoluto. El estilo en React Native se inspira en CSS en el sentido de que utiliza nombres de propiedades CSS y tiene una implementación de Flexbox. Pero CSS en sí mismo no existe en React Native. Si alguna vez has construido una aplicación web responsiva antes, puedes empezar a ver lo desafiante que es construir esas mismas interfaces de usuario sin ninguno de los constructos basados en la web a los que estás acostumbrado.

OK, hablemos de la composición. Supongamos que tienes código de React Native que se ve así, con una interfaz de usuario renderizada a la derecha. Aquí estamos simplemente renderizando una lista básica de elementos. El diseño no se ve realmente genial. Así que agreguemos un color de fondo y algo de relleno a ese contenedor. OK, ahora los elementos están un poco apretados entre sí también. Agreguemos un poco de espacio entre ellos. Y puedes ver que los tres elementos inferiores tienen un relleno superior aplicado pero el superior no. Y eso se debe a que si aplicamos el mismo relleno, habría demasiado relleno con el contenedor también. Si eliminamos el relleno del contenedor, entonces afectaríamos la composición, donde si tenemos varios de estos renderizados dentro del mismo contenedor, el relleno estaría desalineado en todo el conjunto. Y el código también es bastante repetitivo. Realmente no escribiríamos código así en la realidad, así que lo refactorizaríamos a algo como esto, donde, como puedes ver, el array que estamos mapeando podría ser datos de un servidor o algo así. Y realmente estamos mirando el índice del array para determinar qué estilos aplicar. Entonces, fundamentalmente, me encuentro haciendo esto bastante seguido y tratando de pasar esa prop de estilo para cada componente individual. Descubrí que tenía que controlar el paso de la prop de estilo, lo cual es un poco molesto cuando tienes un equipo de desarrolladores y estás tratando de asegurarte de que la pasen correctamente. La composición simplemente no funcionaba.

4. Introducción a la Comunidad de React Bangalore

Short description:

Fui a consultar en Bangalore en 2017 y tuve la oportunidad de presentar para la comunidad de React Bangalore. Conocí a los organizadores, incluido Sid Dart, quien ahora es un experto líder en el espacio del sistema de diseño de React.

Entonces, ¿qué hago? Bueno, afortunadamente, fui a consultar en Bangalore en 2017, y los organizadores de la comunidad de React Bangalore se pusieron en contacto conmigo y me preguntaron si quería presentar para su comunidad. Las comunidades están en todas partes, después de todo. Y así acepté, y aquí estoy hablando de un Pontiac Aztec. Es un coche realmente magnífico. Tuve el placer de conocer a los organizadores de esa comunidad. Uno de ellos es Sid Dart, quien está sentado a mi lado en esta foto, y en realidad está hablando en el otro escenario. No estoy seguro si esta es la primera vez que el orador está en ambos escenarios al mismo tiempo. Y gracias a Dios lo conocí, 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.

5. React UI and Composable UI

Short description:

Alrededor de la misma época en 2020, descubrí React UI, un conjunto de componentes accesibles, responsivos y personalizables. Aunque fue creado para la web, me pregunté si podría crear un sistema de diseño de React Native utilizando sus constructos de diseño. Después de implementar gran parte de React UI para React Native, le envié un mensaje a Sid, quien respondió de manera positiva. El constructo crítico que hizo que todo fuera componible fue el componente stack, que permite un espaciado automático y una composición sencilla. Al combinar stacks dentro de una cuadrícula, logramos una interfaz de usuario totalmente responsiva y declarativa.

Alrededor de la misma época en 2020 en la que estaba buscando una solución para mi aplicación de React Native, Sid lanzó React UI. Esto se tomó del propio sitio web de React UI, donde dice que React UI viene con un conjunto de componentes que son accesibles, responsivos y personalizables. Eso suena exactamente a lo que quiero. Tiene una lista de componentes con los que se puede trabajar, como elemento, enlace, selección, texto, área de texto, y así sucesivamente, y lo más importante, en la parte inferior también hay stack y grid para ayudarte a construir un diseño con esos otros bloques de construcción.

Pero el problema era que React UI está diseñado para la web, y lo que yo estaba construyendo era para React Native en todas partes. Pero me pregunté si tal vez podría crear un sistema de diseño de React Native, tal vez esos constructos de diseño podrían ayudarme con la composición responsiva de mis aplicaciones de React Native, así que intenté hacer exactamente eso. Después de varios intentos y errores, logré que algo funcionara y decidí enviarle un mensaje a Sid. Le dije: `Hola Sid, ¿cómo va todo? ¿Disfrutando de Ámsterdam? Quería decirte 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 un descarado plagio de React UI, pero por supuesto, React UI es para la web y lo que yo he hecho es para React Native. Por lo tanto, no hay emociones, no hay CSS, lo hice de manera un poco diferente, y así sucesivamente`. Sid amablemente respondió: `Eso es genial. React UI es un tema de plagio, plagios por todas partes`. Como siempre digo, los buenos artistas copian, los grandes artistas roban, ¿verdad? Mirando las fechas de esos mensajes, se puede ver que esto fue durante el confinamiento en 2020, cuando estaba trabajando en esto, y esta es una imagen de lo que construí en ese momento. Esto es código de producción directo, directamente de nuestro código base. Espero que al mirar el código a la izquierda, puedas ver cómo se mapea esencialmente a la interfaz de usuario a la derecha.

El constructo crítico que hace que todo esto sea componible es el componente stack. Solo tengo que establecer la propiedad de espacio y el resto se renderiza en función de eso. Ya no es necesario pasar un estilo como prop, y para establecer todo el espaciado, todo funciona automáticamente. En la parte inferior, renderizo un componente de elemento de usuario, donde si muestro el código de eso y lo resalto con una línea punteada roja, también verás lo que se está renderizando allí. Nuevamente, es solo un stack. Esta vez es horizontal, muestra la foto principal de un usuario y también muestra un componente de enlace con el nombre del usuario. Simplemente componiendo stacks, podemos escribir toda nuestra interfaz de usuario de una manera que se ajuste perfectamente. Creo que eso es lo que llaman ser un desarrollador full stack. Podemos tomar eso y colocarlo dentro de una cuadrícula, que puedes ver aquí. Podemos tomar el stack, que tiene una cuadrícula con columnas dentro de cada fila. Nuevamente, simplemente componiendo estos stacks en una cuadrícula con columnas, podemos construir toda esa página a la derecha. Como puedes ver, es completamente responsiva y también altamente declarativa. En este punto, estaba bastante contento.

6. Mondrian and Native Base Comparison

Short description:

Todo el Guild está construido de esta manera y parece funcionar bastante bien. Mondrian es un sistema de diseño de React Native inspirado en Piet Mondrian. Native Base es un sistema de diseño más completo con accesibilidad y documentación. Para la navegación, tanto en dispositivos móviles como en escritorio se utiliza la navegación basada en la interfaz de usuario, mientras que la navegación basada en la web incluye controles externos como la barra de URL. Pegar una URL en una nueva pestaña debería funcionar sin problemas.

Lo logré. Todo el Guild está construido de esta manera y parece funcionar bastante bien. Así que se me ocurrió un nombre llamativo. Mondrian. Está nombrado en honor al famoso ingeniero de sistemas de diseño neerlandés, Piet Mondrian, conocido por componer stacks en interfaces de usuario que se ven así. Así que creé un repositorio vacío en GitHub y comencé a prepararme para un lanzamiento público. Estaba realmente emocionado de compartirlo con todos ustedes. Pero justo en ese momento me enteré de Native Base. Así que comparemos Native Base con Mondrian, ¿de acuerdo?

¡Muy bien! Es un sistema de diseño de React Native para todas las plataformas. Es mucho más completo que lo que hemos construido. Estamos en la versión 0.0.0 alpha 3, ellos están en la versión 3.4.6. Tienen accesibilidad. También tienen documentación. Y lo más importante, fue construido en Bangalore, que fue la inspiración para Mondrian desde el principio. Así que en estos días, también recomendaría un sistema de diseño para ustedes, diría que simplemente usen Native Base. Han hecho un trabajo fantástico. Creo que algunos miembros del equipo están aquí hoy si quieren hablar con ellos.

De acuerdo, ¿qué sigue? Navegación. Bueno, hay navegación en dispositivos móviles y de escritorio. En estas plataformas, es más típico navegar utilizando la propia interfaz de usuario. Tocas un botón y navegas a otro lugar. Básicamente, la interfaz de usuario es la construcción de navegación principal sin mucho más en términos de controles externos para manipular esa interfaz de usuario. Existe el botón de retroceso de Android, que es una especie de excepción, pero no profundizaré mucho en ese tema en esta charla. Luego está la navegación basada en la web, donde el navegador tiene un botón de retroceso, un botón de avance, un botón de actualización, una barra de URL y pestañas. Cada uno de estos manipula la navegación externamente, esencialmente hacia la aplicación. No tengo que explicar cómo funciona un navegador, pero la diferencia de navegación principal es básicamente la barra de URL, donde deberías poder tomar esa URL y pegarla en una nueva pestaña, y simplemente funcionará. Para demostrar eso, aquí está la página de Instagram de mi gato. Es adorable, ¿no crees? Si navegamos utilizando la interfaz de usuario, si tocamos una imagen, se abre en un modal. Verás que hay un fondo en ese modal, porque tiene el contexto de qué poner en ese fondo. Sin embargo, si copias y pegas esa URL en una nueva pestaña, no hay fondo.

7. React Router vs React Navigation

Short description:

React Router tiene un gran manejo de estado, pero no se siente nativo en plataformas que no son web. El manejo de estado de React Navigation es un poco extraño, pero tiene esa sensación nativa. Al construir una base de código compartido del 95% o más con la misma navegación para cada plataforma, elegimos React Navigation a pesar de sus defectos. La experiencia de usuario no será ideal, pero los usuarios tendrán que vivir con eso. El equipo está trabajando duro para mejorarlo y esperamos que la experiencia del usuario mejore con cada lanzamiento.

Se abre como una página completa para esa imagen. Y de nuevo, esta es una diferencia fundamental entre la navegación móvil y de escritorio, donde la navegación móvil y de escritorio pueden funcionar en el primer caso, pero la web tiene que funcionar para el segundo caso.

Entonces, ¿cómo construimos esto? Bueno, está React Router, que ofrece soporte para enrutamiento basado en DOM para navegadores, así como para React Native. Y aunque funciona muy bien, no está realmente integrado en dispositivos móviles para permitir cosas como arrastrar desde el borde de la pantalla para retroceder, como esa sensación nativa realmente elegante, no tiene eso integrado.

Luego está React Navigation, que es una experiencia de navegación completa y orientada a dispositivos móviles. Si has construido algo con React Native antes, es probable que hayas usado React Navigation. Utiliza pantallas de React Native de Software Mansion para habilitar esa funcionalidad de arrastrar desde el lateral de la pantalla. Y en dispositivos móviles, se siente increíble, se siente genial, se siente nativo, se siente adecuado. En los últimos años, han lanzado este soporte, como muestro aquí, y lo probamos, pero simplemente no funcionó muy bien. Si bien técnicamente funciona, varias cosas se sintieron pesadas y algo fuera de lugar. Cosas como la carga incremental de rutas, que obviamente quieres tener en una experiencia web. No quieres cargar todo en una carga gigantesca en la web. También hizo que la barra de URL se evaluara incrementalmente. La barra de URL simplemente se reescribiría a medida que se cargaban las rutas. Los botones de retroceso y avance tampoco funcionaban del todo bien, por lo que si hacías clic en retroceso, avance, retroceso, avance, toda la aplicación se ponía en un estado extraño y no podía recuperarse, así que tenías que actualizar y luego la barra de URL comenzaba a reescribirse nuevamente.

Entonces, para resumir, React Router tiene un gran manejo de estado, pero no se siente nativo en plataformas que no son web. El manejo de estado de React Navigation es un poco extraño, pero tiene esa sensación nativa, por lo que al construir una base de código compartido del 95% o más con la misma navegación para cada plataforma, elegimos React Navigation a pesar de sus defectos. La experiencia de usuario no será ideal, pero los usuarios tendrán que vivir con eso, y la extrañeza estará presente. Sé que el equipo es inteligente y está trabajando muy duro para mejorarlo. Intenté ayudar enviando solicitudes de extracción, pero rápidamente quedó claro que una biblioteca con el legado de React Navigation requiere más consideración de la que pude dedicar. Pero simplemente esperaremos. Nos actualizaremos. Estoy seguro de que están trabajando en ello. Y a medida que lancen nuevas funciones, esencialmente las tendremos también en Guild. Esperamos que la experiencia de usuario mejore con cada lanzamiento. Y eso es todo. Gracias a todos. Aplausos, aplausos, aplausos, aplausos.

8. React Native URL Router

Short description:

Solo bromeo. Esa sería una forma terrible de terminar una charla. No hay solución. Me quejé con mi buen amigo Lorenzo, quien me habló de una nueva biblioteca llamada React Native URL Router. Combina las mejores partes de React Router con las mejores partes de las pantallas de React Native para proporcionar una experiencia de navegación de arrastre desde el borde con una increíble gestión de estado. Agregar soporte web parecía bastante sencillo, solo cambiar un enrutador nativo por un enrutador de navegador y un navegador de pila con un componente de ruta de React Router.

Vamos. Vamos. Solo bromeo. Esa sería una forma terrible de terminar una charla. No hay solución. ¿Qué? ¿Qué? Vaya. Estoy decepcionado con todos ustedes. Si han aprendido algo hasta ahora, resuelvo todos mis problemas quejándome constantemente con las personas de la community. Y esta vez, me quejé con mi buen amigo Lorenzo, que aparece aquí en la boda de Phil y Cindy. Es la única foto que tengo con ellos. Así que leyendo de izquierda a derecha, claramente soy el padrino. Lorenzo es claramente el segundo mejor hombre. No hay otra forma de interpretar esta foto. Pueden preguntarle a Lorenzo, Phil o Cindy, y definitivamente estarán de acuerdo conmigo. Sin preguntas.

Lorenzo es un mantenedor de formularios de React Navigation y está muy involucrado en los esfuerzos de la community de React Native. A menudo, cuando no sé cómo proceder en el espacio de React Native, simplemente le pregunto a él. Porque él suele saber sobre las cosas antes que el resto de nosotros. Y esta vez, cumplió. Me habló de una nueva biblioteca llamada React Native URL Router. Eso suena exactamente a lo que quiero. Un enrutador de React Native, pero con URLs. Así que eché un vistazo a la página de documentación y encontré este ejemplo. No estoy seguro si pueden ver el texto pequeño, pero en esencia combina las mejores partes de React Router con las mejores partes de las pantallas de React Native para proporcionar esa experiencia de navegación de arrastre desde el borde con una increíble gestión de estado. Se veía increíble.

Así que fui a probarlo y descubrí que no funcionaba en absoluto en la web. Todavía es experimental y solo está construido para dispositivos móviles. Pero agregar soporte web parecía bastante sencillo. Parecía que solo requería cambiar esos dos componentes allí. Cambiar un enrutador nativo por un enrutador de navegador. Cambiar un navegador de pila por un componente de ruta ambos de React Router y parecía que debería funcionar. Parecía muy simple y directo.

9. Colaboración con Software Mansion

Short description:

Me puse en contacto con un mantenedor Alec de Software Mansion y le pedí si podíamos tener una charla rápida antes de empezar a enviarle PRs. Alec organizó una llamada con Christoph, el director de ingeniería de Software Mansion. Fueron amables, solidarios e interesados en la dirección de Guild como plataforma. Su amor y dedicación fueron increíbles.

Pero no quería hacer todo el esfuerzo de enviar PRs solo para que los mantenedores los rechazaran porque no se alineaban con su dirección. Así que me puse en contacto con un mantenedor Alec de Software Mansion y le pregunté si podíamos tener una charla rápida antes de empezar a enviarle PRs. Y lo que obtuve realmente me sorprendió. Alec organizó una llamada con Christoph a quien busqué en LinkedIn antes porque no sabía quién era. Es el director de ingeniería de Software Mansion y yo estaba como oh no. Sé cómo va a ser esto. Va a ser una de esas charlas en las que es como, bueno, Taz, ya sabes somos una consultoría y si quieres nuestra ayuda puedes contratar a un consultor para que te ayude y al final te enviarán una gran factura. Pero en realidad no obtuve eso en absoluto. Fue sinceramente encantador y muy amable. Recibí mucho apoyo y amabilidad de ambos que sinceramente me sorprendió mucho. Me dijeron que estaban aquí para ayudar en cualquier aspecto de su biblioteca. No pidieron nada a cambio, solo amables comentarios sobre cómo podemos mejorar juntos. De hecho, estaban más interesados en la dirección de Guild como plataforma porque querían que también ayudara a sus esfuerzos de community. Y tengo que decir que llevo dos décadas en el negocio del software y no creo haber visto tanto amor y dedicación como el que he visto en estos dos. Fue sinceramente increíble. Solo puedo hablar de ellos en los términos más y también recomendaría que eches un vistazo a sus esfuerzos de community.

10. React Native URL Router y Soporte de la Comunidad

Short description:

Nos asociamos en React Native URL Router, utilizando Guild como una aplicación de ejemplo. Eliminé toda la aplicación, reemplacé la navegación de React con React Router y migré a React Native URL Router. La aplicación se siente más rápida con la navegación basada en el navegador. Guild utiliza React Native Web, un sistema de diseño propio y un marco de navegación experimental. Nuestro objetivo es lanzar aplicaciones móviles y de escritorio en el futuro. La comunidad es vital para nuestro éxito y aprendo de las personas que me rodean. Compartir variables de diseño básicas se puede hacer utilizando el sistema de tokens de React UI.

En resumen, acordamos asociarnos en React Native URL Router. Queríamos utilizar Guild como una aplicación de ejemplo para probar los paradigmas y asegurarnos de que funcionaran bien. Así que terminé removiendo toda la aplicación. Eliminé la navegación de React y la reemplacé por React Router como un paso intermedio para migrar a React Native URL Router. Estas son las estadísticas de esa solicitud de extracción. Puedes ver que eliminé más del doble de código del que agregué. En general, la aplicación se siente mucho más rápida y la navegación basada en el navegador se siente más natural. ¿Te diste cuenta? ¿Notaste que Guild está utilizando React Native Web? ¿Notaste que Guild está construido utilizando un sistema de diseño propio? ¿Notaste que también está utilizando un marco de navegación experimental? ¿O simplemente pensaste que era una aplicación web ordinaria construida de manera ordinaria? Hablé mucho sobre ejecutarse en todas las plataformas, aunque actualmente nos estamos enfocando en la web, pero esperamos lanzar de manera incremental una aplicación móvil y de escritorio en el futuro, ya que toda nuestra infraestructura considera todas estas plataformas diferentes y lanzar para ellas es mucho más fácil 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 comunidad 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 comunidad. Sin ellos y sin su apoyo, no estaría en ninguna parte. No es que sea especial. Simplemente asisto a eventos, hablo con las personas allí y aprendo de las personas que me rodean. Esa es exactamente la razón por la que comencé TorontoJS en 2010. Esa es exactamente la razón por la que estamos trabajando en Guild en este momento. Porque al final del día, las comunidades están en todas partes. Y ahora tu tecnología también lo está. Gracias. ¿Estás seguro esta vez? ¿Puedo...? Me han decepcionado antes. ¡Eso fue increíble! Gracias. Hablemos de ello. Quédate ahí mismo.

¡Hola Taz! No, no. Vete. Bueno, la gente quiere saber. ¿Algún consejo para comenzar a compartir variables de diseño básicas entre web y móvil, colores, tamaños de fuente, etc.? Sí, una pregunta fantástica. Para mí, simplemente miré React UI para esto, así que te recomendaría que hagas lo mismo. Creo que Sid escribió una documentación fantástica sobre esto. En esencia, lo que ha hecho es tener todo un sistema de tokens definido para su sistema de diseño.

11. Token-based Centralization

Short description:

Aprovecha los tokens definidos de forma centralizada para compartir y centralizar variables, evitando la personalización excesiva en cada capa. Al mantener los tokens de forma centralizada, se permite una adaptación coherente y bien gestionada de toda la aplicación y el sistema de diseño.

Luego puedes aprovechar esos tokens definidos de forma centralizada a través de una variante en cada bloque de construcción de tu aplicación, lo que te permite compartir de manera efectiva y aún centralizar este tipo de variables. Básicamente, lo que descubrí que no funcionaba muy bien es básicamente esa prop de estilo. Si pasas esa prop de estilo, permite una personalización excesiva en cada capa. Entonces, si te equivocas por un píxel, todo el design se ve mal. Al mantener todos esos tokens de manera más centralizada, te permite adaptar toda tu aplicación, todo tu sistema de diseño, de manera más centralizada también, y eso mantiene las cosas muy coherentes y bien gestionadas. Bien, siguiendo adelante. ¿Cómo eliges entre todas estas bibliotecas? ¿Obtienes consenso del equipo? ¿Lo escribes? ¿Hay pros y contras? Excelente pregunta. Nunca tengo una buena respuesta para esto, porque siempre es tan difícil. Para mí, a menudo pienso en la regla del 90-90. No estoy seguro si estás familiarizado con la regla del 90-90, pero básicamente, alguien que trabajó en creo que fue Xerox Labs, hace mucho tiempo en los años 70, de los cuales Apple robó todo. Terminaron inventando bastante. Así que él ideó la regla del 90-90, que es el primer 90% de tu tiempo trabajando en un proyecto, el último 10% del proyecto es el otro 90% del tiempo. Porque básicamente ahí es donde todo se desmorona, tus ideas, tus paradigmas, tu dirección, todo se desmorona en ese último 10%, requiriendo el otro 90% del tiempo. Así es como elijo. Simplemente voy y construyo algo. Construyo, construyo, construyo, construyo, construyo. Todo se desmorona. Aprendo mucho. Descubro cómo debo adaptar mi paradigma, descubro cómo debo adaptar el uso de mi biblioteca, y luego tal vez miro otra biblioteca, si eso se desmorona en ese último 10%. Así que para mí, sinceramente, simplemente comienzo a escribir código, simplemente comienzo a construir, simplemente comienzo a ver cómo funciona. Con el tiempo y la práctica, puedes comenzar a reconocer patterns más temprano, y luego, con suerte, no necesitas el 100% del tiempo la próxima vez. ¿Estás preparado, crees, en el futuro para reescribir? ¿O cambiarlo todo? ¿Emocionalmente? Emocionalmente, nunca. Como dije, queremos ser lo más impactantes posible. Entonces, por ejemplo, con Guild, pasé alrededor de dos años construyendo esa architecture. Solo probando cosas, reescribiéndolo, probando algo más, reescribiéndolo, probando algo más, reescribiéndolo. Creo que ahora estamos en la reescritura número cuatro. ¿Está bien ahora? Espero que esté bien ahora. Espero, cruzo los dedos, que esté bien ahora. Lo descubriremos. ¿Cuándo crees que será público público? Ahora mismo, puedes ir a beta.guild.host y estará allí. Vamos a quitar el beta en tal vez unos meses, veremos cómo va. Es simplemente cuando nos sintamos cómodos con ello. Cuando sea cómodo, cuando recibamos buenos comentarios de la community, quitaremos la etiqueta beta. Genial, una vez más, gracias Taz por unirte y iluminarnos. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
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
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.