Tweet
Tweet

Slide 1

Slide 1 text

Angular Performance Tuning for large apps

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

What is a fast app?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

I clicked the button... and nothing ever happened! — Random User

Slide 6

Slide 6 text

This spinner never stops, maybe I need to hit reload... — Frustrated User

Slide 7

Slide 7 text

Scrolling the page feels awkward, somehow... — Enraged User

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

< 100 Update the UI in less than 100ms to make it feel instant

Slide 10

Slide 10 text

loading spinners avoid them, preload data instead

Slide 11

Slide 11 text

> 60 fps For smooth scrolling, only rerender parts

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Unfortunately [...] it is easy to build slow apps when you don't know what you are doing. — Misko Hevery

Slide 15

Slide 15 text

Dirty Checking a.k.a. The Magic™ behind angular.JS

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Minimize number of registered watchers

Slide 20

Slide 20 text

Maximize performance of registered watchers

Slide 21

Slide 21 text

Simple Measures

Slide 22

Slide 22 text

Use ng-if instead of ng-show Show details
docs.angularjs.org/api/ng/directive/ngIf

Slide 23

Slide 23 text

bind-once
    • // see bo-href, bo-src, bo-class, bo-html github.com/Pasvaz/bindonce

    Slide 24

    Slide 24 text

    Precalculate properties // bad idea
  • {{person.expensiveComputation()}}
    • // way better idea
  • {{person.preCalculatedResult}}

    • Slide 25

    Slide 25 text

    Advanced Measures

    Slide 26

    Slide 26 text

    Pagination
  • {{person.name}}
    • // better
  • {{person.name}}
    • github.com/UnicodeSnowman/angular-paginate-filter

    Slide 27

    Slide 27 text

    Infinite Scrolling
    {{person.name}}
    $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/

    Slide 28

    Slide 28 text

    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); }] });
    {{person.name}}
    github.com/damienklinnert/angular-model

    Slide 29

    Slide 29 text

    Extreme Measures

    Slide 30

    Slide 30 text

    Scalyr Directives
    {{person.name}}
    // also see sly-evaluate-only-when, // sly-prevent-evaluation-when-hidden github.com/scalyr/angular

    Slide 31

    Slide 31 text

    Angular Fastscroll
    {{ user.name }}
    // github.com/damienklinnert/fastscroll-demo

    Slide 32

    Slide 32 text

    Angular+React var Repeater = React.createClass({ render: function () { var scope = this.props.scope; } }); // davidchang.github.io/ngReact/

    Slide 33

    Slide 33 text

    Premature optimization is the root of all evil — Donald Knuth

    Slide 34

    Slide 34 text

    The performance tuning workflow 1. Set expectations 2. Measure 3. Find bottlenecks 4. Fix it 5. Repeat

    Slide 35

    Slide 35 text

    Where to go from here? (Tooling) — Chrome DevTools — Batarang Plugin — angular-instruments github.com/damienklinnert/angular- instruments

    Slide 36

    Slide 36 text

    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