No resuelvas problemas, elimínalos

Rate this content
Bookmark

Los humanos somos solucionadores de problemas naturales y somos lo suficientemente buenos en ello como para haber sobrevivido a lo largo de los siglos y convertirnos en la especie dominante del planeta. Debido a que somos tan buenos en ello, a veces nos convertimos en buscadores de problemas, buscando problemas que podamos resolver. Aquellos que logran con éxito sus objetivos son los eliminadores de problemas. Hablemos sobre la distinción entre resolver y eliminar problemas con ejemplos del mundo de la programación y más allá.

39 min
22 Oct, 2021

Video Summary and Transcription

Kent C. Dodds analiza el concepto de eliminación de problemas en lugar de simplemente resolverlos. Presenta la idea de un árbol de problemas y la importancia de evitar crear soluciones prematuramente. Kent utiliza ejemplos como el motor eléctrico de Tesla y el marco de trabajo Remix para ilustrar los beneficios de la eliminación de problemas. Enfatiza el valor de los compromisos y tomar el camino más fácil, así como la necesidad de reevaluar y cambiar constantemente los enfoques para eliminar problemas.

Available in English

1. Introducción y Ejercicio de Despertar

Short description:

¡Hola a todos! Soy Kent C. Dodds, un ingeniero de software, y hoy hablaré sobre cómo podemos eliminar problemas en lugar de simplemente resolverlos. Pero primero, despertémonos y hagamos algunos ejercicios juntos. Párate, extiende los brazos, agáchate y vuelve a levantarte. Hagamos 12 repeticiones y luego estirémonos.

¡Hola a todos! ¡Sí! Mi nombre es Kent C. Dodds, y soy un ingeniero de software, y voy a hablar sobre cómo debemos evitar resolver problemas y en su lugar intentar eliminarlos.

Pero antes de hacer eso, me gustaría que todos se despierten. Así que por favor, párense. Acabamos de almorzar. Tu cuerpo está como, oh, es hora de dormir. No, no lo es. Es hora de levantarse. Párate. Vamos, vamos. Extiende los brazos frente a ti como esto y agáchate y vuelve a levantarte. Esto es ejercicio, ya sabes. No teníamos que hacer eso cuando estábamos encerrados en nuestras habitaciones.

Así que vamos a hacer 12 de estos juntos, y quiero que cuenten en voz alta. ¿Listos? Uno, dos. No están contando. Tres. Ahí vamos. Cuatro. Cinco. Seis. Esto es genial. Siete. Tus piernas están como, ¿qué estás haciendo? Nueve. Diez. ¿Eso es 11? ¿Deberíamos empezar de nuevo? Doce. No, es broma. Estírate lo más alto que puedas y estírate hacia un lado y hacia el otro. ¡Listo!

2. Introducción y Relanzamiento del Sitio

Short description:

Ahora, antes de que te sientes, preséntate a la persona de al lado y agradece su presencia. Recientemente reescribí mi sitio y lo relancé. Cuando estaba construyendo KentCDONS.com fue cuando empecé a pensar en cómo queremos eliminar problemas en lugar de resolverlos. Esta charla trata sobre problemas, soluciones y compensaciones. No se trata necesariamente de código. Es más sobre la vida en general y los problemas.

Ahora, antes de que te sientes, preséntate a la persona de al lado y agradece su presencia. Y si estás en línea, puedes hablar con tu gato. Gracias. Por eso.

De acuerdo. Primero quiero mencionar que recientemente reescribí mi sitio y lo relancé y está realmente genial y quiero que le eches un vistazo. De hecho, incluso tengo los registros ejecutándose aquí mismo. Así que si quieres que estos registros se vuelvan locos, ve a KentCDONS.com ahora mismo y veremos cosas locas. Por favor. ¿No? De acuerdo. Bien. Tengo un pequeño error en el servidor, así que eso es bueno. Sí, ahí vamos. De eso estoy hablando.

Así que cuando estaba construyendo KentCDONS.com fue cuando empecé a pensar en cómo queremos eliminar problemas en lugar de resolverlos. Y llegaré a eso un poco más hacia el final. Así que de ahí surgió la idea de esta charla. Mi control remoto no está funcionando. Es mío. No es de ellos. Es mi culpa. Así que usaré el teclado.

Entonces, de qué trata esta charla, voy a hablar sobre problemas, soluciones y compensaciones y cómo resolver es genial, eliminar es mejor y evitar es aún mejor si puedes lograr eso. No voy a dar ejemplos de código. Esto no es una demostración en vivo. Aunque disfruto de esas charlas, sí, de hecho, no se trata necesariamente de código. Es más sobre la vida en general y los problemas. Y sí, no es específico del dominio. Sé que estamos en una conferencia de React, pero esto no tiene mucho que ver con React excepto hacia el final donde intentamos aplicarlo. Esto es un árbol de problemas.

3. Problem Tree and Simplification

Short description:

El ícono azul representa el problema principal que estás tratando de resolver. Cada nodo representa una solución, pero a veces las soluciones generan más problemas. Eventualmente, llegamos a una solución terminal sin más problemas que resolver. Esta es una versión simplificada de un árbol de problemas al que haremos referencia a lo largo de esta charla.

No se supone que puedas ver lo que hay dentro de esos cuadritos. Pero el ícono azul aquí representa el problema principal que estás tratando de resolver. Entonces, cualquiera que sea la misión de tu empresa, eso es lo que representa este problema principal. O cuál es la meta principal. A partir de eso, tenemos diferentes problemas con los que necesitamos lidiar. Y cada uno de esos nodos adicionales es otra solución. Y a veces las soluciones que desarrollamos generan más problemas. Y así eventualmente llegamos a la solución terminal que no tiene ningún problema que nos importe resolver. Y estos son mucho más grandes en la vida real. Si intentaras mapear todos los problemas que tiene tu empresa, o lo que sea en la vida, sí. Tendrías muchos. Así que aquí tienes una versión simplificada de un árbol de problemas. Y vamos a hacer referencia a esto varias veces a lo largo de esta charla.

4. Problem Solving and Avoidance

Short description:

