Hacker News Reader

Comment by wmanley | Hacker News Reader

You mean by having a function per fragment? I don’t think this solves the hard to maintain bit - which is “which fragments should I regenerate/send”, and how do I keep that list up to date as my app evolves.

FWIW I have a potential solution: to show live data in my app I use an SSE stream of OOB swaps. On every relevant change to the database I regenerate the HTML and compare it to the previously generated html to create OOB swaps (including hx-preserve). I send that down so the browser can update.

The same approach could be used for normal POSTs. On a POST generate the HTML before and after modifying the database and diff them to generate OOB swaps.

View on HN

Datastar makes this even simpler. No need to think about OOB swaps. Just regenerate the page and Datastar streams it over SSE and surgically updates the DOM. They call this “fat morph”. You can be more precise about individual updates but it’s hardly ever necessary - it’s basically instantaneous.

Given how much you’ve already developed it would take you no time to pick it up but of course it’s nice to control your own destiny with your own code.

There’s one additional thing you get with Datastar and that’s a very easy Signals implementation on the browser side. For lightweight interactivity you don’t need a server trip. And when you do POST something to the server the values of the signals are automatically included so your backend code knows the front end UI state (and can modify it).

> FWIW I have a potential solution: to show live data in my app I use an SSE stream of OOB swaps.

You might be interested in Datastar [1], which is like htmx but centered around Server-Sent Events. You don't have to do diffing yourself in application code because it's already handled by the framework under the hood through the "idiomorph" DOM morphing algorithm.

[1] https://data-star.dev/

Sure, that's basically what Phoenix LiveView does. But I would submit that you don't actually need that level of complexity with a bit of judicious UI/UX design, where as the app grows in scale, the number of oob swaps to keep track of doesn't grow as much.

There are many ways to skin the cat.

Reply on news.ycombinator.com