Let's make the worst Htmx

Let's make the worst htmx ever!

This is a continuation of a series of posts about building tiny “clones” of popular web frameworks.

Web is changing rapidly, and so the tools we use to build web apps (yet, I’m sincerely happy that my React/Vue posts are now seven years old, and those frameworks are still popular and relevant).

Today the hot topic is htmx, basically a frontend library for backend developers who couldn’t care less about JavaScript. HTMX started as intercooler, then evolved and grown more features, and is there is some beauty to it:

< button hx - post = "/clicked" hx - trigger = "click" hx - target = "#parent-div" hx - swap = "outerHTML" > Click Me ! < /button>

In a declarative manner, it says: when the button is clicked, send a POST request to /clicked , and replace the outer HTML of the element with id #parent-div with the response data. HTMX wires together events, AJAX requests, and DOM updates hiding away frontend complexity. As long as your backend can send HTML templates you can go pretty far with it and build complete apps without a single line of JavaScript.

Method, trigger, target, swap

Looking at the example above, seems like our library should fetch() some URLs based on some triggers and update (swap) contents of some target elements. Something like this:

< button x - get = "/click" > Click me < /button> document . querySelectorAll ( '[x-get]' ). forEach ( el => { el . addEventListener ( 'click' , async ( e ) => { e . preventDefault (); const url = el . getAttribute ( 'x-get' ); const response = await fetch ( url ); const data = await response . text (); el . outerHTML = data ; console . log ( data ); }); });

If our backend sends “Button clicked” in response - it should work. Open a page, click the button, buttons disappears, text is shown instead. That’s HTMX in 10 lines of code.

... continue reading