My app is a mental map editor. It’s designed using the nested components (anti)pattern because I didn’t know better at the time, and now I want to refactor it. It has a mental map component which (in its Model) contains the state of the camera, some other UI stuff, but most importantly, it contains node and edge components in a graph data structure. The node component has two additional sub components.
I had some difficulty implementing JSON encoding/decoding and now I’m having difficulty implementing saving/loading from local storage. One observation I made is that my document data (the node labels and positions, their color, the graph structure…) live scattered about the component Models, along with internal state of the UI. For both saving and serialization, I only want to target the document data, not UI state.
The problem I have now is keeping track of when the document data is updated, since it lives in many places and isn’t separated from UI state. I need help refactoring to solve this. Should I put all document data in a big record, have it live in the top level Model, and pass it down to the children’s Views? How do I let the child components update it, then? From what I understand, passing OutMessages is also an antipattern.
Another issue with that approach is that for each, say, node in the document record, I’d have to keep a node component (which keeps the UI state) somewhere in the mental map component’s model. These two collections of nodes could become unsynchronized because there’s no way to make impossible states impossible without coupling the two kinds of data.
I have watched Richard Feldman’s talk about scaling apps, but I don’t see any big ways to apply those ideas to my app.