A presentation at EdinburghJS in in Edinburgh, UK by Joseph Shambrook
Astro Islands Beyond Framework Borders Joseph Shambrook josephshambrook.dev
Hello! I’m Joe 👋 Senior Developer at KFC 🍗
What’s coming up • 🏝 What are Islands? • 🚀 What is Astro? • 😬 Demo • 👉 Caveats and follow up • 🙋 Q&A
The amount of JavaScript loaded per website has been increasing steadily every year
Mean amount of JS bytes distributed on webpages 600 500 400 300 2019 2020 Desktop 2021 2022 Mobile Figures provided by annual Web Almanac Report
Why is this a bad thing?
• Increased page loading times for downloading and parsing • Blocks rendering of other page content • Higher resource usage
CSR CSR SSG SSR ISR
Client-side rendering Bad (except in a few cases)
Server-side rendering 1 2 3 Page renders pre-built HTML Browser downloads JavaScript and executes React Page is “hydrated” and now interactive
! JavaScript “bad”
We as developers need to write and distribute JavaScript responsibly
A principle of f only shipping JavaScript for speci ic components of a webpage
Islands do not depend on each other, but they can share state Custom Events are cool too #UseThePlatform
Only the islands are hydrated, rather than the whole page
Hydrate the whole app ( ) Hydrate bits as needed ( 🏝 )
This lexibility also means f You can load islands dynamically according to requirements
Load this island when the page loads Load this island when we scroll here
Cool 👍
How can I use islands?
Time to introduce Astro
What is Astro? 🚀 • A web framework for creating content-rich websites • Performance at its core • Support for your favourite styling strategies • Huge focus on developer experience
f Astro is server- irst
Astro ships zero JS by default
Use different UI frameworks at the same time
Astro allows you to hydrate islands when needed using “client directives”
<Carousel <Carousel client:load <Carousel client:idle <Carousel client:visible
/
/
/ /
/ <Carousel client:media=”(min-width: 20em)”
<Carousel <Carousel client:load <Carousel client:idle <Carousel client:visible
/
/
/ /
/ <Carousel client:media=”(min-width: 20em)”
<Carousel <Carousel client:load <Carousel client:idle <Carousel client:visible
/
/
/ /
/ <Carousel client:media=”(min-width: 20em)”
<Carousel <Carousel client:load <Carousel client:idle <Carousel client:visible
/
/
/ /
/ <Carousel client:media=”(min-width: 20em)”
<Carousel <Carousel client:load <Carousel client:idle <Carousel client:visible
/
/
/ /
/ <Carousel client:media=”(min-width: 20em)”
Demo 😬
In sum
! JavaScript “bad”
What about React Server Components?
Thank you! Questions welcome! But not too many please
Resources • patterns.dev: Documentation on rendering patterns like CSR and SSR • Astro’s own explanation of islands • Deno’s great introduction to islands • My demo on GitHub • Web Almanac’s 2022 state of the web report
An introduction to the Islands architecture, largely pioneered by the web framework Astro.
for free. You
can too.