📝 CSS-Tricks 272: Jams

View this newsletter on the web.

[Robin]: Jamstack Conf 2021 wrapped earlier this week and I’m slowly catching up on the videos from the event. There’s lots of good stuff in there, so make sure to bookmark that for later, but here are some quick notes from what I’ve watched so far.

I enjoyed watching Zach Leatherman’s talk about The State of Eleventy in 2021 and everything that’s new and fancy, particularly the very first Eleventy 1.0 beta release. I also really enjoyed Matthew Phillips walkthrough of Astro, which we’ve written excitedly about over the past few months.

An interesting slide that caught my eye was this one though:

This is taken from a blog post by Jason Miller called “Islands Architecture” where he writes:

The general idea of an “Islands” architecture is deceptively simple: render HTML pages on the server, and inject placeholders or slots around highly dynamic regions. These placeholders/slots contain the server-rendered HTML output from their corresponding widget. They denote regions that can then be “hydrated” on the client into small self-contained widgets, reusing their server-rendered initial HTML.

Thinking about these different sections as apps feels buck wild but also correct to me? I love that with Astro you can create these islands of server-rendered HTML and then other, separate islands in the UI that are partially hydrated with JavaScript.

Perhaps my favorite talk so far is Rich Harris talking about Transitional Apps. First up, he explains how there’s a big argument going on right now between multi-page apps—typically a server-rendered website but one that struggles when it comes to adding stateful or JavaScript-sprinkled interactivity on top of it—and single-page apps—enormous behemoths created all on the front-end where we hurl megabytes of inaccessible JavaScript at our readers and forget about the markup altogether (these are the caricatures that we have of these approaches, at least).

Rich makes a list of the pros and cons…

…and then bemoans the current state of the web:

If the best front-end engineers in the world can’t make text and images work without 5mb of JavaScript, perhaps we should give up on the web platform.

Oof. And as Rich argues in his talk, we can dunk on each other all day long and yet it’s hard to argue that there aren’t benefits and problems with each approach. Instead, we should focus on the middle ground between these approaches rather than create all these caricatures and flame wars.

That’s where this “Transitional App” stuff comes into play. The idea here is that we don’t have to pick sides but instead we should build websites with the advantages of Multi-Page apps and Single-Page apps together. Rich explains how by digging into the tooling that’s coming down the pipeline to make that easier, including his own work on Svelte which incorporates some of these ideas, too.

Anyway, all this is super interesting stuff and Jamstack Conf reminds me that we’re in a real exciting time when it comes to static site generators, sure, but most importantly I think it’s an exciting time because folks are reimagining how they build websites from the ground up. We’re reimagining what websites even are to begin with. And that’s just neat.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s