A Nerdy Guide to the Web Trending Concepts

Rate this content
Bookmark

What do S.H.I.E.L.D. and A.R.G.U.S. have in common with edge computing?

How can Iron Man and Batman help you understand hydration, partial hydration, and resumability?

What can the Watchers or the Monitors tell you about Reactivity?

Join this adventure straight from the pages of a comic book as your favorite heroes and villains help you understand some of the most discussed topics on the web now.

10 min
08 Dec, 2023

AI Generated Video Summary

Going to conferences can be overwhelming, so the speaker created a guide to trending web concepts using comic book characters. The chosen topic is resumability, and the story of Tony Stark is used to explain it. Resumability allows for immediate interactivity on a web page and is achieved through serialization and execution of code. The speaker challenges the audience to propose topics for future guides.

1. Introduction to the Talk

Short description:

Going to conferences, events, meetups like this one can be overwhelming. We don't have the right mental models of them. I really like comic books and I thought, what if I joined my love for comics and my love for tech and I built another guide to the web trending concepts. I'm Daniel Alfonso, a developer advocate at OLX, instructor, and author. This talk will work with URL. I'm going to show you three topics and ask you to clap for each one.

Okay. Hello, hello, everyone. So let's try to make sure we can go over this in five to seven minutes because it's going to be interesting. So to start out, going to conferences, events, meetups like this one can be overwhelming. There are these words being thrown around every talk, and not always we understand what they mean. The thing is because we don't have the right mental models of them. And mental models are the things you associate when you hear a word. So if you're sleeping, you know all the steps in your mind that you have to do for sleeping, hopefully.

So something about me. I really, really like comic books. And I have more comics that I can collect. And I thought, what if I joined my love for comics and my love for tech and I built another guide to the web trending concepts.

So very quickly introducing myself. I'm Daniel Alfonso. I'm this person on this slide in case you don't recognize me. I'm working as a developer advocate at OLX. I'm an instructor, you can find me on X. I wrote a book on React Query. I just released a course on testing libraries. So these are all the things that are important to know about me. Disclaimer. Some of the things that will be seen here and the characters are owned by Marvel and DC. So no responsibility about that. Just want to tell a story. Please don't sue me.

So how will this talk work? This talk will work with URL. Because at this point, and at this point in time, I don't know what I'm going to speak. You are going to decide. Because I'm going to show you three topics in a bit. And by clapping, I'm going to ask you to clap to each single one of them.

2. Choosing the Topic and Character

Short description:

The topic that receives the most claps will be the one discussed. Two characters will be presented, and the story that wins will help build the mental model. After the story, the technical explanation will be given. The proposed topics are hydration, fine-grain reactivity, and resumability. Resumability is chosen, and the story of Iron Man is selected.

And the one that gets the most claps is going to be the one that I'm going to speak about. Okay? Afterwards, what is going to happen is for that specific topic, I'm going to show you two characters. And once again, you're going to clap. And the story that wins, it's a specific story that will help you build the mental model for that topic. And at the end, hopefully you will understand what the heck we're seeing here.

So just recap story. And after the end of the story, we get the technical explanation. So here are the three topics that I proposed today. So what I'm going to ask. I'm going to name each one of them. I'm going to ask you to clap. And the one that gets the most clap is the one that going to get a nerdy take-two. So hydration. Okay. Fine-grain reactivity. Resumability. Okay. That one was hard. But I think it was resumability. So let's go with it. Okay. Now it's the part I have to choose it. For resumability, there are two characters that you can pick. You can pick Iron Man or Lex Luthor. So who wants to see the story of Iron Man? Who wants to see the story of Lex Luthor? Okay. Iron Man won. So let's go with it. Okay. Now I'm going to be a narrator. I'm going to tell a story.

3. Tony Stark's Armor Dilemma

Short description:

After saving the world, Tony Stark lost all his armors in a battle against Kang the Conqueror. Tired from his heroic efforts, Tony sent a memo to his AI, Friday, to remind him to build new Mark suits. However, an explosion occurred, and Tony's enemy, the Mandarin, took advantage of his vulnerability. Tony now needs to build a new suit, but the previous process was time-consuming and involved downloading Friday into the armor to power it up.

So bear with me, because I have like four minutes. So after saving the world, Tony Stark had an issue. You see he fought Kang the Conqueror. And what happened was, well, these battles are hard. And because of that, he lost all his armors. Everything was destroyed in the process. Zero armors right now.

But you see, Tony was tired. He just saved the world after all. So he sent a memo to Friday, which is his custom AI, not Jarvis. That's in the movies. Completely different story. So he asked Friday, Friday, please remind me tomorrow to build some new Mark suits. And well, he went to sleep. You see, saving the world, it's a hard business after all.

But suddenly an explosion happened. You see something happened. And what happened was, well, apparently one of Tony's enemies cannot let his opportunity slide. And in this case, the enemy is the Mandarin. So suddenly the Mandarin knows, okay, Tony is vulnerable. He doesn't have armors. I know that the process that he has right now will take a bit of time to build a new one. So let's attack his place. Suddenly Tony woke up and was like, okay, now I need a suit. I need to build this thing. But I don't know what to do because you see the process that Tony had built before, it took him quite the time to build an armor. You see, he had to build the armor, and then the armor was not immediately working. It was not interactive. And he had to do this thing, which was download Friday, his custom AI, into the armor and make sure that Friday from the inside would power up the armor. That's what happened before.

