Una Guía Nerd para los Conceptos de Tendencia en la Web

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¿Qué tienen en común S.H.I.E.L.D. y A.R.G.U.S. con la computación en el borde?
¿Cómo pueden Iron Man y Batman ayudarte a entender la hidratación, la hidratación parcial y la reanudabilidad?
¿Qué pueden decirte los Watchers o los Monitors sobre Reactividad?
Únete a esta aventura directamente desde las páginas de un cómic mientras tus héroes y villanos favoritos te ayudan a entender algunos de los temas más discutidos en la web ahora.

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

FAQ

Daniel Afons es un defensor del desarrollador en OLX, instructor de IDN y embajador de Altura. Recientemente publicó un libro sobre React Query y participa activamente en la Cumbre React presentando charlas.

Un modelo mental se refiere a los términos, imágenes, palabras o asociaciones que una persona tiene con un cierto tema, que le ayudan a entenderlo rápidamente y de manera intuitiva.

La charla de Daniel tiene como objetivo utilizar personajes de cómics y la cultura pop para explicar y construir modelos mentales sobre conceptos técnicos y tendencias en la web, facilitando así su comprensión.

En su charla, Daniel Afons aborda los conceptos de 'hidratación' y 'reanudabilidad', usando historias de cómics para ilustrar y explicar estos conceptos técnicos relacionados con el desarrollo web.

Daniel utiliza historias de cómics, como las aventuras de Iron Man, para crear una narrativa que ejemplifique y explique los conceptos técnicos, haciendo que estos sean más accesibles y entendibles para la audiencia.

La hidratación es un proceso técnico donde el código renderizado en el servidor se convierte en interactivo en el cliente. Daniel lo explicó mediante una historia de Iron Man, donde la armadura se activa paso a paso, similar a cómo se activa una página web interactiva.

La reanudabilidad es una técnica para hacer que una página web sea interactiva inmediatamente sin procesos intermedios. Daniel ilustró este concepto con una historia de Iron Man, donde un traje se activa rápidamente para responder a una amenaza, evitando pasos previos de preparación.

Daniel Afonso
Daniel Afonso
17 min
15 Nov, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla trata sobre el uso de historias de cómics para explicar conceptos complejos de desarrollo de software. La primera parte presenta al orador y el propósito de la charla. La segunda parte explora el concepto de hidratación usando a Iron Man como ejemplo. La hidratación es una solución para hacer interactivo el código renderizado en el servidor. La charla luego pasa a discutir la reanudabilidad, que permite la interactividad inmediata al codificar información extra en el HTML. El concepto de reanudabilidad se explica aún más usando una historia con Iron Man. La charla concluye invitando sugerencias para futuros temas y agradeciendo a la audiencia.

1. Introducción a la Charla

Short description:

Estoy aquí en la Cumbre React para compartir esta nueva charla. Asistir a conferencias puede ser abrumador, especialmente con todo el argot técnico. Me di cuenta de que necesitaba mejores modelos mentales para entender estos conceptos. Como un nerd de los cómics, decidí combinar mi amor por los personajes y los conceptos técnicos para crear una guía nerd. Permítanme presentarme como Daniel Afons, un defensor del desarrollador en OLX. No duden en conectarse conmigo en las redes sociales. Por favor, tengan en cuenta que esta charla incluye historias hechas por fans con personajes de Marvel y DC Comics.

Estaré en la Cumbre React. Muchas gracias por tenerme aquí. Es un placer estar aquí con todos ustedes hoy para compartir esta nueva charla que estoy intentando presentar. Así que, espero que se diviertan tanto viéndola como yo escribiéndola.

Entonces, comencemos. Bueno, todo esto comenzó cuando asistía a un par de conferencias. Y asistir a conferencias puede ser un poco abrumador. No sé si entienden a qué me refiero. Pero hay tantas palabras que aparecen de un lado a otro, que, bueno, si son como yo, no muy a menudo van a entender lo que todas ellas significan.

El problema que me impulsó a hacer esto es porque no tenía los modelos mentales correctos formados para estas cosas. Ahora, no sé si están al tanto de lo que es un modelo mental. Los modelos mentales son los términos, imágenes, palabras o lo que sea que asocias con un cierto tema. Por ejemplo, imagina dormir. Cuando oyes la palabra dormir, inmediatamente entiendes todos los pasos asociados a ella en tu mente. Esto es porque tienes los modelos mentales correctos formados para ellos.

