Less Htmx Is More

It is amazing how quickly a simple, traditional, "collection of pages" type website actually works if you don't do annoying things to slow it down. Most websites would be absolutely fine if a) HTTP was used reasonably well to set things like cache headers, and so (as mentioned in the article) and b) if a load of user-irrelevant stuff like tracking and advertising code wasn't thrown in as well. A simple page with standard HTML, passably optimised assets where needed, and only the JS needed for actual functionality, should be almost instant on most modern connections.

&gt; Like any new tool, especially a tool that got popular as quickly as htmx, there are differing schools of thought on how best to use it. My approach—which I believe necessary to achieve the results described above—requires you to internalize something that htmx certainly hints at, but doesn’t enforce: use plain HTML wherever possible.<p>That’s the path for ultimate long term functional web pages!

There are two sides to the argument which I think should be treated separately: a) Is it a good idea overall? and b) is htmx implementation good enough?<p>a) I think so, yes. I&#x27;ve seen much more spa that have a completely broken page navigation. This approach does not fit all use cases, but if you remember that the whole idea of htmx is that you rely on webserver giving you page updates as opposed to having a thick js app rendering it all the way it makes sense. And yes, js libraries should be wrapped to function properly in many cases, but you would do the same with no react-native components in any react app for example<p>b) I don&#x27;t think so. htmx boost functionality is an afterthought and it will always be like this. Compare it with turbo [1] where this is a core feature and the approach is to use turbo together with stimulus.js which gives you automagical component life cycle management. Turbo still has it&#x27;s pains (my favorite gh issue [2]), but otherwise it works fine<p>[1]: <a href="https:&#x2F;&#x2F;turbo.hotwired.dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;turbo.hotwired.dev&#x2F;</a> [2]: <a href="https:&#x2F;&#x2F;github.com&#x2F;hotwired&#x2F;turbo&#x2F;issues&#x2F;37">https:&#x2F;&#x2F;github.com&#x2F;hotwired&#x2F;turbo&#x2F;issues&#x2F;37</a>

&gt; Updates that users would not expect to see on a refresh (or a new page load)<p>I always hated this idea. As a user, a refresh indicates that something is happening and it&#x27;s abundantly clear when something is wrong. People don&#x27;t always handle errors and in all fairness they shouldn&#x27;t - a developer has no way of knowing what custom stuff I have on my browser, whether I&#x27;m using any blockers or pi-holes or whatever and they should not know. Simple navigation, refreshes and server side rendering is something which worked great, the web was fast and could run on anything with a graphical output. These days a single page eats up 150+ mb while it loads. All that so the page doesn&#x27;t &quot;refresh&quot;.

&gt; “You didn’t solve anything! Doing validation is complex and you just magic wanded it away by designing a perfect interface for it.” Yes. Exactly. That is what interfaces are supposed to do. Better semantics make it possible for the programmer to describe what the element does, and for someone else to take care of the details for them.<p>Gosh I couldn&#x27;t agree more, what a wonderfully succinct way to communicate what I spend a ridiculous amount of time trying to explain to my colleagues when designing programs!<p>[EDIT]: I just realized I had read this on one of the linked articles <a href="https:&#x2F;&#x2F;unplannedobsolescence.com&#x2F;blog&#x2F;behavior-belongs-in-html&#x2F;" rel="nofollow">https:&#x2F;&#x2F;unplannedobsolescence.com&#x2F;blog&#x2F;behavior-belongs-in-h...</a>

Anyone replace some HTMX usage with the View Transition API that&#x27;s now in Chrome and Safari? <a href="https:&#x2F;&#x2F;developer.chrome.com&#x2F;docs&#x2F;web-platform&#x2F;view-transitions" rel="nofollow">https:&#x2F;&#x2F;developer.chrome.com&#x2F;docs&#x2F;web-platform&#x2F;view-transiti...</a><p>This looks appealing where it makes sense (page transitions, table sorting&#x2F;pagination) and if Firefox gets around to adding it.

I have used htmx just a little bit; but I have found htmx + solid.js for some small reactive components to be ... very, very pleasant and very much else of what this blog post says to be accurate.<p>I&#x27;ve written a lot more html than I have in the past and it just ... feels good? html has upgraded quite a bit in the last decades since I learned it.