4. Tony's Armor Resumable Protocol

Short description:

But he knew that this process would take a lot of time and probably mean that he would die by the hands of the Mandarin. So he was forced to think, okay, I need armor ready to work right now. Friday started building the suit. But what happened differently in this process was as it was generating each part of the armor, there was some extra information being added to the armor. Mandarin fires a blast that would definitely kill Tony, but a new armor comes in and picks him up. Something changed with the Resumable Protocol. Now the suit is active by default. Tony fired the huge blast.

But he knew that this process would take a lot of time and probably mean that he would die by the hands of the Mandarin. So he was forced to think, as some of my dragoons were showing up in the background, and basically thought, okay, I need armor ready to work right now.

So Friday, initiate resumable protocol. Build me a suit now. And Friday did. Friday started building the suit. But what happened differently in this process was as it was generating each part of the armor, there was some extra information being added to the armor. It was being encoded, some extra information there. And this is important for a reason, and I'll tell you in a bit.

You see, whilst this was happening, Mandarin was doing his typical bad guy monologue. You see, you're gonna die, I'm gonna win, whatever, whatever, yada, yada, you see these in every comic book. And suddenly what he does is he points his hand to Tony, and he fires a blast from the ten rings. This would be a blast that would definitely kill Tony. But what happens at this point was he just jumps, and out of the air, a new armor comes in and picks him up. He's safe. He survived this blast.

Now, Mandarin knew how the process worked. He knew that there was no way Tony was getting out of there alive, and there was no way the whole process would do that. You see, something changed with the Resumable Protocol. What changed was, whilst Friday was doing this part and was building the armor, it also encoded a very small part of itself to the armor. And this very small part was responsible for getting the orders that Tony gave it, and executing them by using the information that was encoded in the armor. This means that there is no boot phase, which was what we had before. Before, the AI would go over the suit and power each part of the armor. Now the suit is active by default. It's already interactive. So Tony just did the wise thing. He said Friday, fire the records, the rockets, fire the rockets. And he heard the message in his helmet, like, okay, powering the rockets, Tony. After a bit, rockets ready. So Tony did what he can, and he fired the huge blast.

5. Resumability Explained with Tony Stark

Short description:

This blast destroyed the house, allowing Tony to escape and call for backup. Resumability solves the issue of non-immediate interactivity on a page. Hydration is slow, but with Resumability, the page becomes immediately interactive. The Quick Loader, a one kilobyte JavaScript, is responsible for executing the necessary code. Tony's armor-building process involved hydration, which led to a slow client request. Resumability solves this issue by serializing information for execution in a new context.

Well, this blast basically what it did was destroy this house. Everything went down, but this also made sure that Tony could do one thing, which was to escape and get out of there safely, and call for backup.

So what happened next, you might be thinking. Well, for that, you have to stay tuned for the next issue. Because this is a comic book issue after all, and you have to wait weekly for them to continue with the story.

So I know we're getting out of time, but what we just saw here was Resumability. And this was Resumability with the help of Tony Stark. So now it's the part I'm just going to give you a very quick explanation on what the heck happened here. Because the issue that Resumability comes to solve is that a page is not immediately interactive. We have to do this thing called hydration once we get our server-side rendered page on the browser. And during hydration, where we're doing some of the work that we did on the server already on the client, and we're running a bunch of other code.

So when we're doing Resumability, what happens is when we're generating the HTML, we're server-side rendering it, we're serializing some extra information. And what happens is because of this, this information allows us to resume the execution on the client once we get the code, the page. So this means that the page is immediately interactive once we get it. Also, there's this very small one kilobyte of JavaScript that's downloaded, that's called the Quick Loader. Yeah, you guessed it, Resumability became popular because of this thing called Quick. And the Quick Loader is responsible for setting up a global event listener that will grab all the events, and by using the serialized information, execute them. So this means that we'll only download the needed JavaScript for executing that part of the code.

So this is what we saw, and we're about to end. The first issue that we had, hydration is slow. That was the process that Tony had before. Basically, he was doing hydration when he was building the armor. So there was an issue, and this issue led for the client to request a new page. What he did afterwards was using the framework, the custom AI, the server would build this new HTML page and serialize all the information needed to resume its execution in a new context. Afterwards, the armor would get to the client, so the client would get the page, and it's immediately interactive. So finally, the client would also get the Quick Loader which would set the global event listener, and basically, every time an event happens, the Quick Loader would intercept it, get the JavaScript, and run it. So this was Resumability. I'm just gonna pass these animations real quick because this is just what we saw. This is the entire model of Resumability and what happens whenever we want to understand it. So hopefully, you enjoyed this story, and I'm just gonna go for the last slide.

6. Next Steps and Challenge

Short description:

I enjoyed this concept and had a ton of fun simplifying topics I struggle with. Now, I want to challenge you to propose topics for future guides. Thank you!

And you enjoyed this concept because I had a ton of fun doing it. It's a way for me to simplify the topics that I struggle with lately, and telling them in ways that I really love.

So, what's next? The next topic, well, for that, I would like to give a challenge to you. Propose me topics that you'd like me to do an early guide to. I'm all up to it. So as you can see, we already have a couple of them here. You chose one today. So in the future, there might be one.

So that was my time. Thank you so much.

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
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!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
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.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
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.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
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!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
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.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
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
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 2022React Summit 2022
136 min
Remix Fundamentals
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
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
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.