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