• Like
  • Save
10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic
Upcoming SlideShare
Loading in...5
×
 

10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic

on

  • 2,065 views

10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic

10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic

Statistics

Views

Total Views
2,065
Views on SlideShare
1,960
Embed Views
105

Actions

Likes
7
Downloads
24
Comments
0

4 Embeds 105

https://twitter.com 91
http://jolicode.baywatch.io 10
http://www.slideee.com 3
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Filtrer une liste via des filter et non dans le controller
  • SANS track by : <br /> - Angular génère un $$hashKey par objet <br /> - Si mise à jour de la liste : nouveau $$hashKey pour chaque élément même si ils sont identiques <br /> Donc tous les éléments sont supprimés et recréés dans le DOM => coûteux surtout si vous appliquez un filtre ou une directive à chaque élément <br /> <br /> AVEC track by : <br /> - Angular utilise l’ID de l’objet <br /> - Si mise à jour de la liste : Angular fait un diff de la liste et ne supprime pas / recréé pas les éléments identiques
  • Autre exemple : un menu qu’on fait apparaître en cliquant sur un bouton. <br /> Utiliser ngShow et pas ngIf, surtout si on rajoute une animation <br /> ngShow compile des directives
  • ngIf empêche la compilation des directives
  • Exemple : calculer la somme des âges des membres de Meetic en requêtant chacun des profils <br /> Permet d’éviter l’imbrication de callbacks et donc le synchronisme
  • On évite ainsi d’afficher une page non complète et que l’utilisateur ait la sensation que l’application rame

10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic 10 astuces pour améliorer les performances de son application AngularJS - ngParis - Meetup #11 @ Meetic Presentation Transcript

  • Make it Better, Do it Faster! 10 astuces pour améliorer les performances de son application AngularJS 26/05/14
  • Euh… mais t’es qui toi exactement ? Jonathan Meiss Manager équipe front-end chez Meetic @JohnMeiss
  • Mon appli rame quand je veux afficher une longue liste via ngRepeat Problème #1
  • <ul> <li ng-repeat="item in items | startFrom:currentPage*20 | limitTo:20"> {{item.name}} </li> </ul> 4 Astuce #1 : limitTo (pagination) « Réduire le nombre d’éléments à afficher dans une liste permet de réduire le temps de rendering. »
  • <ul infinite-scroll="addMoreItems()"> <li ng-repeat="item in items"> {{item.name}} </li> </ul> 5 Astuce #2 : ngInfiniteScroll « Charger uniquement les premiers éléments d’une liste permet de réduire le temps de rendering. » http://binarymuse.github.io/ngInfiniteScroll <>
  • <ul> <li bindonce ng-repeat="item in items" bo-text="item.name"></li> </ul> 6 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 <>
  • <ul> <li ng-repeat="item in filteredItems()">{{item.name}}</li> </ul> 7 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>
  • <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>
  • Mon appli rame quand j’utilise ngIf ou ngShow Problème #2
  • <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> 10 Astuce #6 : bien utiliser ngShow « ngShow rend l’élément dans le DOM mê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>
  • <li ng-repeat="item in items" ng-click="expand = !expand"> {{item.name}} <span ng-show="expand">{{item.description}}</span> </li> 11 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>
  • Et si on optimisait aussi les requêtes ?
  • $resource('/users', {}, { query: { method: ’GET’, cache: true, isArray: true } }); 13 Astuce #8 : cache HTTP « Activer le cache HTTP, permet de mettre en cache la requête Et ainsi accélérer le prochain affichage de la page »
  • 14 Astuce #9 : $q.all() « $q.all() permet de paralléliser les promises puis de traiter chacun des résultats en même temps, tout en choisissant l’ordre de traitement des réponses. »
  • Qu’est-ce qu’une application « performante » ?? Mais au fait…
  • Ce qui est important, ce ne sont pas les millisecondes passées à afficher une page mais C’est La Performance Utilisateur
  • .when('/accounts', { templateUrl: 'views/accounts/index.html’, resolve: { accountList: ['apiV1', function (apiV1) { return apiV1.accountList().$promise; }] } }); 17 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.
  • Est-ce que ça veut dire que je dois utiliser resolve pour chaque route ?
  • Application synchrone ! Page bloquée = utilisateur mécontent Pas toujours nécessaire (données cachées) Page blanche Surtout pas ! ! ! !
  • Tout est une question de perception Montrez à votre utilisateur qu’une action est en cours… …ce bon vieux spinner (HttpInterceptor est votre ami)
  • 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
  • Tout est une question de perception La technique de « l’apéro »… …donnez-lui quelque chose à grignoter pendant que l’application est en train de mijoter
  • Et pour aller plus loin… ?
  • 24 Astuce #troll : pour les vues complexes, utilisez… Optimizing AngularJS: 1200ms to 35ms https://github.com/scalyr/angular <>
  • Et un grand merci à mon collègue @jorisCalabrese à qui j’ai salement pompé ces magnifiques picto dessinés à la main ! Merci. @JohnMeiss
  • Est-ce qu’on vous a dit qu’on recrute des ninjas dev front-end ?
  • 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/