4 ms·

Composabilty and abstraction. I can bang out a react form in our app in minutes just by defining the shape of the fields. All the loading states are handled aut

by klysm 2y ago

Composabilty and abstraction. I can bang out a react form in our app in minutes just by defining the shape of the fields. All the loading states are handled automatically. Mutations and refreshing data works out of the box. Navigating between pages is instant. Data is cached even when navigating between pages. Some pages that require many user inputs utilize optimistic updates to afford very low latency feedback. React makes all of that easy to compose. I tell it how to render my state, and I write code that updates state.

thunky 2y ago
> Composabilty and abstraction Also possible without react with far less complexity.
- lmm 2y ago
  It really isn't, unless you go full server-side session (with something like Wicket), and the latency of that is usually unacceptable these days.
  - thunky 2y ago
    I think you and the sibling may have missed the requirements up thread: If you only need links, forms, and data tables
    - lmm 2y ago
      In my experience even something you thought was a basic form will usually have some kind of UI state (e.g. one input that then enables/disables another input).
      - thunky 2y ago
        Can't that be done in one or two lines of jQuery?
        lmm 2y ago
        Yes, of course. And then you add one or two more lines of jQuery. And then another few lines to deal with the client-side and server-side state getting out of sync. And then... Is putting in a couple of lines of JS that has no knowledge of the backend-managed good enough for small one-off pages? Maybe. But it's definitely not composable and abstractable, which was the original claim.
        thunky 2y ago
        I assume we're still talking about links, forms, and data tables. If the forms are so complex that we need React to manage them then it may be worth trying to simplify them a bit first. Or if the forms have to sync with the backend then there are other React-less options, for example: https://htmx.org/examples/value-select/ https://htmx.org/examples/value-select/
        lmm 2y ago
        > If the forms are so complex that we need React to manage them then it may be worth trying to simplify them a bit first. Some forms are simple enough that you don't need composition and abstraction, yes, no-one's denying that. > Or if the forms have to sync with the backend then there are other React-less options, for example: > https://htmx.org/examples/value-select/ https://htmx.org/examples/value-select/ Ok, now try composing that. What happens when you want to nest one of those inside another (i.e. have 3 levels of selection)?
        thunky 2y ago
        The forms/inputs are composable on the backend where the state is managed and the html is produced. Here's the most dynamic form I can think of: https://www.globalgolf.com/golf-clubs/1064148-titleist-tsr2-fairway-wood/ https://www.globalgolf.com/golf-clubs/1064148-titleist-tsr2-... Any input change triggers any/all other inputs to change. Looks like they send the entire page each action, no React, yet the user experience is much better than the typical competitor site where they've overengineered the whole front end. Their faceted search is nice too: https://www.globalgolf.com/golf-clubs/used/titleist/fairway-wood/ https://www.globalgolf.com/golf-clubs/used/titleist/fairway-... Notice how when you add a filter it updates the URL. Breath of fresh air. And this is way beyond what I had in mind when I read links, forms, and data tables.
- klysm 2y ago
  I’ll believe it when I see it. I’ve used many many different UI frameworks, and react works the best out of all of them that I’ve tried.
Zanfa 2y ago
On the other hand, using React means you'll have a 2nd source of state (form & navigation at the very least) that needs to be maintained and tested for edge cases. Everything needs to be validated 2x, since you can't trust anything coming from a client anyway. Correct state management between page navigations is definitely not something you get for free judging from the number of broken React SPAs where you can't properly use multiple tabs or other browser mechanisms.
- klysm 2y ago
  The libraries I use give it to me for free

by klysm 2y ago

thunky 2y ago

> Composabilty and abstraction Also possible without react with far less complexity.

lmm 2y ago
It really isn't, unless you go full server-side session (with something like Wicket), and the latency of that is usually unacceptable these days.
- thunky 2y ago
  I think you and the sibling may have missed the requirements up thread: If you only need links, forms, and data tables
  - lmm 2y ago
    In my experience even something you thought was a basic form will usually have some kind of UI state (e.g. one input that then enables/disables another input).
    - thunky 2y ago
      Can't that be done in one or two lines of jQuery?
      - lmm 2y ago
        Yes, of course. And then you add one or two more lines of jQuery. And then another few lines to deal with the client-side and server-side state getting out of sync. And then... Is putting in a couple of lines of JS that has no knowledge of the backend-managed good enough for small one-off pages? Maybe. But it's definitely not composable and abstractable, which was the original claim.
        thunky 2y ago
        I assume we're still talking about links, forms, and data tables. If the forms are so complex that we need React to manage them then it may be worth trying to simplify them a bit first. Or if the forms have to sync with the backend then there are other React-less options, for example: https://htmx.org/examples/value-select/ https://htmx.org/examples/value-select/
        lmm 2y ago
        > If the forms are so complex that we need React to manage them then it may be worth trying to simplify them a bit first. Some forms are simple enough that you don't need composition and abstraction, yes, no-one's denying that. > Or if the forms have to sync with the backend then there are other React-less options, for example: > https://htmx.org/examples/value-select/ https://htmx.org/examples/value-select/ Ok, now try composing that. What happens when you want to nest one of those inside another (i.e. have 3 levels of selection)?
        thunky 2y ago
        The forms/inputs are composable on the backend where the state is managed and the html is produced. Here's the most dynamic form I can think of: https://www.globalgolf.com/golf-clubs/1064148-titleist-tsr2-fairway-wood/ https://www.globalgolf.com/golf-clubs/1064148-titleist-tsr2-... Any input change triggers any/all other inputs to change. Looks like they send the entire page each action, no React, yet the user experience is much better than the typical competitor site where they've overengineered the whole front end. Their faceted search is nice too: https://www.globalgolf.com/golf-clubs/used/titleist/fairway-wood/ https://www.globalgolf.com/golf-clubs/used/titleist/fairway-... Notice how when you add a filter it updates the URL. Breath of fresh air. And this is way beyond what I had in mind when I read links, forms, and data tables.
klysm 2y ago
I’ll believe it when I see it. I’ve used many many different UI frameworks, and react works the best out of all of them that I’ve tried.

Zanfa 2y ago

On the other hand, using React means you'll have a 2nd source of state (form & navigation at the very least) that needs to be maintained and tested for edge cases. Everything needs to be validated 2x, since you can't trust anything coming from a client anyway. Correct state management between page navigations is definitely not something you get for free judging from the number of broken React SPAs where you can't properly use multiple tabs or other browser mechanisms.

klysm 2y ago
The libraries I use give it to me for free