Slides du Meetup Angular à Paris, sur la détection de changement, le 11/12/2017

1. La détection de changements
Angular

2. Mais qui sommes nous ?
William KLEIN
Développeur Web @InfiniteSquare
Auteur Angular
wklein@infinitesquare.com
wi_klein
willovent
Daniel DJORDJEVIC
Développeur Web @InfiniteSquare
Auteur Angular
ddjordjevic@infinitesquare.com
d_djordj
Seloris

3. Pourquoi détecter
les changements?

4. La détection de changements
4
Une application === un ensemble de modèles
Les accès au DOM sont coûteux
Chaque framework possède sa détection de changements
Le modèle change La vue doit changer
…

5. Qu’est-ce qui lance la détection ?
5
Les évènements du DOM
 Click
 Submit
 …

6. Qu’est-ce qui lance la détection ?
6
Les XHR : récupérer des données depuis une API
 HttpClient

7. Qu’est-ce qui lance la détection ?
7
Les timers JS
 setTimeout()
 setInterval()

8. L’asynchronisme au centre de la détection
8
Les opérations asynchrones sont envoyées dans l’event queue
Elles sont consommées dès que la call stack est vide
C’est à ce moment là que les Zones interviennent

9. Zone.js, pour notifier Angular
9
« Monkey Patch » de l’event queue
Un code
asynchrone va
être traité
Event Queue
Exécution du code
asynchrone
Le code
asynchrone a été
traité
runBefore() runAfter()

10. Que fait la détection
de changements ?

11. Angular et la détection de changements
11
Chaque composant possède son détecteur de changements
Arbre uni-directionnel : change detection graph
 Parcouru en entier à chaque opération async
Grosse optimisation de la team Angular
 Mise à disposition du OnPush
AppCmp
Cmp1 Cmp2
Cmp3 Cmp4
CD CD
CDCD
CD

12. OnPush + Immuabilité = <3
#immuabilité
12
Un objet modifié === une nouvelle référence
Object.assign
Immutable.js
…

13. OnPush + Immuabilité = <3
#onPush
13
Stratégie de détection de changements : OnPush
La détection de changements ne se lance qui si la référence de product
change

14. OnPush + Immuabilité = <3
#onPush
14
AppCmp
Cmp1 Cmp2
Cmp3 Cmp4
OnPush
Pas de modification, on ne va pas plus loin

15. Gestion manuelle de la détection
15
ChangeDetectorRef (@angular/core)
 reattach()
 detach()

16. Merci pour votre attention !
16
Sources : https://github.com/Willovent/changedetection-advent-calendar