Ahora, pausando eso por un momento, permítanme contarles algo sobre mí. Soy un gran nerd de los cómics. Tengo más cómics de los que puedo leer y es posible que me encuentren regularmente haciendo chistes de cómics o de la cultura pop. Entonces, un día pensé, ¿qué pasaría si pudiera conseguir que los personajes que amo, los conceptos técnicos que me pierdo para escribir modelos mentales, y construyo una guía nerd para los conceptos de tendencia en la web? Así que, esta es la esencia de la charla que vamos a ver.

Antes que nada, permítanme presentarme. Mi nombre es Daniel Afons. Trabajo como defensor del desarrollador en OLX. Soy instructor de IDN. Soy embajador de Altura. Pueden encontrarme en X y prácticamente en cualquier red social con el nombre de usuario DanielJCAfons. También algo sobre mí, recientemente publiqué un libro sobre React Query. Parte del libro es gestión de estado con React Query. Estoy dispuesto a charlar sobre todas las cosas relacionadas con React Query. No duden en contactarme en las redes sociales. Ahora, antes de comenzar la charla, solo quiero hacer una pequeña aclaración, que es que esta charla incluirá algunas historias hechas por fans utilizando personajes que son propiedad de Marvel o DC Comics.

2. Introducción a la Charla (Parte 2)

Short description:

Estoy compartiendo esto para ayudar a construir los modelos mentales correctos. Quiero agradecer a Attila y Matheus por sus comentarios sobre los modelos mentales. Esta charla consiste en presentar un tema y dos personajes, contar una historia de cómic y luego explicar los aspectos técnicos. Hoy, exploraremos la hidratación con Iron Man. Después de construir varias armaduras a mano, Tony Stark reprogramó su IA, Friday, para automatizar el proceso. Friday construyó con éxito una nueva armadura.

Estoy compartiendo esto para que estén al tanto de los personajes que verán. No los poseo, pero los estoy utilizando para ayudar a construir los modelos mentales correctos en todos ustedes.

Otra cosa importante que quiero decir es que quiero compartir algo de amor. Quiero agradecer a estas increíbles personas, Attila y Matheus, porque sin ellos, esta charla no sería lo que es hoy. Me dieron los comentarios correctos y los comentarios sobre los modelos mentales. Así que solo quiero compartir algo de amor y agradecerles por construir esta charla y ayudarme a construir esta charla.

Ahora, antes de comenzar, ¿cómo funcionará esta charla? Bueno, idealmente, si estuvieran en persona, ustedes decidirían. Verán, esta charla va a consistir en un par de cosas. Primero, lo que sucede es que les presento un tema y dos personajes. Para cada personaje, idealmente, la audiencia elegiría qué personaje veríamos. Luego, para el personaje seleccionado, les contaría una historia de cómic. Después de terminar esa historia, les mostraría las explicaciones técnicas detrás. Comenzaríamos con la historia y luego pasaríamos al concepto técnico de la misma. Como hoy estamos haciendo esto en línea y no en persona, solo estaré eligiendo personajes de Marvel así que iremos con los personajes de Marvel.

En esta charla, hoy, veremos dos temas. Veremos la hidratación y la reanudabilidad. Espero que estén listos para comenzar porque es hora de la hidratación. Para la hidratación, como dije, si ustedes estuvieran eligiendo, podrían elegir entre Iron Man o Lex Luthor. Ambos nos ayudarían a ver la historia de la hidratación. Para este escenario, considerando, como dije, una vez más, que estamos en remoto, estoy eligiendo a Iron Man, así que solo elijo al personaje. Y ahora tomaré el papel de narrador y les contaré una historia. Y después de que termine la historia, veremos los aspectos técnicos de la misma. Así que espero que estén listos, yo estoy listo. Entonces, después de construir Mark 1, Mark 2 y Mark 3 a mano, Tony Stark no quería repetir el proceso de construir una nueva armadura por sí mismo. Verán, hacer esto es un proceso bastante lento, y Tony quería que fuera más rápido, así que pensó, tal vez pueda reprogramar a Friday, su IA personalizada, para que conozca todos los pasos para construir una nueva armadura. Y una vez que lo hizo, todo lo que quedaba era pedirle a Friday que le construyera esa armadura. Y lo hicieron. Así que Friday se conectó a la fabricación y comenzó a trabajar. Después de un rato, la armadura estaba lista. Gran éxito.

