Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Let's make the worst Htmx

zserge.com

Post reply on HN
Print view View original

31–40 of 85 posts

Re: Let's make the worst Htmx

#31

Post by barrkel »

Rohansi wrote: post #25
yawaramin wrote: post #6

Earlier quoted context omitted.

No, every interactive event doesn't need to have a network request in the loop. And you only need a tiny bit of client-side JS for a most of the plumbing. It is quite pleasant to work with, because you don't have to worry about a constant stream of vulnerabilities or supply chain attacks. You just vendornthe script in your repo, add it as a tag on the page, and you're done.

Supply chain attacks are not a JavaScript or npm exclusive risk. If you pull in any dependencies you have a supply chain risk.

As is well known, security is not a binary, it's a spectrum. It's why you add security in layers, and why it's generally a trade-off between risk and usability.

Your mileage may vary, but I sleep better with my own projects not having any node_modules in their build tree.

Re: Let's make the worst Htmx

#32

Post by Aeolos »

I highly recommend everyone to give htmx or datastar a try, especially if your main experience is react or nextjs.

We recently rewrote a half-million LOC codebase from react to datastar, with a detour through htmx first, and the results are staggering.

First page load is 20KB down from a 750KB js bundle. 1 network request vs 40+. Total load time 0.1 seconds down from 2 seconds of spinners. Page refresh is so fast, the browser doesn’t even flash - there’s no massive js bundle to parse, so it can start rendering instantly.

But the most staggering result is that in-document navigation over SSE achieves up to 5000:1 compression ratio for network requests within the Brotli compression window. Yes, 5000:1, you read that right. When changing server state we rerender the entire page, like an immediate-mode game engine, and push it to the client over an SSE “fat morph”, in about 100 bytes.

It’s so fast and so much more stable, our users are literally having fun. With a medical device.

And this ends up ~50% less code to maintain for a VASTLY superior UIX.

You are really missing out if you don’t learn how this works. It can give you a significant competitive edge if you care enough to try.

Edit: Big BIG thanks to bigskysoftware and the datastar team for making the web a sane place again. You really deserve all the props.

Re: Let's make the worst Htmx

#33

Post by bramhaag »

Aeolos wrote: post #32

I highly recommend everyone to give htmx or datastar a try, especially if your main experience is react or nextjs. We recently rewrote a half-million LOC codebase from react to datastar, with a detour through htmx first, and the results are staggering . First page load is 20KB down from a 750KB js bundle. 1 network request vs 40+. Total load time 0.1 seconds down from 2 seconds of spinners. Page refresh is so fast, t…

Since you tried both, what made you choose datastar over htmx?

Re: Let's make the worst Htmx

#34

Post by andersmurphy »

Aeolos wrote: post #32

I highly recommend everyone to give htmx or datastar a try, especially if your main experience is react or nextjs. We recently rewrote a half-million LOC codebase from react to datastar, with a detour through htmx first, and the results are staggering . First page load is 20KB down from a 750KB js bundle. 1 network request vs 40+. Total load time 0.1 seconds down from 2 seconds of spinners. Page refresh is so fast, t…

My experience was similar. I'd wound down a startup and as a solo developer could no longer afford to do react + a backend. So I tried HTMX, then turbo (which introduced me to morph and push based re-fetch). Finally moved to datastar because I could drop alpine and it has best in class morph, signals and SSE support. Immediate mode over the network is amazing DX.

Makes multiplayer out of the box over large datasets trivial. See these demos if you don't believe me [1][2] (open them in multiple tabs and have fun)

[1] https://checkboxes.andersmurphy.com

[2] https://example.andersmurphy.com

Re: Let's make the worst Htmx

#35

Post by andersmurphy »

bramhaag wrote: post #33
Aeolos wrote: post #32

I highly recommend everyone to give htmx or datastar a try, especially if your main experience is react or nextjs. We recently rewrote a half-million LOC codebase from react to datastar, with a detour through htmx first, and the results are staggering . First page load is 20KB down from a 750KB js bundle. 1 network request vs 40+. Total load time 0.1 seconds down from 2 seconds of spinners. Page refresh is so fast, t…

Since you tried both, what made you choose datastar over htmx?

