1. Comment créer une application
Angular performante ?

2. Mais qui sommes nous ?
Sébastien OLLIVIER
Développeur @SportyTech
Microsoft MVP
Auteur AngularJS & Angular
SebastienOll sebastieno
William Klein
Développeur @SportyTech
Microsoft MVP
Auteur Angular
wi_klein willovent
https://sebastienollivier.fr/blog
https://blog.williamklein.info

3. Compilation des templates

4. Téléchargement
des fichiers JS
browser
Bootstrap
d’Angular
browser
Compilation JiT : Pendant l’exécution de l’application
Compilation des
templates
browser
Affichage du
rendu
browser
Compilation de
l’app
build server
Ajout des
templates dans
le bundle
build server
ng build ou ng build --prod --no-aot
Les templates sont intégrés au bundle lors de la phase de build
Les templates sont compilés lors de l’exécution de l’application

5. Téléchargement
des fichiers JS
browser
Bootstrap
d’Angular
browser
Compilation AoT : Pendant la phase de build
Compilation des
templates
build server
Affichage du
rendu
browser
Compilation de
l’app
build server
ng build --aot ou ng build --prod
Les templates sont compilés lors de la phase de build

6. Compilation JiT vs AoT
https://sebastienollivier.fr/blog/angular/angular-jit-vs-aot
AoT en production
JiT en développement
En AoT, le bundle est plus petit, l’application est plus performante et les
templates sont validés (+ code treeshaké) à la compilation
En JiT, le temps de build de l’application est beaucoup plus rapide

7. Feature Modules

8. Feature Modules
Regrouper les fonctionnalités business / technique au sein d’un même
module Angular pour
Mieux organiser son application
Déferrer le chargement d’un module

9. Change Detection

10. Comment détecter les changements ?
Angular effectue un cycle de détection de changement à chaque action asynchrone
(évènements du DOM, timers, XHR, etc.)
https://www.youtube.com/watch?v=3IqtmUscE_U
https://www.youtube.com/watch?v=8aGhZQkoFbQ
car JavaScript est un langage monothreadé et asynchrone non bloquant
ZoneJS / NgZone

11. Stratégie Default
Angular parcourt tous les composants de manière arborescente pour détecter les changements

12. Pas de modification
détectée
https://github.com/Willovent/changedetection-advent-calendar
La méthode MarkForCheck du ChangeDetectorRef permet d’indiquer à Angular de vérifier
une branche même si les références des @Input d’un composant n’ont pas changé.
Stratégie OnPush
Angular ne met à jour que les composants dont les références des @Input ont changé.
Si les références des @Input d’un composant n’ont pas changé, Angular ne va pas vérifier ses
composants enfants.

13. Server Side Rendering

14. http://
Envoi du fichier
index.html
server
Téléchargement
des fichiers JS
browser
Bootstrap
d’Angular
browser
Affichage du
rendu
browser
L’utilisateur ne peut rien faire
Comment se charge une application Angular ?

15. Rendu côté serveur
Le serveur exécute l’application et renvoi une vue prête à l’emploi
+

16. Comment se charge une application Angular avec SSR ?
http://
Envoi du fichier
index.html
server
Téléchargement
des fichiers JS /
affichage du rendu
browser
Bootstrap
d’Angular
browser
Mise à jour du
rendu
browser
L’utilisateur voit la page L’utilisateur peut interagir
https://blog.williamklein.info/posts/Angular/Rendu-cote-serveur-dAngular-Part-13

17. Preboot.js enregistre les interactions et les rejoue une fois l’application prête
Et si l’utilisateur fait des trucs pendant le chargement ?
L’utilisateur voit la page L’utilisateur peut interagir
L’application n’est pas prête et ne peut réagir aux interactions utilisateurs

18. Merci ! Des Questions ?