Mesh: A Declarative Approach to Modular SSR

As a web developer, I've been following the exciting movement around "JavaScript Fatigue" and the "Revival of Hypermedia". One figurehead of this movement is undoubtedly HTMX. In this article, I'll share my journey with Htmx, from its initial introduction to creating a new framework called Mesh.

HTMX has been making waves in the web development community, offering a declarative approach to JavaScript-heavy applications. However, as I delved deeper into its capabilities, I realized that it lacked the structure and conventions of traditional Single-Page Application (SPA) frameworks. In this article, I'll explore my experience with HTMX and how it led me to create Mesh, a modular element Server-Side Rendering (SSR) framework.

When I first encountered HTMX, I was excited by its promise of declarative development. However, as I began experimenting with it, I felt overwhelmed by the lack of structure and discipline in the codebase. It seemed like a spaghetti mess, and I struggled to find a way to impose order on my project.

Undeterred, I decided to accept the challenge and create my own framework based on HTMX's principles. I wanted to combine the benefits of modular SSR with the declarative approach offered by HTMX. This led me to develop MESH, a framework that focuses on "one component = one endpoint".

MESH is built around a simple yet powerful principle: each component should have its own endpoint. This allows developers to write HTML-first code and add JavaScript later, which I believe is the ideal way to build web applications.

To demonstrate the capabilities of MESH, I created a simple editable card component using custom elements. I then used HTMX's out-of-band (OOB) swap feature to update the component without replacing the entire parent element.

handleCardUpdate(requestContext, response) {
  // Update card content
}

handleColumnUpdate(requestContext, response) {
  // Update column layout
}

I also implemented drag-and-drop functionality for the cards using HTMX's ajax JS API.

handleServerUpdate(requestContext, response) { broadcast(requestContext, response); }

After experimenting with HTMX and creating Mesh, I realized that while Htmx is a powerful tool, it wasn't the right fit for my needs. MESH offers a more structured approach to modular SSR, which aligns better with my vision for building web applications.

I'm excited to share Mesh with the community and continue developing it as a framework for building scalable and maintainable web applications. If you're interested in learning more about Mesh, I invite you to check out its GitHub repository and try it out on your own projects!