Live data from Hacker News

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

misago-project.org

141–150 of 224 posts

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

#141
post #39

Earlier quoted context omitted.

This just shows that despite the 1.6M/m budget, you did not have people who could do react correctly. React.hydrate have existed since React 0.4 (2013, that is over 13 years ago) and Gatsbyjs was released over a decade ago around 2015. But while first render is of course important, now everything else is more expensive with htmx because you have to generate HTML on the server, on top of your usual fetch pipeline. Yes…

Yes but why bother with React, Hydrating pages at all if you can do something simpler? What advantages does React provide here? HTMX tools are simpler while providing straightforward thinking around html fragment caching, whole page caching. React just gives a runaround way of doing everything. I'll remind you React was built so that people could continue watching a streamed video while they navigated on a page. Most…

What advantages does HTMX have? You end up with splintered spaghetti code, multiple languages/idioms, and unpredictable state.

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

#142
post #97

Earlier quoted context omitted.

An SPA still requires roundtrips, just not to load the DOM root. Most of them do more than one roundtrip per navigation, making them worse than MPA. They also break loading screens.

They don't have to be that way.

They still are

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

#143
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…

Thats not on htmx to decide what html to resend that's your engineering work...

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

#144
post #96

Earlier quoted context omitted.

You swapped out HTMX because you couldn’t figure out how to load a list of items gradually instead of all at once??

If I wanted to do that I would have added pagination. But that UX also sucks in a different way. I think dynamically fetching results (ala infinite scroll) would have been more complicated to build. I would have had to add an intersection detection (HTMX 4 has that) to trigger the form/request again, but with an ever increasing chunk offset slice. I also need a way to track that state as well. Considering I had one b…

Infinite scroll is a shit pattern it creates complexity and makes it hard to get back to a position on the generated and changeable list. It can also be unexpected slow. Everyone knows a page load can be slow if their Internet is slow but a slow down when scrolling feels janky.If you think you need it you need pagination and more importantly better filters and search so users can find stuff easier without 200 options.

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

#145
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…

Except you don't. Use hx-vals, hx-include, or even hx-headers to pull in additional data into the request that's outside of the immediate form/component.

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

#146
post #136

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…

Why are you expected to send down the whole thing? Maybe I’m missing something, but when you send the request from the form the response is just a partial of the results on the right hand side, using hx-target to specify some div instead of replacing the form. Form just stays there?

To sync the form state based on the current selections in the form. This is often called facets. The form contained many options and as you filtered those options would change. So you need a way to update the form too. Hence, compute the full thing on the server (the form state, the options within the fields, and the results) then send it all back.

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

#147

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…

AJAX is old tech though, using stuff that worked in the year 2000 is cheating in 2026. You are supposed to make the site slow and bloated for some reason.

It isn’t literally AJAX. Just a catchy name. It is just a fetch wrapper that mimics the $get, $post, etc. API

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

#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.

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

#149

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 request basis? HTML/Browser already tracks the current form state.

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

#150

I think HTMX is a great fit for forum software. Forum websites mostly deliver non-interactive content in the form of text and maybe some audio, video, or image content. All of this can be represented as HTML and CSS. With HTMX you can do partial rendering and live updates via server-sent events. This gets you most of the way to the "client side" feel where things load dynamically based on user actions. The only prope…

To paraphrase: "I think HTMX is a great fit for save for a few that want to be an _APP_"… :)
Post reply on HN