Who Needs Islands Architecture?

#82・
1.31K

subscribers

83

issues

Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that Mastering JS Weekly will receive your email address.

Who Needs Islands Architecture?
By Mastering JS Weekly • Issue #82 • View online
Jason Miller (author of Preact) published a great article in 2020 about “Islands Architecture”, an alternative design pattern to single page apps and classic web apps. The idea is that, instead of rendering the full page as a single app, you have a statically rendered page with parts of the page as independent apps.

An example from the Islands Architecture blog post
An example from the Islands Architecture blog post
This architecture isn’t an entirely new concept. Angular 1 devs remember the good old days of ngController, which was similar: write HTML, attach an `ng-controller` directive to bind part of the HTML to an Angular controller.
ngController was largely forgotten in the single page app boom of 2014-2015, but it seems like the pendulum is swinging back in the other direction, and developers are looking for patterns to help with cases where single page apps don’t make sense.
Single Page Apps and SEO
The topic of whether Google can accurately crawl single page apps is hotly debated. I won’t get into that debate, because I simply don’t know. What I can tell you is that most modern web frameworks are simply too heavy for SEO-focused pages.
Maybe a bit extreme, but just trying to make a point
Maybe a bit extreme, but just trying to make a point
For example, some estimates put Angular 2 and RxJS at 143kb gzipped and 766kb unzipped. Compare that to a recent Mastering JS tutorial, which loads 25kb of ad-serving JavaScript and nothing else. Given Google’s new focus on web vitals, ranking is much harder if you’re relying on Angular to render your content. Even if Google can crawl the data, you’ll have a tough time ranking.
Or you can just try to pretend your page doesn't use Angular or React
Or you can just try to pretend your page doesn't use Angular or React
Islands architecture presents a solution to this issue. Render static HTML for SEO-centric pages, especially the core content of the page. Add extra functionality via isolated apps to the pages that need it.
A Practical Example
For example, we’re iterating on a client’s marketing site. Not a terribly sophisticated project - we pushed them to swap out their extremely heavy Webflow-based site for something fully static, zero JS.
But now they want to add some basic ecommerce integration. One that integrates with their existing site, so you can see your cart from the marketing site. So we’re adding a separate vanilla JS file that populates cart info for the navbar. And adding separate Vue apps for checkout, for managing your cart, and for adding to cart from product pages.
Most Recent Tutorials
How to Fix "Buffering timed out after 10000ms" Error in Mongoose - Mastering JS
Vue v-if and v-else - Mastering JS
Vue v-else-if - Mastering JS
How to Check if a Date is Between Two Dates in JavaScript - Mastering JS
What We're Reading
How we think about browsers | The GitHub Blog
GitHub - mongoosejs/sample-apps: Official sample apps for Mongoose
Blogged Answers: How I Estimate NPM Package Market Share (and how Redux usage compares to other libraries) · Mark's Dev Blog
Did you enjoy this issue?
Mastering JS Weekly

Pragmatic web development. No bloatware allowed!

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue