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?

Pergunte aos universitários

* Estes sabem te responder realmente =) 

Performance para Testes ?

Quem poderá nos ajudar?

++ Testes

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

 

$timeout ao invés de setTimeout()

 

$interval ao invés de setInterval()

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

#obrigado

Wilson Mendes

@willmendesneto

Performance com AngularJS

By willmendesneto

Performance com AngularJS

Sua aplicação AngularJS está lenta? Como otimizar a performance? Combinar outras tecnologias como workaround são paliativos, pois não resolvem o problema. Nessa palestra, entenda conceitos do núcleo do AngularJS e várias técnicas para aumentar o desempenho de suas aplicações web. Vamos explorar conceitos fundamentais como o ciclo de vida do $rootScope e como funciona o dirty checking, assim como $compile, $watch e $emit. Veremos também boas práticas ao utilizar diretivas, filters, services e outros componentes do framework. Outro ponto abordado é a utilização de paradigmas e patterns assíncronos para melhorar o desempenho de suas aplicações. Por fim, veremos boas práticas, como melhorar os nossos testes unitários e end-to-end, discutiremos conceitos de lazy web e conheceremo ferramentas que podem nos ajudar nesta tarefa.

  • 568
Loading comments...

More from willmendesneto