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.
Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)
151–160 of 224 posts
Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)
#152Earlier 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…
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)
#153Earlier 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?
Or to a search engine: https://share.google/dTJmGU38xw0kDSJlZ
Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)
#154I 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.
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)
#155I 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…
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)
#156Earlier 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.
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)
#157I 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…
Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)
#158Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)
#159I 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.
Re: Removing React.js from the codebase and adapting Htmx for UI interactivity (2023)
#160Earlier 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?
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.