Angular Performance Tuning

for large Apps (presented at JSUnconf)

Transcript

1. Angular Performance Tuning for large apps
3. What is a fast app?
5. I clicked the button... and nothing ever happened! — Random User
6. This spinner never stops, maybe I need to hit reload... — Frustrated User
7. Scrolling the page feels awkward, somehow... — Enraged User
9. < 100 Update the UI in less than 100ms to make it feel instant
10. loading spinners avoid them, preload data instead
11. > 60 fps For smooth scrolling, only rerender parts
14. Unfortunately [...] it is easy to build slow apps when you don't know what you are doing. — Misko Hevery
15. Dirty Checking a.k.a. The Magic™ behind angular.JS
19. Minimize number of registered watchers
20. Maximize performance of registered watchers
21. Simple Measures
22. Use ng-if instead of ng-show <button ng-click="expanded = !expanded"> Show details </button> <div ng-if="expanded"> <div ng-include="complex.html"></div> </div> docs.angularjs.org/api/ng/directive/ngIf
23. bind-once <li bindonce ng-repeat="person in persons"> <span bo-text="person.name"></span> </li> // see bo-href, bo-src, bo-class, bo-html github.com/Pasvaz/bindonce
24. Precalculate properties // bad idea <li ng-repeat="person in persons"> {{person.expensiveComputation()}} </li> // way better idea <li ng-repeat="person in persons"> {{person.preCalculatedResult}} </li>
25. Advanced Measures
26. Pagination <li ng-repeat="person in persons"> {{person.name}} </li> // better <li ng-repeat="person in persons | paginate:page"> {{person.name}} </li> github.com/UnicodeSnowman/angular-paginate-filter
27. Infinite Scrolling <div infinite-scroll="loadMore()"> <span ng-repeat="person in persons"> {{person.name}} </span> </div> $scope.loadMore = function() { var offset = $scope.persons.length; var more = $scope.allPersons.slice(offset, offet+20) $scope.persons = $scope.persons.concat(more); }; // binarymuse.github.io/ngInfiniteScroll/
28. Cache calculated properties function Collection(els, size) { /* ... */ } createDynamicProperties(Collection, { view: ['els', 'size', 'page', function () { var offset = this.page * this.size; return this.els.slice(offset, offset.this.size); }] }); <div ng-repeat="person in collection.view"> {{person.name}} </div> github.com/damienklinnert/angular-model
29. Extreme Measures
30. Scalyr Directives <div sly-repeat="person in persons"> {{person.name}} </div> // also see sly-evaluate-only-when, // sly-prevent-evaluation-when-hidden github.com/scalyr/angular
31. Angular Fastscroll <div fastscroll collection="user in users" item-height="40"> <div class="item">{{ user.name }}</div> </div> // github.com/damienklinnert/fastscroll-demo
32. Angular+React <table ng-react-component="Repeater" data="data"> </table> var Repeater = React.createClass({ render: function () { var scope = this.props.scope; } }); // davidchang.github.io/ngReact/
33. Premature optimization is the root of all evil — Donald Knuth
34. The performance tuning workflow 1. Set expectations 2. Measure 3. Find bottlenecks 4. Fix it 5. Repeat
35. Where to go from here? (Tooling) — Chrome DevTools — Batarang Plugin — angular-instruments github.com/damienklinnert/angular- instruments
36. Where to go from here? (Reading) — Databinding in AngularJS bit.ly/ 1lfMRhj — AngularJS Performance Tuning for Long Lists bit.ly/1tNzbht — Analysing Performance of AngularJS Screens bit.ly/QHRoOc — Brian talks about angular with lots of data bit.ly/RUV6oA