Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Comment créer une application Angular performante ?

269 vues

Publié le

Comment créer une application Angular performante ?
Tour d'horizon de 4 points important permettant de créer une application Angular performante.

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

Comment créer une application Angular performante ?

  1. 1. Comment créer une application Angular performante ?
  2. 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. 3. Compilation des templates
  4. 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. 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. 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. 7. Feature Modules
  8. 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. 9. Change Detection
  10. 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. 11. Stratégie Default Angular parcourt tous les composants de manière arborescente pour détecter les changements
  12. 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. 13. Server Side Rendering
  14. 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. 15. Rendu côté serveur Le serveur exécute l’application et renvoi une vue prête à l’emploi +
  16. 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. 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. 18. Merci ! Des Questions ?

×