SlideShare a Scribd company logo
1 of 71
Download to read offline
Performance com
Wilson Mendes
@willmendesneto
Performance com AngularJS
Wilson Mendes
@willmendesneto
#developer
#opensource
#comunidades
#GDE AngularJS
Quando o seu app
está REALMENTE lento?
Performance com AngularJS
Performance com AngularJS
Como otimizar a
performance do seu app?
Performance com AngularJS
+ máquinas
+ cache
+ minificação
+ async
+ SPDY/HTTP 2.0
Performance com AngularJS
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
Performance com AngularJS
Performance com AngularJS
Performance com AngularJS
Performance com AngularJS
Performance com AngularJS
Performance com AngularJS
#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 =(
Performance com AngularJS
Good idea :D
Performance com AngularJS
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
Performance com AngularJS
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()
Performance com AngularJS
https://github.com/willmendesneto/angular-performance
Angular Performance
Evite otimizações
prematuras
Otimizar é algo contínuo
prematuras
Quem pode me auxiliar?
Performance com AngularJS
Perf.Rocks
Performance com AngularJS
Performance com AngularJS
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

More Related Content

What's hot

Material Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJSMaterial Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJSHenrique Limas
 
TDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJSTDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJSLeonardo Zanivan
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideSergio Azevedo
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJSRodrigo Branas
 
Vue.js - o framework progressivo
Vue.js - o framework progressivoVue.js - o framework progressivo
Vue.js - o framework progressivoVinicius Reis
 
Começando com Vue.js
Começando com Vue.jsComeçando com Vue.js
Começando com Vue.jsmarcusbalbi
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsVinicius Reis
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!José Barbosa
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
 
Como trabalhar com angular js
Como trabalhar com angular jsComo trabalhar com angular js
Como trabalhar com angular jsMatheus Lima
 
2° Codelab - Por onde começar com AngularJS
2° Codelab  - Por onde começar com AngularJS2° Codelab  - Por onde começar com AngularJS
2° Codelab - Por onde começar com AngularJSGDGFoz
 

What's hot (19)

Material Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJSMaterial Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJS
 
TDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJSTDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
Apresentação angular js
Apresentação angular jsApresentação angular js
Apresentação angular js
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-Side
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
 
Vue.js - o framework progressivo
Vue.js - o framework progressivoVue.js - o framework progressivo
Vue.js - o framework progressivo
 
Angular js
Angular jsAngular js
Angular js
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
Começando com Vue.js
Começando com Vue.jsComeçando com Vue.js
Começando com Vue.js
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
Curso AngularJS - Parte 2
Curso AngularJS - Parte 2Curso AngularJS - Parte 2
Curso AngularJS - Parte 2
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Como trabalhar com angular js
Como trabalhar com angular jsComo trabalhar com angular js
Como trabalhar com angular js
 
Angularjs
AngularjsAngularjs
Angularjs
 
2° Codelab - Por onde começar com AngularJS
2° Codelab  - Por onde começar com AngularJS2° Codelab  - Por onde começar com AngularJS
2° Codelab - Por onde começar com AngularJS
 

Viewers also liked

Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci
 
Javascript Avançado
Javascript AvançadoJavascript Avançado
Javascript AvançadoBruno Tavares
 
Orientação a objetos para dummies - Acoplamento
Orientação a objetos para dummies - AcoplamentoOrientação a objetos para dummies - Acoplamento
Orientação a objetos para dummies - AcoplamentoLucas pk'
 
Aprendendo inteligência pierluigi piazzi
Aprendendo inteligência   pierluigi piazziAprendendo inteligência   pierluigi piazzi
Aprendendo inteligência pierluigi piazziLucas pk'
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJSRodrigo Branas
 
Propagacao do calor.ppt
Propagacao do calor.pptPropagacao do calor.ppt
Propagacao do calor.pptLucas pk'
 
7 Myths of formal methods
7 Myths of formal methods7 Myths of formal methods
7 Myths of formal methodsLucas pk'
 
Arquiteturas escaláveis o exemplo da spotify aplicado ao e commerce
Arquiteturas escaláveis  o exemplo da spotify aplicado ao e commerceArquiteturas escaláveis  o exemplo da spotify aplicado ao e commerce
Arquiteturas escaláveis o exemplo da spotify aplicado ao e commerceRafael Rocha
 
10 more lessons learned from building Machine Learning systems
10 more lessons learned from building Machine Learning systems10 more lessons learned from building Machine Learning systems
10 more lessons learned from building Machine Learning systemsXavier Amatriain
 

Viewers also liked (13)

BackboneJS
BackboneJSBackboneJS
BackboneJS
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + Angular
 
Javascript Avançado
Javascript AvançadoJavascript Avançado
Javascript Avançado
 
Orientação a objetos para dummies - Acoplamento
Orientação a objetos para dummies - AcoplamentoOrientação a objetos para dummies - Acoplamento
Orientação a objetos para dummies - Acoplamento
 
Barroco
BarrocoBarroco
Barroco
 
React Native na globo.com
React Native na globo.comReact Native na globo.com
React Native na globo.com
 
Aprendendo inteligência pierluigi piazzi
Aprendendo inteligência   pierluigi piazziAprendendo inteligência   pierluigi piazzi
Aprendendo inteligência pierluigi piazzi
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJS
 
Propagacao do calor.ppt
Propagacao do calor.pptPropagacao do calor.ppt
Propagacao do calor.ppt
 
