A Nerdy Guide to the Web Trending Concepts

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more

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.

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

Watch video on a separate page

FAQ

Daniel Alfonso is a developer advocate at OLX, an instructor, and an author. He has written a book on React Query and released a course on testing libraries.

Resumability, as discussed by Daniel Alfonso, refers to the process where a page becomes immediately interactive upon loading, by serializing extra information during server-side rendering which allows execution to resume on the client side.

Daniel Alfonso uses comic book characters like Iron Man and Lex Luthor to create engaging stories that metaphorically explain complex technical topics, helping to build mental models for understanding these concepts.

The quick loader is a small piece of JavaScript that sets up a global event listener to handle all events. It uses serialized information to execute events, downloading only the necessary JavaScript for that part of the code, enhancing page interactivity immediately upon loading.

The resumability model enhances web page performance by making pages immediately interactive upon loading. It avoids the latency of downloading large JavaScript files initially, leading to a quicker, more responsive user experience.

Daniel Alfonso encourages the audience to propose topics they'd like him to cover in future talks, indicating his openness to exploring new ideas and continuing to integrate his passion for comics with technology concepts.

Daniel Afonso
Daniel Afonso
10 min
08 Dec, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
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

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 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.
Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
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
Watch video: Speeding Up Your React App With Less JavaScript
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.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
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: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the 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.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
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.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
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.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
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
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
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
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
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.
0 to Auth in an hour with ReactJS
React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.