3. Hidratación con Iron Man

Short description:

Tony intentó entrar en la armadura, pero no se abrió. Tuvo la idea de descargar a Friday para activar la armadura desde el interior. Después del proceso de descarga, Friday activó cada parte de la armadura. Con la armadura activada, Tony fue a una prueba de funcionamiento, pero no todo funcionó a la primera. Esto fue la Hidratación con Iron Man, Tony Stark.

¿Estamos listos para luchar, verdad? Entonces Tony dijo, OK, vamos a entrar en la armadura. Y lo intentó. Así que intentó entrar en la armadura, pero aparentemente algo no funcionó del todo bien. El traje ni siquiera se abrió. Y esto dejó a Tony pensando, porque sentado allí con un traje no interactivo, Tony luchó un poco, hasta que, bueno, una idea surgió en su mente. ¿Y si descargara a Friday en la armadura, y luego Friday podría activar la armadura desde el interior? Sería interesante, ¿verdad? Así que lo hizo. Y esperamos, y esperamos un poco, y después de que se completó el proceso de descarga, la nueva armadura tenía a Friday funcionando en ella. Así que una vez que Friday se inició, comenzó a activar cada parte de la armadura como si hiciera una revisión del sistema en ella. Como puedes ver en este muy pobre DidGif, puedes ver que la luz se está encendiendo en cada parte individualmente. Así que esto simbolizaba el proceso de Friday revisando cada parte de la armadura y activándola. Y ahora que la armadura está activada, Tony pudo ponerse el traje e ir a una prueba de funcionamiento. Así que, activó los propulsores, y bueno, no todo funciona a la primera vez, pero esto fue la Hidratación con la ayuda de Iron Man, Tony Stark, así que espero que si estás añadiendo nueva Hidratación, te des cuenta de algunos de los pasos.

4. Hidratación y cómo funciona

Short description:

La hidratación resuelve el problema de que el código renderizado en el servidor no sea interactivo. Al descargar el marco y ejecutar el proceso de reconciliación, el marco puede interactuar con el HTML y adjuntar manejadores de eventos, haciendo que la página sea interactiva.

Si no lo hiciste, ahora repasemos qué diablos acabamos de ver. Entonces, comencemos con el problema. La hidratación está ahí para resolver un problema, que es que el código renderizado en el servidor no es interactivo. E idealmente, lo que necesitamos es una página que sea interactiva. Entonces, cómo funciona típicamente es en el servidor, en el código del lado del servidor, usando el marco, generamos nuestro HTML estático. Pero ahora, una vez que obtenemos la página, la página no es interactiva porque, bueno, es solo estática HTML y CSS. Entonces, lo que necesitamos hacer es descargar Javascript, en este caso, el marco, luego ejecutar el marco y ejecutar lo que se llama el proceso de reconciliación. Y después de que se ejecuta el proceso de reconciliación, es cuando el marco, el Javascript que acabamos de descargar, repasa cada parte del HTML e interactúa y adjunta manejadores de eventos y toda la interactividad que necesitamos. Y después de esto, es cuando obtenemos la página interactiva. Y esto es más o menos cómo funciona la hidratación.

5. Resumen de Hidratación e Introducción a la Reanudabilidad

Short description:

Repasemos cómo se configura esto en la historia. Comenzamos con el problema de la lenta renderización del lado del cliente y la idea de enseñar al marco cómo construir una página. El servidor construye un nuevo HTML estático utilizando el marco, y el cliente recibe este HTML estático. Sin embargo, la página aún no es interactiva. El cliente necesita esperar a que el marco se descargue y ejecute el proceso de reconciliación, adjuntando manejadores de eventos y lógica para hacer que la página sea completamente interactiva. Esto es hidratación. Ahora, pasemos a la siguiente historia, Reanudabilidad, con Ironman.

Repasemos cómo se configura esto en la historia. Así que comenzamos con esta parte, donde Tony dijo que construir una nueva armadura debería ser más rápido. El problema que estábamos planteando aquí es que la renderización del lado del cliente es lenta. ¿Y si enseñáramos al marco cómo construir una página? Porque, idealmente, el marco sabe cómo hacerlo. En el lado del servidor, utilizando el marco, el servidor construye el nuevo HTML estático. Y luego, lo que va a suceder es que el cliente va a obtener el HTML estático.

