Change Detection

Gustavo CostaDesenvolvedor Front-end na EADBOX

Javascript, AngularJS, Angular, RxJS, Reactive Programming, GDG Organizer

@GustavoCostaW

Componente 1

Componente 2

Componente 3

Componente 4

Componente 5

Alguma coisa foi alterada!

Change Detection

Data bindingL i g a ç ã o d e d a d o s , d o i n g l ê s D a t a b i n d i n g , é u m a

t é c n i c a g e ra l q u e u n e d u a s f o n t e s d e d a d o s /i n f o r m a ç õ e s

e a s m a n t é m e m s i n c ro n i a e m u m p ro c e s s o q u e e s t a b e l e c e u m a c o n e x ã o e n t re U I ( i n t e r f a c e d e u s u á r i o ) d a a p l i c a ç ã o e a l ó g i c a d e n e g o c i o .

W I K I P E D I A

Data bindingL i g a ç ã o d e d a d o s , d o i n g l ê s D a t a b i n d i n g , é u m a

t é c n i c a g e ra l q u e u n e d u a s f o n t e s d e d a d o s /i n f o r m a ç õ e s

e a s m a n t é m e m s i n c ro n i a e m u m p ro c e s s o q u e e s t a b e l e c e u m a c o n e x ã o e n t re U I ( i n t e r f a c e d e u s u á r i o ) d a a p l i c a ç ã o e a l ó g i c a d e n e g o c i o .

W I K I P E D I A

Data binding

AngularJS

ng-clickng-model ….

Bidirecional

10 $digest() iterations reached. Aborting!

React & Virtual DOM

Bidirecional

AngularJSUnidirecional

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

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

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 === valorAntigoDoUser.email ?

user.propsInView * n

MUTABILIDADE

ChangeDetection.OnPush

user === valorAntigoDoUser ?

run change detection! :-)

IMUTABILIDADE

ChangeDetection.OnPush

IMUTABILIDADE

Immutable.js

OBSERVABLESou streams

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

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.comhttps://blog.thoughtram.io

https://victorsavkin.comhttps://angular.io

Referências

@GustavoCostaW