Islands Architecture: A Recipe for Modern Web Performance Optimization

Slide 1

Slide 1 text

Islands Architecture Olabode Lawal-Shittabey Software Engineer, Open Source Enthusiast & Advocate @babblebey Twitter X logo PNG For Free Download GitHub - Wikipedia babblebey.dev

Slide 2

Slide 2 text

Performance @babblebey

Slide 3

Slide 3 text

JS Performance 表现 (Biǎoxiàn) Important Architectural Criteria (especially on the web) Too Much @babblebey

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

• Loaded a website and stared at a white screen (or best case a loading spinner) for a while!? • Loaded a website and an interactive component just isn’t working after multiple action!? Can you relate!? @babblebey

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

The How @babblebey

Slide 10

Slide 10 text

How we currently build on the web JS @babblebey

Slide 11

Slide 11 text

SOCIAL MEDIA APP E-COMMERCE BLOGS LANDING PAGES MARKETING SITES WEB-BASED GAMES Zero JS Plenty JS JS How much do we need? Some JS SAAS DOCS SITES @babblebey

Slide 12

Slide 12 text

Zero JS Some JS Plenty JS JS Expected vs Actual Output Same Minimum JS Expected Actual Cool !Cool @babblebey

Slide 13

Slide 13 text

How they roll JS Render Webpage Manage State Add Interactivity to Webpage Navigating/Routing A lot of JS @babblebey

Slide 14

Slide 14 text

How do we address this?????????? JS Render Webpage Manage State Add Interactivity to Webpage Navigating/Routing A lot of JS @babblebey

Slide 15

Slide 15 text

What is Islands Architecture? @babblebey

Slide 16

Slide 16 text

Katie Sylor-Miller Jason Miller Islands Architecture Header (Menu) Image Carousel (Slider) Body (Text, Images) Sidebar With JavaScript Static HTML @babblebey

Slide 17

Slide 17 text

Katie Sylor-Miller Jason Miller Islands Architecture Header (Menu) Image Carousel (Slider) Body (Text, Images) Sidebar @babblebey

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Brief History: How we built on the web @babblebey

Slide 20

Slide 20 text

Multiple Page Applications 1995 @babblebey Static Site Generation (SSG) Server-Side Rendering (SSR)

Slide 21

Slide 21 text

Multiple Page Applications Static Site Generation (SSG) Server-Side Rendering (SSR) First Meaningful Paint (FMP) Time To Interact (TTI) HTML x CSS JS Data @babblebey

Slide 22

Slide 22 text

Multiple Page Applications Faults Benefits @babblebey

Slide 23

Slide 23 text

Build Webpage Single Page Applications Fetch Data Add Interactivity and more……. Client-Side Rendering (CSR) @babblebey

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Single Page Applications Client-Side Rendering (CSR) First Meaningful Paint (FMP) HTML x CSS JS Data @babblebey

Slide 26

Slide 26 text

Single Page Applications Problems Benefits Great UX finally!!! Awesome DX @babblebey

Slide 27

Slide 27 text

Single Page Applications Problems Loading JS bundles @babblebey

Slide 28

Slide 28 text

Single Page Applications + SSR Add Interactivity to the web page and more……. @babblebey

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Single Page Applications + SSR First Meaningful Paint (FMP) Time To Interact (TTI) HTML x CSS JS Data Hydrating the web page @babblebey

Slide 31

Slide 31 text

Single Page Applications + SSR Problems Solved New Problems @babblebey

Slide 32

Slide 32 text

Single Page Applications + SSR New Problems Hydrating (applying JS to web page) Needs JS Needs JS @babblebey

Slide 33

Slide 33 text

New Hydration Approach First Second Progressive Hydration Partial Hydration Hydrate Hydrate (if needed) Islands Architecture Islands @babblebey

Slide 34

Slide 34 text

Islands Architecture

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Islands Architecture First Meaningful Paint (FMP) Time To Interact (TTI) HTML x CSS JS Data @babblebey

Slide 37

Slide 37 text

Islands Architecture First Meaningful Paint (FMP) Time To Interact (TTI) HTML x CSS JS Data @babblebey

Slide 38

Slide 38 text

Islands Architecture Frameworks Markup + Compiler @babblebey

Slide 39

Slide 39 text

Islands Architecture Frameworks JSX + islands/preact_component @babblebey

Slide 40

Slide 40 text

Islands Architecture Frameworks JSX-like + (React, Vue, Preact etc.) @babblebey Hydration Directives load, visible, only, etc.

Slide 41

Slide 41 text

Islands Architecture • Hydration done right (Only Selected Components) • Now your “Server” will not be jealous and your “client” can rest The Recipe • No Interaction, No JS! (I have proof ) @babblebey Want to explore some islands with us??? Watch the space at • Bye-bye to “its fast on my machine”, and hello to “Great stuff”

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Thank YOU Olabode Lawal-Shittabey @babblebey Twitter X logo PNG For Free Download GitHub - Wikipedia hi.new/ola See Talk Repository For More Resources: https://git.new/islands