Es importante reconocer que eres un solucionador de problemas. A menudo nos convertimos en buscadores de problemas, buscando problemas para resolver. Cuando llegó la pandemia, mi hermana me pidió que construyera una aplicación para resolver un problema para músicos profesionales. Sugerí trabajar manualmente a través de las herramientas en lugar de automatizar todo. Es más fácil resolver un problema cuando sabes cuál es el problema. Evita crear soluciones prematuramente. Elon Musk dijo que es mejor evitar los problemas que resolverlos.

En primer lugar, creo que es importante reconocer que eres un solucionador de problemas. Eso es parte de la razón por la cual la humanidad es la especie dominante en el planeta, porque resolvemos problemas y hemos, supongo, dominado el planeta. Pero somos tan buenos en eso que también nos convertimos en buscadores de problemas. Donde buscamos problemas para resolver. Y tengo una pequeña historia sobre esto. Y tal vez puedas relacionarte con esto.

Entonces, cuando llegó la pandemia, mi hermana, que es una violinista muy talentosa, vio a todos sus amigos músicos profesionales totalmente sin trabajo, y no estaban seguros de qué hacer. Y ella vino a mí y me dijo: `Oye, ¿puedes construirme una aplicación que pueda ayudar a resolver este problema?` Y no entraré en detalles al respecto. Pero básicamente necesitaba que construyera un calendario de Google y Zoom en una sola cosa integrada. No integrarlos, sino construirlos todos. Siempre subestimamos la cantidad de trabajo que llevan estas cosas. Y ella dijo que había hecho mucha investigación de mercado y había visto qué soluciones había y todo, y sentía que estaba dispuesta a contratar a alguien para trabajar en este problema. Y le dije, sabes, tal vez necesitas simplemente trabajar manualmente a través de estas herramientas y ser la persona que facilite lo que estás tratando de hacer aquí, y ella dijo que no, solo quiero automatizar todo esto y escalarlo y todo. Y yo solo dije que no lo sé. Y al final, lo que ella terminó haciendo fue nada. Decidió que no quería invertir en eso. Y creo que fue una decisión sabia. Una cosa que he aprendido es que es mucho más fácil resolver un problema cuando sabes cuál es el problema. Y asumimos que entendemos cuál es el problema desde el principio, y así, como, asumimos que vamos a necesitar un sistema de tickets y vamos a necesitar un calendario y un sistema de video chat, y tenemos todas estas suposiciones. Y tal vez las tengas, pero no conoces todas las complejidades de qué características tienen esos diferentes cosas que van a necesitar. Y por eso, sugiero que primero sientas el dolor de la solución manual y luego resuelvas esos dolores a medida que vengan. Y así, la evitación de problemas es esto. Evitas resolver o evitar el problema por completo al no crear la solución prematuramente. Y Elon Musk recientemente tuvo una entrevista y realmente me encantó esta cita. Dijo que posiblemente el error más común de un ingeniero inteligente es optimizar la cosa que no debería existir. Y pensé que estaba hablando de mí. Así que es mejor evitar problemas que resolverlos. Entonces, aquí está nuestro árbol de problemas nuevamente. Si estamos evitando un problema, digamos que queremos evitar el problema en la solución 1B aquí. Y simplemente decidimos que no lo resolveremos.

5. Problem Avoidance and Re-evaluation

Short description:

Eso es lo que implica evitar problemas. A menudo nos adentramos en este árbol de problemas y llegamos a un solo nodo. Y estamos trabajando en esta solución justo aquí. Y es una solución complicada. Este problema en particular es muy difícil. Mientras trabajamos en esta solución, pensamos: vaya, esto es difícil. Incluso a veces puedes decirte a ti mismo: si hubiera sabido que iba a ser tan difícil, nunca lo habría hecho. ¿Realmente necesitamos resolver este problema en absoluto? Tal vez esta cosa entera ni siquiera necesite existir. Reevaluar nuestro árbol de problemas puede ahorrarte mucho tiempo y, en última instancia, ser mejor para tus usuarios. Es totalmente válido decir: sabes qué, no vamos a resolver ese problema, porque tenemos otras cosas con las que lidiar en este momento. Evitar problemas es fantástico. Lo recomiendo si puedes evitarlos, pero a veces no puedes evitar el problema, así que en esta situación, antes de intentar resolverlo, ve si puedes eliminarlo.

Eso es lo que implica evitar problemas. No lo resuelves. Y aquí está la idea principal que quiero que saques de esta charla. A menudo nos adentramos en este árbol de problemas y llegamos a un solo nodo. Y estamos trabajando en esta solución justo aquí. Y es una solución complicada. Este problema en particular es muy difícil. Mientras trabajamos en esta solución, pensamos: vaya, esto es difícil. Incluso a veces puedes decirte a ti mismo: si hubiera sabido que iba a ser tan difícil, nunca lo habría hecho.

Y ahí es cuando piensas: sabes, ¿realmente necesitamos resolver este problema en absoluto? Y a menudo, sí. Como absolutamente... Esta cosa entera ni siquiera funciona si no resolvemos este problema. Pero tal vez esta cosa entera ni siquiera necesite existir. Y así, puedes subir en el árbol de problemas hasta llegar a una solución en la que estés pensando: sabes qué, en realidad no necesitamos eso. Entonces, los usuarios ni siquiera usan esta función mucho. Así que podemos eliminar por completo esta función. Si hubiera sabido lo costoso que sería resolver este problema, nunca habría agregado esta función en primer lugar.

Entonces, reevaluar nuestro árbol de problemas puede ahorrarte mucho tiempo y, en última instancia, ser mejor para tus usuarios, porque cada minuto de cada día que pasas, o, como, todo lo que puedes hacer tiene la misma moneda, y esa es tu tiempo. Y cada minuto que pasas haciendo una cosa es un minuto que no puedes pasar haciendo otra. Así que está totalmente bien decir: sabes qué, no vamos a resolver ese problema, porque tenemos otras cosas con las que lidiar en este momento. Por eso les digo a las personas que, hey, como, no pruebo todo lo que escribo. Mucha gente me ve como un tipo de testing, como, cobertura de código del 100% y desarrollo impulsado por pruebas. Eso no soy yo. Veo las pruebas como un mecanismo para automatizar la calidad del código y la confianza, pero eso no es lo único que hago. El código no existe por sí mismo, así que tienes que ser práctico acerca de las cosas en las que inviertes tu tiempo. Evitar problemas es fantástico. Lo recomiendo si puedes evitar problemas, pero a veces la casa está en el acantilado, supongo? No sé cómo sucedió esto, pero me alegra que alguien estuviera allí para tomar una foto al menos y tal vez dejaron caer su cámara y fueron a ayudar. No lo sé, pero a veces no puedes evitar el problema, así que en esta situación, antes de intentar resolver el problema, ve si puedes eliminarlo. No sé, haz explotar la casa. Es una mala metáfora, supongo.

