</> Htmx – The Fetch()ening

194 pointsposted 4 hours ago
by leephillips

55 Comments

booi

3 hours ago

> So, eventually & reluctantly, I have changed my mind: there will be another major version of htmx.

> However, in order to keep my word that there will not be a htmx 3.0, the next release will instead be htmx 4.0.

technically correct.. the best kind of correct

SquareWheel

2 hours ago

It's an amusing solution, but if this ends up being anything like the missing PHP 6, it's also going to cause confusion for users. It might've been better to just mea culpa and release 3.0 anyway. I can't imagine anybody would really hold it against the author.

pavon

an hour ago

As long as they commit to making the next version after this htmx 8, I will be content with this versioning scheme.

recursivedoubts

32 minutes ago

if there is another version of htmx it will be 8 for sure

johannes1234321

an hour ago

What's the confusion around PHP 6? - There would have been a lot more confusion due to articles, talk slides, even printed books, .. talking about PHP 6's Unicode support would have been truly confusing.

fmbb

31 minutes ago

Should go directly to htmx 4.1, so we can finally have xhtmx 1.0

jraph

2 hours ago

The author is lucky the phrasing wasn't "there won't be another major version of htmx", or even "a third version".

gr4vityWall

3 hours ago

> htmx 2.0 (like htmx 1.0 & intercooler.js 1.0) will be supported in perpetuity, so there is absolutely no pressure to upgrade your application: if htmx 2.0 is satisfying your hypermedia needs, you can stick with it

This is commendable, specially during times when libraries and programs aren't afraid of breaking changes and API churn.

jakubmazanec

2 hours ago

> So, eventually & reluctantly, I have changed my mind: there will be another major version of htmx.

So first you weren't going to make a new major version, because htmx was sooo perfect, but now you had realized how much it can be improved.

Obviously, all software needs to evolve, and it was always very silly to say "this is the final major version". Why would someone use software from such kind of developer is beyond my understanding. But of course I also don't understand anything about this library; this surely must be some kind of trolling:

> We are going to adopt a new standard for event naming to make things even clearer:

> htmx:<phase>:<system>[:<optional-sub-action>]

It's truly wonderful what can people do to avoid writing JavaScript :D

patates

an hour ago

yes, you write this weird custom syntax that's interpreted in js, without writing any single line of js!

well, except when you want to do drag and drop sorting and this other thing.

yeah you get to communicate intent with html, but ignoring the security concerns for arguments sake, an inline script tag or your good old onclick event handler can do that too.

SoftTalker

an hour ago

Declarative style is almost always a win, IMO.

atomicnumber3

2 hours ago

it's truly wonderful how much can be done and still be better than writing javascript

blovescoffee

an hour ago

Do you actually feel like this is better (and not just at par or worse)?

jabbywocker

an hour ago

I find it much better for my use cases to use this than to use a JavaScript framework the necessitates the use of a JavaScript server

deepsun

2 hours ago

> hx-target attribute is explicitly declared as inherited on the enclosing div and, if it wasn’t, the button elements would not inherit the target from it.

So confusing. I'm pretty sure it should be "inheritable", because "inherited" on an attribute means the attribute is inherited, not the element's children will inherit the attribute.

UPDATE: or "inherit", sounds like a command, little less confusing.

SoftTalker

an hour ago

I was going to make the same comment. "inherited" is the wrong word. I like "inherit" too. And it's a bit shorter which is always nice. I guess "bequeath" might work also?

mrj

an hour ago

Maybe `heritable`?

recursivedoubts

31 minutes ago

yeah, i'm struggling w/it, willing to consider options

lazypenguin

2 hours ago

> By switching to fetch(), we can take advantage of its support for readable streams, which allow for a stream of content to be swapped into the DOM, rather than a single response.

Based on this section, it will be interesting to see how this evolves. I've used HTMX a bunch but after stumbling on Datastar I've come to prefer it. Partially because I don't need something like alpine.js to get some frontend goodies but also because I've come to appreciate the power of SSE streaming morphable targets to the browser

nchmy

2 hours ago

Great to see this evolution! Realtime ssr hypermedia is definitely the future.

But, my thoughts immediately go to Datastar, which has Fetch, SSE, declarative signals and js expressions, dom morphing, and much more - in a tiny package. I find it to have a more flexible, expressive and standards-compliant API as well. And it'll soon have a simple reactive web components and css framework as well.

