The year is 2005. You're blasting a pirated mp3 of "Feel Good Inc" and chugging vanilla coke while updating your website.
Itâs just a simple change, so you log on via FTP, edit your style.css
file, hit save - and reload the page to see your changes live.
Did that story resonate with you? Well then congrats A) youâre a nerd and B) youâre old enough to remember a time before bundlers, pipelines and build processes.
Now listen, I really donât want to go back to doing live updates in production. That can get painful real fast. But I think itâs amazing when the files you see in your code editor are exactly the same files that are delivered to the browser. No compilation, no node process, no build step. Just edit, save, boom.
Thereâs something really satisfying about a buildless workflow. Brad Frost recently wrote about it in âraw-dogging websitesâ, while developing the (very groovy) site for Frostapalooza.
So, how far are we away from actually working without builds in HTML, CSS and Javascript? The idea of âbuildlessâ development isnât new - but there have been some recent improvements that might get us closer. Letâs jump in.
The obvious tradeoff for a buildless workflow is performance. We use bundlers mostly to concatenate files for fewer network requests, and to avoid long dependency chains that cause "loading waterfalls". I think it's still worth considering, but take everything here with a grain of performance salt.
HTML
Permalink to âHTMLâThe main reason for a build process in HTML is composition. We donât want to repeat the markup for things like headers, footers, etc for every single page - so we need to keep these in separate files and stitch them together later.
Oddly enough, HTML is the one where native imports are still an unsolved problem. If you want to include a chunk of HTML in another template, your options are limited:
- PHP or some other preprocessor language
- server-side includes
- frames?
There is no real standardized way to do this in just HTML, but Scott Jehl came up with this idea of using iframes and the onload
event to essentially achieve html imports:
<iframe
src="/includes/something.html"
onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"
></iframe>
Andy Bell then repackaged that technique as a neat web component. Finally Justin Fagnani took it even further with html-include-element, a web component that uses native fetch
and can also render content into the shadow DOM.
For my own buildless experiment, I built a simplified version that replaces itself with the fetched content. It can be used like this:
<html-include src="./my-local-file.html"></html-include>
That comes pretty close to actual native HTML imports, even though it now has a Javascript dependency đ˘.
Server-Side Enhancement
Permalink to âServer-Side EnhancementâRight, so using web components works, but if you want to nest elements (fetch a piece of content that itself contains a html-include
), you can run into waterfall situations again, and you might see things like layout shifts when it loads. Maybe progressive enhancement can help?
Iâm hosting my experiment on Cloudflare Pages, and they offer the ability to write a âworkerâ script (very similar to a service worker) to interact with the platform.
Itâs possible to use a HTML Rewriter in such a worker to intercept requests to the CDN and rewrite the response. So I can check if the request is for a piece of HTML and if so, look for the html-include
element in there:
// worker.js
export default {
async fetch(request, env) {
const response = await env.ASSETS.fetch(request)
const contentType = response.headers.get('Content-Type')
if (!contentType || !contentType.startsWith('text/html')) {
return response
}
const origin = new URL(request.url).origin
const rewriter = new HTMLRewriter().on(
'html-include',
new IncludeElementHandler(origin)
)
return rewriter.transform(response)
}
}
You can then define a custom handler for each html-include
element it encounters. I made one that pretty much does the same thing as the web component, but server-side: it fetches the content defined in the src
attribute and replaces the element with it.
// worker.js
class IncludeElementHandler {
constructor(origin) {
this.origin = origin
}
async element(element) {
const src = element.getAttribute('src')
if (src) {
try {
const content = await this.fetchContents(src)
if (content) {
element.before(content, { html: true })
element.remove()
}
} catch (err) {
console.error('could not replace element', err)
}
}
}
async fetchContents(src) {
const url = new URL(src, this.origin).toString()
const response = await fetch(url, {
method: 'GET',
headers: {
'user-agent': 'cloudflare'
}
})
const content = await response.text()
return content
}
}
This is a common concept known as Edge Side Includes (ESI), used to inject pieces of dynamic content into an otherwise static or cached response. By using it here, I can get the best of both worlds: a buildless setup in development with no layout shift in production.
Cloudflare Workers run at the edge, not the client. But if your site isn't hosted there - It should also be possible to use this approach in a regular service worker. When installed, the service worker could rewrite responses to stitch HTML imports into the content.
Maybe you could even cache pieces of HTML locally once they've been fetched? I don't know enough about service worker architecture to do this, but maybe someone else wants to give it a shot?
CSS
Permalink to âCSSâHistorically, weâve used CSS preprocessors or build pipelines to do a few things the language couldnât do:
- variables
- selector nesting
- vendor prefixing
- bundling (combining partial files)
Well good news: we now have native support for variables and nesting, and prefixing is not really necessary anymore in evergreen browsers (except for a few properties). That leaves us with bundling again.
CSS has had @import
support for a long time - itâs trivial to include stylesheets in other stylesheets. Itâs just ⌠really frowned upon. đ
Why? Damn performance waterfalls again. Nested levels of @import
statements in a render-blocking stylesheet give web developers the creeps, and for good reason.
But what if we had a flat structure? If you had just one level of imports, wouldnât HTTP/2 multiplexing take care of that, loading all these files in parallel?
Chris Ferdinandi ran some benchmark tests on precisely that and the numbers donât look so bad.
So maybe we could link up a main stylesheet that contains the top-level imports of smaller files, split by concern? We could even use that approach to automatically assign cascade layers to them, like so:
/* main.css */
@layer default, layout, components, utils, theme;
@import 'reset.css' layer(default);
@import 'base.css' layer(default);
@import 'layout.css' layer(layout);
@import 'components.css' layer(components);
@import 'utils.css' layer(utils);
@import 'theme.css' layer(theme);
Design Tokens
Permalink to âDesign TokensâLove your atomic styles? Instead of Tailwind, you can use something like Open Props to include a set of ready-made design tokens without a build step. Theyâll be available in all other files as CSS variables.
You can pick-and-choose what you need (just get color tokens or easing curves) or use all of them at once. Open props is available on a CDN, so you can just do this in your main stylesheet:
/* main.css */
@import 'https://unpkg.com/open-props';
Javascript
Permalink to âJavascriptâJavascript is the one where a build step usually does the most work. Stuff like:
- transpiling (converting modern ES6 to cross-browser supported ES5)
- typechecking (if youâre using TypeScript)
- compiling JSX (or other non-standard syntactic sugars)
- minification
- bundling (again)
A buildless worflow can never replace all of that. But it may not have to! Transpiling for example is not necessary anymore in modern browsers. As for bundling: ES Modules come with a built-in composition system, so any browser that understands module syntaxâŚ
<script src="/assets/js/main.js" type="module"></script>
âŚallows you to import other modules, and even lazy-load them dynamically:
// main.js
import './some/module.js'
if (document.querySelector('#app')) {
import('./app.js')
}
The newest addition to the module system are Import Maps, which essentially allow you to define a JSON object that maps dependency names to a source location. That location can be an internal path or an external CDN like unpkg.
<head>
<script type="importmap">
{
"imports": {
"preact": "https://unpkg.com/htm/preact/standalone.module.js"
}
}
</script>
</head>
Any Javascript on that page can then access these dependencies as if they were bundled with it, using the standard syntax: import { render } from 'preact'
.
Conclusion
Permalink to âConclusionâSo, can we all ditch our build tools soon?
Probably not. Iâd say for production-grade development, weâre not quite there yet. Performance tradeoffs are a big part of it, but there are lots of other small problems that youâd likely run into pretty soon once you hit a certain level of complexity.
For smaller sites or side projects though, I can imagine going the buildless route - just to see how far I can take it.
Funnily enough, many build tools advertise their superior âDeveloper Experienceâ (DX). For my money, thereâs no better DX than shipping code straight to the browser and not having to worry about some cryptic node_modules
error in between.
Iâd love to see a future where we get that simplicity back.