Angular
Change detection
Menu
Header
Footer
Feed
Breaking news!
Application tree
Meows news!
App
Menu
Header
Feed
Footer
Post
Post
Data model
posts: Post[] = [
{
id: 1,
title: 'Breaking news!',
text: 'Voluptate labore veniam...',
likes: 2,
isLiked: false
},
{
id: 2,
title: 'Meows news!',
text: 'Laborum minim sit incididun...',
likes: 42,
isLiked: false
}
];Menu
Header
Footer
Feed
Breaking news!
Meows news!
posts: Post[] = [
{
id: 1,
title: 'Breaking news!',
text: 'Voluptate labore veniam...',
likes: 2,
isLiked: false
},
{
id: 2,
title: 'Meows news!',
text: 'Laborum minim sit incididun...',
likes: 43,
isLiked: true
}
];2 ♡
42 ♡
43 ♡
Change detection flow
Model
DOM
Component
Application State Update
Is done by YOUR code after some browser event (user interaction)
View State Propogation
Is done by Change Detector after your code is finished
Change Detection tree
<parent>
<child>
...
</child>
</parent>Change Detection complexity
Change Detection Time = C * N
C - time to check one binding
N - amount of bindings
How to reduce change detection time
Change Detection Time = C * N
C - time to check one binding
N - amount of bindings
Template Compilation
JIT
Just In Time compilation
AOT
Ahead Of Time compilation
Compiles at runtime
Compiles at build time
$ ng serve
$ ng build$ ng serve --aot
$ ng build --prodBenefits of using AOT
- Template analysis
- Smaller bundle size
- Significantly faster
But...
- Increased build time
- Takes too much to compile huge applications (especially for the development purposes)
- Imposes some TypeScript restrictions
Essential to be enabled in production mode
How to reduce change detection time
Change Detection Time = C * N
C - time to check one binding
N - amount of bindings
Immutable components
onPush strategy
@Component({
// ...,
changeDetection: ChangeDetectionStrategy.OnPush,
// ...
})
export class CardItemComponent {
// ...
}+ Immutable objects
ChangeDetectorRef
Manually controls change detection flow
@Component({
// ...,
})
export class Myomponent {
constructor(private ref: ChangeDetectorRef) {
// ...
}
}ChangeDetectorRef
Methods
- markForCheck(): void
- detach(): void
- reattach(): void
- detectChanges(): void
- checkNoChanges(): void
Zone.js
What does trigger change detection?
- User interaction (onClick, onSubmit, onMouseMove, etc)
- Response (XHR, fetch)
- Timers (setTimeout, setInterval)
These are async actions
Change detection flow
Async action
Change detection
Zone.js
Run 3rd party code
constructor (private ngZone: NgZone) {}
public processOutside() {
this.ngZone.runOutsideAngular( () => {
// do some stuff
this.goBack();
});
}
public goBack(someFunction) {
this.ngZone.run(someFunction);
}