6. Eliminando Problemas: La Solución de Tesla

Short description:

Las soluciones te mantienen cautivo en su mantenimiento para siempre. Los motores de combustión interna han resuelto algunos problemas pero no el escape, las pastillas de freno, los incendios de automóviles y la sostenibilidad. El motor eléctrico de Tesla ha eliminado el escape y reducido el impacto de las pastillas de freno. Los automóviles eléctricos también tienen menos probabilidades de incendiarse en comparación con los motores de combustión interna.

Entonces, aquí está la razón. Las soluciones te mantienen cautivo en su mantenimiento para siempre. Y daré un ejemplo del mundo real. Aquí tenemos un motor de combustión interna, y hay muchos problemas que hemos enfrentado durante más de 100 años en los que hemos estado trabajando en motores de combustión interna que se han resuelto de manera notable. Primero, tenemos el escape. Cuando quemas gasolina, hay escape, y ese escape no es bueno para nuestros pulmones, y por eso no queremos que entre en la cabina, así que tenemos toda esta tubería que lo dirige hacia la parte trasera del vehículo donde ciertamente no causará ningún daño. Eso fue sarcasmo. Eso es todo lo que hemos hecho para resolver ese problema. También, tenemos las pastillas de freno, que aprietan los frenos de disco, o los discos, y podemos detener el vehículo. Y eso ha funcionado, excepto que esas pastillas de freno no desaparecen mágicamente y tienes que reemplazarlas, ¿verdad? Ese caucho se está dispersando en el aire y todos lo estamos respirando, pero eso es todo lo que hemos hecho para resolver ese problema. Los automóviles realmente pueden incendiarse, es increíble que cuando estás literalmente quemando cosas y explotando cosas para moverte, tal vez realmente se incendie. Pero han hecho mucho trabajo para evitar este problema o tratar de resolver este problema tanto como sea posible. Y luego, la sostenibilidad, bueno, este es el problema que simplemente decidimos no resolver con motores de combustión interna. No es posible hacer esto sostenible. Entonces, ¿qué pasa si miramos nuestro árbol de problemas y decimos, sabes qué, esta sostenibilidad o los incendios de automóviles o cualquier otra cosa, este es un problema realmente difícil de resolver. Subamos en el árbol de problemas y volvamos a la movilidad. Por supuesto, puedes andar en bicicleta y puedes tomar el metro o lo que sea, pero en algún momento las personas necesitan tener movilidad individual. Entonces, ¿cómo vamos a resolver ese problema? ¿Qué tal si cambiamos completamente el enfoque? Este es el motor eléctrico de Tesla, este es el motor que impulsa el automóvil de producción en masa más rápido del mundo, el Tesla Model S. Y aquí están los problemas que prácticamente han eliminado. El escape está absolutamente eliminado. No hay escape. Ahora, la gente habla sobre el tubo de escape largo, pero la verdad es que eventualmente todos vamos a funcionar con energía sostenible, por lo que ese tubo de escape largo se corta. No tenemos ningún problema de escape, punto. Tengo un Tesla y mi hogar funciona con energía solar, así que estoy conduciendo con energía solar y es increíble. Cuando encendimos el sistema la semana pasada, comencé a conducir mi automóvil y cantar, estoy conduciendo con energía solar. Es como una gran victoria. Y luego, frenar, lo genial de los vehículos eléctricos es que puedes convertir esa energía cinética en electrones reales y volver a meterla en la batería, por lo que sí, aunque todavía tenemos pastillas de freno en los vehículos eléctricos, probablemente nunca necesitemos reemplazar porque la mayor parte de esa energía vuelve a la batería, por lo que no hemos eliminado completamente ese problema, pero hemos reducido drásticamente el impacto de ese problema. Así que eso es súper increíble. En cuanto a los incendios de automóviles, hasta donde yo sé, los incendios de automóviles eléctricos aparecen mucho en las noticias, pero según los datos, tienes 11 veces menos probabilidades de que tu automóvil se incendie si es un modelo de Tesla o sí, un Tesla. No sé acerca de los otros fabricantes, pero los datos que he visto son de Tesla.

7. Sostenibilidad y Estudio de Caso de Tesla

Short description:

La sostenibilidad es la razón última para realizar cambios. Al reevaluar y cambiar nuestro enfoque, podemos crear un árbol de problemas más pequeño. El estudio de caso de Tesla muestra los beneficios de la eliminación de problemas.

Eso es bastante significativo. Y luego, la sostenibilidad, en última instancia, podemos hacer esto sostenible y eso es como debería ser la única razón por la que hacemos esto. Si todas las demás cosas estuvieran bien, esto es motivo suficiente para hacer este cambio. Y así, al subir un poco en el árbol de problemas y decir, hey, ¿qué pasa si en realidad no necesitamos resolver esto o si este es un problema demasiado difícil de resolver y volvemos a subir un poco en el árbol de problemas y decimos, hey, ¿qué pasa si cambiamos nuestro enfoque y ahora tenemos una nueva solución, entonces no lo hemos eliminado, no hemos decidido que no vamos a resolver este problema de movilidad personal, simplemente vamos a cambiarlo para que tengamos un árbol de problemas más pequeño. Ahora ciertamente también hay muchos problemas con los vehículos eléctricos, pero el problema árbol es más pequeño y los problemas son más pequeños y por eso esta eliminación es tan genial. Tesla es en realidad un estudio de caso realmente genial para la eliminación de problemas, así que si alguna vez quieres ver las cosas increíbles que están haciendo con la fabricación, es realmente fenomenal, muy interesante.

8. Componentes de React y Reutilización de Código

Short description:

