Completely agree.

For me the biggest advantage is eliminating the need to learn, debug, and maintain components on an additional frontend framework (Angular/React/Vue).

I just built a rough toy project [0] that was my first time with FastAPI and HTMX and it was fun and fast.

[0] https://www.truebuy.com/ (like rotten tomatoes for product reviews but just for TVs right now)

It's consumer reports but faster :)

Thanks. Speed and quality content is what I've been focused on. I was tired of Google search spam and Amazon review rot so built this to try expose good/trusted/authentic content.

I love the concept, but for my case, I'd need more granular filters. In particular, I only buy TVs that have analog audio outputs so I can hook them up to any speakers. That's a minority of TVs these days, but there are still a few around. Finding the good ones would be useful to me.

I assume that converters have negative side effects?

I'm unaware of their existence. I'm guessing they're big and expensive. Or maybe hard to get?

What kind of outputs? Fiber to analog is about $15 and the size of two hockey pucks stacked.

Huh. Ok. I just didn't know that was a thing. Ok, I guess I don't need analog outputs then. Still nice to have though. Better zero pucks than two.

Hifi geeks don't trust the DAC to something inside the TV, and ... they are not wrong. Plus you can reuse the DAC even if you change the screen.

I'm not an audiophile. I just want something better than what the screen does, and I don't want to buy a soundbar or get into HDMI. And sometimes use headphones.

But still, I'm pretty sure, one day I'm going to get one of these optical -> analog boxes.

So any change in the UI means sending a request to the server, waiting for it to render, and waiting for that response with the new markup?

Yes indeed! The core aspect, however, is that your server is returning fragments of html that htmx places in the DOM extremely quickly. They have pretty good examples on their site illustrating some "modern" UI patterns.

As an example, you may have an HTML table on your page that you want to insert a new row for some reason on let's say a button click. You place some attributes that htmx understands on your button that will call for the TR HTML chunk from the server. You can imagine replacing all the rows for a paging click etc.

Again check out the example for cool stuff.

Sounds pretty slow. At least a second before the UI responds to any action?

It’s much faster than that in practice, but of course it comes down to how well your backend is written. I’ve been using HTMX lately and I can blink and miss the UI updates.

I wish I had numbers, but in my experience it’s far better than you’d expect. Basically take the length of a REST call you’d have to make anyway and add a few milliseconds for the rendering.

It seems such a waste... You're chucking all that cryptography (ssl, encrypted cookies) away only to be redone every. single. Dom change

Huh? How does HTMLx "chuck" away SSL (you meant TLS, right? I hope you're not using SSL) and encrypted cookies?

How about you try it and see?

It’s fine to use SSL interchangeably with TLS IMO. It’s still called OpenSSL.

I suppose, but it's not really that big of an effort to just use the correct term for the correct version of the technology.

The certs are generally called SSL certs, not tls certs, too.

> AWS Certificate Manager - Provision and manage SSL/TLS certificates with AWS services and connected resources

Both, I guess.

By chuck away I mean all those processor cycles to perform cryptographic verification... And then throw away the result because you have to do it on the next connect anyways

And I have written a library that does the full SSL handshake/upgrade cycle off of tcp sockets, and managed my own private CA, so I'm not a total idiot.

Isn’t that mitigated with TLS session resumption and TLS 1.3’s 0-RTT?

How is that different than all the other CSR SPAs that do a REST call on every button press as well? They do almost the same amount of work, and will also “throw away” the results.

It's not, but there are server side options (topic of op) where it's a websocket. I believe HTMx supports ws too, but gp was only talking about RESTful round-trips

> but of course it comes down to how well your backend is written

Also the latency of your connection matters.

I thought frontend devs stopped caring about bad connections years ago? ;)

HTMX is fine with showing loading icons are the like if needed, but yah, connection latency is going to have an effect.

You for sure wouldn't want to build a spreadsheet type app with htmx because of that aspect. Many other types of web apps can benefit from the simplification of the architecture, however. And like my paging example, many times you need to go to the server anyway. But sure, like anything, I wouldn't use htmx for every situation.

True BizarreByte. I love how htmx let's you easily add animation indicators on actions, because many times it's too fast due to the small chunks coming back and getting placed so quickly in the DOM

What sort of slow backends do you work with? My PHP htmx application responds in ~30ms including network transmit. Even if you’re across an ocean it’s maybe 300ms.

300ms feedback on user action is unacceptable. But I read another comment saying there can be loading indicators so in that case its fine.

Same as a javascript round trip. Can still make local-only changes if you'd like.

How well does their example work over satellite internet with 1.2sec latency? How about my cell connection when T-mobile throttles me to 64Kbps for going over my data allowance? How about my sister's cell connection, as she is on an MVNO and deprioritized sometimes to 128Kbps, sometimes to 6Mbps, and sometimes it varies within a minute between those two?

FFS, people, learn to write proper software that does everything locally!

All of the environments you describe there sound to me like they would benefit from web apps that become responsive after an initial page load of less than 100KB, followed by ~10KB round trips to the server to fetch additional data.

As opposed to the >2MB initial page loads that have become so common with heavy React SPAs in exchange for the theoretical benefits of avoiding more page loads for further interactions.

They benefit from a .exe (or a .tar.gz or a .apk) downloaded when convenient and run locally

Any app with dynamic data would still need to make some sort of HTTP request before rendering some view with that new data. I don’t really get your point.

If the data is also local, which it can be and in many cases should be, there’s no network request round trip.

My mentor always taught "Program as if it has to run on the far side of Mars."

