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.

Transcript

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