O documento discute técnicas de detecção de mudanças no Angular, incluindo data binding, change detection e estratégias como OnPush. Explica como eventos, timers, HTTP e mutabilidade afetam a detecção de mudanças e como Zone.js e Observables podem ser usados para notificar o Angular e habilitar a detecção de mudanças de forma mais inteligente. Recomenda o uso de componentes de apresentação e container separados com imutabilidade e ChangeDetectionStrategy.OnPush para melhorar o desempenho.

1. Change Detection

2. Gustavo Costa
Desenvolvedor Front-end na EADBOX
Javascript, AngularJS, Angular, RxJS, Reactive
Programming, GDG Organizer
@GustavoCostaW

4. Componente
1
Componente
2
Componente
3
Componente
4
Componente
5
Alguma coisa foi
alterada!
Change
Detection

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. 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

7. Data binding

8. AngularJS
ng-click
ng-model
….

9. Bidirecional
10 $digest() iterations reached. Aborting!

11. React & Virtual DOM

12. Bidirecional
AngularJS
Unidirecional
Angular

13. O que causa
uma mudança?

14. O que causa
uma mudança?

15. Events
click, submit…
E
XHR
Carregar dados de um servidor
X
Timers
setTimeOut, setInterval
T
O que causa uma mudança?

16. Zone.js!
Quem notifica o Angular?

17. Concorrência
Event Loop
Single thread

19. Event Loop

20. Zone.JS save us

21. NgZone é um
fork do Zone.js

22. const factory =
r.resolveComponentFactory(AComponent);
factory.create(injector);
Criação de um
componente

23. 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

24. ChangeDetection.Default

25. Exemplo conceitual
Change Detection
Angular JS

26. Exemplo conceitual
Change Detection
Angular

28. 3x - 10x

29. SMARTER?

30. ChangeDetection.Default
user === valorAntigoDoUser ?
user.name === valorAntigoDoUser.name ?
user.email === valorAntigoDoUser.email ?
user.propsInView * n
MUTABILIDADE

31. ChangeDetection.OnPush
user === valorAntigoDoUser ?
run change detection! :-)
IMUTABILIDADE

32. ChangeDetection.OnPush

33. IMUTABILIDADE

34. Immutable.js

35. OBSERVABLES
ou streams

36. 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));

37. Subscription

38. Nada mudou.

39. Notifique o
Angular!

40. markForCheck();

43. Presentation and container components

46. 4 Componentes container
e de apresentação.
3 Observables
2 Imutabilidade
1 ChangeDetectionStrategy.
OnPush

47. https://hackernoon.com
https://blog.thoughtram.io
https://victorsavkin.com
https://angular.io
Referências

48.
@GustavoCostaW