O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Angular.JS - Estado Atual

487 visualizações

Publicada em

Angular.JS - Estado Atual

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Angular.JS - Estado Atual

  1. 1. Angular.JS estado atual
  2. 2. Gustavo Costa Front-End Developer
 Mobile Developer Hybrid Mobile Applications Fan
 Apache Cordova Fan
 Eating Javascript Google Organizer
 
 @GustavoCostaW
  3. 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. 4. Mercado Data Bind Por que Angular.JS? Adoção da comunidade Separação de Responsabilidades Testes Google SPA MVC
  5. 5. Data bind Heróis ou vilões? $scope & $digest cycle
  6. 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. 7. <- $rootScope <- $scope
  8. 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. 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. 10. ciclo $digest
  11. 11. ciclo $digest
  12. 12. ciclo $digest
  13. 13. o problema
  14. 14. ng-controller Quem cria escopo? ng-if suas diretivas customizadas ng-repeat
  15. 15. Como podemos melhorar a performance?
  16. 16. $scope.$digest vs $scope.$apply
  17. 17. Minimize os watchers
  18. 18. batarang extension
  19. 19. $applySync
  20. 20. $compileProvider.debugInfoEnabled(false);
  21. 21. Listas !warning! Temos soluções para paginação
 Temos soluções para infinite scroll
  22. 22. track by id is your best friend
  23. 23. O Problema:
  24. 24. O Problema:
  25. 25. A solução
  26. 26. One bind time
  27. 27. One bind time Mas se eu quiser atualizar 
 em algum momento? angular-bind-notifier
  28. 28. ciclo digest
  29. 29. angular-vs-repeat Reciclagem de DOM
  30. 30. http://bit.ly/2b9oeEi
  31. 31. $scope.$destroy
  32. 32. $emit - $broadcast cuidado com os eventos
  33. 33. service to cache data
  34. 34. (expressions) in view
  35. 35. (expressions) in view
  36. 36. (expressions) in view
  37. 37. O mesmo problema ocorre com {{item.property | myFilter}} nas views Use -> $filter no controller!
  38. 38. Processe funções e filtros nos controllers e evite watchers desnecessários
  39. 39. ng-model-options ng-model - vilão!?!
  40. 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. 41. AMD https://oclazyload.readme.io/ http://bit.ly/2aVeOtt
  42. 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. 43. Hardcore mode: $digest em web worker http://bit.ly/2biwraK
  44. 44. collection-repeat native-transition crosswalk WKWebView NativeScroll Native APIs & Interfaces Todos os exemplos anteriores se aplicam no IONIC
  45. 45. O mais importante: PERFORMANCE é UX
  46. 46. Angular 1.5 .component() Stateless Angular components
 One way bind Components Life Cycle Me preparando para o futuro
  47. 47. angular 1.5 news = .component() directive component
  48. 48. Angular 2 Component
  49. 49. USE TYPESCRIPT OU ECMA6 HOJE 
 NO ANGULAR 1
  50. 50. ang1 typescript service
  51. 51. ang1 typescript controller
  52. 52. Angular 2
  53. 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. 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. 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. 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. 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. 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. 59. Obrigado! http://slides.com/williamgrasel/desbravando-angularjs-2-e-typescript https://toddmotto.com/ angular.io referências @GustavoCostaW

×