Baixar para ler offline
Carregado porGustavo Costa
Angular.JS - Estado Atual
- 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á.
Angular.JS - Estado Atual
- 1.
- 2. Gustavo Costa Front-End Developer MobileDeveloper Hybrid Mobile Applications Fan Apache Cordova Fan Eating Javascript Google Organizer @GustavoCostaW
- 3. Sumário - Entendendo oque 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 queAngular.JS? Adoção da comunidade Separação de Responsabilidades Testes Google SPA MVC
- 5. Data bind Heróis ouvilõ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.
- 8. ng-model="evento" <- angularcomeç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 oseguinte: 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.
- 11.
- 12.
- 13.
- 14. ng-controller Quem cria escopo? ng-if suasdiretivas customizadas ng-repeat
- 15. Como podemos melhorara performance?
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. Listas !warning! Temos soluçõespara paginação Temos soluções para infinite scroll
- 22. track by idis your best friend
- 23.
- 24.
- 25.
- 26.
- 27. One bind time Masse eu quiser atualizar em algum momento? angular-bind-notifier
- 28.
- 29.
- 30.
- 31.
- 32. $emit - $broadcast cuidadocom os eventos
- 33. service to cachedata
- 34.
- 35.
- 36.
- 37. O mesmo problemaocorre com {{item.property | myFilter}} nas views Use -> $filter no controller!
- 38. Processe funções efiltros nos controllers e evite watchers desnecessários
- 39.
- 40. minifique e ofusqueseu 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.
- 42. Web Workers A webworker 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: $digestem 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.
- 46. Angular 1.5 .component() Stateless Angularcomponents One way bind Components Life Cycle Me preparando para o futuro
- 47. angular 1.5 news= .component() directive component
- 48.
- 49. USE TYPESCRIPT OUECMA6 HOJE NO ANGULAR 1
- 50.
- 51.
- 52.
- 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 WebComponents 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ê podemixar 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á necessidadede 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ê sabejavascript? 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.