Ahora, planteamos otro problema en la siguiente parte de la historia, que es, ahora el código renderizado del lado del servidor no es interactivo porque tenemos la armadura, pero la armadura no funciona. Solo está ahí para mostrarse. Y esto es lo que sucede antes de que se ejecute la hidratación. Entonces, lo que necesitamos hacer es que vamos a hacer que el marco convierta el HTML estático en HTML interactivo. Así que necesitamos que el marco se descargue en la página. Así que el cliente necesita esperar a que eso suceda. Después de un rato, después de que el cliente obtiene el marco, el marco repasará el HTML y lo adjuntará hacia atrás y toda la lógica necesaria para ejecutar cada nota correspondiente. Y, después de un rato, felicitaciones, la página ahora es completamente interactiva.

Y acabamos de ver la hidratación con la ayuda de Ironman, así que repasemos todos los pasos que vimos en esta historia y asegurémonos de tener el modelo mental correcto. Así que la hidratación está ahí para resolver un problema, que es el código SSR, el código renderizado del lado del servidor, necesita algún tipo de interactividad. El primer paso asociado con esto es generalmente cuando un cliente solicita una página, utilizando el marco el servidor construye un nuevo HTML estático y lo envía al cliente y luego el cliente obtiene este HTML estático. Pero ahora hay un problema, que es que la página no es interactiva, por lo que el cliente necesita esperar a que se descargue el marco. Una vez que se descarga el marco, el marco ejecuta lo que se llama el proceso de reconciliación. Así que el marco repasará el HTML y adjuntará manejadores de eventos y la lógica necesaria para ejecutar cada nodo correspondiente. Y después de un rato, la página ahora es completamente interactiva. Y esto fue hidratación. Acabamos de ver la hidratación con la ayuda de Ironman. Espero que todos hayan disfrutado esta historia, porque ahora vamos a saltar a la siguiente, que va a ser Reanudabilidad. Y la Reanudabilidad es una historia diferente, un personaje diferente. En este caso vamos a usar los mismos personajes porque vamos a retomar un poco después de donde lo dejamos. Así que podríamos elegir entre Ironman o Lex Luthor, pero como dije vamos por el camino de Marvel para esta charla, así que vayamos una vez más con Ironman. Ahora entendamos lo que Ironman tiene que decirnos sobre la Reanudabilidad. Y ahora, una vez más, pondré al narrador y comencemos esto. Así que vamos.

6. Protocolo Reanudable y Construcción de un Nuevo Traje

Short description:

Después de quedarse sin armaduras, Tony Stark le pide a Friday que le construya un nuevo traje. Sin embargo, sabe que el antiguo proceso no es viable. Necesita un traje que esté listo para funcionar. Tony instruye a Friday para que inicie el protocolo reanudable y le construya un traje ahora.

Después de la última vez que salvó al mundo en la lucha contra Kang, el Conquistador, Tony recibió un gran golpe. Verás, se quedó completamente sin armaduras. Todas fueron destruidas en esta pelea. Ahora, de vuelta en casa mientras se dirigía a la cama, Tony le pidió a Friday, Friday por favor recuérdame construir nuevos trajes mañana. Y se quedó dormido. Verás, salvar al mundo es una tarea difícil y Tony realmente, realmente merecía este sueño tanto. Pero de repente, ocurrió una explosión. ¿Qué? Te estarás preguntando. Bueno, verás, el Mandarin no puede dejar pasar esto. Verás, es un Tony Stark vulnerable, después de todo. Y Tony se despertó sobresaltado, obviamente, y grita, OK, necesito un nuevo traje. Pero Tony también sabía algo.

7. Protocolo Reanudable y el Nuevo Traje

Short description:

Sabía que no sobreviviría al antiguo proceso. Tony necesitaba una armadura que estuviera lista para trabajar, así que le pidió a Friday que iniciara el protocolo reanudable y le construyera un traje. Friday codificó información e instrucciones en cada parte interactiva del traje. Cuando Tony estuvo rodeado por el Mandarin y sus secuaces, saltó a su nuevo traje, que tenía una pequeña versión de Friday cargada. Esto permitió que el traje omitiera la fase de comprobación del sistema. Tony le pidió a Friday que disparara los cohetes, y estos destruyeron con éxito su casa, permitiéndole escapar y pedir refuerzos. ¡Manténganse en sintonía para el próximo número!

