I find myself writing notebooks that expose specific UI component functionality. Think of something like a React component. Component have their own internal state that changes based on user interactions and/or external data.
In React’s runtime this is easy achievable using the infamous setState. Am curious, what is the preferred way of doing this for Observable’s runtime?
Since the main idiom of the platform is an “observable” I was thinking that any user-interaction and/or external data can be derived, so perhaps viewof is the solution to this?
As an example imagine I have some data that comes from an HTTP server such as status = { userStatus: "pending" } and after a user-interaction (perhaps a click) I want the status to be active.
I could have a new cell perhaps called isUserStatusActive that depends on status and the viewof for the click element to represent this new “observable”?
I know there’s also mutable for this but what is the preferred way of managing this kind of setState stuff? Thanks
I do this for component local changes. (e.g. the reconcile-nanomorph example). Even though it’s much faster, it can still slow down for large grids of components though. I don’t have a satisfactory solution for grids yet. (I did not like using React in Observable. I felt the two paradigms fought in too many strange ways.)
If a notebook represents some bigger app, I tend to shove the notebook state in a single mutable object and manipulate it.
mutable appState = {... complex object ...}
Coz a leaf mutation doesn’t trigger, and its painful desugaring deeply, I end up doing this:
appState.todos[1].isDone = true // manipulate a leaf value, which doesn't trigger update
mutable appState = appState // a no-op but triggers an update
I am not sure this is the best way, but where I have currently converged to as a compromise of a few different scalability issues, I am still searching for better ways to structure complex apps.
