How robust data structures help make Om faster

Om, the clojurescript React shell, is considered very fast because it uses immutability. I can't figure out how persistent data structures can help here.

I realized that the state of the application is an atom. This state is passed to the functions (om components) that the virtual DOM nodes return, so creating a β€œpatch” of the differences between the current virtual DOM and its previous state is much better than working directly with the actual DOM.

But where can persistent data structures be stored?

(def app-state (atom {:foo {:counter 0})) (om/root click-counter app-state {:target ...}) 

for example, click-counter display a button that, when clicked, increments the counter. So the transition function is as follows:

 (dom/button #js {:onClick #(om/transact! app [:foo :counter] inc)} (str "clicked " (-> app :foo :counter) " times")) 

I found this: when executing onClick clojurescript creates a new map (very efficiently) as follows:

 {:foo {:counter 1}} 

and app-state now points to a new mapping. At this point, Om realizes that the state is changed because it is just a matter of checking equality.

The problem here is that Om should still calculate the difference between the whole old virtual DOM and the new one. He does not know that only the counter is changed.

Where is my mistake?

+5
source share
1 answer

When the application state is stored in a stable tree structure, such as a map, it is immediately clear which parts of the state tree do not change and do not need to be updated. This is because any change for the child changes the parent. With volatile data structures, changes to children should not change parents.

So, if your condition looked like this:

 {:part1 [1 2 3 4] :part2 [:a :b]} 

and you create a new state by adding something to part2:

 {:part1 [1 2 3 4] :part2 [:a :b :c]} 

then the comparison function can look and see that the value in: part1 of the old and new states is the same object and, therefore, cannot have any changes in any nested state, since it is unchanged.

+4
source

All Articles