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 ??

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