How do you get flicker free navigation using htmx without using hx-swap or boost? I see that this article refers to <a href="https:&#x2F;&#x2F;unplannedobsolescence.com" rel="nofollow">https:&#x2F;&#x2F;unplannedobsolescence.com</a> which has a header that remains the same, but it also doesn&#x27;t change. Normally a header will do some type of change, e.g. showing which menu item is currently selected. That&#x27;s when the flickering starts, in my experience.

&gt;Triptych—the HTML proposals that Carson and I are working on—would render htmx obsolete for the type of website I describe here.<p>Which we discussed here [1], is still no where near getting even looked at. Browser maker are not interested in anything HTMX. Vast majority of browser developers still want JS driven web apps, served with AVIF image.<p>[1] <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=42615646">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=42615646</a>

Does anyone have examples of non trivial websites or apps built with Htmx?

&gt; The idea here is that the website still has a sound URL structure, which is managed by the core browser functionality, while interactivity is carefully layered on top, with targeted updates.<p>It’s a long time since I have to work with <i>websites</i>. JQuery was the hot stuff back then. But we didn’t used it. It was all HTML and a Java backend. This sentence implies that right now basic stuff isn’t managed by the browser (but by React, Vue and so on?) which seems to be simply wrong.

Yes if you click a regular link in a modern browser on a noJS or lowJS reasonable size page it is darn fast.<p>And the predictability is a boon. Open in new tab, back button etc.

While I agree that full page refreshes probably shouldn&#x27;t use HTMX, I&#x27;ll also claim that it&#x27;s pretty rare that you would do a full page refresh. Almost every website I create has context that is present on every single page. Typically the branding at the top and the site map at the bottom does not change and hence there are no full refreshes.

I like Hotwire&#x2F;Turbo more than HTMX because of its core philosophy: start by building a fully functional page without any JavaScript, and then layer in enhancements only as needed. That approach has stayed consistent for years and feels really straightforward to work with.

Yea, in my opinion, hx-swap or turbolinks is a bit of an antipattern. Seems to me you get worst of both worlds:<p>- something that kinda looks like full reload<p>- but with all problems of client side routing<p>- and without preserving the DOM state like SPA would<p>- and you don&#x27;t get the immediate response that is the main reason to build the SPA in the first place<p>In fact, it&#x27;s often even slower than native navigation, because native navigation can start processing the stream during download and there&#x27;s overhead with pre and post processing of the response in the boosted link version. Try to profile GitHub links to see what I&#x27;m talking about, opening a link in new tab can be 2x faster than clicking in the same tab.

I thought HTMX is useful mostly for SPA style apps. If you want a website with individual pages you can mostly use HTML and a bit of vanilla JS for the stuff that needs to be dynamically updated.

(2024)

&gt; In my opinion, most websites should be using htmx<p>In my opinion, in five years no one uses htmx, but another shiny toy. Hence, how about not starting to use it at all?

&gt; In practice, this is virtually impossible to get right<p>Somehow every other JS frontend framework manages to hook into the History API just fine?

While I get the emotional appeal, I still don&#x27;t understand the use-case for htmx. If you&#x27;re making a completely static page, you just use HTML. If you&#x27;re making a dynamic page, then you want to push as much logic to the client as possible because far more users are latency-limited than compute-limited (compare [1] vs [2]), so you use normal frontend technologies. Mixing htmx and traditional frontend tech seems like it&#x27;d result in extra unnecessary complexity. What&#x27;s the target audience?<p>Edit: &quot;Normal&#x2F;traditional frontend&quot; here means both vanilla (HTML+JS+CSS) and the most popular frameworks (React, Angular, Vue, Next).<p>[1] <a href="https:&#x2F;&#x2F;danluu.com&#x2F;slow-device&#x2F;" rel="nofollow">https:&#x2F;&#x2F;danluu.com&#x2F;slow-device&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;danluu.com&#x2F;web-bloat&#x2F;" rel="nofollow">https:&#x2F;&#x2F;danluu.com&#x2F;web-bloat&#x2F;</a>