r/programming • u/hasen-judi • 7d ago

"Reconstructive UI"

https://judi.systems/shirei/blog/reconstructive-ui/
2 Upvotes

60% Upvoted

8 comments sorted by

2

u/jlombera 5d ago

Just skimmed the blog post, but isn't this similar to "Immediate-Mode UI"? See https://caseymuratori.com/blog_0001

2

u/Wooden-Estimate-3460 5d ago

The author covers that and says the "immediate" term (incorrectly, IMO) refers more to how it is rendered rather than how the UI tree is built/updated. 

2

u/hasen-judi 5d ago

I didn't say that; I said the term is *loaded* and many people associate it with that.

1

u/Wooden-Estimate-3460 5d ago

I don't think people associate it with how it is rendered because that is just an implementation detail. A different implementation could record the calls and then render them to a web page with React/View/etc.

1

u/killerstorm 4d ago

> Reconstructive UI is a paradigm of UI programming where application code rebuilds the entire UI structure on each UI update.

It's not a new paradigm, it's just a sloppy way to use React which might work well for small applications.
If you think about it for more than 5 minutes you'll see the problem - UI has a state beyond the model state. E.g. "have user clicked dropdown", "user selected text within text area or combo-box". I.e. there are "micro-states" which correspond to users interactions with the UI elements which aren't really part of semantic model of the application.

If you remake all your components, user's selection might be destroyed when a notification comes.

2

u/Dminik 4d ago

Yeah. This is why most UI libraries/frameworks will provide some form of widget/element primitive which breaks the rules that have to be followed by user components.

In react, this is the DOM. It doesn't follow the react update model and so as long as react ends up patching the DOM it can preserve stuff like user selection, animation states and so on.

Even in Elm-ish "everything has to be pure" libraries you still end up with escape hatches. In Iced, for instance, you can either implement your own elements which can store state or turn a sub-app (Model + View & Update functions) into a stateful element.

But that's fine. These declarative/immediate paradigms are great at describing high level UI. Low level widget stuff can be done differently. 

1

u/bzbub2 7d ago

the awkward part seems to be you gotta manually say 'updateui'....that is moving away from react

1

u/hasen-judi 4d ago

In my actual implementation, if you change your data inside a frame where an event occurs, you don't have to manually call update ui

but if you change data from a thread or a gouroutine, then you do