Live data from Hacker News

Things I wish I knew about state management when I started writing React apps

medium.com

291–300 of 335 posts

Re: Things I wish I knew about state management when I started writing React apps

#291
May I ask React guys what’s wrong with parallel controller tree and (virtual) view tree which React tries to avoid (and, in my opinion, creates a bunch of in-club issues on a way that didn’t exist outside of its paradigm)?

I’m talking about this desktop mvc adapted to hyperscript approach:

  class AppCR extends CR {
    ctor() {
      this.db = new RemoteDB
      this.sidebar = new SidebarCR
      this.content = new ContentCR(db)
      this.val = {a:42, b:3.14, c:this.db.fetchC()}
    }
    render() {
      let {h, val} = this
      return h.div.wrapper(null, [
        this.sidebar.render(),
        this.content.render(),
        h(AuxViewType1),
        h(AuxViewType2.model(this.val, "c")),
        h.div(val.b),
      ])
    }
  }

  class AuxViewType1 extends View {
    render() {
      let {h, cr} = this
      return h.span(cr.val.a)
    }
  }

  class AuxViewType2 extends View {
    render() {
      let {h, model} = this
      return h.model_input({model})
      // model == {object, key} (for "input")
    }
  }
Your controllers localize data, speak to the model in a non-ambigous way, provide data for views directly (no props, think view.cr and view.model works at any depth) and integrate other controllers by creating/destroying them explicitly and rendering when they are needed.

You also may have a global read-only (mostly) store of reference data, but that’s more for caching large datasets, not for state sharing.

Btw, model_input could wait on a val.c promise and rerender appropriately without your intervention (something React folks were to deliver last year, supposedly with help from async setstate process, which was a requirement for that (why?)).

All of this React thing honestly feels like Haskell sneaked into an enterprise for the sake of “so cool we did it” giggles. Dan’s comments on this did not help much when I read ‘em.

Re: Things I wish I knew about state management when I started writing React apps

#292
post #26

> Think about the most complex frontends you’ve used. Frontends that made you wonder — “how did they create this”? What makes these frontends complex? State management. The frontend “knows” a lot of things, and these things interact with each other in non-trivial ways. So in my view, state management is the core problem when developing a UI. To build a non-trivial React application, you need to consider state managem…

You got that wrong. Modern JavaScript / SPAs make it possible to implement something like Outlook right within your browser. No (big) download, no clicking through an installation wizard, no fragmentation of versions for a tool, which forces you to be online anyway. I don't get all the hate towards SPAs and JavaScript Frameworks here on HN. Everyone is basically complaining about complexity for applications, which ar…

> Everyone is basically complaining about complexity for applications, which are more than just a server-rendered form or message board (which is a way less complex applications compared to outlook or slack, where "realtime notification" is a requirement).

But we did more than just a server-rendered forms in delphi, vb and others! The hate is not for js or html (well, in this case at least). The hate is for invention of techniques which are hard to explain, follow, justify, implement and reason about.

Web had an enormous amount of seasoned and veteran developers around the world and threw this resource out the window by going a new fancy way of history repeating, which presumably no one did before and no one knew names for new methods when they appeared.

React/Redux is ST by the way, implemented in a language completely unready for that concept, but it’s unclear if its authors were aware of this at the time it was born.

Re: Things I wish I knew about state management when I started writing React apps

#293

Earlier quoted context omitted.

> it's to give the user quick and actionable feedback. Right.. But I think often times the difference is pretty overblown. Clicking "save" and getting that feedback in ~100ms is not, in my estimation, worth the massive extra overhead of using a front-end framework, duplicating your validation requirements, etc. If you're google or facebook or youtube or are otherwise printing money, go for it. But for the 99% of web…

> Right.. But I think often times the difference is pretty overblown. Clicking "save" and getting that feedback in ~100ms is not Let's say the form has 5 fields, and I as the user make an error in the first field. Why do I have to finish filling out the entire form to hit "save", to discover I made an error in the first field? That's not a difference of ~100ms, that's a difference of several seconds (or tens of secon…

There is definitely a happy middle ground. Feedback too soon can be jarring, but waiting till the end of a form can be very frustrating, especially if there are many fields and you have to reparse to find the error. I think you need both to have a good experience.

Re: Things I wish I knew about state management when I started writing React apps

#294
post #280

Earlier quoted context omitted.

>if you were using a desktop GUI toolkit, you would almost certainly assume that there's essentially zero cost (or almost neglible cost) to the communication between the data (model) and the GUI Which is true, because model is what you’re working with and binding to (along with a controller). You can populate your models from a roundtrip data source, if it is not local. How is that different from web apps? I think th…

Some of what you've said here strikes me as true, as long as you limit the domain to "applications" aka "database client-server front end foobars". It's really not true for any desktops in the "creation" realms that I mentioned. The data model for an image manipulation program or a spreadsheet or a DAW or a document preparation system is fundamentally in memory, and there's no roundtrip to anywhere to access it or to…

I suspect I’m repeatedly misreading this subthread then. My point is that web apps are still apps, no matter whether app data came from http or fs or sql. It is unclear why good old methods of slapping data controls together wouldn’t work and why is it so hard and esoteric to do fullstack today and learning curves are so steep even for a simple crud++ area.

Re: Things I wish I knew about state management when I started writing React apps

#295
post #228

Earlier quoted context omitted.

