Fun with HTMX
At the Berlin Rust Hack and Learn, we have a little ongoing project dubbed the Summer of Rust Web Frameworks. The idea is to code up the same little web project lots of different ways to compare them.
I decided to give it a try with HTMX, a JavaScript library that allows adding interactivity without writing any JavaScript. This doesn't have anything to do with Rust; you can use HTMX with any backend. I learned much of what I know about it from the AHA Stack, which uses Astro as the backend.
Astro is a JavaScript framework that handles both routing and templating. In Rust, I chose axum for routing and experimented with several different templating solutions. I coded up the little example with four different Rust templating systems. In the end, I chose askama, but part of me wants to go back and do it all again with maud.
I also chose sqlx to read the database, but that hardly matters since all I did was read in the entire thing one time. That is, I didn't really learn much about sqlx from this exercise.
So, I created halres-axum-sqlx-askama, which is halres ("Hack And Learn RESources", I think) with axum, sqlx, and askama. There are several versions there.
-
with_tabulator, which uses tabulator.js to basically do the whole project.
-
without_js, which does the whole thing "web 1.0" style, without any JavaScript at all. Each request generates a whole new page of HTML.
-
with_htmx, which uses HTMX to replace just parts of the HTML page after the initial load.
I think this is a spectrum, with HTMX in the middle: do everything with JavaScript (tabulator); do a little with JavaScript (HTMX); do nothing with JavaScript.
The HTMX version could be further broken down into two versions. HTMX adds all sorts of capabilities just by adding hx- attributes to your HTML. With some care, you can arrange for the HTMX version to degrade gracefully into a still functioning "web 1.0" application in the event that JavaScript is unavailable. Ironically, this might involve more JavaScript to hide HTML elements like "submit" buttons that HTMX doesn't need. (The second A in AHA stands for Alpine.js, which serves this purpose.)
This halres project isn't complex enough to really explore these two HTMX approaches (going hog wild with HTMX features versus assuring everything degrades gracefully). The only partial update we're doing is "the whole table" rather than "the whole web page." I'm guessing that with more numerous or more complicated partial updates, it might start to become cumbersome to worry about degrading gracefully. I think this is worth exploring.
