Architecting UIs for Change

Re:Architecting UIs for Change by lioeters on Saturday March 23, 2019 @09:07AM (#19470289)

Hmm, typically, I do store "UI state" (or parts of it) in the top app state if that UI state is shared among pages/routes. In your example, if I want that dialog state to be "persistent" - say, the user goes to another route then comes back, if the dialog state should be kept. Otherwise, I store them in the route component's state, which gets created anew every time.

But your question makes me think, if I store any UI state in the app state, have I really decoupled state and view? I'd say yes - since I'd be able to build and test UI state and actions, independent from the view.

[ Parent | on HN ]

Re:Architecting UIs for Change by pests on Saturday March 23, 2019 @11:09AM (#19470749)

Unless you have code that depends on state that supposed to be kept UI-only.

Then when you expand to an API or CLI interface the web state being tracked no longer makes sense and might be extra ram or loading time.

[ Parent | on HN ]

Re:Architecting UIs for Change by lioeters on Saturday March 23, 2019 @01:36PM (#19471391)

Well, at least theoretically, the way I organize state management allows me to pull in "slices" of app state/actions (or even moved into shared libs/modules), to compose a smaller subset for an API or CLI. So the latter can choose to not include any of the UI-related state.

In practice I haven't used it so much, but I like the idea of treating the UI as just another render target / consumer of app state/actions. It enables "remote control" of the app logic, makes testing simpler, and allows reuse for various interfaces like CLI, API, maybe React Native too.

[ Parent | on HN ]

Re:Architecting UIs for Change by pests on Sunday March 24, 2019 @08:35AM (#19475971)

I do agree for the consistent mental model.

I've been playing around switching web-apps and other user programs between devices on a single-ususer facing kubernetes system. Part of that relies on all state being sent to the server for distribution if a device switch happens.

I also have played around with a wrapper functions and that can bubble any callback/hook up to the data for further processing. The client no longer worries about sending actions. The server spys on client actions and performs actions on their behalf.

I plan on posting a blog post about the his soon.

[ Parent | on HN ]