Sabía que no sobreviviría al antiguo proceso. El proceso actual, no es tan bueno. Podrías poner en marcha al fabricante y tener a Friday construyendo en Yharbor, pero muy probablemente el tiempo para descargar a Friday al traje significaría la muerte o que no sobreviviría. Y esto dejó a Tony pensando, OK, Tony, Tony, piensa, piensa, piensa.

Y durante este tiempo, se pudo ver a algunos secuaces de Hydra persiguiéndolo. Y esto obligó a Tony a pensar, bueno, necesito una armadura que esté lista para trabajar. Así que probablemente Friday, haz esto, inicia el protocolo reanudable, constrúyeme un traje ahora. Y Friday comenzó a construir el traje.

Pero ahora, el proceso cambió. Verás, para cada parte específica del traje que sería interactiva, Friday codificaría esta información allí. Friday también codificaría un puntero que indicaría a sí mismo dónde encontrar instrucciones para operar esta parte de la armadura cuando llegue el momento. Ahora, volviendo a Tony, mientras corría, se encontró rodeado por el Mandarin y sus secuaces. Y como suele suceder en este tipo de películas o films o lo que sea, el Mandarin comenzó este monólogo de malo. Stark, ¿no crees que saldrás vivo? Al final, apunta su mano a Tony y se prepara para disparar su rayo de desintegración. Y mientras hace esto, Tony salta a su nuevo traje billy y el traje lo atrapa y lo salva de una explosión segura que probablemente lo eliminaría.

Ahora, esto enfureció al Mandarin. Verás, él sabía sobre las debilidades que tenía el proceso anterior. Sabía que no había forma de que Tony obtuviera una armadura tan rápido y lista para usar. ¿Qué pasó? ¿Cómo? ¿Cómo funcionó esto? Verás, en el Protocolo Reanudable, cuando Friday creó la armadura, ya cargó una versión muy pequeña de sí misma en el traje. Esta pequeña versión de Friday fue capaz de interceptar cualquier comando de Tony y al usarlo y las instrucciones codificadas, averiguar sobre la marcha cómo ejecutar su instrucción específica. Esto permitiría a la armadura omitir la fase de comprobación del sistema. Ahora, volviendo a Tony. Friday, dispara los cohetes, pidió. Bueno, dentro del casco, mientras hacía esta pregunta, escuchó a Friday diciendo, Encendiendo los cohetes, Tony. Una vez que los cohetes estuvieron listos, y Friday se lo hizo saber a Tony, Tony los encendió. Boom. Y una vez que lo hizo, los cohetes derrumbaron la casa de Tony y a todos los que estaban en el camino. Y esto aseguró que, bueno, Tony pudiera escapar y pedir refuerzos. ¿Qué pasó después, podrías estar pensando? Bueno, para eso, puedes esperar el próximo número. Bienvenidos al mundo de los cómics.

8. Reanudabilidad y Cargador QUIC

Short description:

La reanudabilidad está ahí para resolver el problema de que la página no sea inmediatamente interactiva. Al codificar información adicional en el HTML en el lado del servidor, podemos reanudar la ejecución desde el servidor en el cliente, haciendo que la página sea inmediatamente interactiva. El cliente solo descarga el JavaScript específico necesario para cada parte del código, permitiendo una descarga pequeña y eficiente. El Cargador QUIC intercepta eventos y descarga el JavaScript necesario para la ejecución, haciendo que la página sea interactiva. Así es como la reanudabilidad encaja en nuestra historia.

No todo se resuelve en una semana. Así fue la reanudabilidad con la ayuda de Tony Stark Iron Man. Ahora, repasemos lo que acabamos de ver. La reanudabilidad está ahí para resolver un problema, que es que la página no es inmediatamente interactiva. Y durante la hidratación, que es lo que acabamos de ver anteriormente, tenemos que rehacer el trabajo que hicimos en el servidor. Idealmente no deberíamos tener ninguna hidratación. No tener hidratación siempre es mejor que tenerla. Idealmente lo que haríamos es, una vez que estamos construyendo este HTML en el lado del servidor, codificaríamos alguna información, información extra allí, que nos permitiría reanudar nuestra ejecución desde el servidor en el cliente. Esto significaría que una vez que obtuvimos la página en el cliente, la página sería inmediatamente interactiva.

