Angular Performance Tuning

Transcript

1. Angular Performance Tuning for large apps

2. None

3. What is a fast app?

4. None

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

8. None

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

12. None
13. None

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

16. None
17. None
18. None

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