Slide 1

Astro Islands Beyond Framework Borders Joseph Shambrook josephshambrook.dev

Slide 2

Hello! I’m Joe 👋 Senior Developer at KFC 🍗

Slide 3

What’s coming up • 🏝 What are Islands? • 🚀 What is Astro? • 😬 Demo • 👉 Caveats and follow up • 🙋 Q&A

Slide 4

Slide 5

The amount of JavaScript loaded per website has been increasing steadily every year

Slide 6

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

Slide 7

Why is this a bad thing?

Slide 8

• Increased page loading times for downloading and parsing • Blocks rendering of other page content • Higher resource usage

Slide 9

Slide 10

CSR CSR SSG SSR ISR

Slide 11

Client-side rendering Bad (except in a few cases)

Slide 12

Server-side rendering 1 2 3 Page renders pre-built HTML Browser downloads JavaScript and executes React Page is “hydrated” and now interactive

Slide 13

Slide 14

Slide 15

=

! JavaScript “bad”

Slide 16

We as developers need to write and distribute JavaScript responsibly

Slide 17

Slide 18

A principle of f only shipping JavaScript for speci ic components of a webpage

Slide 19

Slide 20

Slide 21

Slide 22

Islands do not depend on each other, but they can share state Custom Events are cool too #UseThePlatform

Slide 23

Only the islands are hydrated, rather than the whole page

Slide 24

Hydrate the whole app ( ) Hydrate bits as needed ( 🏝 )

Slide 25

This lexibility also means f You can load islands dynamically according to requirements

Slide 26

Slide 27

Load this island when the page loads Load this island when we scroll here

Slide 28

Cool 👍

Slide 29

How can I use islands?

Slide 30

Time to introduce Astro

Slide 31

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

Slide 32

f Astro is server- irst

Slide 33

Astro ships zero JS by default

Slide 34

Use different UI frameworks at the same time

Slide 35

Astro allows you to hydrate islands when needed using “client directives”