angular.js - estado atual
TRANSCRIPT
Angular.JS estado atual
Gustavo CostaFront-End Developer
Mobile DeveloperHybrid Mobile Applications Fan
Apache Cordova FanEating Javascript
Google Organizer
@GustavoCostaW
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
Mercado
Data Bind
Por que Angular.JS?
Adoção da comunidade
Separação de ResponsabilidadesTestes
GoogleSPA
MVC
Data bind
Heróis ou vilões?$scope & $digest cycle
'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
<- $rootScope<- $scope
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
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
ciclo $digest
ciclo $digest
ciclo $digest
o problema
ng-controller
Quem cria escopo?ng-if
suas diretivas customizadasng-repeat
Como podemos melhorar a performance?
$scope.$digest vs $scope.$apply
Minimize os watchers
batarang extension
$applySync
$compileProvider.debugInfoEnabled(false);
Listas !warning!
Temos soluções para paginação Temos soluções para infinite scroll
track by id is your best friend
O Problema:
O Problema:
A solução
One bind time
One bind time
Mas se eu quiser atualizar em algum momento?
angular-bind-notifier
ciclo digest
angular-vs-repeat
Reciclagem de DOM
$scope.$destroy
$emit - $broadcast
cuidado com os eventos
service to cache data
(expressions) in view
(expressions) in view
(expressions) in view
O mesmo problema ocorre com {{item.property | myFilter}}
nas views
Use -> $filter no controller!
Processe funções e filtros nos controllers e evite watchers desnecessários
ng-model-options
ng-model - vilão!?!
minifique e ofusque seu código
function multiplica(numeroUm, numeroDois){ return numeroUm*numeroDois;
}
function multiplica(numeroUm, numeroDois){return numeroUm*numeroDois;}MINIFICAR!
OFUSCARfunction x(z, t){return z*y;}
Angular.js = 1.2MB
Angular.min.js = 159kb
Web WorkersA 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
collection-repeat
native-transition
crosswalk
WKWebView
NativeScroll
Native APIs & Interfaces
Todos os exemplos anteriores se aplicam no IONIC
O mais importante: PERFORMANCE é UX
Angular 1.5
.component() Stateless Angular components
One way bind Components Life Cycle
Me preparando para o futuro
angular 1.5 news = .component()
directive component
Angular 2 Component
USE TYPESCRIPT OU ECMA6 HOJE NO ANGULAR 1
ang1 typescript service
ang1 typescript controller
Angular 2
Algumas decisões erradas:
$scope $digest?
Bad Directive API
Not default AMD
Not mobile first
Evolução dos Browsers - APISNot Web Workers
Mas por que uma nova versão?
Angular 2
Padrões WebWeb Components
Default AMDAplicações MobileAplicações Offline
Progressive Web AppsOOP
Algumas das principais mudanças:
Change detectionWeb Workers
ECMA 6TYPESCRIPT?
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
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.
FuturoRealmente 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
Considerações Finaisvocê sabe javascript?
você precisa aprender javascript de verdade.
Angular 1,2 = JavascriptReact = JavascriptVue.js = Javascript
Todos esses acima são ferramentas para ajudar nosso trabalho.
Obrigado!
http://slides.com/williamgrasel/desbravando-angularjs-2-e-typescripthttps://toddmotto.com/
angular.io
referências
@GustavoCostaW