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

Rate this content
Bookmark

¿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.

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.

Available in English

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.

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

Building Better Websites with Remix
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!
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.