Performance com

Wilson Mendes @willmendesneto

Wilson Mendes @willmendesneto

#developer #opensource #comunidades #GDE AngularJS

Quando o seu app está REALMENTE lento?

Como otimizar a performance do seu app?

+ máquinas + cache

+ minificação + async

+ SPDY/HTTP 2.0

Real-time web Atualizar a página em menos de 100ms para

passar a sensação de real time

Fluxo de uma

APLICAÇÃO

Devs não precisam saber como o AngularJS faz por debaixo do pano

Two-way data binding

$rootScope pega as informações e atualiza os $scopes

(ao infinito e além)

$rootScope/$scope life cycle

Dirty Checking: Herói e Vilão

#WHAT

Use $emit ao invés de $broadcast

Minimize os binds/watchers

Maximize os binds/watchers registrados

Como fugir disso?

Use observers ao invés de dirty checking

ES6

Transpilers: #WorkInProgress

Observer

Use ng-if ao invés de ng-show

(ng-show não mostra o elemento, mas o two-way binding já está ativo)

Táticas

Táticas

Não use ng-includes em loops (ng-repeat)

Táticas

Manipule as propriedades e repasse ao template a informação

Evite filtrar/tratar dados no template

Táticas

Táticas

Táticas

Táticas

Bad idea =(

Good idea :D

One-time binding

Immutable Data

Estado não pode ser alterado após criação

Thread safe (sem alterações)

Bons para se usar como chave hash

Mori.js

Baseada em ClojureScript’s

Imutabilidade

Immutable.js

Immutable.js fits better with the rest of the JS ecosystem in my opinion, because it is designed

for and written in JS, rather than ClojureScript. The API follows the native Array API where possible, so

it's a lot easier to switch between the two.

Lee Byron, Interactive Information Designer at Facebook

http://jsperf.com/immutablejs-versus-morijs

Angular-immutable

http://blog.mgechev.com/2015/03/02/immutability-in-angularjs-immutablejs/

Prós Contras

Melhoria na performance de grandes informações

Tende a ser menos performático com poucas

informações

Paginação Scroll

Reactive Programming

#Lazyweb

Paginação Scroll

Reactive Programation

Paginação Scroll

Reactive Programation

Angular directive

Angular + React

===

Todas as otimizações para o Javascript se aplicam ao AngularJS

(ou qualquer outro framework)

Javascript optimization

Lodash.js x Ramda.js

http://jsperf.com/ramdajs-x-lodashjs

Memoization

Debounce

Com Sem

Altere o comportamento de cache no AngularJS, dentre outras possibilidades

$provider.decorate()

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

Angular Performance

Evite otimizações prematuras

Otimizar é algo contínuo

prematuras

Quem pode me auxiliar?

Perf.Rocks

Performance para testes?

$log ao invés de console

$timeout ao invés de setTimeout

$interval ao invés de setInterval

Test ++

Benchpress

Karma-coverage

Gremlins.js

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

Quer saber mais?

#PERFMATTERS

#obrigado

Wilson Mendes @willmendesneto