Live data from Hacker News

Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

misago-project.org

151–160 of 224 posts

Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

#151
post #75

Earlier quoted context omitted.

A text editor or music player is hardly "mini". Again, the issue with htmx is that it pretends like it is not a framework, when in fact, it is just a second attempt at angular 1.0, with even more naive assumptions about web apps.

Having adopted Angular 1 back when it was new, I can promise you it's completely different than Htmx.

What is the main difference?

Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

#152
post #118

Earlier quoted context omitted.

I think I understand now, even the partial required submitting everything to the server, which can be skipped if you can have interactivity without unnecessary requests.

Exactly. The partial response was 100kb-200kb of HTML + the backend query time. Of course, depending on your filters. But a large chunk of that was just sending down the form on the left side, which I already had on page load, so that penalty was real. It was only the right side results of the experience that needed to be refetched when the form changed. But in HTMX, you are expected to just send the whole dang thing…

Unless there's a material change to the form, why not just update the changed parts?

I'd also question architectural decisions if you need to send 100kb+ of html down the wire for a partial.

Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

#153
post #140

Earlier quoted context omitted.

You have to build a proper PWA with a fully formed manifest.json first off. Web Push (i.e: Push Notifications) are fully supported on both iOS and Android. The Only thing that doesn't work is "background" work (but preactically speaking I haven't really needed it). If you'd like to find out how I build Mobile-first apps with Go, HTML and HTMX hit me up.

Any chance you could write a hello world repo of this stack and post a link here?

Try asking this question to an LLM. (No, seriously.)

Or to a search engine: https://share.google/dTJmGU38xw0kDSJlZ

Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

#154

I actually tried to use HTMX on a site recently. I used the 4.0 beta. The site needed an interactive filterable product-listing-page-type experience to list out all their vendors. Form filters on the left and the list of results "cards" on the right. The problem I had was that the entire experience became really slow when I had it all working together as one "response". Sending back all that HTML for an entire form w…

Is there a reason why you don't have an endpoint + template that renders only the result list. The form could be separate thing and issue a form submit request with all the selected filters? Seems better than rendering the whole page. You could even display a loader while the results are loading, and swap the list html element on success.

That is what I ended up doing but once I did that, I had a hell of a time getting that dynamic form working well with just the HTMX primitives. I even tried to do two different partials that would be fetched when I needed each one to rerender.

The gist of what I was saying was that once I had a more complicated experience, the benefits of just fetching a fresh partial each time started to dwindle. The HTML response grew, I needed a bunch of inline handlers to patch over some state issues, as well as the complexity of the template, just started to be too much. Really it was the Alpine part that I was missing. Simple class toggles, easy way to toggle aria attributes, show/hide for elements, and reactive/computed values, were the things I needed to get the results the client wanted.

If I was building a simple search input + results, I would use HTMX all day. These forum people make it work and that seems like a great use case. But it just didn’t fit with a more sophisticated form that had dynamic options plus a large results display and the burden of a slower query to just get the data.

Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

#155

I actually tried to use HTMX on a site recently. I used the 4.0 beta. The site needed an interactive filterable product-listing-page-type experience to list out all their vendors. Form filters on the left and the list of results "cards" on the right. The problem I had was that the entire experience became really slow when I had it all working together as one "response". Sending back all that HTML for an entire form w…

I can't really understand what you're describing. You have form on left & results on right, but you're requesting the new form state & re-rendering the form HTML on each request? Why? My naive understanding is that you could use something like hx-target to have the response to the form submissions update only the results area & the form should not need rerendered at all. Why does the form need rerendered on a per req…

Because the form changed based on the selections you made. Like facet search.

Say you have a clothing store listing page and you filter for only "Shirts". Well, the filter that has "Material" might remove (or disable) the option for "Denim" because that is only for "Pants". So that state needs to be computed some where. My thought was, "Ok, refetch the whole thing with the updated options within the form (disable options that can’t be combined together) + the product results for those filters". But that was just a lot of HTML to ask for after each change.

So decoupling it so that the form never refetched, just the results, made it a lot snappier. But you still have the form state issue where you want to update the options based on selections. So the form became a little Alpine data component and the results stayed as an HTML partial.

Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

#156

Earlier quoted context omitted.

Exactly. The partial response was 100kb-200kb of HTML + the backend query time. Of course, depending on your filters. But a large chunk of that was just sending down the form on the left side, which I already had on page load, so that penalty was real. It was only the right side results of the experience that needed to be refetched when the form changed. But in HTMX, you are expected to just send the whole dang thing…

Unless there's a material change to the form, why not just update the changed parts? I'd also question architectural decisions if you need to send 100kb+ of html down the wire for a partial.

The cards contained a large data table outlining a bunch of attributes across many columns and rows. Not an ideal design but the client wanted those stats included in the card so they were visible right away.

We could have paginated the results, but the client didn’t want that either because you are just promoting the results that happen to land on the first page. You also can’t just CTRL-F and find things that way.

Now, those could have been loaded in dynamically. That isn’t a free solution either though. It means adding a new endpoint, with a new partial, another request-response round trip, plus the error handling in case it fails, etc. etc.

I just ended up being more practical to go with a reactive JS form component to reduce the HTML being sent back and forth.

Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

#157

I actually tried to use HTMX on a site recently. I used the 4.0 beta. The site needed an interactive filterable product-listing-page-type experience to list out all their vendors. Form filters on the left and the list of results "cards" on the right. The problem I had was that the entire experience became really slow when I had it all working together as one "response". Sending back all that HTML for an entire form w…

Why is this the top-most comment when the user obviously didn’t know how to use HTMX?

Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

#159
post #148

I actually tried to use HTMX on a site recently. I used the 4.0 beta. The site needed an interactive filterable product-listing-page-type experience to list out all their vendors. Form filters on the left and the list of results "cards" on the right. The problem I had was that the entire experience became really slow when I had it all working together as one "response". Sending back all that HTML for an entire form w…

Despite the fact that HTMX is a good solution in many cases, it's not the best solution in all cases. Ditto for React, and for any technology actually. Planning and consideration are always required, if you care about the end result.

Yeah, exactly. People seem to think I was holding it wrong. Maybe! But I gave HTMX an honest try. Another team would have just done a whole React thing, no HATEOAS, boatload of JS, and a bunch more memory. I will likely use HTMX again for something when I think it makes sense. Maybe once the 4.0 beta is over though

Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)

#160
post #72

Earlier quoted context omitted.

Adopting something like HTMX is primarily a UX choice, and the language you use to serve it is almost irrelevant to UX. JavaScript is a nice backend language. It’s fast, has a massive ecosystem, and many people know it well.

I don't see how HTMX has anything to do with UX. Could you clarify what you mean?

Sure. I personally think SPAs/React have better DX than HTMX. IMO, the most compelling reasons to use HTMX instead (for building dynamic/interactive web applications) are to reduce the amount of JavaScript sent to the client and make pages become interactive faster. These are UX concerns: how much the user has to download (waiting) and how long before the page becomes interactive (waiting).

With HTMX, you get these benefits regardless of what language you use on the server. These benefits could be reasons the parent commenter chose HTMX, and JavaScript is a perfectly good language to serve HTMX applications for the reasons I mentioned.

Post reply on HN