At this point, why use HTMX when it really seems like (a heavier) Datastar-lite?

arcanemachiner

2 hours ago

Because Datastar Pro isn't FOSS, and speaking from a purely probabilistic and historical standpoint, your odds of getting rugpulled (in some form or another) might as well be 100%.

nchmy

2 hours ago

I can appreciate why people would have this perspective - I have been rugpulled a few times recently by thoroughly unscrupulous companies (Augment Code are trash humans).

But Datastar is different. The project is literally owned by a 501c3 non-profit. The devs have dayjobs and donate their spare time to this. Funds are for going to conferences or hosting their own

And 99% of the features/value that I mentioned is MIT licensed, and the "rugpulled" code is still available to easily port via the plugin API.

andersmurphy

2 hours ago

Yeah HTMX should rebrand as DATASTAR LIBRE.

alexpetros

an hour ago

> why use HTMX when it really seems like (a heavier) Datastar-lite?

The reason to use htmx is that it has a simpler interface optimized for the majority use-case.

With htmx, you are largely tied to a request/reply paradigm. Something happens that triggers a request (e.g. user clicks a button, or some element scrolls into view), htmx sends the request, and then it processes the response. The htmx interface (`hx-get`, hx-trigger`) is optimized to make this paradigm extremely simple and concise to specify.

Datastar's focus (last I checked) is on decoupling these two things. Events may stream to the client at any time, regardless of whether or not they were triggered by a specific action on the client, and they get processed by Datastar and have some effect on the page. htmx has affordances for listening to events (SEE extension, new fetch support) and for placing items arbitrarily on the page (out-of-band swaps) but if your use-case is a video game or a dashboard or something else where the updates are frequently uncorrelated with user actions, Datastar makes a lot of sense. It's a bit like driving a manual transmission.

Delaney is fond of saying that there's no need for htmx when Datastar can technically do everything htmx can [0]. But I think this misses the point of what makes htmx so popular: most people's applications do fit within a largely request/reply paradigm, and using a library that assumes this paradigm is both simpler to implement and simpler to debug. As an htmx maintainer, I often encourage people to even use htmx less than they want to, because the request/reply paradigm is very powerful and the more you can adhere to browser's understanding of it, the more durable and maintainable your website will be [1].

[0] https://data-star.dev/essays/v1_and_beyond

[1] https://unplannedobsolescence.com/blog/less-htmx-is-more/

andersmurphy

33 minutes ago

Why bother with v4 at all? If it dilutes that simpler interface?

I think that even with req/resp morph leads to a simpler majority use case and that's what Turbo and Datastar have both shown. No?

alexpetros

9 minutes ago

> Why bother with v4 at all? If it dilutes that simpler interface?

v4 makes almost no changes to the interface, other than to flip inheritance to be off by default.

> I think that even with req/resp morph leads to a simpler majority use case and that's what Turbo and Datastar have both shown. No?

Although you can use the idiomorph extension for htmx, I personally don't think idiomorph is simpler, because there's an algorithm choosing what parts of the page get replaced based on the server response; I prefer to specify exactly what parts of the page get replaced in much simpler terms, a CSS selector, with `hx-target`.

Per [1] above, my style is minimize partial page responses wherever possible, so the ones that I do have are bespoke and replace a specific thing.

andersmurphy

2 hours ago

The irony that the Datastar author originally tried to have those features added to HTMX a few years ago.

nchmy

2 hours ago

Better late than never. Everyone benefits with HTMX evolving and bringing more attention and capabilities to hypermedia-first approaches.

amanzi

2 hours ago

One important difference that I found is that HTMX (and Alpine AJAX) can easily push a URL into the browser's location history. I've used this feature often with my Django projects--essentially storing the state in the URL which is great for sharing URLs or bookmarking them. As far as I'm aware, Datastar have locked this feature behind the "Pro" paywall.

fukka42

18 minutes ago

Check out window.history.pushState

nchmy

2 hours ago

Fair. Though, D*'s authors are pretty adamant that this is an anti-pattern - that's why they put it behind the paywall.

Moreover, the FOSS code still exists and would take 2 minutes to update to the current plugin API (I have Datastar pro and the code is almost exactly the same)

https://github.com/starfederation/datastar/blob/v1.0.0-beta....

amanzi

2 hours ago

I'm interested in why this would be an anti-pattern? What would the alternative be?

nchmy

2 hours ago

I'm not qualified to comment as I don't use the feature, but people in their Discord would be happy to explain/discuss - its a wonderful place for learning more about the web, backend architecture and more.

I'm also sure this has already been explained in comments to other posts here as well.

AtlasBarfed

2 hours ago

Pay for the antipatterns?

I'm too tired to parse this logic, but I suspect it is a novel entry in techcorp doublespeak/dirty tricks.

nchmy

2 hours ago

I think the logic is the following:

* Datastar was re-written from the ground up, numerous times.

* They didn't want to update and maintain the plugins that they viewed as unnecessary/anti-patterns

* People wanted them still, so they said "fine, pay us to port it". Or, do it yourself - the MIT code is sitting right there and the changes are not all that significant. You'd also learn more about D* while at it. I linked in the parent comment to the MIT code - would not be difficult for anyone to do.

I suspect that in the long-run (probably not too far from now), they'll just make those plugins MIT again as the real value of Pro is the inspector, and soon their WIP web component framework (Rocket) and css framework (stellar) - all of which have always been being a commercial license.

p.s. there's no techcorp here. Its literally 3 guys with day jobs donating their time to a 501c3-registered non-profit. Funds go to things like going to conferences, or holding their own.

imiric

an hour ago

> the real value of Pro is the inspector

Ah, yes, a debugging tool. Only professionals need those.

nchmy

11 minutes ago

I can't tell what sort of sarcasm this is - whether youre saying that the inspector should be available to all, or that no one actually needs it.

Whatever the case, you dont truly need it, but it is helpful. You buy it for convenience as well as to support the project.

adamzwasserman

an hour ago

Interesting timing - I'm building genx.software which leans hard into implicit inheritance for the exact reason he is abandoning it. In my finance app, when the product owner changes their mind about decimal places for the 47th time (and it's always 47), the last thing I want is to hunt down every cell and add :inherited modifiers.

We treat everything as integers server-side (because floating point is the devil) and defer all formatting to the client. Implicit cascade means I can change fmt-x="currency:USD:decimals:2" in one place and watch it ripple down the entire table. It's 'maddening' the way CSS is maddening - which is to say, it becomes second nature after you stop fighting it.

That said, I fully understand the support ticket burden. Maybe the real lesson is: implicit inheritance is great when you control the domain (like 'format all money the same way'), but terrible when people want to do arbitrary things at arbitrary levels. I will bear that in mind as I complete genx.software

simonw

2 hours ago

I really enjoyed reading this - very clear technical writing and I learned quite a bit about htmx and their approach to API design generally from it.

causal

21 minutes ago

Neato. Sensible updates, no loss of support for previous versions? The software dream.

logankeenan

2 hours ago

This is great! I had to create an xhr-fetch-proxy to use fetch and htmx. This change should open up a lot of fun possibilities.

https://github.com/logankeenan/xhr-fetch-proxy

recursivedoubts

29 minutes ago

in 4.0 the request cycle is totally open: you can replace the fetch() implementation on a per-request basis

learned that trick from fixi.js

ranger_danger

3 hours ago

The only big gripe I have about htmx is that the hx-on::after-request response it provides to your callback function does not automatically parse JSON content types like with e.g. jQuery.ajax(). Last time I brought that up, people simply questioned why I would ever want to do that in the first place.

recursivedoubts

28 minutes ago

in 4.0 we are opening up the entire request/response/swap mechanism so you can replace any component of it per-trigger

you can replace the fetch() function used w/ an event callback, etc

should allow you to do pretty much anything w/o any hacks

edoceo

3 hours ago

That sounds like use-case exploration? Did you answer?

ranger_danger

2 hours ago

One of the actual responses was "Htmx isn’t designed to work with JSON APIs at all. It needs HTML back from the server."

It sounds like they are referring to hx-swap and not arbitrary javascript callbacks though, and in that case, I don't see why calling JSON.parse() inside htmx (when the content-type is json) is that big of a deal.

johannes1234321

an hour ago

They don't want to become a general purpose dynamic web library, but focus on swapping server generated HTML blocks. It's a conscious decision in what they are and what not.