Performance com AngularJS

1.365 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
12 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.365
No SlideShare
0
A partir de incorporações
0
Número de incorporações
54
Ações
Compartilhamentos
0
Downloads
38
Comentários
0
Gostaram
12
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Performance com AngularJS

  1. 1. Performance com Wilson Mendes @willmendesneto
  2. 2. Wilson Mendes @willmendesneto #developer #opensource #comunidades #GDE AngularJS
  3. 3. Quando o seu app está REALMENTE lento?
  4. 4. Como otimizar a performance do seu app?
  5. 5. + máquinas + cache + minificação + async + SPDY/HTTP 2.0
  6. 6. Real-time web Atualizar a página em menos de 100ms para passar a sensação de real time
  7. 7. Fluxo de uma APLICAÇÃO
  8. 8. Devs não precisam saber como o AngularJS faz por debaixo do pano Two-way data binding
  9. 9. $rootScope pega as informações e atualiza os $scopes (ao infinito e além) $rootScope/$scope life cycle
  10. 10. Dirty Checking: Herói e Vilão
  11. 11. #WHAT
  12. 12. Use $emit ao invés de $broadcast Minimize os binds/watchers Maximize os binds/watchers registrados Como fugir disso?
  13. 13. Use observers ao invés de dirty checking ES6 Transpilers: #WorkInProgress Observer
  14. 14. 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
  15. 15. Táticas
  16. 16. Não use ng-includes em loops (ng-repeat) Táticas
  17. 17. Manipule as propriedades e repasse ao template a informação Evite filtrar/tratar dados no template Táticas
  18. 18. Táticas
  19. 19. Táticas
  20. 20. Táticas
  21. 21. Bad idea =(
  22. 22. Good idea :D
  23. 23. One-time binding
  24. 24. Immutable Data Estado não pode ser alterado após criação Thread safe (sem alterações) Bons para se usar como chave hash
  25. 25. Mori.js Baseada em ClojureScript’s Imutabilidade
  26. 26. 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
  27. 27. http://jsperf.com/immutablejs-versus-morijs
  28. 28. Angular-immutable http://blog.mgechev.com/2015/03/02/immutability-in-angularjs-immutablejs/
  29. 29. Prós Contras Melhoria na performance de grandes informações Tende a ser menos performático com poucas informações
  30. 30. Paginação Scroll Reactive Programming #Lazyweb
  31. 31. Paginação Scroll Reactive Programation
  32. 32. Paginação Scroll Reactive Programation
  33. 33. Angular directive
  34. 34. Angular + React
  35. 35. ===
  36. 36. Todas as otimizações para o Javascript se aplicam ao AngularJS (ou qualquer outro framework) Javascript optimization
  37. 37. Lodash.js x Ramda.js http://jsperf.com/ramdajs-x-lodashjs
  38. 38. Memoization
  39. 39. Debounce
  40. 40. Com Sem
  41. 41. Altere o comportamento de cache no AngularJS, dentre outras possibilidades $provider.decorate()
  42. 42. https://github.com/willmendesneto/angular-performance Angular Performance
  43. 43. Evite otimizações prematuras Otimizar é algo contínuo prematuras
  44. 44. Quem pode me auxiliar?
  45. 45. Perf.Rocks
  46. 46. Performance para testes?
  47. 47. $log ao invés de console $timeout ao invés de setTimeout $interval ao invés de setInterval Test ++
  48. 48. Benchpress
  49. 49. Karma-coverage
  50. 50. Gremlins.js
  51. 51. https://github.com/willmendesneto/angular-testing-recipes Quer saber mais?
  52. 52. #PERFMATTERS
  53. 53. #obrigado Wilson Mendes @willmendesneto

×