sketchbook-js/sketchbook

Spike: Investigate using Immutable.js

haydn opened this issue · 1 comments

haydn commented

Hypothesis

Using Immutable.js to maintain the app's state will improve performance (especially for documents that have a lot of layers) and also provide a useful pattern for dealing with nested state.

Deliverables

Put together a CodeSandbox or two to test how Immutable.js will work with some of the key pieces of functionality.

Specific things to test:

  • Updating individual layers without updating the whole document.
  • Updating options without updating the whole document (just the layer the options belong to should be affected).
  • Dealing with nested state. What if layers could be organised into groups and those groups are nested recursively, how would we handle that in an Immutable.js world? (This should also answer the same question for options.)
  • Mixing input state with the document state. Things like resizing layers is derived from both the document (for the original layer position) and input (for the mouse dragging details). Would that mean we need to also manage the input state with Immutable.js, or can we just combine that with the Immutable.js state as needed?
  • How would we tackle the canvas connection? It's using postMessage() to sync the editor state to the canvas state which uses the structured clone algorithm to copy the data. Would we be able send Immutable.js data with that or would we need to transform it into a simpler form first?