En React, los componentes de clase tenían problemas con la reutilización de código debido a preocupaciones dispersas en múltiples hooks del ciclo de vida. Se intentaron componentes de orden superior y render props, pero tuvieron problemas con la composición. Luego surgieron los hooks y colocaron todas las preocupaciones en un solo fragmento de código, lo que permitió una fácil reutilización de código. Esto redujo drásticamente la cantidad de enseñanza necesaria para talleres de patrones de componentes de React.

Bien, hablemos ahora de software. En el software, tenemos algunos ejemplos, especialmente en React, de eliminación de problemas. ¿Cuántos de ustedes han escrito componentes de clase en React? ¿Algunos fanáticos de React Create Class por aquí? Unos pocos de ustedes. Sí, eso fue divertido. Sí, y luego tenemos componentes de clase. Y esta captura de pantalla proviene de la publicación del blog de React hooks de Amelia Weittenberg, que es muy buena. Recomiendo que le echen un vistazo. Pero uno de los grandes problemas que teníamos con los componentes de clase era la reutilización de código. Y tendrías una preocupación única en tu componente de clase que se dispersaría entre estos tres ciclos de vida. Tendrías tu componentDidMount, componentDidUpdate, componentWillUnmount. Si quisieras suscribirte a Firebase o actualizar el título del documento, tendrías que dispersar todo esto en tu componente. Por lo tanto, reutilizar eso era un poco complicado. ¿Usamos un componente de orden superior para que podamos hacer un componente que haga todo eso y luego simplemente pasamos nuestro componente a eso para que podamos aceptarlo como props? Bueno, hubo muchos problemas con eso. Tenías problemas de espacios de nombres, era muy difícil de escribir, y así comenzamos a usar render props. Y esos fueron divertidos. Realmente poderosos. Pero luego teníamos, como, estos árboles gigantes, o una pirámide del destino, tratando de obtener todos estos elementos compuestos. Simplemente no se componían muy bien. Y así funcionaba, y no era malo. Como sobreviví a eso, y fue un buen momento. Me divertí mucho con eso. Pero ¿no sería genial si simplemente no tuviéramos el problema en primer lugar? Entonces surgieron los hooks y colocaron todas las preocupaciones en un solo fragmento de código. Podría ser algo como un use date y use effect y un par de otras cosas ahí. Pero todo podría estar en este mismo fragmento de código. Entonces, ¿qué haces cuando quieres reutilizar código? Puedes crear una función a partir de eso, y no podías hacer eso con nuestros componentes de clase porque la preocupación se dispersaba en múltiples hooks del ciclo de vida. Pero con estos hooks, simplemente puedes tomar eso y colocarlo en otra función. Eso fue brillante. Tuvo un impacto enorme en nuestra capacidad para reutilizar código. Redujo drásticamente la cantidad de cosas que necesito enseñar en mi taller de patrones de componentes de React. Las cosas se volvieron mucho más fáciles cuando simplemente subimos por el árbol de problemas, decidimos, hey, ¿qué pasa si hacemos las cosas de manera diferente y luego seguimos en esa dirección.

9. Introducción a Remix

Short description:

Ahora, existen problemas al realizar este tipo de migraciones. Estoy realmente agradecido al equipo de React por crear los hooks. Han facilitado mucho mi trabajo. Remix es la razón por la que empecé a pensar en la eliminación de problemas. Remix tiene enrutamiento anidado, lo que permite optimizaciones increíbles. También proporciona una interacción perfecta entre el cliente y el servidor, eliminando la necesidad de herramientas como React Query. Además, Remix se basa en la web, lo que permite una transferibilidad fácil y compatibilidad con las API web.

Ahora, existen problemas al realizar este tipo de migraciones. Todos hemos sentido el dolor de tener que pasar a las clases y, como, ¿deberíamos molestarnos con todo eso? Al final, estamos mucho mejor. Y estoy realmente agradecido al equipo de React por crear los hooks. Han facilitado mucho mi trabajo.

Ahora viene mi parte favorita, y quiero hablarles de Remix. ¿Cuántos de ustedes han oído hablar de Remix? ¿Cuántos de ustedes que están levantando la mano han oído hablar de él porque tuiteo constantemente sobre ello? Sí, la mayoría de ustedes. Así que sí, tuiteo constantemente sobre Remix porque me encanta. Así que, divulgación completa porque la gente siempre lo quiere. Ha habido una transacción entre yo y el equipo de Remix, así que tuve que pagarles dinero para acceder a Remix. Pero eso no será así. Dicen que en unas semanas, Remix será completamente de código abierto y gratuito, por lo que también podrán usar Remix. Así que permítanme emocionarlos lo suficiente con esto. No tengo mucho tiempo para explicarlo todo, pero quiero darles una visión general porque Remix es la razón por la que empecé a pensar en la eliminación de problemas en primer lugar.

Lo primero que hace Remix y que lo hace fenomenal es el enrutamiento anidado. Una cosa buena de esto es que ya no tienes una ruta como slash usuarios, slash IDs, slash contactos o algo así. Ahora, en ese archivo de ruta, sea cual sea el framework que estés usando, probablemente tengas que renderizar tu ruta de diseño. Y eso incluirá tu encabezado, pie de página y todo. Con Remix, tienes enrutamiento anidado. Entonces, cada uno de ellos será simplemente el componente que se preocupa por la parte de la ruta que le importa a esta parte de la URL de la ruta. Eso es realmente bueno. Pero para llevarlo aún más lejos, eso es solo una especie de cosa agradable para la experiencia del desarrollador. Pero debido al enrutamiento anidado, Remix puede hacer muchas optimizaciones increíbles en cuanto a la carga de tus datos y la validación de la caché y la carga de los datos correctos para que no se carguen más innecesariamente. Eso es algo realmente genial, porque Remix tiene el enrutamiento anidado incorporado.

