Hi! I’m fairly new to web dev but have written C/C++/python for about 35 years. I’m writing an app to create and edit complex documents (“projects”) – not just text but 3d graphics, images, video. The projects are complex hierarchical objects and I know I’ll want to add more complexity as I go on. I’m using Typescript, Vue, Vuex and Firebase as the back end.
My naive approach is to have a top-level typescript
Project class that contains everything -
Settings, and those have sub-objects and so on – so in theory I could write that whole object out through Vuex to Firebase as is, and read it in (using class-transformer for instance). It does seem like the Vuex representation should be the single source of truth for the app.
But that doesn’t explain how to hook things up to components, nor especially how to use Vuex. And, it’s going to get super heavyweight. Everything I’ve read (e.g. vuex best practices for complex objects) says to store things “normalized” in Vuex, like db tables, and keep references in parent objects. So a Project would have a list of shot IDs
[1, 9, 33] and those index into the
Shot table in Vuex. And that maps nicely to Firebase documents and collections.
But it seems to complicate the front end; instead of one
Project I have all these separate bits to gather. I can’t just say
for param in project.shots[s].representations[r].params – it’s not clear to me how to hook up, say, a slider component whose model is a
Param inside a
Representation inside a
Shot so that everything stays in two-way sync and gets saved to Firebase and restored nicely, and I get nice Typescript classes for type-safety. Can this be done with enough fancy setters and getters?
All this is to say, are there examples of best practices to follow when creating a complex editor in Vue/Vuex/Firebase like this? If you have experience doing this kind of thing, I’d like to hear from you.