Hacker News Reader

Comment by robertoandred | Hacker News Reader

Really? You’re keeping track of which slide Jane Doe has switched Carousel X to on the server?

I don't need to keep track of it, because that state is embedded in the hypermedia ie HTML page itself. Eg, I implemented a pagination component in htmx. It has a 'prev' button, a page display, and a 'next' button. If I'm on page 1 and I press the 'next' button, then I have my backend server respond with the next page and also a re-rendered pagination component with all three elements now pointing at their new correct pages.

So before clicking 'next':

    <a disabled>prev</a>
    <span>Page 1</span>
    <a href="/page/2" hx-get="/page/2">next</a>

After clicking 'next':

    <a href="/page/1" hx-get="/page/1">prev</a>
    <span>Page 2</span>
    <a href="/page/3" hx-get="/page/3">next</a>

Except these aren't pages. They're slides in a carousel. There's no data to load. The markup isn't substantively changing. But instead of just translating an element, if a user clicks on the next button, we make an http request to a server, wait for the server to receive it, wait for it to generate a snippet of html, wait to get it back, and then drop it in. That's a pretty laggy UI. And as a result of that replacement, you lose the focused element and any possibility for animation.

What happens when you click quickly? Does the UI just freeze until it eventually loads... some slide? What if you want a touch carousel using scroll-snap? How do you destroy and replace the entire section without interrupting the user?

If you want to have a purely client-side carousel then this is outside the domain of htmx :shrug: You implement the carousel on the client-side. Use whatever library you like. Personally I think web components are a great complementary fit with htmx. But here you've just moved the goalpost. What you said earlier:

> No more state!...Just use htmx, everything becomes so simple!...None of that goes away, of course, it just moves to a different repo.

With a purely client-side component, the state is managed purely on the client side, and the server would not touch it anyway. So it didn't have duplication of state to begin with, and htmx is solving (among other things) the duplication of state problem. So again–this example is not relevant to htmx.

Do you do this in raw react, or use some third party carousel library? If so, maybe something like that can be used with HTMX as well?

But your larger point stands, HTMX is probably not a great fit for highly interactive webapps, even though you can push it pretty far

Reply on news.ycombinator.com