DEV Community

Cover image for Resumability, WTF?

Resumability, WTF?

Ryan Carniato on August 23, 2022

Maybe you've heard the term Resumability thrown around recently. Maybe someone gushing over Miško Hevery's new Qwik framework. Maybe you've heard m...
Collapse
 
tigt profile image
Taylor Hunt
// in HTML - how do I get the timestamp?
<time>08/19/2022</time>

I guess this exact problem is why they specced the datetime attribute — but you have to remember to use it:

<time datetime=2022-08-19T14:54:39.929Z>08/19/2022</time>
Enter fullscreen mode Exit fullscreen mode

…which presumably Resumable frameworks obviate, by remembering everything for you!

Collapse
 
ryansolid profile image
Ryan Carniato • Edited

Ok so a timestamp might have been not the best example. My point is that you needed to serialize the full data in addition to the final output. Whether that is in a script tag or as another attribute in HTML is still more of the same.

Collapse
 
132 profile image
Yisar

No doubt, I like this idea. It requires us to serialize all states and attach them to HTML events. I dare not say that it can carry large and complex applications, but for the vast majority of static single pages, this is a very good idea.

Collapse
 
hellovietduc profile image
Duc Nguyen

Sorry I’m new to modern frontend engineering. Can anyone recommend an article explaining what hydration is in depth? I don’t understand when the server will pause rendering and send the code to the browser so that it resumes latter. Thanks

Collapse
 
hellovietduc profile image
Duc Nguyen • Edited

As like why pause and let the browser resume?

Collapse
 
hamedfathi profile image
Hamed Fathi • Edited

Thanks for the great article.

Does exist any code sample to know how does Resumability implement?
Thanks to you for fine-grained reactivity now we have more docs than before.
Is it possible to have code sample for both Resumability & (Re)Hydration? to compare and dive into it.

Collapse
 
ryansolid profile image
Ryan Carniato

It's tricky because most of the challenge is the compiler transform and the serialization. It's not the code you write. And every frameworks' hydration works a little different so generalizing beyond the example in the article is also difficult.

The thing is it isn't hard to picture the simple case where someone attaches a global event handler and does things when the event is performed. But wrapping your head around the compiled output is a whole other thing. It is the same reason you don't see like a how Svelte compiles your code guide typically. But I hope if we can simplify this aspect we can maybe get to that point.

Collapse
 
pmbanugo profile image
Peter Mbanugo

I like the last sentence and I hope this happens

And maybe even delete the need for words like resumability and hydration in our Web vocabulary.

Collapse
 
theiaz profile image
Julian Schäfer

Thank you for this and your other articles. They help me to understand the whole thing of rendering patterns!

Collapse
 
doeixd profile image
doeixd

Great article! Way to simplify and break-down such an advanced topic. Hopefully the knowledge shared here can help people from talking past each other when discussing these topics online.

Collapse
 
grunet profile image
Grunet

I still don't exactly get it on a detailed level, but I appreciate the quality of the writing and exposition here!

Collapse
 
jwp profile image
John Peters

What about observables? The analogue of pull based architecture. Everything is push based.

Collapse
 
ryansolid profile image
Ryan Carniato

Yeah that is important part of making this happen since everything stems from events. But it isn't the full story since you still need to wire things up. A way to create the reactive pipe as it wakes up. And more, the huge expectation is continue to use familiar looking patterns. So hard to picture this without a compiler running over it. But reactivity is at the core of making this possible.

Collapse
 
steakeye profile image
Andrew Keats

Nice high-level overview 👍

Collapse
 
royeradames profile image
Royer Adames

For more details see this talk from the creator: youtube.com/watch?v=Zddw6qy5pf0

I wish svelte would implement this