Otra cosa que me encanta de Remix es la interacción perfecta entre el cliente y el servidor. Al igual que Next tiene las props del lado del servidor de Git, también tienes un cargador con Remix. Pero Remix hace un trabajo realmente bueno al hacer que esa conexión sea muy fluida, como digo aquí. Así que tienes algo que puede estar completamente tipado. Puedes hacer todas tus solicitudes a la base de datos o a GraphQL o lo que sea, y luego todos esos datos están disponibles en tu componente y tienen un manejo declarativo de errores muy agradable y, en lo que respecta a tu componente, los datos están ahí y nunca tienes que preocuparte por los estados de error o los estados de carga, porque todo eso se maneja de forma declarativa para ti, así que cuando llega a tu componente, simplemente no usas use use effect, tal vez eso es todo lo que necesito decir, ¡como whoo! Sí, no uso effect, está bien, y no necesitas una herramienta como React query, si no estás usando remix, deberías usar React query, pero si estás usando remix, no lo necesitas porque React query resuelve un gran y maravilloso problema, gracias, Tanner, por crearlo y a quienes lo mantienen ahora, pero ¿no sería genial si no tuviéramos el problema desde el principio, y eso es lo que remix nos brinda con su increíble interacción entre cliente y servidor.

Lo otro que me encanta de remix es que se basa en la web, por lo que todo es fetch API, incluso en el servidor, tienes una solicitud y una respuesta, y si necesitas aprender algo al respecto, no vas a la documentación de remix, vas a MDN para aprender cómo funcionan las API web para eso. Y además de la transferibilidad del conocimiento, también tienes el hecho de que, como son las API web, podemos ejecutar esto en un trabajador de Cloudflare o en un trabajador de servicio, y los trabajadores de Cloudflare son compatibles actualmente, los trabajadores de servicio eventualmente, también los admitirán.

10. Remix: Oportunidades, Mutaciones y CSS

Short description:

Remix simplifica la codificación al permitirte trabajar con un entorno basado en la web familiar. Maneja las solicitudes y mutaciones sin problemas, incluso cuando JavaScript no se carga. La gestión de CSS en Remix es sencilla, con cada ruta definiendo sus propias etiquetas de enlace, eliminando el riesgo de impactos no deseados en otras páginas.

Y simplemente clavar esa abstracción ha abierto muchas oportunidades realmente increíbles con remix. Y lo genial es que realmente no tienes que cambiar nada de tu código. Ahora, si vas a trabajar en ciertos entornos, algunos de ellos como serverless, no puedes conectar para tener una conexión larga a una database o algo así, pero en cuanto al código específico de remix, nada de eso necesita cambiar porque todo se basa en la web y remix suaviza todo para ti. Es como jQuery para el servidor. Nunca lo había dicho antes, pero sí, algo así. Otra cosa que me encanta de remix es su mutación simple. Todas las mutaciones en remix tienen un formulario, incluso como tu botón de eliminar, la forma en que hacemos esto es con el pequeño ícono de basura. Tenemos un controlador de clic que realizará la solicitud para eliminar el elemento. Con remix, usas una forma muy declarativa, aquí está mi formulario, aquí está el ícono de eliminar, y haces clic en eso, eso envía el formulario, y luego remix se encarga de hacer la solicitud y qué pasa si hago otra solicitud y estamos cargando data y remix cancelará la correcta, asegurándose de que todo se cargue en orden. Incluso si JavaScript no se carga, lo cual a veces sucede, la mayoría de las personas no deshabilitan JavaScript, pero a veces no se carga JavaScript, o JavaScript que tarda un tiempo en cargarse, lo cual sucede aún más, todas tus mutaciones siguen funcionando porque estás utilizando formularios regulares y realizando envíos o eliminaciones regulares y terminarás con una actualización completa de la página, por lo que no es una experiencia tan increíble. Pero esto es lo que llamamos mejora progresiva. Y así tu aplicación sigue funcionando incluso sin JavaScript y no requiere un gran esfuerzo para que eso suceda, porque es simplemente la forma en que funciona. Y también me encanta la historia de CSS con Remix. Aquí está el gran secreto sobre cómo funciona CSS con Remix. Me sorprende lo simple que es esto. Para obtener CSS en la página, tienes una etiqueta de enlace y apuntas a la hoja de estilos. Todos nosotros, estamos usando Webpack y lo estamos empaquetando todo, o usando componentes estilizados y teniéndolo como parte de nuestros componentes, y es realmente agradable tener esa co-ubicación o lo que sea que sea. Pero en todas las aplicaciones que he usado, si tienes CSS regular, todo se va a empaquetar y estará disponible en cada página. En Remix, cada ruta puede definir las etiquetas de enlace que desea tener activas cuando esa ruta está activa, o desea tener en la página cuando la ruta está activa. Y cuando navegas lejos de esa página, esas etiquetas de enlace se eliminan. Y eso es todo. Ese es todo el secreto. Pero aquí está por qué es tan genial. Es porque cuando estoy en ese archivo de CSS, sé exactamente en qué rutas ese archivo de CSS va a tener impacto. Y así normalmente en cualquier otra empresa en la que he trabajado, cualquier otro proyecto importante en el que he estado, cualquier archivo de CSS en el que estabas trabajando, o SaaS o lo que sea, sabías que este CSS se aplicaría a cada página. Y así siempre te preocupaba eliminar algo, porque algo podría romperse. Estás desarrollando, por supuesto, estás viendo qué está sucediendo aquí.

11. CSS y Eliminación de Problemas

Short description:

Con Remix, puedes realizar cambios en CSS en una sola ruta sin preocuparte por afectar otras páginas. Elimina el problema de conflictos inesperados de CSS, haciendo que el desarrollo de CSS sea predecible. Remix simplifica el proceso al permitir CSS único para rutas específicas sin necesidad de herramientas adicionales. Hay mucho más que aprender sobre Remix, pero debido a limitaciones de tiempo, lo dejaré aquí. La eliminación de problemas implica intercambiar problemas grandes por problemas más pequeños, y los Hooks ejemplifican este enfoque. El equipo de React tomó un enfoque diferente para resolver problemas de intercambio de código, y funcionó.

Y así te preocupa que puedas romper algo que no estás viendo. Pero con remix, sabes exactamente en qué páginas estará activo. Y así sabes exactamente cuáles mirar. Y en términos prácticos, normalmente solo en una sola ruta. Y así, mientras lo desarrollas, puedes hacer cualquier cambio que desees en el CSS, miras la página, y si se ve como quieres, entonces sabes que tu archivo de CSS está bien. Y no tienes que preocuparte de que afecte a otras páginas en el resto de la aplicación.