Ahora, podrías estar pensando, vale, pero si no descargamos todo el JavaScript y todas las cosas que necesitamos, ¿cómo tenemos el JavaScript para ejecutar una vez que hacemos clic en ese botón? Bueno, lo que haríamos aquí es que descargaríamos solo el JavaScript específico para hacer esto, y solo el JavaScript que sería responsable de esta parte del código. Ahora, uno de los frameworks que se hizo muy popular al usar la reanudabilidad, se llama QUIC, y hay una razón por la que te estoy contando esto, porque en realidad hay otra parte en Movilhood. Una vez que obtuvimos la página o HTML, también obtendríamos algo llamado Cargador QUIC, y este Cargador QUIC sería responsable de interceptar este evento QUIC, y sería responsable de descargar este JavaScript específico para esa parte específica. Así que sería solo un pedacito muy, muy pequeño de JavaScript que sería capaz de permitir que hagamos esto.

Así que ahora, veamos cómo encajó la reanudabilidad en nuestra historia. Bueno, primero tuvimos un problema, que era que la hidratación es lenta. Así que una vez que el cliente solicita una nueva página, nosotros, usando el framework, el servidor construye este nuevo HTML, pero también serializa toda la información que necesita para reanudar su ejecución en el nuevo entorno. Después, una vez que el cliente obtiene la página, es inmediatamente interactiva. Ahora también hay algo aquí, que es que el cliente obtiene el Cargador QUIC. Recuerda, mencioné esta cosa llamada Cargador QUIC. El Cargador QUIC configurará un oyente global para todos los eventos. Así que cuando sucede un evento, lo que hará el Cargador QUIC es interceptarlo, obtener el JavaScript necesario para ejecutar esa parte, y ejecutarlo. Y felicitaciones, todos acabamos de aprender Reanudabilidad de nuevo con la ayuda de nuestro amigo Ironman. Así que repasemos lo que acabamos de ver. La reanudabilidad está ahí para solucionar un problema, que es que la página no es inmediatamente interactiva e idealmente no habría ninguna iteración. Así que veamos los pasos del modelo mental. El primero es que una vez que el cliente solicita la página, usando el framework el servidor construye la nueva página HTML y serializa toda la información que la página va a necesitar para reanudar su ejecución en el nuevo entorno. Una vez que el cliente obtiene la página, es inmediatamente interactiva. El cliente también obtiene esta cosa llamada Cargador QUIC, que es un pedacito muy pequeño de JavaScript. Este Cargador QUIC configurará un oyente global para todos los eventos y debido a lo que acabamos de configurar, una vez que sucede un evento el Cargador QUIC lo interceptará y obtendrá el JavaScript necesario para ejecutar este evento y ejecutarlo. Y bueno, esto fue prácticamente la reanudabilidad.

9. Conclusión y Llamado a la Acción

Short description:

Acabamos de cubrir los temas de iteración y reanudabilidad. Si disfrutaste de esta charla, por favor sugiere más temas para futuras guías nerds. Gracias por ver y mantente atento a los próximos desarrollos. Esta fue una guía nerd para conceptos web en tendencia. Gracias, React Summit. Nos vemos la próxima vez.

Así que vamos a la última diapositiva aquí. Acabamos de ver dos temas, acabamos de ver iteración, acabamos de ver reanudabilidad y podrías estar pensando, ¿cuál es el próximo tema? Bueno, eso lo dejo a tu criterio. Ese es mi llamado a la acción para todos los que están escuchando y viendo esto en casa. Si disfrutaste el concepto de esta charla, por favor sugiéreme temas. Me encantaría construir más guías nerds para todos ustedes. Porque me divierto mucho haciendo esto y me divertí mucho presentándolo y espero que todos ustedes también lo disfruten.

Así que sin más preámbulos, muchas gracias por ver esta charla. Mantente atento para la próxima porque estoy bastante seguro de que habrá desarrollos a partir de esto, especialmente si me ayudas y contribuyes con nuevos temas. Sí, esta fue una guía nerd para los conceptos web en tendencia. Muchas gracias por tenerme, React Summit. Nos vemos la próxima vez. ¡Adiós!

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

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.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced 2022React Advanced 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
Workshop
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas