Building a Simple Web App Part 2 of N : htmx

After spending some time trying to get React and Django templates to play nice together I came across htmx and decided to give it a try. Its not as well known as some other approaches but its popular enough to meet my goal of Ubiquity. There’s plenty of good info out on the web already about htmx that I won’t try to duplicate here but I did want to say a bit about what I liked most about it and how I’ve been using it so far. I still have a lot to learn!

I’ll start by saying I am not a zealot or anything about HATEOAS and I don’t have strong opinions about the right way to use hypermedia etc. I just wanted a nice way to do interactivity in my web app that didn’t require a lot of machinery and worked well with Django’s template system.

I found this statement on the htmx site pretty aligned with my values:

htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react

Its just a single small include that gives you a lot of power and there are no external dependencies.

A lot of JS frameworks now include a lot of code in the front end to render and update the UX generally based on JSON data that is fetched from the server. Htmx’s approach is just to always stay in HTML-land. Rather than an action resulting in pulling some JSON which gets converted into DOM objects, actions typically pull more HTML from the server and htmx injects this into the DOM wherever you tell it. This means the back end is just always serving html (which Django is very good at) and the front end doesn’t include tons of complexity which means fewer dependencies and an overall simpler result.

Without getting into all the details (which are better explained in the docs) you simply add markup to almost any HTML element as in this example from them.

<button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
</button>

When you click this button a POST request will be made to the url “/clicked” and the result will swap out with the button replacing its outerHTML.

I end up structuring my Django templates as pages or “inserts” which are the stuff that usually gets rendered in response to actions by the users. This ends up with me making a lot of use of the %include directive in Django templates but so far its been a nice way to organize the UX.

htmx means you don’t have to use but you still can and I do in some instances, but htmx also has a companion scripting language called _hyperscript which is easy to use and includes a lot of nice idioms which work will with htmx. You don’t have to use it but it does make things pretty and readable. You can add _hyperscript code to any element via the _ param.

_="on click show #add_comment"

_hyperscript is bigger than htmx (about 2x afaict) but for me its felt worth it.

I don’t use npm or any web packaging system yet. I am currently using bootstrap for CSS so I do have a total of 3 Js files that I include but it seems not so bad for where I am in development. I know there’s all kinds of fancy newer CSS frameworks around but so far I haven’t found one which won’t set me down the path of having a full JS build pipeline and right now I like not having one.