A focus on morph by default means you don't have an explosion of endpoints and can write programs like the 300 redirect days. [1]

Once you want realtime/collaborative app SSE + morph lets you do that easily. Add streaming compression and this approach is suddenly crazy bandwidth efficient.

For people coming from react this gives you v = f(state) over the wire.

Lastly signals handle the edge cases where an out of bound morph would nuke your ephemeral client side state (mostly text input).

You can do this in htmx but you are fighting the design the whole way. Turbo is a bit better but doesn't have signals.

[1] https://dev.37signals.com/a-happier-happy-path-in-turbo-with...

Re: Let's make the worst Htmx

#36

Post by antihero »

yyyk wrote: post #28
wren6991 wrote: post #3

Huh, so every interactive event has a network request in the loop, with perceptible latency? And you still end up obligating client-side JS for the plumbing? I'd been meaning to look into HTMX but based on the content of this post it seems like a worst-of-all-worlds technical solution. Is it at least pleasant to work with?

The problem with HTMX is not network traffic but needing to use hyperscript for anything advanced.

Also don't you entirely lose typing?

My favourite thing about TSX is that it is typechecked. How do you do that with random strings of HTML?

Re: Let's make the worst Htmx

#37

Post by stymaar »

robertoandred wrote: post #26
yawaramin wrote: post #6

Earlier quoted context omitted.

No, every interactive event doesn't need to have a network request in the loop. And you only need a tiny bit of client-side JS for a most of the plumbing. It is quite pleasant to work with, because you don't have to worry about a constant stream of vulnerabilities or supply chain attacks. You just vendornthe script in your repo, add it as a tag on the page, and you're done.

How is htmx invulnerable to vulnerabilities and attacks?

It's not invulnerable, I think gp just means that reducing your amount of dependencies reduces the attack surface.

Re: Let's make the worst Htmx

#38

Post by Aeolos »

bramhaag wrote: post #33
Aeolos wrote: post #32

I highly recommend everyone to give htmx or datastar a try, especially if your main experience is react or nextjs. We recently rewrote a half-million LOC codebase from react to datastar, with a detour through htmx first, and the results are staggering . First page load is 20KB down from a 750KB js bundle. 1 network request vs 40+. Total load time 0.1 seconds down from 2 seconds of spinners. Page refresh is so fast, t…

Since you tried both, what made you choose datastar over htmx?

Our UI is highly interactive: think 3d visualizations with toggle-able overlays, various display settings, searchable lists, drawing tools etc.

We made a lot of progress with htmx, but eventually hit a complexity wall where we were spending more time fighting the tool than solving the business need. Note, I'm not blaming htmx here, the documentation is clear about its strengths and limitations, and the hypermedia approach is still fundamentally right. But even with alpinejs in the mix, we just weren't able to achieve the smooth developer experience we were looking for.

So we tried datastar, and it basically addressed all the friction points we had:

  - No more DOM hunting to figure out why the hx-get ended up in the wrong spot or why OOB swap is glitching out. D* morph just works.
  - No need for hidden form  to submit client state, D* signals are cleaner and easier to use.
  - No more micro-routes for targeted element updates to avoid hx-swap butchering page state. One route per page, just render the whole thing and morph takes care of the rest. Immediate-mode rendering and fat morphs removed ~50% of our routing table.
  - SSE + fat morph is a superpower. This is view = f(state) done right.
We've had very few issues, D* just works and gets out your way. The team has really created something quite exceptional.

The great news is htmx4 is adopting many of these ideas, so I recommend trying both and seeing what fits you best.

Re: Let's make the worst Htmx

#39

Post by andersmurphy »

Aeolos wrote: post #38
bramhaag wrote: post #33

Earlier quoted context omitted.

Since you tried both, what made you choose datastar over htmx?

Our UI is highly interactive: think 3d visualizations with toggle-able overlays, various display settings, searchable lists, drawing tools etc. We made a lot of progress with htmx, but eventually hit a complexity wall where we were spending more time fighting the tool than solving the business need. Note, I'm not blaming htmx here, the documentation is clear about its strengths and limitations, and the hypermedia app…

It's nice to see HTMX4 is adopting the core strengths of Datastar. That sort of cross pollination of ideas is a huge boon to the wider hypermedia community in general.
Post reply on HN