mopics / piano-hint

app to help visualize scales and chords on the piano
0 stars 0 forks source link

Write Custom Change Detection Code !!! #16

Open mopics opened 6 years ago

mopics commented 6 years ago

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

mopics commented 6 years ago

Change Detection Reinvented Victor Savkin: About differences between Angular 1 & 2 Change-detection. And how to override default Change-Detection to make it faster. Default ng2 change detection works as a tree. Every time an event happens ( like (click) ) the whole component tree gets checked for model-binding-changes. Turns out you can make it so that Angular only checks a tiny part of the app for model-bindings-changes!!!

C : time to check a binding
N: number of bindings ( in the whole app )

Change Detection Time = C * N

What about N can we be smarter about what bindings we check? Because of the mutable nature of js objects ng2 can not be sure if a model tree structure has changed or not. So it has to check the whole model tree structure. But as a developer you may know for certain a model does not change or know when they change. You have to let ng2 in on this knowledge to make Change-Detection SMARTER.

1. Inmutable objects.

Prevents ng2 from probing through the whole model tree. It only does that when an immutable object is totally replaced ( the only way you can change a property of a immutable object, is to clone the whole thing with the new property set ).

C : time to check a binding
M: number of changed bindings

M < N

Change Detection Time = C * M

2. Observables.

https://www.youtube.com/watch?v=jvKGQSFQf10