Islands Architecture: A Recipe for Modern Web Performance Optimization

Islands Architecture is a paradigm shift in web development that offers a fresh approach to building highly performant web applications. By breaking down monolithic applications into smaller, self-contained "islands", so developers can achieve better web performance. In this talk, we explore the principles behind Islands Architecture (imperatively the why and its relation to JavaScript and web development), its benefits and how it can be implemented in real-world projects.

Transcript

1. Islands Architecture Olabode Lawal-Shittabey Software Engineer, Open Source Enthusiast & Advocate @babblebey Twitter X logo PNG For Free Download GitHub - Wikipedia babblebey.dev
2. Performance @babblebey
3. JS Performance 表现 (Biǎoxiàn) Important Architectural Criteria (especially on the web) Too Much @babblebey
6. • 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
9. The How @babblebey
10. How we currently build on the web JS @babblebey
11. 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
12. Zero JS Some JS Plenty JS JS Expected vs Actual Output Same Minimum JS Expected Actual Cool !Cool @babblebey
13. How they roll JS Render Webpage Manage State Add Interactivity to Webpage Navigating/Routing A lot of JS @babblebey
14. How do we address this?????????? JS Render Webpage Manage State Add Interactivity to Webpage Navigating/Routing A lot of JS @babblebey
15. What is Islands Architecture? @babblebey
16. Katie Sylor-Miller Jason Miller Islands Architecture Header (Menu) Image Carousel (Slider) Body (Text, Images) Sidebar With JavaScript Static HTML @babblebey
17. Katie Sylor-Miller Jason Miller Islands Architecture Header (Menu) Image Carousel (Slider) Body (Text, Images) Sidebar @babblebey
19. Brief History: How we built on the web @babblebey
20. Multiple Page Applications 1995 @babblebey Static Site Generation (SSG) Server-Side Rendering (SSR)
21. 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
22. Multiple Page Applications Faults Benefits @babblebey
23. Build Webpage Single Page Applications Fetch Data Add Interactivity and more……. Client-Side Rendering (CSR) @babblebey
25. Single Page Applications Client-Side Rendering (CSR) First Meaningful Paint (FMP) HTML x CSS JS Data @babblebey
26. Single Page Applications Problems Benefits Great UX finally!!! Awesome DX @babblebey
27. Single Page Applications Problems Loading JS bundles @babblebey
28. Single Page Applications + SSR Add Interactivity to the web page and more……. @babblebey
30. Single Page Applications + SSR First Meaningful Paint (FMP) Time To Interact (TTI) HTML x CSS JS Data Hydrating the web page @babblebey
31. Single Page Applications + SSR Problems Solved New Problems @babblebey
32. Single Page Applications + SSR New Problems Hydrating (applying JS to web page) Needs JS Needs JS @babblebey
33. New Hydration Approach First Second Progressive Hydration Partial Hydration Hydrate Hydrate (if needed) Islands Architecture Islands @babblebey
34. Islands Architecture
36. Islands Architecture First Meaningful Paint (FMP) Time To Interact (TTI) HTML x CSS JS Data @babblebey
37. Islands Architecture First Meaningful Paint (FMP) Time To Interact (TTI) HTML x CSS JS Data @babblebey
38. Islands Architecture Frameworks Markup + Compiler @babblebey
39. Islands Architecture Frameworks JSX + islands/preact_component @babblebey
40. Islands Architecture Frameworks JSX-like + (React, Vue, Preact etc.) @babblebey Hydration Directives load, visible, only, etc.
41. 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”
43. 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