SlideShare une entreprise Scribd logo

Comment créer une application Angular performante ?

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

1  sur  18
Télécharger pour lire hors ligne
Comment créer une application
Angular performante ?
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
Compilation des templates
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
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
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

Recommandé

Intégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec JenkinsIntégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec JenkinsKokou Gaglo
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent Duveau
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React NativeCocoaHeads France
 
De Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le CloudDe Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le CloudNicolas FRANCOIS
 

Contenu connexe

Tendances

Fastlane snapshot presentation
Fastlane snapshot presentationFastlane snapshot presentation
Fastlane snapshot presentationCocoaHeads France
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindPhilippe Didiergeorges
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorArthurMaroulier
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon
 
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2Romain Linsolas
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mvMael Monnier
 
Rapport app mobile ionic3 my gallery
Rapport app mobile ionic3 my galleryRapport app mobile ionic3 my gallery
Rapport app mobile ionic3 my galleryMOHAMMED MOURADI
 
Android Lab Test : Le style des vues (français)
Android Lab Test : Le style des vues (français)Android Lab Test : Le style des vues (français)
Android Lab Test : Le style des vues (français)Bruno Delb
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTtayebbousfiha1
 
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Bilel ZEGHAD
 
Non-regression testing in web app development
Non-regression testing in web app developmentNon-regression testing in web app development
Non-regression testing in web app developmentCédric Villa
 
Présentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTPrésentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTDNG Consulting
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)Rui Carvalho
 

Tendances (20)

Intro aurelia js-typescript
Intro aurelia js-typescriptIntro aurelia js-typescript
Intro aurelia js-typescript
 
Fastlane snapshot presentation
Fastlane snapshot presentationFastlane snapshot presentation
Fastlane snapshot presentation
 
ngconf 2016 (french)
ngconf 2016 (french)ngconf 2016 (french)
ngconf 2016 (french)
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
 
ngParis - Rendu cote serveur
ngParis - Rendu cote serveurngParis - Rendu cote serveur
ngParis - Rendu cote serveur
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
 
Test angular 2+
Test angular 2+Test angular 2+
Test angular 2+
 
Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
 
Rapport app mobile ionic3 my gallery
Rapport app mobile ionic3 my galleryRapport app mobile ionic3 my gallery
Rapport app mobile ionic3 my gallery
 
Test flight
Test flightTest flight
Test flight
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Android Lab Test : Le style des vues (français)
Android Lab Test : Le style des vues (français)Android Lab Test : Le style des vues (français)
Android Lab Test : Le style des vues (français)
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
 
Non-regression testing in web app development
Non-regression testing in web app developmentNon-regression testing in web app development
Non-regression testing in web app development
 
Présentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTPrésentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWT
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 

Similaire à Comment créer une application Angular performante ?

Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptxIdrissaDembl
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptxEsokia
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJsRadhoueneRouached
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sassmarwa baich
 
Angluars js
Angluars jsAngluars js
Angluars jsRYMAA
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursHoracio Gonzalez
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Nazih Heni
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido SOAT
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Eric SIBER
 

Similaire à Comment créer une application Angular performante ? (20)

Angular 11
Angular 11Angular 11
Angular 11
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Gwt intro-101
Gwt intro-101Gwt intro-101
Gwt intro-101
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
Angluars js
Angluars jsAngluars js
Angluars js
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
 

Comment créer une application Angular performante ?

  • 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
  • 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
  • 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
  • 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.
  • 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 ?

Notes de l'éditeur

  1. Titre : Créer une application performante Image: fast
  2. Présentation seb & will
  3. https://willovent.github.io/changedetection-advent-calendar/