Hacker News new | ask | show | jobs
by rubylimetea 1 day ago
As others mentioned, not great for rich interactivity.

Example: Render a scrollable list and you need to change contents of the li items mid scroll - it resets the scroll position to the top because of how it replaced the entire HTML on render. There are workarounds you can do, DOM hacks, but they aren’t ideal.

React is designed around that kind of thing. They do some funny magic under the hood to support seamless DOM reconciliation and things like prop drilling of entire components on the prop of another, and so-on. This gives them a more granular way to manipulate the DOM without total page re-rendering.

Next.js SSR works because it’s designed around React. So they’re giving you all the SSR stuff you want but you still get client-side React for rich interaction design and other SPA niceties.

So if someone releases an SSR-like thing like htmx it feels like something is missing.

Maybe htmx needs an opinionated framework that gets more into high performance rendering and state management.

Or maybe they hone in on the “basic web pages” market. Who knows, maybe those make a comeback somewhere. PDF gets replaced with standalone HTML or something, and people use HTMX, or maybe it’s used in a dev environment for HTML email design in some future where email can have events (who knows). Couple of ideas.

Right now it feel incomplete or has nowhere for me to plug it in. Love the concepts though, HTML/JS should have been like that.

2 comments

I haven’t used it with htmx, but DOM morphing seems like it’s probably a good solution to this.

https://v1.htmx.org/extensions/morphdom-swap/

https://github.com/patrick-steele-idem/morphdom/issues/261

This issue is reporting the same kind of thing - text selection is lost on re-render

I designed my own mini-framework Places.js that you might be interested in looking at. https://codeberg.org/createthirdplaces/places-js

Places.js supports component based rendering, and state management integrated with backend data fetching. It also has faster rendering performance than React due to the use of vanilla JS web components.

Places.js is also designed to dynamically render parts of a page while making sure the rest of it is statically rendered. HTMX can be used on those parts, and be used to enhance HTML generated by components through the htmx.process() method. https://htmx.org/api/#process