- O documento discute o estado atual do AngularJS, incluindo problemas de performance com data binding e escopo, e como resolvê-los. - É sugerido minimizar watchers, usar ng-if em vez de ng-repeat quando possível e processar lógica no controller em vez de na view. - O documento também discute as mudanças no Angular 2 e como preparar aplicações para o futuro usando TypeScript desde já.

1. Angular.JS
estado atual

2. Gustavo Costa
Front-End Developer
Mobile Developer
Hybrid Mobile Applications Fan
Apache Cordova Fan
Eating Javascript
Google Organizer
@GustavoCostaW

3. Sumário
- Entendendo o que há de fato atrás das cortinas
- Como podemos resolver esses problemas hoje?
- Como olhar e me preparar para o futuro?
Angular.JS 1.x

4. Mercado
Data Bind
Por que Angular.JS?
Adoção da comunidade
Separação de Responsabilidades
Testes
Google
SPA
MVC

5. Data bind
Heróis ou vilões?
$scope & $digest cycle

6. 'O Scope é um objeto que se refere ao modelo da aplicação.
Scopes são organizados e baseados em uma estrutura hierarquica.
Scopes podem ouvir expressões e propagar eventos.’
$scope

7. <- $rootScope
<- $scope

8. ng-model="evento" <- angular começa a ‘olhar’ pra esse cara $watch
O watch por sua vez, é responsável por observar essa expression. Com isso
ele possui alguns atributos (não vou citar todos):
O atributo last é responsável por guardar o último/antigo valor da
expression/campo.
O get retorna o valor atual.
Logo após a criação do watch para a expression encontrada, o
angular inclui esse watch em um array do $scope atual chamado $
$watchers. Seria algo mais ou menos assim:
$scope.$$watchers.push(novoWatch);
var novoWatch = {
last: null,
get: null,
listener: function(new, last),
...
}
{{evento}}
Ciclo $digest

9. Ai acontece o seguinte: quando uma diretiva e/ou wrapper qualquer é
acionado através de um interação ou não do usuário, o $digest cycle é
chamado no final desta operação. Por exemplo:
Me da o array $$watchers do $scope atual
Itera ele (executa um loop)
Pega o watch atual
Qual o último valor (last) dele?
Qual o valor atual (get)?
Compara: o valor atual é diferente o último?
Sim?
Chama o listener passando o atual valor e o último
Este listener por sua vez, atualiza a informação no DOM
Não? Não faz nada.
E loopa todos seus $scope filhos
Com isso, a sincronização da informação entre model e view é mantida
impecavelmente pelo ciclo $digest.
o ng-model por padrão a cada evento keydown ele dispara o ciclo
E o Angular então:
ou ng-click assim que o usuário clica, faz o que foi determinado e ele
dispara o ciclo
Ciclo $digest

10. ciclo $digest

11. ciclo $digest

12. ciclo $digest

13. o problema

14. ng-controller
Quem cria escopo?
ng-if
suas diretivas customizadas
ng-repeat

15. Como podemos melhorar a performance?

16. $scope.$digest vs $scope.$apply

17. Minimize os watchers

18. batarang extension

19. $applySync

20. $compileProvider.debugInfoEnabled(false);

21. Listas !warning!
Temos soluções para paginação
Temos soluções para infinite scroll

22. track by id is your best friend

23. O Problema:

24. O Problema:

25. A solução

26. One bind time

27. One bind time
Mas se eu quiser atualizar
em algum momento?
angular-bind-notifier

28. ciclo digest

29. angular-vs-repeat
Reciclagem de DOM

30. http://bit.ly/2b9oeEi

31. $scope.$destroy

32. $emit - $broadcast
cuidado com os eventos

33. service to cache data

34. (expressions) in view

35. (expressions) in view

36. (expressions) in view

37. O mesmo problema ocorre com
{{item.property | myFilter}}
nas views
Use -> $filter no controller!

38. Processe funções e filtros nos
controllers e evite watchers desnecessários

39. ng-model-options
ng-model - vilão!?!

40. minifique e ofusque seu código
function multiplica(numeroUm, numeroDois){
return numeroUm*numeroDois;
}
function multiplica(numeroUm, numeroDois){return numeroUm*numeroDois;}
MINIFICAR!
OFUSCAR
function x(z, t){return z*y;}
Angular.js = 1.2MB
Angular.min.js = 159kb

41. AMD
https://oclazyload.readme.io/
http://bit.ly/2aVeOtt

42. Web Workers
A web worker is a script that is run by your browser in the background, separate from a web page,
opening the door to features which don’t need a web page or user interaction

43. Hardcore mode: $digest em web worker
http://bit.ly/2biwraK

44. collection-repeat
native-transition
crosswalk
WKWebView
NativeScroll
Native APIs & Interfaces
Todos os exemplos anteriores se
aplicam no IONIC

45. O mais importante:
PERFORMANCE é UX

46. Angular 1.5
.component()
Stateless Angular components
One way bind
Components Life Cycle
Me preparando para o futuro

47. angular 1.5 news = .component()
directive component

48. Angular 2 Component

49. USE TYPESCRIPT OU ECMA6 HOJE
NO ANGULAR 1

50. ang1 typescript service

51. ang1 typescript controller

52. Angular 2

53. Algumas decisões erradas:
$scope $digest?
Bad Directive API
Not default AMD
Not mobile first
Evolução dos Browsers - APIS
Not Web Workers
Mas por que uma nova versão?

54. Angular 2
Padrões Web
Web Components
Default AMD
Aplicações Mobile
Aplicações Offline
Progressive Web Apps
OOP
Algumas das principais mudanças:
Change detection
Web Workers
ECMA 6
TYPESCRIPT?

55. Angular 2
Angular 2 é entre 2-8 vezes mais rápido que a
versão um por mudanças do core do projeto
Você ainda pode ainda ganhar entre 3x -5x se
você tomar decisões inteligentes de change
detector como comentei anteriormente

56. Sim você pode mixar Angular 1 com Angular 2
Para uma migração aos poucos
Serviços, Diretivas da versão 1 podem ser usadas
na versão 2, e vice versa.

57. Futuro
Realmente há necessidade de uma migração do seu projeto para a 2?
Por que você precisa migrar?
Angular 1.x rulez for years!
Comece hoje um projeto com o Angular 2

58. Considerações Finais
você sabe javascript?
você precisa aprender javascript de verdade.
Angular 1,2 = Javascript
React = Javascript
Vue.js = Javascript
Todos esses acima são ferramentas para ajudar nosso trabalho.

59. Obrigado!
http://slides.com/williamgrasel/desbravando-angularjs-2-e-typescript
https://toddmotto.com/
angular.io
referências
@GustavoCostaW