Islands Architecture 🏝️

How to use JavaScript

How to use JavaScript

Agenda

  • React & The Modern JavaScript ecosystem
  • The Problem
  • The Solution
React introduced two important things:
  • UI Reactivity
  • Component Driven Development
Making the UI react to states
Era of SPA
New generation of SPA friendly frameworks
  • React Router
  • Next.js
  • Gatsby
  • React Query
  • Blitz
Somehow the web got slow in the SPA age...
Let's take a look at the app built with Next.js
Tools App
Lets say on average our code has 50 characters in a line
1 kb = 20 lines (approx)
The app is 100kb => browser has executed 2000 lines of JavaScript
Let's review a JS heavy app: Google Docs
Let's review the experiment app: Localhost
What if we built the webpage with HTML?
Same app but built with HTML:
Tools
Behold! the next generation of Frontend Frameworks!
  • Astro
  • Next.js 13
  • Fresh
  • Is-land by 11ty
All of them support the new Islands Architecture
Same app but built with Astro:
Tools
Questions?
We are hiring!
hiring@oslash.com
oslash.com/careers
Thank You!
Twitter: @dani_akash_