programação reativa com rxjs e angular

58

Upload: wendel-nascimento

Post on 12-Apr-2017

81 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Programação reativa com RxJS e Angular
Page 2: Programação reativa com RxJS e Angular

wendelnascimento wnascimentow

Wendel NascimentoFront end engineer @SENAI

Page 3: Programação reativa com RxJS e Angular
Page 4: Programação reativa com RxJS e Angular

Programação reativa

Page 5: Programação reativa com RxJS e Angular

O que é programação reativa?

Page 6: Programação reativa com RxJS e Angular

reativo adj. (1858) 1 que faz reagir, que provoca reação; reagente 2 eletr eletrôn fís relativo a reatância

Page 7: Programação reativa com RxJS e Angular
Page 8: Programação reativa com RxJS e Angular

Programação blocante

Page 9: Programação reativa com RxJS e Angular

if(x < 10) { foo(x); bar(x); baz(x); console.log("Done"); }

Page 10: Programação reativa com RxJS e Angular

Este é um processo imperativo/estruturado

Page 11: Programação reativa com RxJS e Angular

CONTROLE

FLUXO NEM SEMPRE BEM ESTABELECIDO

PRÓS…

Page 12: Programação reativa com RxJS e Angular

FILAS - CONCORRÊNCIA

CÓDIGOS DE DIFÍCIL LEITURA

NÃO ESCALÁVEL

CONTRAS…

Page 13: Programação reativa com RxJS e Angular

Programação não blocante

Page 14: Programação reativa com RxJS e Angular

Callbacks

Page 15: Programação reativa com RxJS e Angular

if(x < 10) { foo(x); setTimeout(() => bar(x), 1000 ); baz(x); console.log("Done"); }

Page 16: Programação reativa com RxJS e Angular

SIMPLICIDADE

NÃO BLOCANTE

PRÓS…

Page 17: Programação reativa com RxJS e Angular

FRÁGIL

CALLBACK HELL

CONTRAS…

Page 18: Programação reativa com RxJS e Angular

Callback hell

Page 19: Programação reativa com RxJS e Angular
Page 20: Programação reativa com RxJS e Angular

PS: Nem todo callback é assíncrono

Page 21: Programação reativa com RxJS e Angular

Promises

Page 22: Programação reativa com RxJS e Angular

if(x < 10) { logValues(x)

.then(() => console.log(“Done”));

}

Page 23: Programação reativa com RxJS e Angular

if(x < 10) { logValues(x)

.then(() => console.log(“Done”));

}Sim, Promises usam callbacks

Page 24: Programação reativa com RxJS e Angular

PRÓS… MAIS SIMPLICIDADE

NÃO BLOCANTE

CÓDIGO LIMPO

Page 25: Programação reativa com RxJS e Angular

NÃO CANCELÁVEL

É UM STREAM COM INÍCIO E FIM

CONTRAS…

Page 26: Programação reativa com RxJS e Angular

Observables

Page 27: Programação reativa com RxJS e Angular

if(x < 10) { logValues(x)

.subscribe(() => console.log(“Done”));

}

Page 28: Programação reativa com RxJS e Angular

if(x < 10) { logValues(x)

.subscribe(() => console.log(“Done”));

}Sim, Observables também

usam callbacks

Page 29: Programação reativa com RxJS e Angular

PRÓS… MAIS SIMPLICIDADE

NÃO BLOCANTE

CÓDIGO LIMPO

CANCELÁVEL

É UM STREAM QUE PODE NUNCA TER FIM

Page 30: Programação reativa com RxJS e Angular

NÃO ENCADEÁVELCONTRAS…

Page 31: Programação reativa com RxJS e Angular

Calma. Observable + Subscribe é tipo…

Promise???

Page 32: Programação reativa com RxJS e Angular

Sim e não

Page 33: Programação reativa com RxJS e Angular

“Observable is Promise++”Andre Staltz

Page 34: Programação reativa com RxJS e Angular

É simples. Observable é nada mais que um stream assíncrono infinito

Page 35: Programação reativa com RxJS e Angular

var el = document.getElementById("t"); el.addEventListener( "click", handleClick );

Page 36: Programação reativa com RxJS e Angular

Então eu sempre programei de forma reativa?

Page 37: Programação reativa com RxJS e Angular
Page 38: Programação reativa com RxJS e Angular

Sempre utilizamos funções reativas porém muitas

vezes não sabemos disso

Page 39: Programação reativa com RxJS e Angular

Mas agora vamos usar

Page 40: Programação reativa com RxJS e Angular
Page 41: Programação reativa com RxJS e Angular
Page 42: Programação reativa com RxJS e Angular

O problema da Netflix era não poder cancelar

requisições

Page 43: Programação reativa com RxJS e Angular

Eles resolveram com RxJS e RxJava

Page 44: Programação reativa com RxJS e Angular
Page 45: Programação reativa com RxJS e Angular

ECONOMIZAR TEMPO

ESCALAR SUA APLICAÇÃO

E MUITO MAIS

TER UM CÓDIGO LIMPO E FÁCIL MANUTENÇÃO

COM RXJS VOCÊ IRÁ…

Page 46: Programação reativa com RxJS e Angular

Hora da ação

Page 47: Programação reativa com RxJS e Angular

Você conhece a terceira lei de Newton?

Page 48: Programação reativa com RxJS e Angular

Então vamos falar de reaçãoCom JS TS

Page 49: Programação reativa com RxJS e Angular

Operadores e Objetos core do RxJS

Page 50: Programação reativa com RxJS e Angular

OBSERVABLESJá usou qualquer coisa assíncrona WhatsApp, Messenger ou qualquer outro mensageiro?

Page 51: Programação reativa com RxJS e Angular

Já fez alguma pesquisa no Google Maps?

SWITCHMAP

Page 52: Programação reativa com RxJS e Angular

Já fez alguma pesquisa no Google Maps?

DEBOUNCETIME

Page 53: Programação reativa com RxJS e Angular

Já fez alguma pesquisa no Google Maps?

DISTINCTUNTILCHANGED

Page 54: Programação reativa com RxJS e Angular
Page 55: Programação reativa com RxJS e Angular

Livestream?SUBSCRIBE

Page 56: Programação reativa com RxJS e Angular

Isso é ser reativo

Page 57: Programação reativa com RxJS e Angular

wendelnascimento wnascimentow

Wendel NascimentoFront end engineer @SENAI

Page 58: Programação reativa com RxJS e Angular