Dec 16, 2022
First Developer Experience With htmx
A few days ago, I tried to build a web form with Enhance.dev and
ran into enough road blocks that I gave up. Soon after, I came across
My first impression was from reading the docs. I was so impressed by how clearly they were written
that I read most of them in one sitting on my phone. They were easy to read, and answered my questions
as I had them.
Aside from the docs, I also thought the idea was especially elegant.
htmx expects the server
to usually send HTML, even when responding to AJAX requests. One of the typical problems with
replacing HTML on the client is that you lose JS event listeners attached to those DOM nodes.
htmx, all interactivity is modeled as HTML attributes, so when HTML is replaced, as
long as those attributes are present, you don't have to reattach listeners!
So anyway, after reading the docs, I attempted to build my web form with it, and was generally happy with wiring things up. But I've run into three crucial issues:
Swapping multiple pieces of content
Updating a part of the page that isn't close to the "trigger" is a bit wonky. An example page shows a few techniques for accomplishing this, but they feel like workarounds to the mental model. Considering this is a pretty basic use case, it makes me wonder if htmx isn't a good fit for what I'm building.
I want my web form to add a
disabledattribute somewhere while a request is in flight. Although there is a way to show/hide elements using
hx-request, I don't see a way to add/remove HTML attributes. There may be a way to do this with the provided events, that I haven't looked into yet.
My project is just
api/directory with some Serverless Functions that are deployed on Vercel. I'm using
vercel devas my development server. Because htmx expects HTML snippets in response to update DOM after requests, I have to duplicate my HTML in
api/foo.mjsas template strings, and keep them in sync with
index.html. This feels a bit annoying, and the only workaround I can think of is to add a build system with a templating library.
I spent a lot more time with
htmx than I did with
Enhance, so this isn't really a
comparison post (although I did attempt to build the same thing with each). Mostly this experience
makes me want to use a "full featured" framework so I can just write my UI and business logic and
be done, but I'm also enjoying experimenting.