Htmx users, can you please share your backend stacks and approaches? Me specifically interested in templaters for node (+ts) and your thoughts on endpoint management, but all ideas are welcome I guess.
- axum: web application framework - https://github.com/tokio-rs/axum
- axum-htmx: axum extractors, responders, guards for htmx - https://github.com/robertwayne/axum-htmx
- rusqlite: SQLite bindings - https://github.com/rusqlite/rusqlite
- maud: HTML templating as a macro - https://maud.lambda.xyz
The way maud lets you compose markup works very nicely with htmx. The HX-Request header lets you know if the request is coming from htmx or if it is a regular request. You either call the top-level function if it's a regular request to get the entire page rendered, or call a subset of functions to get the appropriate partial rendered if it's an htmx request.
It's also nice to easily have tests for the rendered pages. My unit tests cover verification of the rendered HTML, too.
> mini framework for adding some structure to the templates
Would be good to read little more about this mini-framework
After reviewing few templaters/etc (handlebars, ejs, lit-html, virtual-dom) and few abstractions (html``, just ``, h()), barely anything seems too easy and too freedom-y. Arcane syntaxes, high character noise (ejs, lit, js), lack of typing (all non-`` based), trivial screw ups (virtual-dom, handlebars), experimental status (lit ssr). Sigh.
I use PUG. I don’t like to close HTML tags. This cuts 30% of the visual bloat out of my templates.
One man's structure is another man's "bloat", I guess.
What it removes is the visual bloat of closing html tags.
So instead of:
<div id='foo' class='bar baz'>
<p>Some content</p>
</div>
<div id='foo2' class='bar2 baz2'>
<p>More content</p>
<p>Another paragraph</p>
</div>
#foo.bar.baz
p Some content
#foo2.bar2.baz2
p More content
p Another Paragraph
And it's easier to visually parse element IDs and chained classes this way too.
Most people prefer templ but I don't like logic in templates, I just want to parse values. I keep different states in different template files.
Each template file is a portion of a full page which makes it easy to create an endpoint that pulls the partial with the latest values. HTMX can then hit that endpoint to load or refresh values.
Endpoints are usually
domain/page/partial
example.com/config
example.com/config/privacy
Endpoint handlers return a processed template with the current state. I use those functions to both compose the full page on the backend, and to build the output for the partial endpoint.
I don't automatically expose all partials. I add endpoints as I need them. This is probably more idiomatically Go than anything to do with htmx.
It's basically cheating. The setup is dead-simple to operate.
Templ is great when you need to separate reusable components.
I’m interested in trying EdgeJS as a templating alternative to HB but haven’t got round to it yet.
I’ve added a NestJS error handler that looks to see if the request came from an htmx request and then serve the error response as html, if not then it sends back json since I do have json api end points as well in the back end.