Este es otro gran ejemplo de eliminación de problemas. Eliminó el problema de conflictos inesperados de CSS. Es simplemente fenomenal. Todo el trabajo que hemos estado haciendo durante todos estos años para tratar de hacer que el CSS sea más fácil para nosotros usarlo, especialmente como desarrolladores de React, con CSS y JS y CSS modules y todo lo demás, ha sido para ayudarnos a evitar conflictos de CSS y remix no elimina completamente el problema. Pero lo hace predecible, y eso es lo que me encanta de remix. Nota aparte, simplemente salta al final y usa tailwind para todo porque es increíble. Pero es realmente agradable saber que si quisiera algún CSS único, podría agregarlo a la ruta única y no preocuparme de que afecte a ninguna otra página. Y no necesito ningún runtime ni ninguna herramienta de construcción adicional divertida ni nada. Simplemente funciona y es la web. Es fantástico.

Hay muchas más cosas que quiero contarte sobre remix, pero simplemente no tengo el tiempo, así que vamos a terminar esto. Y en realidad, si quieres saber más sobre remix, estaré encantado de hablar de ello durante el resto de la conferencia, y tengo un billón de pegatinas que conseguí yo mismo. Así que nuevamente, remix no me está pagando por nada de esto. Les pregunté, ¿puedo imprimir pegatinas? Ellos dijeron que no pueden enviarme pegatinas. Las compraré yo mismo. Porque estoy tan emocionado con este framework. Muchos de ustedes podrían estar pensando, bueno, la eliminación de problemas suena como elegir compensaciones. Y sí, eso es lo que es. Eso es lo que es la eliminación de problemas. Así que la idea detrás de la eliminación de problemas es eliminar problemas grandes a cambio de problemas más pequeños. Y la razón por la que esto es digno de hablar para mí es que no sé ustedes, pero cuando estoy involucrado en un problema, no estoy pensando si ese problema necesita ser resuelto o si puedo retroceder en el árbol de problemas y reconsiderar el problema desde arriba. Por eso Hooks fue tan fenomenalmente increíble, porque todos estábamos trabajando, ¿cómo podemos resolver este problema de intercambio de código en la parte inferior del árbol de problemas? Y el equipo de React subió un par de niveles y dijo, oye, ¿sabes qué? Tal vez podríamos tomar un enfoque completamente diferente. Y funcionó. ¿Verdad? A todos nos encanta.

12. Conclusion and Cody the Koala

Short description:

Resolver problemas es genial, pero eliminar problemas es aún mejor. Encuentra compensaciones y toma el camino más fácil. Si no puedes evitar un problema, intenta eliminarlo cambiando tu enfoque. Antes de terminar, permíteme presentarte a Cody, el koala. Puedes conseguir el tuyo en Epic React.dev. Gracias a todos por estar aquí.

La mayoría de nosotros lo hacemos. Yo también. Así que en conclusión, resolver problemas es genial. Por favor, sigan resolviendo problemas. Hay tantos problemas en el mundo y quiero verlos a todos como solucionadores de problemas. Eliminar problemas es aún mejor. Encuentra diferentes compensaciones y toma el camino más fácil. Evitar problemas es aún mejor. Así que si no puedes evitar el problema, intenta eliminarlo cambiando tu enfoque, y solo si eso falla, entonces resuelve ese problema.

Una última cosa antes de pasar a mi última diapositiva, olvidé presentarles a Cody el Así que este es Cody, y la gente a menudo me pregunta qué pasa con el koala. Así que cuando me preguntan eso, sé que no han estado en mis masterclass, porque Cody te ayuda a través de mis masterclass, con todo el material del curso. De todos modos, me sentí mal teniendo este koala al azar junto a mí y olvidé presentarlo. Así que ese es Cody. Puedes conseguir el tuyo en Epic React.dev y es adorable. A los niños les encanta.

Muchas gracias a todos. Gracias. Gracias, Sr. Kent C Dodds. Siguiente pregunta, por favor. Oh sí. Oh sí. Tenemos mucho de qué hablar. Solo soluciones, sin problemas. Bueno, en realidad, una de nuestras primeras preguntas fue ¿cuál es la historia con el koala? Así que supongo que resolvimos eso. Oh, ahí lo tienes, sí. Ese es Cody. No sabía que tenías una tienda de merchandising. Sí. Es muy emocionante.

13. Merchandise and Comfortable Jacket

Short description:

Tienen camisetas y chaquetas, incluida la chaqueta más cómoda que he usado. Compré una chaqueta similar en React Rally y me gustó tanto que la agregué a mi tienda de merchandising. Es suave, súper cómoda y definitivamente vale la pena echarle un vistazo.

Así que tienen camisetas y chaquetas, la chaqueta más cómoda que he usado. De hecho, una historia rápida sobre la chaqueta, compré una chaqueta similar en React Rally hace unos años y la destrocé cuando me caí en mi monopatín eléctrico. El hombro entero quedó destrozado. Estaba tan triste que pregunté a los organizadores de la conferencia dónde habían conseguido la chaqueta y encontré la compañía, así que la añadí a mi tienda de merchandising para poder comprarla. Por eso está en la tienda de merchandising. Porque me gusta tanto la chaqueta. Es suave. Es súper cómoda. Tendremos que echarle un vistazo. ¿Sabes si hacen envíos a Londres? Sí. No estoy seguro de cuánto cuesta, pero probablemente sea demasiado. Lo escucharon aquí primero, amigos.

QnA

Remix Workshops and Sunk Cost Fallacy

Short description:

Adil pregunta sobre los próximos talleres de remix. Kent tiene dos talleres programados y un taller de TypeScript con React en camino. Mac pregunta sobre la falacia del costo hundido y cuándo es demasiado tarde para eliminar un problema. Kent explica que nunca es demasiado tarde y aconseja evaluar la situación actual y los beneficios de resolver el problema en comparación con cambiar el enfoque.

