A Nerdy Guide to the Web Trending Concepts

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.

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.

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.

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.

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.

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.