A Nerdy Guide to the Web Trending Concepts

I will React Summit. Thank you so much for having me here. It's a pleasure to be here with all of you today to share this new talk that I'm trying out. So, hopefully, you'll have as fun watching this as I have writing it.

So, let's start. Well, this all started when I was attending a couple of conferences. And attending conferences can be a bit overwhelming. I don't know if you understand what I mean. But there are so many words showing up back and forth, which, well, if you are like me, not very often you're going to understand what all of them mean.

The issue that kind of prompted me to do this is because I didn't have the right mental models formed for these things. Now, I don't know if you are aware of what a mental model is. Mental models are the terms, images, words or whatever that you associate with a certain subject. For instance, picture sleeping. Whenever you hear the word sleep, you immediately understand all the steps associated to it in your mind. This is because you have the right mental models formed for them.

Now, hitting pause on that for a bit, let me tell you something about myself. I'm a huge comic book nerd. I have more comic books than I can read and you might regularly find me making comic book or pop culture jokes. So, one day I thought, what if I could get the characters that I love, the tech concepts that I miss to write mental models, and I build a nerdy guide to the web trending concepts? So, this is the essence of the talk that we're going to be seeing.

Before anything else, let me start by introducing myself. My name is Daniel Afons. I'm working as a developer advocate at OLX. I'm an IDN instructor. I'm an Altura ambassador. You can find me on X and pretty much any social network at the handle DanielJCAfons. Also something about me, I recently published a book about React Query. Part of the book is state management with React Query. I'm up to chat with all the things related with React Query. Feel free to reach out to me on social networks. Now, before we start the talk, I just want to make a small disclaimer, which is this talk will include some fan-made stories using characters that are owned by Marvel or DC Comics.

I'm putting this out of there so you're aware of the characters that you see. I do not own them, but I'm just using them to help build the right mental models on all of you.

Another thing that's important to say is I want to share some love. I want to thank these amazing people, Attila and the Matheus, because without them, this talk wouldn't be what it is today. They gave me the right feedback and the feedback on the mental models. So, I just want to share some love and thank them for building this talk, and helping me build this talk.

Now, before we start, how will this talk work? Well, ideally, if you were in person, you would be deciding. You see, this talk is going to be consisted by a couple of things. First, what happens is I present you with a topic and two characters. For each character, ideally, the audience would pick which character we'd be seeing. Then afterwards, for the selected character, I would tell you a comic book story. After we wrap up that story, I would show you the technical explanations behind. We'd start with the story and then go to the technical concept of it. Because today we are doing this online and it's not in person, I'll be picking only Marvel characters, so we'll go with the characters from Marvel.

In this talk, today, we'll be seeing two topics. We'll be seeing hydration and we'll be seeing reasonability. I hope you're ready to start because it's time for hydration. For hydration, like I said, if you would be picking, you would be able to choose between Iron Man or Lex Luthor. Both of them would help us see the story for hydration. For this scenario, considering, like I said, once again, we're remote, I'm picking Iron Man, so I just pick the character. And now I'll take the role of a narrator, and I'll tell you a story. And after the story ends, we'll see the technical aspects of it. So I hope you're ready, I'm ready. So, after building Mark 1, Mark 2, and Mark 3 by hand, Tony Stark didn't want to repeat the process of building a new armor by himself. You see, doing this is quite a slow process, and Tony wanted it to be faster, so he thought, maybe I can reprogram Friday, his custom AI, to know all the steps for building a new armor. And once he did so, all that was left was to ask Friday to build him that armor. And they did. So Friday plugged into the manufacturing and started to work. After a bit, the armor was ready. Great success.

We are ready to fight, right? So Tony said, OK, let's get into the armor. And he tried to do so. So he tried to get into the armor, but apparently something didn't quite work out. The suit didn't even open. And this kind of left Tony to think, because sitting there with a non-interactive suit, Tony fought for a bit, until, well, an idea popped into his mind. What if I downloaded Friday to the armor, and then Friday could power up the armor from the inside? That would be interesting, right? So he did. And we waited, and we waited for a bit, and after the download process was completed, the new armor had Friday running on it. So once Friday started up, it started powering up each part of the armor as if it did a system check on it. As you can see on this very poor DidGif, you can see that the light is powering up on each part individually. So this was symbolizing the process of Friday going over each part of the armor and powering it on. And now that the armor is powered up, Tony was able to wear the suit and go for a test run. So, he powered up the thrusters, and well, not everything works out on the first try run, but this was Hydration with the help of Iron Man, Tony Stark, so hopefully if you're adding new Hydration, you'll pick up on some of the steps.