7 Myths of formal methods
7 Myths of formal methods7 Myths of formal methods
7 Myths of formal methods
 
Arquiteturas escaláveis o exemplo da spotify aplicado ao e commerce
Arquiteturas escaláveis  o exemplo da spotify aplicado ao e commerceArquiteturas escaláveis  o exemplo da spotify aplicado ao e commerce
Arquiteturas escaláveis o exemplo da spotify aplicado ao e commerce
 
10 more lessons learned from building Machine Learning systems
10 more lessons learned from building Machine Learning systems10 more lessons learned from building Machine Learning systems
10 more lessons learned from building Machine Learning systems
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 

Similar to Performance com AngularJS

Angular.JS - Estado Atual
Angular.JS - Estado AtualAngular.JS - Estado Atual
Angular.JS - Estado AtualGustavo Costa
 
Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)Loiane Groner
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + CordovaGustavo Costa
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JSRodrigo Urubatan
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemRodrigo Valerio
 
Introdução ao Desenvolvimento para Android
Introdução ao Desenvolvimento para AndroidIntrodução ao Desenvolvimento para Android
Introdução ao Desenvolvimento para AndroidMário Valney
 
Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013Leandro Silva
 
JS Experience 2017 - Programação reativa com Ionic
JS Experience 2017 - Programação reativa com IonicJS Experience 2017 - Programação reativa com Ionic
JS Experience 2017 - Programação reativa com IoniciMasters
 
Ionic Reativo com RxJS e ngRx
Ionic Reativo com RxJS e ngRxIonic Reativo com RxJS e ngRx
Ionic Reativo com RxJS e ngRxLoiane Groner
 
Introdução à programação em Android SENAC 17.06.2013
Introdução à programação em Android SENAC 17.06.2013Introdução à programação em Android SENAC 17.06.2013
Introdução à programação em Android SENAC 17.06.2013guisester
 
Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3Rodrigo Kono
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-ptPedro Sousa
 
Arquitetura no Android, realmente importa? - TDC 2011
Arquitetura no Android, realmente importa? - TDC 2011Arquitetura no Android, realmente importa? - TDC 2011
Arquitetura no Android, realmente importa? - TDC 2011Marcos Paulo Souza Damasceno
 
Criando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerCriando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerGiovanni Kenji Shiroma
 
TDC São Paulo 2015 - Interfaces Ricas com Rails e React.JS
TDC São Paulo 2015  - Interfaces Ricas com Rails e React.JSTDC São Paulo 2015  - Interfaces Ricas com Rails e React.JS
TDC São Paulo 2015 - Interfaces Ricas com Rails e React.JSRodrigo Urubatan
 
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividade
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividadeZabbix Conference LatAm 2019 - Automação: Ganhando produtividade
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividadeIgor Nicoli
 
Master App - Porque menos é mais!
Master App - Porque menos é mais!Master App - Porque menos é mais!
Master App - Porque menos é mais!Rodrigo Serradura
 

Similar to Performance com AngularJS (20)

Angular.JS - Estado Atual
Angular.JS - Estado AtualAngular.JS - Estado Atual
Angular.JS - Estado Atual
 
Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
Introdução ao Desenvolvimento para Android
Introdução ao Desenvolvimento para AndroidIntrodução ao Desenvolvimento para Android
Introdução ao Desenvolvimento para Android
 
Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013
 
Aplicações web realtime
Aplicações web realtimeAplicações web realtime
Aplicações web realtime
 
Meetup Stoodi Data & Tech #3 - Data Pipelines na AWS
Meetup Stoodi Data & Tech #3 - Data Pipelines na AWSMeetup Stoodi Data & Tech #3 - Data Pipelines na AWS
Meetup Stoodi Data & Tech #3 - Data Pipelines na AWS
 
JS Experience 2017 - Programação reativa com Ionic
JS Experience 2017 - Programação reativa com IonicJS Experience 2017 - Programação reativa com Ionic
JS Experience 2017 - Programação reativa com Ionic
 
Ionic Reativo com RxJS e ngRx
Ionic Reativo com RxJS e ngRxIonic Reativo com RxJS e ngRx
Ionic Reativo com RxJS e ngRx
 
Introdução à programação em Android SENAC 17.06.2013
Introdução à programação em Android SENAC 17.06.2013Introdução à programação em Android SENAC 17.06.2013
Introdução à programação em Android SENAC 17.06.2013
 
Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
 
Arquitetura no Android, realmente importa? - TDC 2011
Arquitetura no Android, realmente importa? - TDC 2011Arquitetura no Android, realmente importa? - TDC 2011
Arquitetura no Android, realmente importa? - TDC 2011
 
Criando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerCriando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & Docker
 
TDC São Paulo 2015 - Interfaces Ricas com Rails e React.JS
TDC São Paulo 2015  - Interfaces Ricas com Rails e React.JSTDC São Paulo 2015  - Interfaces Ricas com Rails e React.JS
TDC São Paulo 2015 - Interfaces Ricas com Rails e React.JS
 
Spa com angular js flisol 2015 - aquidauana ms
Spa com angular js   flisol 2015 - aquidauana msSpa com angular js   flisol 2015 - aquidauana ms
Spa com angular js flisol 2015 - aquidauana ms
 
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividade
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividadeZabbix Conference LatAm 2019 - Automação: Ganhando produtividade
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividade
 
Master App - Porque menos é mais!
Master App - Porque menos é mais!Master App - Porque menos é mais!
Master App - Porque menos é mais!
 

Performance com AngularJS