angular - um novo change detection
Post on 21-Jan-2018
781 Views
Preview:
TRANSCRIPT
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
top related