Tweet
Tweet

Slide 1

Slide 1 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! • THE 27TH OF MAY, 2023. Hello, JSDay Canarias 👋 🇮🇨

Slide 2

Slide 2 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 🤯 MATHEUS ALBUQUERQUE • @ythecombinator

Slide 3

Slide 3 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! ↑ ALL THE LINKS! 🤓 🧑🏫 @techlabs 🐦 @ythecombinator 👨💻 @medallia ⚡ Perf GDE

Slide 4

Slide 4 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! ↑ ALL THE LINKS! 🤓 🍺 LET’S DISCUSS MORE AFTER!

Slide 5

Slide 5 text

#disclaimer 😌 This is for those who like to see what’s behind the curtain. You don’t have to know all of that to be productive with front-end development.

Slide 6

Slide 6 text

This talk presents… ↝ The Past & The Future ↝ Islands Architecture ↝ Resumability ↝ Streaming SSR + Selective Hydration ↝ React Server Components ↝ Closing Thoughts

Slide 7

Slide 7 text

#question 🤔 How and where do I want to render content?

Slide 8

Slide 8 text

HOW AND WHERE DO I WANT TO RENDER CONTENT? web server build server the Edge the client

Slide 9

Slide 9 text

web server build server the Edge the client all at once partially progressively HOW AND WHERE DO I WANT TO RENDER CONTENT?

Slide 10

Slide 10 text

AND MORE! all at once partially progressively Where do you navigate? When do you load? What is executed on load? When is data fetched? What do you bundle/serialize? web server build server the Edge the client

Slide 11

Slide 11 text

#question 🤔 How did we get here?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

The Past HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 14

Slide 14 text

1995

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

↝ LANGUAGES LIKE PERL AND PHP ALLOWED DEVELOPERS TO RENDER BACKEND DATA SOURCES INTO HTML ↝ DEVELOPERS WERE NOW ABLE TO BUILD DYNAMIC SITES AND SERVE REAL-TIME DATA, OR DATA FROM A DATABASE TO AN END USER CGI SCRIPTING LANGUAGES

Slide 17

Slide 17 text

↝ THESE WORKED ON THE SERVER BECAUSE SERVERS WERE THE POWERFUL PART OF THE NETWORK ↝ THE BROWSER'S JOB WAS LIMITED: INTERPRETING THE DOCUMENT AND SHOWING THE PAGE ↝ THIS SOLUTION WAS ALL ABOUT SHOWING INFORMATION, NOT INTERACTING WITH IT CGI SCRIPTING LANGUAGES

Slide 18

Slide 18 text

#eureka 💡 JavaScript and browsers got powerful = we could do a ton of fun things directly on the client.

Slide 19

Slide 19 text

↝ ONCE EVERYTHING IS IN PLACE, YOU DON’T HAVE TO GO BACK TO THE SERVER FOR MORE REQUESTS ↝ YOU CAN CACHE THE CORE HTML AND JS BUNDLES ON A CDN ↝ AS THE WEB GOT MORE INTERACTIVE, CSR AND SPAS BECAME DEFAULT CLIENT-SIDE RENDERING (CSR)

Slide 20

Slide 20 text

#gotcha 🥸 We now had to be mindful of how our apps would render on a phone on a bus in the city center.

Slide 21

Slide 21 text

#eureka 💡 We now had to be mindful of how our apps would render on a phone on a bus in the city center. Back to the server! 🏃

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

↝ HTML IS READY TO BE DISPLAYED WHEN THE PAGE IS LOADED = HIGHER PERFORMANCE ↝ HTML IS NOT DEPENDENT ON THE END BROWSER = HIGHER COMPATIBILITY ↝ FOR INTERACTIVE WEBSITES, WE STILL NEED TO SEND JS = HYDRATION SERVER-SIDE RENDERING (SSR)

Slide 24

Slide 24 text

🚨 INTERMISSION: Hydration HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 25

Slide 25 text

#definition 🧐 Hydration is the process of attaching behavior to declarative content to make it interactive. — WHY PROGRESSIVE HYDRATION IS HARDER THAN YOU THINK, BY MIŠKO HEVERY

Slide 26

Slide 26 text

↝ ASSOCIATE DOM ELEMENTS WITH THEIR CORRESPONDING EVENT HANDLERS ↝ ONCE A USER EVENT TRIGGERS A HANDLER, WE NEED TO UPDATE THE APP STATE ↝ ONCE THE APP STATE UPDATES, THE FRAMEWORK NEEDS TO RECREATE THE COMPONENT HIERARCHY HYDRATION: CHALLENGES 🍺