If you didn't, now let's recap what the heck we just saw. So, let's start with the problem. Hydration is there to solve one problem, which is server-side rendered code is not interactive. And ideally, what we need is a page that is interactive. So how it works typically is on the server, in the server-side code, using the framework, we generate our static HTML. But now, once we get the page, the page is not interactive because, well, it's just static HTML and CSS. So what we need to do is download Javascript, in this case, the framework, then run the framework and run what is called the reconciliation process. And after the reconciliation process runs, that's when the framework, the Javascript we just downloaded, goes over each part of the HTML and interacts and attaches event handlers and all the interactivity that we need. And after this bit, that's when we get the interactive page. And this is kind of how hydration works.

So let's recap how this thing is set up on the story. So we started with this part, where Tony said that building a new armor should be faster. The issue that we were setting up here is that the client side rendering is slow. So what if we taught the framework how to build a page? Because well, ideally, the framework knows how to do it. On the server side, by using the framework, the server builds the new static HTML. And then, what is going to happen is that the client is going to get the static HTML.

Now, we set up another problem in the next part of the story, which is, now the server side rendered code is not interactive because we've got the armor, but the armor doesn't work. It's just there to show up. And this is what happens before hydration runs. So then, what we need to do is we're going to have the framework turn the static HTML into interactive HTML. So we need the framework to be downloaded into the page. So the client needs to wait for that to happen. After a bit, after the client gets the framework, the framework will go over the HTML and attach it backwards and all the logic needed to run every matching note. And, after a bit, congratulations, the page is now fully interactive.

And we just saw hydration with the help of Ironman, so let's just recap all the steps that we saw in this story and make sure we have the right mental model. So hydration is there to solve one problem, which is SSR code, server side rendered code, needs some sort of interactivity. The first step associated with this is usually when a client requests a page, using the framework the server builds new static HTML and sends it to the client and then the client gets this static HTML. But now there's one issue, which is the page is not interactive, so the client needs to wait for the framework to download. Once the framework downloads, the framework runs what is called the reconciliation process. So the framework will go over the HTML and attach event handlers and the logic needed to run every matching node. And after a while, the page is now fully interactive. And this was hydration. We just saw hydration with the help of Ironman. I hope you all enjoyed this story, because now we're going to jump for the next one, which is going to be Resumability. And Resumability is a different story, a different character. In this case we're going to use the same characters because we're going to pick up a bit after where we just left off. So we could pick from Ironman or from Lex Luthor, but like I said we're going the Marvel way for this talk, so let's go once again with Ironman. Now let's understand what Ironman has to tell us about Resumability. And now, once again, I'll put the narrator at and let's start this thing. So let's go.

After last saving the world against the fight against Kang, the Conqueror, Tony took a big hit. He completely ran out of armors, as they all got destroyed in this fight. Back home, as he was headed to bed, Tony asked Friday to remind him to build new suits tomorrow. And he fell asleep. Suddenly, an explosion happened. The Mandarin cannot let this slide. It's a vulnerable Tony Stark, after all. Tony woke up startled and shouted that he needed a new suit. But he also knew that he wouldn't survive the old process. The current process was not that good. Tony realized that he needed an armor that was ready to work. So he instructed Friday to initiate the resumable protocol and build him a suit now.

He knew he wouldn't survive the old process. The current process, it's currently not that good. You could get the manufacturer running and have Friday building in Yharbor, but very much probably the time to download Friday to the suit would probably mean death or that he wouldn't survive. And this left Tony to think, OK, Tony, Tony, think, think, think.

And during this time, you could see some Hydra goons show up and chasing him. And this forced Tony to think, well, I need an armor that's ready to work. So probably Friday, do this thing, initiate resumable protocol, build me a suit now. And Friday started building the suit.

But now, the process changed. You see, for each specific part of the suit that would be interactive, Friday would encode this information there. Friday would also encode a pointer that would indicate itself where to find instructions to operate this part of the armor when the time arrives. Now, back to Tony, while he was running, he found himself surrounded by the Mandarin and his goons. And as you're usually used to in this type of movies or films or whatever, the Mandarin started this bad guy monologue. Stark, you don't think you'll make it out alive? At the end, he points his hand to Tony and ready to fire his disintegration beam. And as he does this, Tony jumps to his new billy suit and the suit catches him and saves him from a sure blast that would probably take him out.

