How I use HTMX with Go

I've been learning about React, Vue, and HTMX these days. As I understand, these tools aim to bring some level of interaction in a web application:

- Both React and Vue are all about reactivity: you have a variable, make it reactive by using something like ref() or useEffect(), and the framework will patch the DOM whenever that reactive variable changes. The idea is easy to understand but hard to implement. I agree with this podcast [1], where the author mentions that writing good React code is hard. I like Vue, but it is a bit overwhelming since it has many functions for creating reactive variables, like ref(), refs(), isRef(), unRef(), reactive(), toRefs(), computed(), etc [2].

- HTMX follows a similar idea: patching the DOM when an event occurs. Unlike React and Vue, HTMX does not rely on reactivity. Instead, it uses attributes like hx-get for requesting HTML fragments to the backend, patching the UI using those fragments. No watchers, no reactivity, just plain requests. This is (to some extend) suitable for dashboards, pagination, sorting tables, autocompletion. But if your application requires a higher level of interactivity, then React and Vue are a better option [2].

Then we have LiveView and Elixir, which I think is a better alternative/trade-off to these three tools:

- Similarly to React and Vue, LiveView has reactive variables (called assigns, you can think of it as a hashmap that holds the state of your application): every time the assigns changes, LiveView reloads the corresponding HTML fragment. This operation is efficient because LiveView knows which parts of the HTML fragment are static and which parts are dynamic. So when some variable changes, LiveView sends a tiny payload to the UI for updating the DOM.

- Also, LiveView follows an arguably simpler approach for reactivity, you only need to implement three functions: mount() to setup the initial state of the assigns, render() to prepare the HTML content, and handle_event() to handle events like button clicks or form submissions.

I think LiveView is so much easier to follow: if the assigns change, then the framework will update all the relevant HTML fragments. That's it. Also, we do not need to worry about adding third-party libraries for routing, state management, forms. Those are likely included in Phoenix.

[1] https://www.youtube.com/live/pMwTR2KeuaU?si=AU7sqxVwTv4lRhV6...

[2] https://youtu.be/k1TrnzZaygo?si=kCpMvOgB0Egk5mDg&t=380

The same server that's responsible for sanitizing garbage JS out of user content is also responsible for sending the Content-Security headers. Why would you trust it with one, but not the other? If it's buggy garbage it will also send the wrong headers.

This is a pretty good argument in the case of software written by a small team of experienced engineers. In that scenario, if the engineers don't have the nous to avoid the kinds of HTML injection vulnerabilities that might allow an attacker to inject their own JS code, then, as you say, they are probably also making lots of other mistakes.

A CSP is more valuable in a larger organization, where the codebase is always at risk of being modified by the organization's worst engineer.

yeah with tools like HTMX - your environment shapes you.

if your teams is less than 3 people - you've less politics to fight. & chances are people are already capable - no resume padding. so you choose what's pragmatic & that choice ends up being HTMX.

for big teams - politics takes over. even though HTMX will be beneficial - might as well go with the 'safer' political choice which doesn't cause much contention ie one of the big JS frameworks.

Just curious: the people behind HTMX have a frontend sibling project called Hyperscript, which handles stuff like frontend state: https://hyperscript.org/docs/reactivity/

Did you give it a try?