Slide 27

Slide 27 text

↝ DO WE SEND ALL JS ON EVERY REQUEST? OR DO WE BASE IT ON THE ROUTE? ↝ IS HYDRATION DONE TOP-DOWN? AND HOW EXPENSIVE IS THAT? ↝ HOW DOES THE DEVELOPER ORGANIZE THE CODE BASE? HYDRATION: QUESTIONS 🍺

Slide 28

Slide 28 text

Islands Architecture HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2020 2021 2022

Slide 29

Slide 29 text

↝ SELECTIVELY, PROGRESSIVELY ENHANCING BITS OF SERVER-RENDERED HTML WITH CLIENT-SIDE JS ↝ SMALL, FOCUSED, CHUNKS OF INTERACTIVITY WITHIN SERVER-RENDERED WEB PAGES ↝ SINGLE APPLICATION IN CONTROL OF FULL-PAGE RENDERING → MULTIPLE ENTRY POINTS ISLANDS ARCHITECTURE

Slide 30

Slide 30 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 31

Slide 31 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 32

Slide 32 text

↝ THE SCRIPT FOR THE ISLANDS CAN BE DELIVERED AND HYDRATED INDEPENDENTLY, ALLOWING THE REST OF THE PAGE TO BE JUST STATIC HTML ↝ THE OUTPUT OF ISLANDS IS PROGRESSIVELY ENHANCED HTML ↝ MORE SPECIFICITY AROUND HOW THE ENHANCEMENT OCCURS ISLANDS ARCHITECTURE

Slide 33

Slide 33 text

#definition 🧐 Islands are a component-based architecture that suggests a compartmentalized view of the page with static and dynamic islands. — ISLANDS ARCHITECTURE, BY PATTERNS.DEV

Slide 34

Slide 34 text

ISLANDS ARCHITECTURE PAGE LAYOUT POST TITLE POST CONTENT COMMENTS SOCIAL CTA

Slide 35

Slide 35 text

