Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Change Detection
Gustavo Costa
Desenvolvedor Front-end na EADBOX
Javascript, AngularJS, Angular, RxJS, Reactive
Programming, GDG Organizer
...
Componente 

1
Componente 

2
Componente 

3
Componente 

4
Componente 

5
Alguma coisa foi
alterada!
Change
Detection
Data binding
Ligação de dados, do inglês Data binding, é uma
técnica geral que une duas fontes de dados/
informações
e as ...
Data binding
Ligação de dados, do inglês Data binding, é uma
técnica geral que une duas fontes de dados/
informações
e as ...
Data binding
AngularJS
ng-click

ng-model

….
Bidirecional
10 $digest() iterations reached. Aborting!
React & Virtual DOM
Bidirecional
AngularJS
Unidirecional
Angular
O que causa
uma mudança?
O que causa
uma mudança?
Events
click, submit…
E
XHR
Carregar dados de um servidor
X
Timers
setTimeOut, setInterval
T
O que causa uma mudança?
Zone.js!
Quem notifica o Angular?
Concorrência
Event Loop
Single thread
Event Loop
Zone.JS save us
NgZone é um
fork do Zone.js
const factory = 



r.resolveComponentFactory(AComponent);



factory.create(injector);
Criação de um
componente
CheckChanges Process
if (!ChecksEnabled || FirstCheck)
Component State: FirstCheck, ChecksEnabled, Errored, Destroyed
Disp...
ChangeDetection.Default
Exemplo conceitual
Change Detection
Angular JS
Exemplo conceitual
Change Detection
Angular
3x - 10x
SMARTER?
ChangeDetection.Default
user === valorAntigoDoUser ?
user.name === valorAntigoDoUser.name ?
user.email === valorAntigoDoUs...
ChangeDetection.OnPush
user === valorAntigoDoUser ?
run change detection! :-)



IMUTABILIDADE
ChangeDetection.OnPush
IMUTABILIDADE
Immutable.js
OBSERVABLES
ou streams
Programação Reativa
Paradigma de programação baseado em fluxos assíncronos de dados,
também conhecido como Streams
Impleme...
Subscription
Nada mudou.
Notifique o
Angular!
markForCheck();
Presentation and container components
4 Componentes container
e de apresentação.
3 Observables
2 Imutabilidade
1 ChangeDetectionStrategy.
OnPush
https://hackernoon.com
https://blog.thoughtram.io
https://victorsavkin.com
https://angular.io
Referências




@GustavoCostaW
Angular - Um novo change detection
Angular - Um novo change detection
Angular - Um novo change detection
Angular - Um novo change detection
Angular - Um novo change detection
Angular - Um novo change detection
Angular - Um novo change detection
Angular - Um novo change detection
Upcoming SlideShare
Loading in …5
×

Angular - Um novo change detection

999 views

Published on

{{binding}} de dados na view é uma técnica que qualquer framework front-end moderno possui e que hoje não conseguimos viver sem, na versão anterior do framework o famoso $scope.digest() deu o que falar com seus problemas, mas agora com a nova versão quais foram os aprendizados? Como o Angular sabe como e quando atualizar esses valores? Parece mágica, mas envolve event loop, zones, assincronismo, dados imutáveis, programação reativa, código monomórfico... Mas por que eu preciso saber o que há/acontece debaixo do capô? Nós iremos entender os milhares benefícios de ter uma detecção de mudança mais inteligente utilizando todos os recursos que a nova versão do framework disponibiliza para nós, e claro o quanto isso irá impactar na performance da sua aplicação

Published in: Technology
  • Be the first to comment

Angular - Um novo change detection

  1. 1. Change Detection
  2. 2. Gustavo Costa Desenvolvedor Front-end na EADBOX Javascript, AngularJS, Angular, RxJS, Reactive Programming, GDG Organizer @GustavoCostaW
  3. 3. Componente 
 1 Componente 
 2 Componente 
 3 Componente 
 4 Componente 
 5 Alguma coisa foi alterada! Change Detection
  4. 4. Data binding Ligação de dados, do inglês Data binding, é uma técnica geral que une duas fontes de dados/ informações e as mantém em sincronia em um processo que estabelece uma conexão entre UI (interface de usuário) da aplicação e a lógica de negocio. W I K I P E D I A
  5. 5. Data binding Ligação de dados, do inglês Data binding, é uma técnica geral que une duas fontes de dados/ informações e as mantém em sincronia em um processo que estabelece uma conexão entre UI (interface de usuário) da aplicação e a lógica de negocio. W I K I P E D I A
  6. 6. Data binding
  7. 7. AngularJS ng-click
 ng-model
 ….
  8. 8. Bidirecional 10 $digest() iterations reached. Aborting!
  9. 9. React & Virtual DOM
  10. 10. Bidirecional AngularJS Unidirecional Angular
  11. 11. O que causa uma mudança?
  12. 12. O que causa uma mudança?
  13. 13. Events click, submit… E XHR Carregar dados de um servidor X Timers setTimeOut, setInterval T O que causa uma mudança?
  14. 14. Zone.js! Quem notifica o Angular?
  15. 15. Concorrência Event Loop Single thread
  16. 16. Event Loop
  17. 17. Zone.JS save us
  18. 18. NgZone é um fork do Zone.js
  19. 19. const factory = 
 
 r.resolveComponentFactory(AComponent);
 
 factory.create(injector); Criação de um componente
  20. 20. CheckChanges Process if (!ChecksEnabled || FirstCheck) Component State: FirstCheck, ChecksEnabled, Errored, Destroyed Dispara os lifecycles do component ngOnInit (caso estado seja firstCheck) Verifica verifica os NodeFlags (slide anterior) Desabilita CheckEnabled caso o componente seja ChangeDetectionStrategy.OnPush …. Roda esse mesmo método de maneira recursiva pra todos os seus componentes filhos
  21. 21. ChangeDetection.Default
  22. 22. Exemplo conceitual Change Detection Angular JS
  23. 23. Exemplo conceitual Change Detection Angular
  24. 24. 3x - 10x
  25. 25. SMARTER?
  26. 26. ChangeDetection.Default user === valorAntigoDoUser ? user.name === valorAntigoDoUser.name ? user.email === valorAntigoDoUser.email ? user.propsInView * n MUTABILIDADE
  27. 27. ChangeDetection.OnPush user === valorAntigoDoUser ? run change detection! :-)
 
 IMUTABILIDADE
  28. 28. ChangeDetection.OnPush
  29. 29. IMUTABILIDADE
  30. 30. Immutable.js
  31. 31. OBSERVABLES ou streams
  32. 32. Programação Reativa Paradigma de programação baseado em fluxos assíncronos de dados, também conhecido como Streams Implementação do PubSub pattern, também conhecidos como Observers, ou simplesmente callback de eventos $(document).click( v => console.log(v));
 
 document.getElementsByTagName('body')[0].addEventListener( 'click', v => console.log(v));
  33. 33. Subscription
  34. 34. Nada mudou.
  35. 35. Notifique o Angular!
  36. 36. markForCheck();
  37. 37. Presentation and container components
  38. 38. 4 Componentes container e de apresentação. 3 Observables 2 Imutabilidade 1 ChangeDetectionStrategy. OnPush
  39. 39. https://hackernoon.com https://blog.thoughtram.io https://victorsavkin.com https://angular.io Referências
  40. 40. 
 
 @GustavoCostaW

×