Now, this made the Mandarin mad. You see, he knew about the weaknesses that the previous process had. He knew that there was no way that Tony would get an armor that fast and that ready to go. What happened? How? How did this work? You see, in the Resumable Protocol, when Friday created the armor, it already uploaded a very small version of itself to the suit. This small version of Friday was able to intercept any command from Tony and by using it and the encoded instructions, figure out on the fly how to execute its specific instruction. This would allow the armor to skip the boot slash system check phase. Now, back to Tony. Friday, fire the rockets, he asked. Well, inside of the helmet, as he asked this question, he heard Friday saying, Powering the rockets, Tony. Once the rockets were ready, and Friday let Tony know, Tony fired them up. Boom. And once he did so, the rockets collapsed Tony's house and everyone in the way. And this ensured that, well, Tony could escape and call for backup. What happened next, you might be thinking? Well, for that, you can wait for the next issue. Welcome to the world of comic books.

Not everything gets solved in one week. So this was Resumability with the help of Tony Stark Iron Man. Now, let's just recap what we just saw. Resumability is there to solve one problem, which is the page is not immediately interactive. And during hydration, that what we just saw previously, we have to redo the work we did on the server. Ideally we could not have any hydration. No hydration is always better than having hydration. Ideally what we would do is, once we're building this HTML on the server side, we would encode some information, extra information there, that will allow us to resume our execution from the server on the client. This would mean that once we got the page on the client, the page would be immediately interactive.

Now, you might be thinking, okay, but if we don't download all the JavaScript and all the things that we need, how do we have the JavaScript to execute once we click on that button? Well, what we would do here is we would download only the specific JavaScript to do this, and only the JavaScript that would be responsible for this part of the code. Now, one of the frameworks that got very popular over using resumability, it's called QUIC, and there's a reason why I'm telling you this, because there's actually another part at Movilhood. Once we got the page or HTML, we would also get something called QUIC Loader, and this QUIC Loader would be responsible for intercepting this QUIC event, and would be responsible for downloading this specific JavaScript for that specific part. So it would just be a very, very small bit of JavaScript that would be able to allow us to do this thing.

So now, let's see how resumability fitted in our story. Well, first we had an issue, which was hydration is slow. So once the client requests a new page, we, using the framework, the server builds this new HTML, but it also serializes in all the information it needs to resume its execution in the new environment. Afterwards, once the client gets the page, it's immediately interactive. Now there's also something here, which is the client gets the QUIC Loader. Remember, I mentioned this thing called the QUIC Loader. The QUIC Loader will set up a global listener to all the events. So when an event happens, what the QUIC Loader will do is intercept it, get the JavaScript needing for executing that part, and runs it. And congratulations, we all just learned Resumability again with the help of our friend Ironman. So let's recap what we just saw. Resumability is there to set up, to fix one problem, which is the page is not immediately interactive and ideally there would be no iteration. So let's see the mental model steps. First one is once the client requests the page, using the framework the server builds the new HTML page and serializes in all the information that the page is going to need to resume its execution in the new environment. Once the client gets the page, it's immediately interactive. The client also gets this thing called the QUIC Loader, which is a very small bit of JavaScript. This QUIC Loader will set a global listener to all the events and because of what we just set up, once an event happens the QUIC Loader will intercept it and get the JavaScript needed for executing this event and run it. And well, this was pretty much resumability.

So let's go to the last slide here. So we just saw two topics, we just saw iteration, we just saw resumability and you might be thinking, okay, what is the next topic? Well, I would leave that out to you. That's the my call for action for everyone listening and watching this back at home. If you enjoyed this concept of this talk, please suggest me topics. I would love to build more nerdy guides for all of you. Because I have so much fun doing this thing and I had so much fun presenting it and hopefully all of you will enjoy it as well.

So without any further ado, thank you so much for watching this talk. Stay tuned for the next one because I'm pretty sure there's going to be developments from this, especially if you help me and contribute with new topics. Yeah, this was a nerdy guide to the web trending concepts. Thank you so much for having me, React Summit. See you next time.