Performance com

Wilson Mendes

@willmendesneto

#SQN

Wilson Mendes

@willmendesneto

#developer

#opensource

#GDE AngularJS

Quando o seu app está realmente lento?

Como otimizar a performance do seu app?

 + máquinas

+ cache

+ async

+ HTTP 2

NÃO ESCONDA O PROBLEMA

Real-time Web

Atualizar a página em menos de 100 ms para passar a sensação de tempo real

Two Way Data Binding

Devs não precisam saber como o AngularJS faz por debaixo dos panos

$rootScope life cicle

$rootScope pega as informações e atualiza todos os $scope 

Ao infinito e além!

Dirty check

Herói e Vilão

#WHAT ??

#WHAT ??

Como fugir disso?

Use $emit ao invés de $broadcast

minimize binds/watchers

maximize os binds/watchers registrados 

Observer

Use observer ao invés de dirty check

ES6

Transpilers: #WorkInProgress

Não, por favor

    
    <div ng-repeat="item in vm.items track by item.id">
      <div ng-include="{{ item.template }}">
        Não faça isso!
      </div>
    </div>

Táticas

Manipule as propriedades e repasse ao template

Evite filtrar/tratar dados no template

angular.module('angularPerformanceApp')
  .filter('userName', function () {
    return function (input) {
      return input.firstName + ' ' + input.lastName;
    };
  });

<ul>
  <li ng-repeat="item in vm.users track by $index">
    {{ item | userName }}
  </li>
</ul>

Má idéia =( 

    ...
    this.users = [
      {firstName: 'eu', lastName: 'ea'},
      {firstName: 'William', lastName: 'Wallace'}
    ];
    ...

    ...
    this.users.map(function(el){
      el.username = el.firstName + ' ' + el.lastName;
    });
    ...

  <div ng-repeat="item in vm.users track by $index">
    {{ item.username }}
  </div>

  <div ng-repeat="item in ::vm.users track by $index">
    {{ ::item.username }}
  </div>

===

Todas as otimizações Javascript podem te ajudar

Lazy web

Porque sempre fomos preguiçosos

;)

    ...
    this.myModelOptions = {
      updateOn: 'keydown blur',
      debounce: {
          keydown: 250, 
          blur: 250
      }
    };
    ...

Debounce

<form autocomplete="off" role="form">
      <input type="search" 
             name="search" 
             ng-model="vm.searchItem" 
             ng-model-options="vm.myModelOptions" />
</form>

<ul>
  <li ng-repeat="item in vm.users | myFilter:vm.searchItem">
    {{item.firstName}}
  </li>
</ul>

Com debounce

Sem Debounce

Reactive Functional Programming

Sempre bom utilizar o melhor dos mundos

+

ngReact

Quer saber mais?

https://github.com/willmendesneto/angular-performance

Pergunte aos universitários

* Estes sabem te responder realmente =) 

Performance para Testes ?

Quem poderá nos ajudar?

Benchpress: https://github.com/angular/benchpress 

Karma coverage: https://github.com/karma-runner/karma-coverage

Gremlins.js: https://github.com/marmelab/gremlins.js

++ Testes

$log ao invés de console.log()

$timeout ao invés de setTimeout()

$interval ao invés de setInterval()

https://github.com/willmendesneto/angular-testing-recipes

E agora é só correr para o abraço!

#obrigado

Wilson Mendes

@willmendesneto