Software that doesn't need the internet for its function shouldn't connect to the internet. Software that does need the internet should be able to operate under adverse network conditions.

The Voyager probes are 160 AU away, far past Pluto, with a roundtrip latency of 37 hours. The radio transmitter onboard is only about 10x more powerful than a cell phone. The hardware has been in the cold vacuum and hard radiation of space for four and half decades. In spite of this, NASA maintains active two-way communication with it today, and continues to receive scientific telemety data of the outer solar system.

I don't expect web devs to design for deep space, but the core functionality of a website should still work for a rural user with a spotty satellite uplink. Don't do go loading JavaScript or other resource calls until the basics are received. I still remember the days of Facebook being fully functional on a 2G cellular connection, using little or nothing more than static HTML and CSS (and that was before the magic tricks HTML5 can do).

And what kind of apps are you using? You think Amazon and whatever else doesn’t also start a rest call on basically every action, many of which are “blocking” the UX?

I built a tiny deno+htmx experiment, you can check it out at https://ssr-playground.deno.dev, it's all server-side rendered html with htmx attributes sprinkled around.

Versus the overwhelmingly common SPA counterexample where any change in the UI means sending a request to the server, waiting for it return your json response, parsing that json response, building html out of that json response, and updating the dom.

You don't need to wait for a response if you're sending data, or reorganizing data, or doing something that doesn't rely on data.

Yep. DOM manipulation can be done to server-rendered views to do that kind of thing, just fine. No SPA js framework required.

So now you've got two templates? How do you keep modifications in sync?

Personally I would use htmx and roundtrips for all sorts of modification including data (such as reorganizing two rows in a table). But you'd also do that in an SPA, right? How do you prevent desyncs there? Also for e.g. sorting you'd need a server roundtrip anyway in the (likely) case where you use something like pagination or lazy loading.

For sending data, you would just have a reply that instructs HTMX to display a success message. On an SPA you'd have the same. With both, you can interact with the page while the data is being sent.

Of course, sometimes you want purely 'cosmetic' actions, such as an "add row" button that pops open some data entry fields. For something like that you should not use htmx itself, but instead basic vanilla JS or a simple library such as https://alpinejs.dev/ which complements htmx nicely for client-side stuff.

I mean modifications to the template itself. Design changes, copy changes, etc

I go with the core idea of progressive enhancement: your front end code can improve what the server sent it rather than completely replacing it - if your style changes don’t break the semantic meaning, you don’t need to change any of your front end code.

What I typically do is render the first bit of data on the server and have the client JS use that as a <template> for changes or new records. That ensures that anything done on the client always matches without you needing to code cosmetics in multiple places but also means your pages load seconds faster than a SPA because the first view is ready to go. When the user saves the entry, you can swap what you generated with the server response a few milliseconds later.

Yes, this is how Elixir Phoenix works. The caveat is that only returns exactly what needs to be changed, so it's a small diff.

It's not suitable to everything, but it works really well. I'm not advocating switching to it right now, but it's looking very promising.

htmx glosses over the difficult part, which would be keeping track of the relationship between all these hx-post and hx-target attributes, when they're all just strings in markup. That glossing over is why you don't see any well-established backend libraries on the server integrations page. (https://htmx.org/server-examples/)

Elixir solves this in a much smarter way, because the bindings to reactive values can be validated at compile time, inside the HEEx templates. It's all located together, but you still get the diff passing behavior. (https://hexdocs.pm/phoenix_live_view/assigns-eex.html)

It’s not a difficult part if you already have a powerful web framework. We’re using Htmx with Servant which has type-safe URLs built in. For the targets, automatic name generation is fine.

I prefer the unopinionated, language agnostic simplicity of htmx, just like HTML, over more tightly bound language specific frameworks. It provides a vocabulary that will translate across backend languages and probably endure over competitor frameworks.

Can the same server side code render that fragment, regardless of whether it's part of the initial page load or a subsequent update? You need an additional route for the Ajax call, right? Just curious how this gets structured.

Yes it can. Right, your server-side routing would have those routes set-up. Naming them can get interesting :)

I haven’t used it recently but I believe it sets a header on the request when it comes from HTMX so you can change whether you send the whole page or just the fragment back.

You can also just send the whole page and use other features to select just the part that you want to update (obviously that has a cost of sending the whole page though).

Most template engines have some form of inheritance making it easy to render just the fragment or include it in a full page based on route.

HTMX has to be my favourite thing web related. I never really got React and always found it a bear to setup and use, but HTMX and server ride rendering? Easy and extremely productive for a non-frontend guy like me.

I really hope it or something like it becomes popular long term.

I just started using htmx in a new personal project. I’m pretty excited to see how it goes. I’m doing a sort of back to basics stack with PHP, simple classless css lib and htmx. So far it’s been a refreshing experience

"classless css lib" ??

Not op but classless CSS frameworks are awesome. The idea is to keep it simple and use the appropriate HTML tags where there were generally meant to go, and the framework will theme the page to improve usability and add flair. I've developed some great little sites with no classes at all!

Obviously this approach has its limits, but it works well for proof-of-concept sites or sites that don't need to be very complex or dynamic. Just a sensible font size, nicer looking form elements, etc.

Here is a list of classless CSS frameworks: https://github.com/dbohdan/classless-css

It's a CSS stylesheet you include in every page/view. You don't add any classes to your HTML and rely on the defaults of that stylesheet to style the semantic markup. If those defaults are good for your project, and you have some command of HTML elements beyond using divs and spans for everything, it saves a lot of time.

htmx only seems to make sense if you're coming from backend frameworks and you want to add some sprinkles of interactivity.