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

Astro Islands Beyond Framework Borders Joseph Shambrook josephshambrook.dev