Leiden python meetup: HTMX - Jan Murre¶

Tags: pun, python, django

(One of my summaries of the fifth Python meetup in Leiden, NL).

The person who invented htmx (Carson Gross) always begins with hypermedia. Hypermedia is a media that includes non-linear branching from one location in the media to another, via hyperlinks. HTML is hypermedia, the world’s most succesful hypertext.

Another important term: HATEOAS, hypermedia as the engine of application state. With hypermedia, state is on the server. So not in a javascript frontend. With traditional single page apps that you see nowadays, you only read some json and the frontend needs to know what to do with it. Lots of logic is on the client. And you get “javascript fatigue”.

With hypermedia, you have server-side rendering. Minimal javascript. Progressive enhancement. SEO friendly. And… accessible by default. The content you get includes the behaviour (like a link to delete an item).

HTMX extends HTML with modern interactivity using simple attributes. You can target specific elements on your page for an update, so you don’t need to get a full page refresh. And you can use any http verb (get/post/put/delete/patch). And you’re not limited to forms and links: any element can trigger a request.

Some attribute examples:

• hx-get issues a GET request to the server when you click on the element.

• hx-post, same with POST.

• hx-target, what you get back from your get/post, where do you want to place it?

• hx-swap: just replace part of the page.

• hx-trigger: when to do the request. Based on a click or based on a timer, for instance.

An advantage of HTMX is maintainability. Complexity is way lower than a single page app. Familiar patterns and regular server-side logic. Much simpler. Accessible (provided you put in some effort).

He showed a nice example with a generated list, a search field and a form. Nice: extra validation on one of the form fields via a hx-post and a hx-trigger="on-blur".

Nice trick for hx-target: you can give it the value of "closest .some-css-class", then it finds the closes enclosing element with that class.

Other niceties: hx-indicator enables a spinner upon a POST and disables it once the POST succeeds. <div hx-boost="true"> around your content tells HTMX to replace your whole page’s content with the new page, the result is the same as normally, only without the temporary flicker when loading the page.

HTMX is great for:

• CRUD applications.

• Content-heavy sites.

• Forms and validation.

• Server-side rendered apps.

• Progressive enhancement.

• Moderate interactivity.

You can read a book about HTMX here: https://hypermedia.systems/

In response to a question: the author considers htmx to be complete and finished. What works now should work in 20 years. So it will rarely change (unlike something like react that changes all the time).