A Granular Approach
to ✨ Modern ✨ Web Design
Use the Platform™
Intrinsic Web Design
Progressive Enhancement
(or Graceful Degradation)
Go with the Grain of the Web
These are all different expressions and ways to describe what are ultimately similar intents.
“ What would happen if we stopped treating the web like a blank canvas to paint on, and instead like a material to build with? ”
—Frank Chimero, 2015
Peddlers of complex frontend frameworks & build tooling have been advertising their solutions as “modern” for the past ~15 years.
But I’m here to argue there’s nothing more “modern” (in an evergreen sense) than the granular approach to Web Design…
Starting from first principles…
Respecting the materials of the web platform…
Avoiding vendor lock-in and unnecessary build complexity…
Adhering to “vanilla” specs as much as possible, while feathering in narrowly-focused “user-land” enhancements inspired by platform dialects.
So Let’s Dive In
And explore some of these materials and dialects, (re)discovering the joys of “Granular”
frontend programming.
Who is Jared?
Who is Jared?
Glad you asked!
30 Years of Publishing on the World-Wide Web
PHP: 25 Years Ago
Objective-C: 20 Years Ago
Ruby: 15 Years Ago
ECMAScript: 10 Years Ago
Bridgetown: 5 Years Ago
Bridgetown
Ruby Web Framework
Bridgetown employs a hybrid architecture, featuring elements of both static site generation (forked from Jekyll, now rewritten to be much more powerful) and dynamic server routing (powered by Roda & Rack under the hood). It has a fully-featured frontend pipeline powered by esbuild (more on that shortly).
The Materials of the Web
HTML
CSS
JavaScript
“The Holy Trifecta”
HTTP
HTTP
(and modern flavors thereof)
The amount of progress just in the last few years for each of these materials has been staggering.
The Interop project has yielded tremendous results, and the Baseline initiative lets us feel confident adopting new technologies regularly as support becomes widespread. It’s glorious.
But let’s go a step further and look at some newly re-imagined methodologies for each of these materials…
Hypermedia (HTML)
Design Systems (CSS)
Web Components (JavaScript)
Hypermedia
Superpowered HTML
HTML-Over-The-Wire (Hotwire Turbo)
htmx
Alpine.js
Datastar
Unpoly
i-html
Triptych (future browser APIs?!)
Roll-your-own with fetch (Ajax’s Revenge!)
These tools & techniques place HTML & DOM at the forefront of the interactive experience.
State (live data) and in some cases behavior directives can live directly within markup.
“HTML fragments”, not-quite-full-page-reloads, commands, and in some cases DOM morphing are fundamental building blocks of the UX.
Just Say No to SPAs
The “SPA” way of doing things has you loading & saving JSON state via a “frontend application” that’s essentially decoupled from backend APIs. Interactivity is driven by heavy JS code bundles.
Whereas in Hypermedia, there is no fully-decoupled frontend / backend split. It is a holistic full-stack application.
Benefits of Hypermedia
It’s dramatically simpler to reason about for many categories of web apps, and the savings in performance and “frontend churn” is substantial.
Many different languages offer hypermedia-friendly full-stack frameworks—you’re not limited to just JavaScript.
And perhaps most importantly, you’re working with the grain of the web, instead of against it.
Design Systems
“ A design system is a comprehensive set of standards, documentation, and reusable components that guide the development of digital products within an organization.
It serves as a single source of truth for designers and developers, ensuring consistency and efficiency across projects. ”
—Wikipedia
Superpowered CSS
CSS Custom Properties (Variables)
for Design Tokens
Scoping in both Light DOM & Shadow DOM
Cascade Layers for organizing different
Design System functions
Nesting to make DOM structure clear
within a stylesheet
“Intrinsic” features: grid, container queries, responsive type, clamp, etc.
Pyramid Approach to Styling
From Brad Frost, well-known expert in design systems thinking:
Componentized View Architecture
Instead of a feature being scattered across “web pages” containing a bunch of nebulous HTML templates, it is now a progression. The Atomic Design Process:
“Vanilla CSS” + Design Systems = 😍
All of the features you need for clean, maintainable, future-proof CSS architecture are now built into the platform. We’ve arrived.
Need more proof?
Need more proof?
Hello Tailwind 4. 😎
Need more proof?
Hello Tailwind 4. 😎
V4 of Tailwind is a rearchitecting of the controversial framework around native CSS-based design tokens and a modular rather than viral build approach. The war is over. Vanilla won. 🎉
Web Components
Componentized View Architecture, Revisited
Most components up to and possibly even including the page template level can be defined via markup containing Custom Elements (aka Web Components).
<h2>Informational Card</h2>
<p>Here is some content in the card.</p>
<a href="...">Link to Somewhere</a>
<h2 slot="header">Informational Card</h2>
<p>Here is some content in the card.</p>
<a href="..." slot="footer">Link to Somewhere</a>
<ds-card>
<h2 slot="header">Informational Card</h2>
<p>Here is some content in the card.</p>
<a href="..." slot="footer">Link to Somewhere</a>
</ds-card>
<ds-card>
<h2 slot="header">Informational Card</h2>
<p>Here is some content in the card.</p>
<a href="..." slot="footer">Link to Somewhere</a>
</ds-card>
<!-- Shadow DOM -->
<style>
/* */
</style>
<header><slot name="header"></slot></header>
<div><slot></slot></div>
<footer><slot name="footer"></slot></footer>
<ds-card>
<template shadowrootmode="open">
<style>
/* */
</style>
<header><slot name="header"></slot></header>
<div><slot></slot></div>
<footer><slot name="footer"></slot></footer>
</template>
<h2 slot="header">Informational Card</h2>
<p>Here is some content in the card.</p>
<a href="..." slot="footer">Link to Somewhere</a>
</ds-card>
Features of Custom Elements
JavaScript is optional! Start by just replacing <div class="foo"> markup everywhere with elegantly named custom elements.
<div class="navbar"><nav>...</nav></div>
can be become <nav-bar><nav>...</nav></nav-bar>.
Styling Custom Elements in Light DOM
nav-bar {
--add-tokens-here: calc(var(--spacing) * 2);
> nav {
/* style DOM structure */
> ul {
/* and so */
> li {
/* it goes */
}
}
}
}
Adding Behavior via Web Components
class EditItem extends HTMLElement {
static {
customElements.define("edit-item", this)
}
connectedCallback() {
this.addEventListener("click", this)
}
handleEvent(event) {
if (event.type === "click") {
/* perform an action here */
}
}
}
<edit-item>
<button>Edit Item</button>
</edit-item>
Criticisms
There’s been a lot of ink spilled in this area…I would argue too much. 😅
My pitch is simple: Web Components technology is the future of the frontend. And not just the future…they’re already here and very likely in many of the applications you’re already using.
The Web is OOP
(like it or not)
HTML is a Serialized Object Graph
DOM is a Deserialized Object Graph
Custom Elements are objects in the DOM based on your custom classes
Globals Begone!
Enough with “globals”! We can write HTML that’s centered around components, write CSS that’s scoped, and organize our JavaScript inside of layered component trees. Hello encapsulation. 😎
Maintainable and sustainable frontends aren’t just a pipe dream. There’s here, they’re real, and they’re awesome.
Frontend Bundling Pipeline
(just use esbuild)
(just use esbuild)
😁
Hanami uses esbuild.
Bridgetown uses esbuild.
Rails can use esbuild.
And I recommend using Node/NPM v22 or later. (Not Yarn.)
(It’s actually gotten pretty good. Really!)
Conclusion
Vanilla Got Good 🍦
And a handful of small, focused “user-land” libraries can go a long way.
Explore the Latest Browser APIs
Try building with them first, before you reach elsewhere.
(Yes, I’m even looking at you Turbo/Stimulus fans. You’re not exempt from my scrutiny! 😄)
And in light of our present moment’s fraught politics…
Seek out frameworks, projects, and proposals which come from community-minded people championing Diversity, Equity, Inclusion, & Accessibility—not the racism & bigotry of the past.
We can all do our part to make this industry we love work better for everyone, everywhere.