> Client side validation is not only about required fields, it's much more than that. Have you ever used a web store where you need to enter your shipping address, credit card info, etc? Address, zip code (or worse, UK style postal code), phone number, email, credit card number - all that needs to be validated. A couple points: 1. The ~100ms between submitting a form and getting error messages isn't that big of a hur…

> The ~100ms between submitting a form and getting error messages isn't that big of a hurdle, in my experience. The issue here is not the length of time it takes for the response to come back, rather the fact that there is any delay at all. Client side validation code can be synchronous, submitting any validation info to the server makes it asynchronous by definition. State synchronization between client and server i…

> It can be argued that I did not use the best server side framework, did not know what I was doing, etc. That's actually my point: if doing old style web apps was so much easier, I should have been able to complete it fast without much sweat, no?

Having seen many similar discussions I came to the conclusion this might really be something of a generation gap. For those of us who spent their youth developing web apps back in the day, doing it the "old" way (that fortunately still works) seems natural and easy. And in some cases it's ridilously easy. If your needs are fairly typical (like the CRUD you describe), you might not even need to do that much - Django Admin or Laravel Voyager will take care of these.

Re: Things I wish I knew about state management when I started writing React apps

#296
post #86

Earlier quoted context omitted.

Having everything in global state is cheap if you use Immutable.js data structures. In my experience, Immutable.js the only way to do the global store pattern e.g. Redux without making your app slow to a crawl.

Note that we specifically recommend _against_ using Immutable.js, and that there's many misunderstandings about the hypothetical performance benefits that Immutable.js provides: https://redux.js.org/style-guide/style-guide#use-plain-javas... Instead, we strongly recommend using Immer for immutable update logic, preferably as part of our new Redux Toolkit package: https://redux.js.org/style-guide/style-guide#use-immer…

Immer is fantastic. It seems to be the best set of trade-offs to get as close as we can get in JavaScript to immutable reducers.

Re: Things I wish I knew about state management when I started writing React apps

#297

Why is state management such a talked-about issue with React? Other than distributed state, which obviously comes with its own set of challenges, managing state doesn't seem to be an issue with any other language, framework or platform. But with React, it seems to be a major part of the learning curve, with entire tutorials dedicated to it and numerous libraries to help with it in some way.

> Why is state management such a talked-about issue with React?

The "state problem" that exists in React, Vue, Flutter etc. is due to their maintaining components in a hierarchical tree. It is a manifestation of a "cost" (drawback) in that tree-based approach.

React represents elements as encapsulated components that can be composed into more complex elements, which are maintained in a hierarchical tree.

That's the main attraction. One can reason about independent pieces representing some aspect of UI. Those pieces can be building blocks used to build more complex things.

The price for this is that how these (encapsulated) components communicate and share data between them is problematic because of that hierarchical tree structure, where an element only knows its parent and child(ren).

Re: Things I wish I knew about state management when I started writing React apps

#298
With the release of React Hooks and the advent of GraphQL + its client-side libraries, state management [0] became a blessing IMO. Whenever it's possible I would opt-in using GraphQL for client-server communication. Then popular libraries like Apollo Client help you with all the state management for remote data and its caching. After this, all the remaining state management can be done with React Hooks (useState, useReducer, useContext)[1]. Only if this gets out of hands, opt-in Redux/MobX/...

- [0] https://www.robinwieruch.de/react-state

- [1] https://www.robinwieruch.de/react-state-usereducer-usestate-...

Re: Things I wish I knew about state management when I started writing React apps

#299
post #271
post #191

Earlier quoted context omitted.

I just use vanilla JS. For transport I use JSON over Websockets (with fallback to long-polling if the user is behind a proxy that doesn't support Websockets). I format the messages like id+command+json-payload. If the message contains an id, it calls the callback function given by the API request. If no id is given, the event listeners for "command" are called. In a higher level there are more events that can be list…

That sounds like a great framework. Let us know when you release it. :) The points made elsewhere in this thread still stand: a bespoke framework might be conceptually simpler and much easier for a solo developer, but for larger apps that require a team of developers using a popular framework would be much more productive overall, as everyone is or should be on the same page with how features are implemented. This of…

For short living projects, say two moths or half a year, I would probably go with an existing framework, for that initial speed and reuse of existing libraries/plugins. But for anything you would spend one year or more on, I would build a custom solution which optimizes for whatever is the domain priority, for example front-end performance, speed of development, etc. If you use your own "framework" it will become stable over time, where as a popular frameworks like React or Angular will just keep changing and eventually reach end of life support.

Re: Things I wish I knew about state management when I started writing React apps

#300
post #228

Earlier quoted context omitted.

> The ~100ms between submitting a form and getting error messages isn't that big of a hurdle, in my experience. The issue here is not the length of time it takes for the response to come back, rather the fact that there is any delay at all. Client side validation code can be synchronous, submitting any validation info to the server makes it asynchronous by definition. State synchronization between client and server i…

> It can be argued that I did not use the best server side framework, did not know what I was doing, etc. That's actually my point: if doing old style web apps was so much easier, I should have been able to complete it fast without much sweat, no? Having seen many similar discussions I came to the conclusion this might really be something of a generation gap. For those of us who spent their youth developing web apps…

> For those of us who spent their youth developing web apps back in the day, doing it the "old" way (that fortunately still works) seems natural and easy.

Spent my youth doing it the old way. Much rather use either React for nontrivial apps, still, now.

Post reply on HN