https://htmx.org - server interactions in HTML
https://alpinejs.dev - small front end tweaks in your HTML
https://tailwindcss.com - styling in your HTML
This is pretty a simple stack that keeps everything in one file (for something I am calling Locality of Behavior[1]) and all of them are dependency free.
full disclosure: I am the author of htmx
If I see this:
<button hx-get="/clicked">Click Me</button>
My immediate question is
* What actually executes when I click the button?
* How can I debug the code that sends the GET request?
* How can I customize the GET request and add stuff like custom headers?
In the jQuery example all of that is obvious on first glance.
I feel like complexity can't be destroyed, only moved around.
There is an hx-headers attribute to modify headers, or you can plug into the events system if need be.
htmx is extending HTML as a hypermedia and, therefore, is a very different model than most javascript-based apps today.
I am not sure if complexity can be destroyed (I'd need to have a solid definition of complexity to discuss that) but it can certainly be managed in different ways, some of which are more effective than others for certain problems. We don't do web programming in assembly for a reason.
Not to be "that" guy but what you're describing is a .vue file. And with a Vue single file component you have 1 dependency: Vue. With HAT you have 3. Or am I missing something?
Do you have a starter template with all of these hooked together? Or an example repo?