Mesh: I tried Htmx, then ditched it
3 hours ago
- #HTMX
- #Web Development
- #Modular SSR
- The author discusses the current trend in web development towards reducing JavaScript usage, favoring HTML attributes for interactivity, with HTMX being a prominent example.
- Despite appreciating HTMX's approach, the author criticizes its lack of structure, comparing it to 'declarative jQuery' and foreseeing potential for spaghetti code.
- To address HTMX's shortcomings, the author developed MESH (Modular Element SSR with Hydration), aiming for a structured, component-based approach where each component corresponds to a single endpoint.
- MESH integrates server-side rendering with hydration, using Web Components and Declarative Shadow DOM (DSD), though it encounters challenges with HTMX's limitations regarding shadow DOM boundaries.
- The author explores solutions for component communication and updates, including 'out of band' (OOB) swaps and server-sent events (SSE) for real-time collaboration, eventually simplifying the approach by removing HTMX entirely.
- The final implementation relies on custom elements for modular SSR and a minimal JavaScript setup for handling forms and SSE, leading to a cleaner and more maintainable codebase.
- The author concludes that while HTMX is suitable for certain projects, MESH offers a more structured and back-end-agnostic approach to modular SSR, aligning with principles seen in frameworks like HotWire and LiveView.