RxJS

248 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
248
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
1
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

×