Lo siento. Muy bien. Adil pregunta, ¿hay algún taller de remix próximamente? Oh sí. De hecho, si vas a KentC.com/talleres, encontrarás que ya tengo dos programados, así como un taller de TypeScript con React en camino. Increíble. Sí. Cosas divertidas. Todo de lo que voy a hablar durante no sé cuánto tiempo es de remix. Te enseñaré lo genial que es remix. Mac pregunta, ¿cómo abordas la falacia del costo hundido? ¿En qué etapa dirías que es demasiado tarde para eliminar el problema en el que estás trabajando? Quiero decir, nunca es demasiado tarde a menos que la falacia del costo hundido sea básicamente, oh, hemos invertido tanto en esto, no podemos renunciar ahora, lo que sea. Pero si lo evalúas en este momento tal como está, el trabajo que necesito hacer para resolver el problema y el beneficio que obtengo de eso y el trabajo que necesito hacer para cambiar mi enfoque y el beneficio que obtengo de eso, simplemente haces el análisis de costo-beneficio de eso. Sí. No diría que sea demasiado tarde para resolver un problema. Es solo que, ¿cómo están las cosas ahora y vamos en la mejor dirección? Eso tiene sentido.

Leveraging the Unknown and Manual Evaluation

Short description:

Cuando eliminas un problema, ¿cómo aprovechas lo desconocido? Esa es un poco mi historia con mi hermana, quien está tratando de resolver el problema para los músicos que están sin trabajo. Hazlo manualmente primero y evalúa a medida que avanzas. Si no vale la pena, no sigas adelante.

Cuando eliminas un problema, ¿cómo aprovechas lo desconocido? No conoces los problemas a los que te enfrentarás en el otro camino. Sí. Eso es realmente genial. Esa es un poco mi historia con mi hermana, quien está tratando de resolver el problema para los músicos que están sin trabajo. Y aquí es donde digo, hazlo manualmente primero. Simplemente sigue adelante y asegúrate de evaluar a medida que avanzas y te das cuenta, sabes qué, si hubiera sabido esto, nunca lo habría hecho y no siento que valga la pena seguir adelante, o lo que sea. Ese es un buen consejo.

Remix and Microfrontends

Short description:

Remix es un nuevo framework altamente abstracto y tiene el potencial de funcionar bien con enfoques de microfrontend. Aunque no tengo experiencia con microfrontends, creo que Remix se puede integrar de manera efectiva. Mi sitio web, que es la implementación más grande de Remix, consta de 27,000 líneas de código, lo que destaca su popularidad y potencial.

Un poco relacionado con nuestros oradores anteriores, de nuestra última presentación, ¿cómo se relaciona Remix con los enfoques de microfrontend? Remix es bastante nuevo, por lo que es difícil decirlo. Y no tengo experiencia práctica con microfrontends, así que no puedo responder realmente. Pero en general, Remix es muy abstracto. Eso es una de las cosas que me gusta de él. Así que supongo que sería bastante posible hacer que funcione bien, pero nadie lo ha hecho todavía. Mi sitio web es literalmente la implementación más grande de Remix, y no es pequeño, tiene 27,000 líneas de código, y es el más grande, así que todavía es bastante nuevo. En pocas palabras, es bastante popular.

Remix: Descripción del Framework

Short description:

Remix es un framework que te ayuda a construir mejores sitios web. Está basado en React y aprovecha tus conocimientos existentes de desarrollo web. Puedes aplicar todas las cosas buenas que has aprendido sobre la plataforma web en Remix, y te enseñará más. Aunque es posible que no uses React Query con Remix, no es debido a un enfoque o API diferente, sino porque Remix no requiere aprender una API adicional.

¿Qué es Remix? Remix es un framework que te ayuda a construir mejores sitios web. Es comparable a Next. Renderizado en el servidor. ¿Crees que Remix eliminará todo lo que hemos aprendido hasta ahora? ¿React, query, etc.? Bueno, no todo. Una de las cosas que me encanta de React en particular, y Remix utiliza React para ser claro, pero una de las cosas que me encanta de React en particular es que cuanto mejor te vuelves en React, mejor te vuelves en JavaScript. Sí, me encanta eso viniendo de otros frameworks. Con Remix, una de las cosas que me encanta es que cuanto mejor me vuelvo en Remix, mejor me vuelvo en desarrollo web. Porque está basado en gran medida en la plataforma web. Y así que creo que todas las cosas buenas que has aprendido sobre la plataforma web con cualquier framework que hayas estado usando, las traes contigo a Remix. Y Remix te enseñará más. Cualquiera de las otras cosas... Sí, probablemente no usarás React Query con Remix. Podrías hacerlo. Hay casos de uso potenciales para ello. Así que sí, cualquier cosa específica de React Query que conozcas, no se transferirá, pero no es porque... Hay un enfoque diferente o una API diferente que necesitas aprender. Es porque no hay una API que necesites aprender. Y eso es aún mejor.

Comparando Remix con Next, Recoil y Gatsby

Short description:

Existen preguntas sobre la comparación entre Remix y Next y Recoil. Next no se utiliza junto con Remix en una aplicación finalizada. Recoil se puede utilizar con Remix para problemas específicos. Para aplicaciones CRUD, la gestión de caché del servidor y el contexto de Remix funcionan bien. Gatsby también tiene capacidades de renderizado en el servidor, pero Remix ofrece un enfoque diferente y una mejor experiencia de usuario.

Hay algunas preguntas sobre la comparación de Remix con diferentes cosas, como Next o Recoil. ¿Tienes alguna idea aproximada al respecto? Sí. Next se compara en la mayoría de los aspectos. En una aplicación que está, entre comillas, finalizada, no en proceso de migración, no los usarías juntos. Recoil es una solución de gestión de estado producida por Facebook para resolver un problema muy particular y definitivamente podrías tener ese problema al construir una aplicación con Remix. Entonces podrías usarlos juntos. Pero en la típica aplicación CRUD que estás construyendo, no necesitas una biblioteca de gestión de estado porque Remix gestiona la caché del servidor por ti y todo lo demás funciona bien con el contexto. Se compara bien. Y luego otro importante es Gatsby. Remix se renderiza en el servidor y sé que Gatsby ahora también puede hacer algo de renderizado en el servidor. Pero, sí, Remix tiene un enfoque drásticamente diferente y creo que eso conduce a una mejor experiencia de usuario.

Remix: Preparación para la producción y base sólida

Short description:

