7min.js

RxJS
Reactive Extension for JavaScript
Edygar de Lima Oliveira
edygarDeLima
edygar
edygarDeLima
Callbacks
Bem-vindo ao inferno
• Difícil de entender o Fluxo

• Tratamento precário de exceções
Promises
Muito melhor…né?
Mas você não pode:
• Obter múltiplos valores assíncronos

• Usar lógica relacionada a tempo

(Ti...
Reatividade
unitário coleção
Sincrono Objeto Iterable( Array | Set | Map)
Assincrono Promise ?
unitário coleção
Sincrono Objeto Iterable( Array | Set | Map)
Assincrono Promise ?
Consumidor puxa do Produtor
Iterables
Dados são consumidos a medida que o consumidor puxa
hasNext(), next()
Produtor produz quando consumidor ordena: next()
Iterables
hasNext(), next()
unitário coleção
Sincrono Objeto Iterable( Array | Set | Map)
Assincrono Promise ?
Como Produtor empurra ao
Consumidor?
RxJS
Reactive Extension for JavaScript
Observables são coleções de valores assíncronos ao longo do tempo



tempo



{1….2.3………..4}
Observables
RxJS
• Emite qualquer quantidade de valores assíncronos (de 0 à ∞)

• Emite erros

• Fim de transmissões
Observables
Produtor produz e Consumidor reage ao isso: onNext( data )
Iterables Observables
>	
  [1,	
  2,	
  3]

.forEach(::console.log)	
  
>	
  1

>	
  2

>	
  3
>	
  [1,	
  2,	
  3]

.map(x	
  =>	
  x	
  *	
  2...
>	
  {1……2…………3}

.subscribe(::console.log)	
  
>	
  1

……

>	
  2

…………

>	
  3
>	
  {1……2…………3}

.map(x	
  =>	
  x	
  *	...
mouse
down
flatMap( )
drags
mouse
move
mouse
up
filterfilter
takeUntil
Próximos SlideShares
Carregando em…5
×

RxJS

199 visualizações

Publicada em

Uma breve introdução à RxJS (em português), comparando com Async Callbacks e Promises

Publicada em: Engenharia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
199
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

RxJS

  1. 1. 7min.js
 RxJS Reactive Extension for JavaScript
  2. 2. Edygar de Lima Oliveira edygarDeLima edygar edygarDeLima
  3. 3. Callbacks Bem-vindo ao inferno • Difícil de entender o Fluxo
 • Tratamento precário de exceções
  4. 4. Promises Muito melhor…né? Mas você não pode: • Obter múltiplos valores assíncronos
 • Usar lógica relacionada a tempo
 (Timeout, Delay, Debounce)
 • Fazer composições complexas
  5. 5. Reatividade unitário coleção Sincrono Objeto Iterable( Array | Set | Map) Assincrono Promise ?
  6. 6. unitário coleção Sincrono Objeto Iterable( Array | Set | Map) Assincrono Promise ? Consumidor puxa do Produtor
  7. 7. Iterables Dados são consumidos a medida que o consumidor puxa hasNext(), next()
  8. 8. Produtor produz quando consumidor ordena: next() Iterables hasNext(), next()
  9. 9. unitário coleção Sincrono Objeto Iterable( Array | Set | Map) Assincrono Promise ? Como Produtor empurra ao Consumidor?
  10. 10. RxJS Reactive Extension for JavaScript
  11. 11. Observables são coleções de valores assíncronos ao longo do tempo
 
 tempo
 
 {1….2.3………..4} Observables
  12. 12. RxJS • Emite qualquer quantidade de valores assíncronos (de 0 à ∞)
 • Emite erros
 • Fim de transmissões
  13. 13. Observables Produtor produz e Consumidor reage ao isso: onNext( data )
  14. 14. Iterables Observables
  15. 15. >  [1,  2,  3]
 .forEach(::console.log)   >  1
 >  2
 >  3 >  [1,  2,  3]
 .map(x  =>  x  *  2)   >  [2,  4,  6] >  [1,  2,  3]
 .filter(x  =>  x  %  2)   >  [1,  3] Iterables + functional >  [[1],  [2,  3],  [],  [4]].concatAll(x  =>  x  %  2)   >  [1,  2,  3,  4]
  16. 16. >  {1……2…………3}
 .subscribe(::console.log)   >  1
 ……
 >  2
 …………
 >  3 >  {1……2…………3}
 .map(x  =>  x  *  2)   {2……4…………6} >  {1……2…………3}
 .filter(x  =>  x  %  2)   {2……4…………6} Observable + functional {
    {…1},
    {………2………………3},
    {……………},
    {…………………4}
 }.concatAll(x  =>  x  %  2)   
    {…1…2………4……3}  
  17. 17. mouse down flatMap( ) drags mouse move mouse up filterfilter takeUntil

×