Post on 12-Apr-2017
wendelnascimento wnascimentow
Wendel NascimentoFront end engineer @SENAI
Programação reativa
O que é programação reativa?
reativo adj. (1858) 1 que faz reagir, que provoca reação; reagente 2 eletr eletrôn fís relativo a reatância
Programação blocante
if(x < 10) { foo(x); bar(x); baz(x); console.log("Done"); }
Este é um processo imperativo/estruturado
CONTROLE
FLUXO NEM SEMPRE BEM ESTABELECIDO
PRÓS…
FILAS - CONCORRÊNCIA
CÓDIGOS DE DIFÍCIL LEITURA
NÃO ESCALÁVEL
CONTRAS…
Programação não blocante
Callbacks
if(x < 10) { foo(x); setTimeout(() => bar(x), 1000 ); baz(x); console.log("Done"); }
SIMPLICIDADE
NÃO BLOCANTE
PRÓS…
FRÁGIL
CALLBACK HELL
CONTRAS…
Callback hell
PS: Nem todo callback é assíncrono
Promises
if(x < 10) { logValues(x)
.then(() => console.log(“Done”));
}
if(x < 10) { logValues(x)
.then(() => console.log(“Done”));
}Sim, Promises usam callbacks
PRÓS… MAIS SIMPLICIDADE
NÃO BLOCANTE
CÓDIGO LIMPO
NÃO CANCELÁVEL
É UM STREAM COM INÍCIO E FIM
CONTRAS…
Observables
if(x < 10) { logValues(x)
.subscribe(() => console.log(“Done”));
}
if(x < 10) { logValues(x)
.subscribe(() => console.log(“Done”));
}Sim, Observables também
usam callbacks
PRÓS… MAIS SIMPLICIDADE
NÃO BLOCANTE
CÓDIGO LIMPO
CANCELÁVEL
É UM STREAM QUE PODE NUNCA TER FIM
NÃO ENCADEÁVELCONTRAS…
Calma. Observable + Subscribe é tipo…
Promise???
Sim e não
“Observable is Promise++”Andre Staltz
É simples. Observable é nada mais que um stream assíncrono infinito
var el = document.getElementById("t"); el.addEventListener( "click", handleClick );
Então eu sempre programei de forma reativa?
Sempre utilizamos funções reativas porém muitas
vezes não sabemos disso
Mas agora vamos usar
O problema da Netflix era não poder cancelar
requisições
Eles resolveram com RxJS e RxJava
ECONOMIZAR TEMPO
ESCALAR SUA APLICAÇÃO
E MUITO MAIS
TER UM CÓDIGO LIMPO E FÁCIL MANUTENÇÃO
COM RXJS VOCÊ IRÁ…
Hora da ação
Você conhece a terceira lei de Newton?
Então vamos falar de reaçãoCom JS TS
Operadores e Objetos core do RxJS
OBSERVABLESJá usou qualquer coisa assíncrona WhatsApp, Messenger ou qualquer outro mensageiro?
Já fez alguma pesquisa no Google Maps?
SWITCHMAP
Já fez alguma pesquisa no Google Maps?
DEBOUNCETIME
Já fez alguma pesquisa no Google Maps?
DISTINCTUNTILCHANGED
Livestream?SUBSCRIBE
Isso é ser reativo
wendelnascimento wnascimentow
Wendel NascimentoFront end engineer @SENAI