ISLANDS ARCHITECTURE PAGE LAYOUT (SSR’D) POST TITLE (SSR'D) POST CONTENT (SSR’D) COMMENTS PLACEHOLDER (SSR) SOCIAL CTA PLACEHOLDER (SSR) COMMENTS “APP” (SSR’D + HYDRATION SCRIPT) SOCIAL CTA “APP” (SSR’D + HYDRATION SCRIPT)

Slide 36

Slide 36 text

ISLANDS ARCHITECTURE PAGE LAYOUT (SSR’D) POST TITLE (SSR'D) POST CONTENT (SSR’D) COMMENTS PLACEHOLDER (SSR’D) SOCIAL CTA PLACEHOLDER (SSR’D) COMMENTS “APP” (SSR’D + HYDRATION SCRIPT) SOCIAL CTA “APP” (SSR’D + HYDRATION SCRIPT)

Slide 37

Slide 37 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 38

Slide 38 text

↝ STREAMING RENDERING + AUTOMATIC PARTIAL HYDRATION + COMPILER ↝ AUTOMATIC PARTIAL HYDRATION ALLOWS INTERACTIVE COMPONENTS TO HYDRATE THEMSELVES ↝ HYDRATION CODE IS ONLY SHIPPED FOR INTERACTIVE COMPONENTS ISLANDS ARCHITECTURE (WITH MARKO) 🍺

Slide 39

Slide 39 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 40

Slide 40 text

↝ BY DEFAULT, SHIPS ZERO JAVASCRIPT ↝ EVERY ISLAND IS LOADED IN PARALLEL ↝ YOU CAN SPECIFY THE LOADING STRATEGY FOR EACH ISLAND INDIVIDUALLY ↝ MULTI-FRAMEWORK: BUILD ISLANDS WITH REACT, PREACT, SVELTE, VUE, AND OTHERS ISLANDS ARCHITECTURE (WITH ASTRO)

Slide 41

Slide 41 text

- - - import MyReactComponent from ' . . /components/MyReactComponent.jsx'; - - - ISLANDS ARCHITECTURE (WITH ASTRO)

Slide 42

Slide 42 text

- - - import MyReactComponent from ' . . /components/MyReactComponent.jsx'; - - - ISLANDS ARCHITECTURE (WITH ASTRO)

Slide 43

Slide 43 text

↝ STANDALONE/METAFRAMEWORK: Astro, Iles, Qwik, Marko, Nano JSX, Capri ↝ 11TY: is-land, Slinkity ↝ PREACT: Fresh, preact-island, microsite ↝ SOLIDJS: Solid Start, isolid ↝ SVELTE: Elder.js ISLANDS ARCHITECTURE

Slide 44

Slide 44 text

#case💡 An e-commerce. Product pages have static descriptions and links. Interactive components (e.g., image carousels, search bar) are available in different regions.

Slide 45

Slide 45 text

#case💡 An internet banking app. The account details page contains a list of static transactions with filters providing some interactivity.

Slide 46

Slide 46 text

🟢 REDUCES THE AMOUNT OF JAVASCRIPT CODE SHIPPED TO THE CLIENT 🟢 FASTER PAGE LOADS AND TIME TO INTERACTIVE (TTI) 🟢 KEY CONTENT IS AVAILABLE ALMOST IMMEDIATELY TO THE USER 🟢 STATIC CONTENT IS RENDERED ON THE SERVER = PAGES ARE SEO-FRIENDLY GREAT 🟡 HIGHLY INTERACTIVE PAGES WOULD PROBABLY REQUIRE THOUSANDS OF ISLANDS NOT GREAT ISLANDS ARCHITECTURE

Slide 47

Slide 47 text

🟢 REDUCES THE AMOUNT OF JAVASCRIPT CODE SHIPPED TO THE CLIENT 🟢 FASTER PAGE LOADS AND TIME TO INTERACTIVE (TTI) 🟢 KEY CONTENT IS AVAILABLE ALMOST IMMEDIATELY TO THE USER 🟢 STATIC CONTENT IS RENDERED ON THE SERVER = PAGES ARE SEO-FRIENDLY GREAT 🟡 HIGHLY INTERACTIVE PAGES WOULD PROBABLY REQUIRE THOUSANDS OF ISLANDS NOT GREAT ISLANDS ARCHITECTURE

Slide 48

Slide 48 text

Resumability HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2020 2021 2022

Slide 49

Slide 49 text

#hotTake 🌶 A considerable part of the modern isomorphic landscape is built on the back of libraries that weren't initially created for server rendering.

Slide 50

Slide 50 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 51

Slide 51 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 52

Slide 52 text

HYDRATION: THE BAD PARTS™ INITIAL REQUEST HTML ARRIVES VIEW PAINTED JAVASCRIPT ARRIVES JAVASCRIPT IS PARSED — RESUMABILITY, WTF?, BY RYAN CARNIATO 0 100

Slide 53

Slide 53 text

HYDRATION: THE BAD PARTS™ GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS

Slide 54

Slide 54 text

HYDRATION: THE BAD PARTS™ GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🟢 FAST (USUALLY)

Slide 55

Slide 55 text

HYDRATION: THE BAD PARTS™ GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (ON BAD NETWORK CONDITIONS)

Slide 56

Slide 56 text

HYDRATION: THE BAD PARTS™ GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (DEPENDING ON THE DEVICE AND AMOUNT OF JAVASCRIPT)

Slide 57

Slide 57 text

HYDRATION: THE BAD PARTS™ GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (DEPENDING ON THE AMOUNT OF DOM NODES TO BE TRAVERSED AND REFERENCES TO BE RE-BOUND TO LISTENERS)

Slide 58

Slide 58 text

#question 🤔 What if frameworks were built on SSR in the first place?

Slide 59

Slide 59 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 60

Slide 60 text

OPA LANGUAGE 🍺

Slide 61

Slide 61 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 62

Slide 62 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 63

Slide 63 text

HYDRATION → RESUMABILITY GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS GET HTML 🔴 READY 🟢 READY

Slide 64

Slide 64 text

#definition 📖 Resumability is about pausing execution in the server and resuming execution in the client without having to replay and download all of the application logic. — RESUMABLE VS. HYDRATION, QWIK

Slide 65

Slide 65 text

↝ SOME WORK → PAUSE → RESUME ↝ USE WHAT HAPPENED DURING THE EXECUTION ON THE SERVER AND AVOID EXTRA WORK WHEN THE APPLICATION STARTS IN THE BROWSER ↝ ATTACHES GLOBAL EVENT HANDLERS AT STARTUP AND THEN ONLY RUNS THE NECESSARY CODE ON INTERACTION RESUMABILITY

Slide 66

Slide 66 text

↝ EVENT HANDLER CREATION HAPPENS BEFORE THE EVENT IS TRIGGERED (EAGER) ↝ ALL POSSIBLE EVENT HANDLERS ARE CREATED AND REGISTERED (SPECULATIVE) ↝ CLIENT REDOES WORK ↝ REQUIRES THE FRAMEWORK TO DOWNLOAD AND EXECUTE THE COMPONENTS TO FIGURE OUT HIERARCHY HYDRATION ↝ EVENT HANDLER CREATION HAPPENS AFTER THE EVENT IS TRIGGERED (LAZY) ↝ ONLY TRIGGERED EVENTS ARE CREATED AND REGISTERED (AS-NEEDED) ↝ CLIENT DOESN'T REDO WORK (VIA DESERIALIZATION) ↝ REQUIRES ALL THE INFORMATION TO BE SERIALIZED IN THE HTML RESUMABILITY HYDRATION VS. RESUMABILITY

Slide 67

Slide 67 text

↝ EVENT HANDLER CREATION HAPPENS BEFORE THE EVENT IS TRIGGERED (EAGER) ↝ ALL POSSIBLE EVENT HANDLERS ARE CREATED AND REGISTERED (SPECULATIVE) ↝ CLIENT REDOES WORK ↝ REQUIRES THE FRAMEWORK TO DOWNLOAD AND EXECUTE THE COMPONENTS TO FIGURE OUT HIERARCHY HYDRATION ↝ EVENT HANDLER CREATION HAPPENS AFTER THE EVENT IS TRIGGERED (LAZY) ↝ ONLY TRIGGERED EVENTS ARE CREATED AND REGISTERED (AS-NEEDED) ↝ CLIENT DOESN'T REDO WORK (VIA DESERIALIZATION) ↝ REQUIRES ALL THE INFORMATION TO BE SERIALIZED IN THE HTML RESUMABILITY HYDRATION VS. RESUMABILITY

Slide 68

Slide 68 text

↝ EVENT HANDLER CREATION HAPPENS BEFORE THE EVENT IS TRIGGERED (EAGER) ↝ ALL POSSIBLE EVENT HANDLERS ARE CREATED AND REGISTERED (SPECULATIVE) ↝ CLIENT REDOES WORK ↝ REQUIRES THE FRAMEWORK TO DOWNLOAD AND EXECUTE THE COMPONENTS TO FIGURE OUT HIERARCHY HYDRATION ↝ EVENT HANDLER CREATION HAPPENS AFTER THE EVENT IS TRIGGERED (LAZY) ↝ ONLY TRIGGERED EVENTS ARE CREATED AND REGISTERED (AS-NEEDED) ↝ CLIENT DOESN'T REDO WORK (VIA DESERIALIZATION) ↝ REQUIRES ALL THE INFORMATION TO BE SERIALIZED IN THE HTML RESUMABILITY HYDRATION VS. RESUMABILITY

Slide 69

Slide 69 text

RESUMABILITY: SERIALIZATION { "handlers": [ … ], "state": { … }, "hierarchy": { … }, } DISPLAY HTML RESUME STATE (JSON PARSE) 🟢 INTERACTIVE

Slide 70

Slide 70 text

RESUMABILITY: SERIALIZATION { "handlers": [ … ], "state": { … }, "hierarchy": { … }, } DISPLAY HTML RESUME STATE (JSON PARSE) 🟢 INTERACTIVE

Slide 71

Slide 71 text

RESUMABILITY: SERIALIZATION { "handlers": [ … ], "state": { … }, "hierarchy": { … }, } DISPLAY HTML RESUME STATE (JSON PARSE) 🟢 INTERACTIVE

Slide 72

Slide 72 text

↝ EVENT HANDLER CREATION HAPPENS BEFORE THE EVENT IS TRIGGERED (EAGER) ↝ ALL POSSIBLE EVENT HANDLERS ARE CREATED AND REGISTERED (SPECULATIVE) ↝ CLIENT REDOES WORK ↝ REQUIRES THE FRAMEWORK TO DOWNLOAD AND EXECUTE THE COMPONENTS TO FIGURE OUT HIERARCHY HYDRATION ↝ EVENT HANDLER CREATION HAPPENS AFTER THE EVENT IS TRIGGERED (LAZY) ↝ ONLY TRIGGERED EVENTS ARE CREATED AND REGISTERED (AS-NEEDED) ↝ CLIENT DOESN'T REDO WORK (VIA DESERIALIZATION) ↝ REQUIRES ALL THE INFORMATION TO BE SERIALIZED IN THE HTML RESUMABILITY HYDRATION VS. RESUMABILITY

Slide 73

Slide 73 text

↝ CLIENT REDOES WORK ↝ ISLAND-LEVEL ISLANDS ↝ CLIENT DOESN'T REDO WORK ↝ SUB-COMPONENT LEVEL (SMALLER) RESUMABILITY HYDRATION VS. RESUMABILITY 🍺

Slide 74

Slide 74 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 75

Slide 75 text

#hotTake 🌶 Qwik is an example of the outside of the box thinking that is sometimes required on the web.

Slide 76

Slide 76 text

🟢 STARTUP PERFORMANCE 🟢 RENDERING PERFORMANCE (ONLY CHANGED COMPONENTS NEED TO BE RE-RENDERED) 🟢 FINE-GRAINED LAZY-LOADING 🟢 PROGRESSIVE INTERACTIVITY GREAT 🟡 *PRELOAD CRITICAL PAGE INTERACTIONS 🟡 THE ONLY OPTION FOR DEVELOPERS TO LEVERAGE RESUMABILITY IS TO USE QWIK 🟡 TOO LITTLE DISCUSSION AVAILABLE ON THE IDEA NOT GREAT RESUMABILITY

Slide 77

Slide 77 text

🟢 STARTUP PERFORMANCE 🟢 RENDERING PERFORMANCE (ONLY CHANGED COMPONENTS NEED TO BE RE-RENDERED) 🟢 FINE-GRAINED LAZY-LOADING 🟢 PROGRESSIVE INTERACTIVITY GREAT 🟡 *PRELOAD CRITICAL PAGE INTERACTIONS 🟡 THE ONLY OPTION FOR DEVELOPERS TO LEVERAGE RESUMABILITY IS TO USE QWIK 🟡 TOO LITTLE DISCUSSION AVAILABLE ON THE IDEA NOT GREAT RESUMABILITY

Slide 78

Slide 78 text

Streaming Server- Side Rendering HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2020 2021 2022

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

↝ NODE STREAMS ALLOW US TO CONTINUOUSLY SEND DATA DOWN TO THE CLIENT ↝ LOAD DATA OVER A NETWORK IN MULTIPLE CHUNKS ↝ THE CHUNKS ARE LOADED OUT OF ORDER IN PARALLEL TO RENDERING STREAMING SSR

Slide 81

Slide 81 text

STREAMING SSR (BEFORE) renderToString() TRANSFER HTML RENDER TIME TO FIRST BYTE FIRST MEANINGFUL PAINT

Slide 82

Slide 82 text

STREAMING SSR (AFTER) renderToNodeStream() TRANSFER HTML RENDER TIME TO FIRST BYTE FIRST MEANINGFUL PAINT

Slide 83

Slide 83 text

#case💡 An e-commerce. Product pages have a lot of personalized content: localized description, a dynamic list of recommended products powered and a custom deals banner.

Slide 84

Slide 84 text

🟢 FAST TIME TO FIRST BYTE (TTFB) 🟢 FASTER FIRST CONTENTFUL PAINT (FCP) AND TIME TO INTERACTIVE (TTI) 🟢 HANDLING OF BACKPRESSURE 🟢 BRIDGES THE GAP BETWEEN A PURE SSR AND A CSR EXPERIENCE GREAT 🟡 MIGRATION WASN’T ALWAYS EASY NOT GREAT STREAMING SSR

Slide 85

Slide 85 text

🟢 FAST TIME TO FIRST BYTE (TTFB) 🟢 FASTER FIRST CONTENTFUL PAINT (FCP) AND TIME TO INTERACTIVE (TTI) 🟢 HANDLING OF BACKPRESSURE 🟢 BRIDGES THE GAP BETWEEN A PURE SSR AND A CSR EXPERIENCE GREAT 🟡 MIGRATION WASN’T ALWAYS EASY NOT GREAT STREAMING SSR

Slide 86

Slide 86 text

Selective Hydration HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2020 2021 2022

Slide 87

Slide 87 text

HYDRATION IN REACT (THE BAD PARTS™) FETCHING DATA (SERVER) RENDERING HTML (SERVER) LOADING CODE (CLIENT) HYDRATING TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE

Slide 88

Slide 88 text

HYDRATION IN REACT (THE BAD PARTS™) ↝ HYDRATION COULD ONLY BEGIN AFTER THE ENTIRE DATA WAS FETCHED AND RENDERED ↝ USERS COULDN’T INTERACT WITH THE PAGE UNTIL HYDRATION WAS COMPLETE FOR THE WHOLE PAGE ↝ PARTS OF YOUR APP THAT LOAD FAST WOULD ALWAYS HAVE TO WAIT FOR THE SLOW ONES

Slide 89

Slide 89 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 90

Slide 90 text

(STREAMING SSR +) SELECTIVE HYDRATION FETCHING DATA (SERVER) RENDERING HTML (SERVER) LOADING CODE (CLIENT) HYDRATING TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE

Slide 91

Slide 91 text

TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE […] FETCHING DATA (SERVER) RENDERING HTML (SERVER) HYDRATING LOADING CODE (CLIENT) […] […] […] […] […] […] (STREAMING SSR +) SELECTIVE HYDRATION

Slide 92

Slide 92 text

↝ pipeToNodeStream + createRoot + ↝ REACT PRIORITIZES HYDRATING THE PARTS THAT THE USER INTERACTED WITH BEFORE THE REST ↝ COMPONENTS CAN BECOME INTERACTIVE FASTER BY ALLOWING THE BROWSER TO DO OTHER WORK AT THE SAME TIME AS HYDRATION (STREAMING SSR +) SELECTIVE HYDRATION

Slide 93

Slide 93 text

↝ REACT WON'T WAIT FOR HUGE COMPONENTS TO LOAD TO CONTINUE STREAMING HTML FOR THE REST OF THE PAGE ↝ WHEN THE HTML BECOMES AVAILABLE ON THE SERVER, IT WILL BE ADDED TO THE SAME STREAM ALONG WITH A SCRIPT TAG AND INSERTED IN THE RIGHT PLACE (STREAMING SSR +) SELECTIVE HYDRATION

Slide 94

Slide 94 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 95

Slide 95 text

🟢 LOWER FIRST INPUT DELAY (FID) 🟢 LOWER INTERACTION TO NEXT PAINT (INP) GREAT NOT GREAT (STREAMING SSR +) SELECTIVE HYDRATION

Slide 96

Slide 96 text

↝ EVENT HANDLER CREATION HAPPENS BEFORE THE EVENT IS TRIGGERED (EAGER) ↝ ALL POSSIBLE EVENT HANDLERS ARE CREATED AND REGISTERED (SPECULATIVE) ↝ CLIENT REDOES WORK ↝ REQUIRES THE FRAMEWORK TO DOWNLOAD AND EXECUTE THE COMPONENTS TO FIGURE OUT HIERARCHY HYDRATION ↝ EVENT HANDLER CREATION HAPPENS AFTER THE EVENT IS TRIGGERED (LAZY) ↝ ONLY TRIGGERED EVENTS ARE CREATED AND REGISTERED (AS-NEEDED) ↝ CLIENT DOESN'T REDO WORK (VIA DESERIALIZATION) ↝ REQUIRES ALL THE INFORMATION TO BE SERIALIZED IN THE HTML RESUMABILITY HYDRATION VS. RESUMABILITY

Slide 97

Slide 97 text

↝ EVENT HANDLER CREATION HAPPENS BEFORE THE EVENT IS TRIGGERED (EAGER) ↝ ALL POSSIBLE EVENT HANDLERS ARE CREATED AND REGISTERED (SPECULATIVE) ↝ CLIENT REDOES WORK ↝ REQUIRES THE FRAMEWORK TO DOWNLOAD AND EXECUTE THE COMPONENTS TO FIGURE OUT HIERARCHY SELECTIVE HYDRATION ↝ EVENT HANDLER CREATION HAPPENS AFTER THE EVENT IS TRIGGERED (LAZY) ↝ ONLY TRIGGERED EVENTS ARE CREATED AND REGISTERED (AS-NEEDED) ↝ CLIENT DOESN'T REDO WORK (VIA DESERIALIZATION) ↝ REQUIRES ALL THE INFORMATION TO BE SERIALIZED IN THE HTML RESUMABILITY HYDRATION VS. RESUMABILITY

Slide 98

Slide 98 text

React Server Components HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2020 2021 2022

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

↝ AHEAD-OF-TIME REACT RENDERING (DURING THE BUILD OR ON THE SERVER) ↝ A ROUTING PARADIGM ↝ INTEGRATED WITH DATA FETCHING AND BUNDLING ↝ UNRELATED TO SSR (AND HYDRATION) REACT SERVER COMPONENTS

Slide 103

Slide 103 text

↝ ALMOST IDENTICAL TO HOW ISLANDS WORK ↝ “use client” MARKS A BOUNDARY BETWEEN TWO MODULE GRAPHS ↝ EACH COMPONENT DECIDES WHETHER TO BE A SERVER COMPONENT OR TO STICK WITH BEING A SERVER + CLIENT COMPONENT REACT SERVER COMPONENTS

Slide 104

Slide 104 text

↝ CODE FOR SERVER COMPONENTS IS NEVER DELIVERED TO THE CLIENT ↝ ACCESS TO THE BACK-END FROM THE TREE ↝ MAY BE REFETCHED WHILE MAINTAINING CLIENT- SIDE STATE INSIDE OF THE TREE REACT SERVER COMPONENTS

Slide 105

Slide 105 text

🟢 PURELY ADDITIVE 🟢 SMALLER BUNDLES 🟢 FASTER REHYDRATION (FEWER COMPONENTS ON THE CLIENT) GREAT 🟡 A LOT OF DATA TO SEND ALONG THE WIRE EVERY SERVER RE-RENDER 🟡 MUCH MORE ORCHESTRATION NEEDED 🟡 STILL EXPERIMENTAL 🟡 ONLY FEW OPTIONS FOR DEVELOPERS TO LEVERAGE RSC NOT GREAT REACT SERVER COMPONENTS

Slide 106

Slide 106 text

🟢 PURELY ADDITIVE 🟢 SMALLER BUNDLES 🟢 FASTER REHYDRATION (FEWER COMPONENTS ON THE CLIENT) GREAT 🟡 A LOT OF DATA TO SEND ALONG THE WIRE EVERY SERVER RE-RENDER 🟡 MUCH MORE ORCHESTRATION NEEDED 🟡 STILL EXPERIMENTAL 🟡 ONLY FEW OPTIONS FOR DEVELOPERS TO LEVERAGE RSC NOT GREAT REACT SERVER COMPONENTS

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 109

Slide 109 text

< ! - - Database, file, and socket access from JavaScript - - > var resultSet = Jaxer.DB.execute("SELECT * FROM myTable"); var newPrice = resultSet.rows[0].price; < ! - - Directly call server-side functions from the browser - - > function getPriceFromServer() { return 42; } Price < ! - - Share validation code on the browser and server - - > function validateCreditCard(number) {} REACT SERVER COMPONENTS (PRIOR ART)

Slide 110

Slide 110 text

< ! - - Database, file, and socket access from JavaScript - - > var resultSet = Jaxer.DB.execute("SELECT * FROM myTable"); var newPrice = resultSet.rows[0].price; < ! - - Directly call server-side functions from the browser - - > function getPriceFromServer() { return 42; } Price < ! - - Share validation code on the browser and server - - > function validateCreditCard(number) {} REACT SERVER COMPONENTS (PRIOR ART)

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

REACT SERVER COMPONENTS

Slide 116

Slide 116 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 117

Slide 117 text

The Edge HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! 1993 1998 2008 2017 2020 2021 2022

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

#definition 🧐 Edge Functions allow you to serve content from the CDN server closest to the user. — UNDERSTANDING EDGE FUNCTIONS: THE EDGE AND BEYOND

Slide 120

Slide 120 text

THE EDGE ↝ BRINGING COMPUTING CLOSER TO THE SOURCE OF THE DATA ↝ FEWER PROCESSES IN THE CLOUD ↝ MINIMIZES THE NEED FOR LONG DISTANCE COMMUNICATIONS BETWEEN CLIENT AND SERVER ↝ REDUCES LATENCY AND BANDWIDTH USAGE

Slide 121

Slide 121 text

↝ 🦾 IOT DEVICES ↝ 🔒 SECURITY SYSTEM MONITORING ↝ 🏥 MEDICAL MONITORING DEVICES ↝ 🚗 SELF-DRIVING CARS THE EDGE

Slide 122

Slide 122 text

1998 2001 2006 2012 2014 2016 AKAMAI CDN PEER-TO-PEER CLOUD COMPUTING FOG COMPUTING AWS LAMBDA JAMSTACK THE EDGE: TIMELINE

Slide 123

Slide 123 text

1998 2006 2012 2014 2016 THE EDGE: TIMELINE 2001 2017 CLOUDFLARE WORKERS

Slide 124

Slide 124 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 125

Slide 125 text

1998 2006 2012 2014 2016 THE EDGE: TIMELINE 2001 2017 CLOUDFLARE WORKERS DENO VERCEL EDGE RUNTIME NETLIFY EDGE FUNCTIONS 
 2022

Slide 126

Slide 126 text

— THE FUTURE OF THE WEB IS ON THE EDGE, BY ANDY JIANG

Slide 127

Slide 127 text

THE EDGE Location Heroku TTFB Frankfurt 339.95ms Amsterdam 382.62ms London 338.09ms New York 47.55ms Dallas 144.64ms San Francisco 302ms Singapore 944.14ms Sydney 889.85ms Tokyo 672.49ms Bangalore 984.39ms — THE FUTURE OF THE WEB IS ON THE EDGE, BY ANDY JIANG

Slide 128

Slide 128 text

THE EDGE Location Heroku TTFB Deno TTFB Frankfurt 339.95ms 28.45ms Amsterdam 382.62ms 29.72ms London 338.09ms 22.3ms New York 47.55ms 41.29ms Dallas 144.64ms 29.28ms San Francisco 302ms 44.24ms Singapore 944.14ms 528.57ms Sydney 889.85ms 26.46ms Tokyo 672.49ms 19.04ms Bangalore 984.39ms 98.23ms — THE FUTURE OF THE WEB IS ON THE EDGE, BY ANDY JIANG

Slide 129

Slide 129 text

THE EDGE

Slide 130

Slide 130 text

The Future 🔮 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 131

Slide 131 text

ROUTING (& MPAs vs. SPAs)

Slide 132

Slide 132 text

HYDRATION

Slide 133

Slide 133 text

OKB JAVASCRIPT

Slide 134

Slide 134 text

(WHY) IS THE FUTURE

Slide 135

Slide 135 text

Closing Thoughts HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 136

Slide 136 text

IT ALL SOUNDS INCREDIBLY COMPLEX! WE'RE ADDRESSING THE UNCERTAINTIES OF THE MODERN WEB WHEN IT COMES TO CONNECTION QUALITY AND CLIENT DEVICE COMPUTATIONAL CAPABILITY. #1 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 137

Slide 137 text

THE SAME PATTERN CAN BE BENEFICIAL AND DETRIMENTAL IT IS ALSO QUITE LIKELY THAT DIFFERENT TYPES OF PAGES REQUIRE DIFFERENT RENDERING PATTERNS ON THE SAME WEBSITE. #2 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 138

Slide 138 text

HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

APPLICATION HOLOTYPES Portfolio Content Storefront Social Network I m m ersive Holotype Personal Blog CNN Amazon Facebook Figma Interactivity Minimal Linked Articles Purchase Multi-Point, Real-time Everything Session Depth Shallow Shallow Shallow - Medium Extended Deep Values Simplicity Discover-ability Load Performance Dynamicism I m m ersiveness Routing Server Server, HTML Swap HTML Swap, Hybrid Hybrid, Client Client Rendering Static Static, SSR Static, SSR SSR CSR Hydration None Progressive, Partial Partial, Resumable Any None (CSR) Frameworks 11ty Astro, Elder Marko, Qwik, Hydrogen Next, Remix Create React App — PATTERNS FOR BUILDING JAVASCRIPT WEBSITES IN 2022, BY RYAN CARNIATO

Slide 141

Slide 141 text

THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM. #3 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 142

Slide 142 text

#4 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 143

Slide 143 text

IT'S EASY TO THINK WE'RE JUST GOING BACK TO RENDERING HTML ON THE SERVER BUT THESE DAYS THE BOUNDARIES ARE VERY DIFFERENT. #4 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 144

Slide 144 text

No content

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES. WHAT'S DIFFERENT NOW? #5 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 147

Slide 147 text

THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. ALWAYS TRY TO CORRELATE BUSINESS METRICS WITH PERFORMANCE. #6 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 148

Slide 148 text

THIS IS ME, NINE YEARS AGO, GIVING A TALK ABOUT IONIC AT AN IOS DEVELOPERS MEETUP TELLING THEM THAT ANGULAR WOULD BE THE FUTURE.

Slide 149

Slide 149 text

DON'T ALWAYS TRUST SPECULATIONS AND PREDICTIONS! #7 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY!

Slide 150

Slide 150 text

THAT’S ALL, FOLKS! THANKS! 👋 🇮🇨 QUESTIONS? ↑ ALL THE LINKS! 🤓 HYDRATION, ISLANDS, STREAMING, RESUMABILITY… OH MY! MATHEUS ALBUQUERQUE • @ythecombinator