10 astuces pour améliorer les performances de son application angularjs - ngparis - meetup #11 @...
DESCRIPTION
10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ MeeticTRANSCRIPT
![Page 1: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/1.jpg)
Make it Better, Do it Faster!
10 astuces pour améliorer les performancesde son application AngularJS
26/05/14
![Page 2: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/2.jpg)
Euh… mais t’es qui toi exactement ?
Jonathan MeissManager équipe front-end chez Meetic
@JohnMeiss
![Page 3: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/3.jpg)
Mon appli rame quand je veux afficher une longue liste via ngRepeat
Problème #1
![Page 4: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/4.jpg)
4
<ul> <li ng-repeat="item in items | startFrom:currentPage*20 | limitTo:20"> {{item.name}} </li> </ul>
Astuce #1 : limitTo (pagination)
« Réduire le nombre d’éléments à afficher dans une listepermet de réduire le temps de rendering. »
![Page 5: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/5.jpg)
5
<ul infinite-scroll="addMoreItems()"> <li ng-repeat="item in items"> {{item.name}} </li></ul>
Astuce #2 : ngInfiniteScroll
« Charger uniquement les premiers éléments d’une listepermet de réduire le temps de rendering. »
http://binarymuse.github.io/ngInfiniteScroll<>
![Page 6: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/6.jpg)
6
<ul> <li bindonce ng-repeat="item in items" bo-text="item.name"></li> </ul>
Astuce #3 : Bindonce
« Passé les 2000 watchers, la page peut commencer à ramer.Avec bindonce, cette liste n’a plus qu’un seul watcher ! »
https://github.com/Pasvaz/bindonce<>
![Page 7: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/7.jpg)
7
<ul> <li ng-repeat="item in filteredItems()">{{item.name}}</li> </ul>
Astuce #4 : pas de fonction inline !« Besoin de filtrer la liste dans un contrôleur ?
N’utilisez pas une fonction pour récupérer la liste filtrée ! »
ngRepeat évalue l’expression à chaque $digest,ce qui est fait très fréquemment.
<ul> <li ng-repeat="item in items">{{item.name}}</li> </ul>
![Page 8: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/8.jpg)
<li ng-repeat="item in items"> {{item.name | myHeavyFilter}} </li>
Astuce #5 : utiliser track by (>= 1.2)Mise à jour d’une liste :
Angular supprime et recrée chaque élément dans le DOM
Mise à jour d’une liste :Angular fait un diff des deux listes et ne créé / supprime que les éléments non
identiques.
<li ng-repeat="item in items track by item.id"> {{item.name | myHeavyFilter}} </li>
![Page 9: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/9.jpg)
Mon appli rame quand j’utilise ngIf ou ngShow
Problème #2
![Page 10: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/10.jpg)
10
<div ng-click="toggle = !toggle">Click</div> <div ng-if="toggle" ng-repeat="item in oldItems">{{item.name}}</div> <div ng-if="!toggle" ng-repeat="item in newItems">{{item.name}}</div>
Astuce #6 : bien utiliser ngShow
« ngShow rend l’élément dans le DOMmême si il n’est pas visible. »
<div ng-click="toggle = !toggle">Click</div> <div ng-show="toggle" ng-repeat="item in oldItems">{{item.name}}</div> <div ng-show="!toggle" ng-repeat="item in newItems">{{item.name}}</div>
![Page 11: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/11.jpg)
11
<li ng-repeat="item in items" ng-click="expand = !expand"> {{item.name}} <span ng-show="expand">{{item.description}}</span> </li>
Astuce #7 : bien utiliser ngIf
« Contrairement à ngShow,ngIf empêche le rendering de l’élément dans le DOM »
<li ng-repeat="item in items" ng-click="expand = !expand"> {{item.name}} <span ng-if="expand">{{item.description}}</span> </li>
![Page 12: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/12.jpg)
Et si on optimisait aussi les requêtes ?
![Page 13: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/13.jpg)
13
$resource('/users', {}, { query: { method: ’GET’, cache: true, isArray: true } });
Astuce #8 : cache HTTP
« Activer le cache HTTP, permet de mettre en cache la requêteEt ainsi accélérer le prochain affichage de la page »
![Page 14: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/14.jpg)
14
Astuce #9 : $q.all()
« $q.all() permet de paralléliser les promisespuis de traiter chacun des résultats en même temps,
tout en choisissant l’ordre de traitement des réponses. »
![Page 15: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/15.jpg)
Qu’est-ce qu’une application « performante » ??
Mais au fait…
![Page 16: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/16.jpg)
Ce qui est important,ce ne sont pas les millisecondespassées à afficher une page mais
C’est La Performance Utilisateur
![Page 17: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/17.jpg)
17
.when('/accounts', { templateUrl: 'views/accounts/index.html’, resolve: { accountList: ['apiV1', function (apiV1) { return apiV1.accountList().$promise; }] } });
Astuce #10 : resolve
ngRouter attend que toutes les dépendances appelées dans resolve soient résolues avant d’instancier le contrôleur puis
changer de route.
![Page 18: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/18.jpg)
Est-ce que ça veut dire que je dois utiliser resolve pour chaque route ?
![Page 19: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/19.jpg)
Application synchrone!
Page bloquée = utilisateur mécontent
Pas toujours nécessaire (données cachées)
Page blanche
Surtout pas !
!
!
!
![Page 20: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/20.jpg)
Tout est une question de perception
Montrez à votre utilisateur qu’une action est en cours……ce bon vieux spinner (HttpInterceptor est votre ami)
![Page 21: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/21.jpg)
Tout est une question de perception
Mais ne le mettez pas à chaque fois non plus ! …l’utilisateur considère une action comme étant instantanée si elle prend moins de 100ms
![Page 22: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/22.jpg)
Tout est une question de perceptionLa technique de « l’apéro »……donnez-lui quelque chose à grignoter pendant que l’application est en train de mijoter
![Page 23: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/23.jpg)
Et pour aller plus loin… ?
![Page 24: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/24.jpg)
24
Astuce #troll : pour les vues complexes, utilisez…
Optimizing AngularJS: 1200ms to 35ms
https://github.com/scalyr/angular<>
![Page 25: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/25.jpg)
Et un grand merci à mon collègue @jorisCalabreseà qui j’ai salement pompé ces magnifiques picto dessinés à la main !
Merci.
@JohnMeiss
![Page 26: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/26.jpg)
Est-ce qu’on vous a dit qu’on recrutedes ninjas dev front-end ?
![Page 27: 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic](https://reader036.vdocuments.site/reader036/viewer/2022062514/5586e9aad8b42a7b198b464a/html5/thumbnails/27.jpg)
27
Ressources
• http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/
• http://stackoverflow.com/questions/15643467/how-to-speed-up-an-angularjs-application
• http://blog.stackfull.com/2013/02/angularjs-virtual-scrolling-part-1/