🔗 MESH: I tried HTMX, then ditched it

There is a kind of exciting movement in Web dev right now. Web devs are talking about "JavaScript Fatigue", "Framework Fatigue", the "Revival of Hypermedia" and "HTML Over The Wire". In a word: we're asking ourselves why we're building HTML in JavaScript.

The figurehead for this movement is undoubtedly HTMX. It shows that much of what we do in JavaScript could instead be done declaratively, with HTML attributes. If browsers adopted these semantics natively, many websites - and even apps - wouldn't need JavaScript at all. I love this idea! Writing HTML first and adding JS on top is the way the Web should work.

At present, we write JavaScript first, and we use it to generate HTML. How did we get it so backwards? I believe the answer is pretty straightforward: SPA frameworks are a joy to use. They impose structure, enforcing conventions, ultimately making it easy to keep concerns separated in one's mind.

My big problem with HTMX, as it stands, is that it lacks that structure. Taking a look at HTMX the first time, my reaction was: "...so, declarative jQuery." I could see, as if before my very eyes, the spaghetti that inevitably grows out of a library like this. HTMX leaves it up to the developer to impose discipline on their code, however they see fit.

So, I decided to accept the challenge. I want to do modular SSR the way HTMX encourages, but I want to do it with something like an SPA framework. I want nestable components, each with their own HTML, CSS, and JS - and back-end code - sitting side by side. I want there to be one, and only one, right way to do something.

The result of this journey is MESH - modular element SSR with hydration. MESH is based on a simple principle: one component = one endpoint. This is a powerful idea - it allows us to write a HTML-first back-end in such a way that it feels like writing an SPA.

This write-up includes a lot of code snippets. I've tried to keep these minimal. If you want to follow along with more context, you can find the whole commit history for MESH on GitHub.