Remix aún no es oficialmente de código abierto, pero lo será en las próximas semanas. Le faltan algunas cosas, pero está construido sobre una base sólida. Compré una suscripción de prueba y creo que los vacíos restantes se llenarán debido a la capa de abstracción en la que opera.

Hay muchas preguntas sobre Remix. ¡Remix es el mejor! ¡Me encanta! ¿Crees que está listo para una aplicación de producción a gran escala? Bueno, aún no es oficialmente de código abierto y técnicamente no hay forma de acceder a él hasta que se convierta en código abierto. Porque cerraron las nuevas suscripciones y cosas así. Entonces, si quieres trabajar en él hoy, entonces no. Pero en las próximas semanas, definitivamente. Creo que definitivamente le faltan algunas cosas. No quiero hacer que parezca la solución perfecta para todo, especialmente ahora. Pero esas cosas vendrán. Me emocioné mucho con Remix cuando se lanzó por primera vez, de hecho, incluso antes. De hecho, compré la suscripción de prueba porque estaba muy ansioso. Y accidentalmente compré una suscripción de prueba por un dólar. Así que en realidad tengo dos suscripciones a Remix. Pero sí, desde el principio supe que Remix se basaba en una base realmente sólida. Y todos los vacíos que había en Remix en ese momento, y algunos vacíos que todavía están ahí, se llenarán fácilmente porque operan bajo una capa de abstracción.

Integración de Remix e Identificación de Problemas

Short description:

Existen varios enfoques para integrar Remix con una base de código heredada. Una opción es comenzar a utilizar Remix para rutas específicas y redireccionar a una aplicación separada. Otra posibilidad es integrar la renderización de PHP con Remix, permitiendo que PHP renderice parte del contenido mientras Remix se encarga de la renderización del servidor. Esto proporciona mucha flexibilidad. En cuanto al ejercicio de estiramiento, no forma parte de mi reunión diaria, ya que trabajo solo. Aprendí los air squats en la charla de Ben Ornstein sobre cómo hablar con los desarrolladores, y me ayudan a relajarme antes de dar presentaciones. Identificar un problema que necesita ser eliminado sin pasar por múltiples iteraciones de soluciones puede ser complicado. El establecimiento de límites de tiempo y la investigación pueden ayudar, y la financiación puede brindar la oportunidad de probar diferentes soluciones. No tengo criterios específicos para evaluar problemas, pero reevaluar regularmente el espacio del problema y dar un paso atrás puede ayudar a determinar si un problema debe abordarse o eliminarse. En cuanto a las mascotas, Cody el koala es mi favorito, pero en mis talleres hay mascotas Emoji. Después de la charla, habrá una sala para el orador y una sala de discusión híbrida para una mayor interacción. Gracias.

Y después de haber trabajado en ello ahora para tu sitio, ¿cómo crees que se integraría con, tal vez, una base de código heredada? Creo que existen varios enfoques que puedes tomar para integrar Remix. Por ejemplo, podrías decir: 'Comencemos a usar Remix para estas rutas y luego tendremos una redirección allí, y será como una aplicación separada'. Esa sería una forma muy fácil de hacerlo, pero también hay otras formas. Recientemente estuve hablando con alguien sobre cómo integrar su renderizado de PHP con Remix, y definitivamente se puede hacer. PHP puede renderizar parte del contenido y Remix se encargará de la renderización del servidor, y todo ese HTML se enviará al cliente. Así que tienes mucha flexibilidad.

Genial. Lo escuchaste aquí primero, amigos. Antes de pasar a algunas preguntas sobre resolución de problemas, Alex pregunta: ¿la parte de estiramiento forma parte de tu reunión diaria? No. No tengo reuniones diarias porque trabajo por mi cuenta y solo, es muy solitario. Pero estamos aquí para ti, Ben. Aprendí los air squats de Ben Ornstein. Hace años dio una charla llamada 'cómo hablar con los desarrolladores', creo que fue en 2013, en RailsConf. Fue una charla fenomenal. La recomiendo si quieres mejorar en la comunicación con los desarrolladores. Eso fue algo que él hizo, y sí, lo tomé prestado de él. Maravilloso. Deberían intentarlo todos. He dado casi cien charlas ahora, y me pongo nervioso antes de cada una. Lo cual te hace preguntarte, ¿por qué hago esto? Pero los air squats me ayudan a relajarme mucho. Así que gracias por permitírmelo.

Hablemos de problemas. Hastu pregunta: ¿cómo identificas un problema que necesita ser eliminado sin haber pasado por X iteraciones de soluciones y problemas asociados antes de decidir que tal vez necesitemos retroceder? Sí, eso es complicado. Está relacionado con el problema del costo hundido. Ahí es donde surge el término 'spike'. Estableces un límite de tiempo para investigar una solución o encontrar soluciones a un problema. A veces, esto es donde la financiación puede ayudar a los emprendedores, cuando no están seguros de si funcionará, pero creen que sí. Así que danos algo de dinero para que podamos intentarlo, y hay un riesgo involucrado en eso. Esperemos que al final funcione o que aprendas lo suficiente como para encontrar otra forma de hacerlo. Y relacionado con esto, ¿tienes un conjunto de criterios o heurísticas que utilizas para evaluar un problema al decidir si abordarlo o eliminarlo? No realmente, creo que simplemente debe convertirse en parte de tu rutina regular, donde reevalúas tu espacio de problemas en este momento y piensas: 'Bueno, trabajé muy duro en esa solución y aún no la he terminado', y simplemente piensas en dar unos pasos atrás, ¿por qué tenemos este problema? Bueno, porque esto. ¿Por qué tenemos ese problema? Porque aquello, y así sucesivamente. Ahora, se nos acabó el tiempo para algunas preguntas, pero un par de cosas más. Primero, ¿habrá otras mascotas además de Cody? Bueno, en mis talleres hay muchos Emoji, tenemos a Marty el saco de dinero, ese podría ser divertido. Solo bolsas de dinero para ti, pero no tengo planes de agregar más, Cody es mi favorito. Justo después de esto, Kent tendrá una sala para el orador para aquellos que están en casa, pueden unirse a través de spacial chat, y para aquellos aquí, si quieren seguir charlando con Kent, síganlo después de esta charla. Justo después, también tendremos la sala de discusión híbrida en la sala de discusión. 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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application 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 DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions