Programação reativa com RxJS e Angular

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