This post is part of a series comparing different ways to implement asynchronous requests on the client to augment the latter. So far, I described the

Augmenting the client with HTMX

submited by

Style Pass

2024-10-07 13:00:02

This post is part of a series comparing different ways to implement asynchronous requests on the client to augment the latter. So far, I described the process with Vue.js and Alpine.js. Both are similar from the developers' point of view: they involve JavaScript.

HTMX implements a radical approach that is different from traditional AJAX frameworks. They force you to develop an HTTP API that accepts and returns JSON. With HTMX, you return HTML fragments instead. HTMX uses it to replace the DOM elements that you configured. Hence, you need to write neither JavaScript nor deal with JSON and serialization of entities.

HTMX nicely complements Thymeleaf because both work with page fragments. We can align Thymeleaf’s fragments to HTMX’s responses. It requires thinking ahead, which differs from the previous AJAX/API/JSON standard, but it’s worth it.

I’ll split the HTML page into these fragments. Because we render them via Thymeleaf, we can split each into their dedicated file for a cleaner separation. At initial load time, we use Thymeleaf’s replace directive; we use HTMX for asynchronous client-side interactions.