Programação Reativa com RxJS

Transcript

1. Programação Reativa
   com RxJS
   Por Jonata Weber
   

   View Slide

2. @JonataWeber
   

   View Slide

3. View Slide

4. View Slide

5. Programação Reativa
   

   View Slide

6. Reactive programming is
   programming with
   asynchronous data streams.
   

   View Slide

7. Async em Web apps
   • AJAX
   • User Events (mouse clicks, mouvemoves, keyups,
   etc)
   • Animations
   • Sockets
   • Workers
   

   View Slide

8. Por que usar RP?
   

   View Slide

9. View Slide

10. callback
    É a maneira mais primitiva de trabalhar com async
    no JavaScript
    getSomeData((data) => {
    console.log('data received', data);
    });
    

    View Slide

11. Callback Hell
    

    View Slide

12. Promises
    Provê uma solução simples
    getData(id)
    .then(data => {
    doStuff(data);
    return getSomeData(data.parentId);
    })
    .then(data => {
    doStuff(data);
    return getSomeData(data.parentId);
    })
    

    View Slide

13. Promises
    • Garante o Futuro
    • Imutável
    • Único valor
    • Caching
    

    View Slide

14. Promises
    let promise = new Promise((resolve, reject) => {
    let success = doSomethingAsync();
    if (success) {
    resolve("Stuff worked!");
    } else {
    reject(Error("It broke"));
    }
    });
    

    View Slide

15. Promises
    let promise = new Promise((resolve, reject) => {
    let success = doSomethingAsync();
    if (success) {
    resolve("Stuff worked!");
    } else {
    reject(Error("It broke"));
    }
    });
    

    View Slide

16. Promises
    let promise = new Promise((resolve, reject) => {
    let success = doSomethingAsync();
    if (success) {
    resolve("Stuff worked!");
    } else {
    reject(Error("It broke"));
    }
    });
    

    View Slide

17. Promises
    Pendente
    Realizada
    Rejeitado
    Estabelecido
    

    View Slide

18. Promises
    Pendente
    Realizada
    Rejeitado
    Estabelecido
    Não pode ser cancelada!!!
    

    View Slide

19. GET /search?q=pagode
    Search com Promises
    

    View Slide

20. GET /search?q=pop
    GET /search?q=pagode
    Search com Promises
    

    View Slide

21. GET /search?q=pagode
    GET /search?q=pop
    Search com Promises
    

    View Slide

22. Processará algo inútil
    Search com Promises
    GET /search?q=pagode
    GET /search?q=pop
    

    View Slide

23. GET /search?q=pagode
    Cenário ideal
    

    View Slide

24. GET /search?q=pop
    GET /search?q=pagode
    Cenário ideal
    

    View Slide

25. GET /search?q=pop
    GET /search?q=pagode
    Cenário ideal
    Abortar a requisição anterior
    

    View Slide

26. RxJS
    

    View Slide

27. RxJS is a library for composing
    asynchronous and event-based
    programs by using observable
    sequences.
    

    View Slide

28. ReactiveX is a combination of the best ideas from

    the Observer pattern, the Iterator pattern, and functional programming
    

    View Slide

29. Java: RxJava
    JavaScript: RxJS
    C#: Rx.NET
    Python: RxPY
    Ruby: Rx.rb

    PHP: RxPHP
    Go: RxGo
    Kotlin: RxKotlin
    C++: RxCpp
    Lua: RxLua
    Groovy: RxGroovy
    JRuby: RxJRuby
    Swift: RxSwift
    Elixir: reaxive
    Dart: RxDart
    C# (Unity): UniRx
    

    View Slide

30. Demo
    
    

    View Slide

31. Hello World
    Rx.Observable
    .of(1, 2, 3, 4, 5)
    .subscribe(n => console.log(n));
    http://jsbin.com/muxigepeju/edit?js,console
    

    View Slide

32. const btn = document.querySelector('button');
    Rx.Observable.fromEvent(btn, 'click')
    .throttleTime(250)
    .scan(count => count + 1, 0)
    .subscribe(count => console.log(`Clicked ${count} times`));
    Contador de Cliques
    http://jsbin.com/qifumej/edit?js,console,output
    

    View Slide

33. View Slide

34. Transformation Operators
    • buffer
    • bufferCount
    • bufferTime
    • bufferToggle
    • bufferWhen
    • concatMap
    • concatMapTo
    • exhaustMap
    • expand
    • groupBy
    • map
    • mapTo
    • mergeMap
    • mergeMapTo
    • mergeScan
    • pairwise
    • partition
    • pluck
    • scan
    • switchMap
    • switchMapTo
    • window
    • windowCount
    • windowTime
    • windowToggle
    • windowWhen
    

    View Slide

35. Demo
    
    http://jsbin.com/fuviwin/edit?js,console,output
    

    View Slide

36. Observable
    

    View Slide

37. Single Multiple
    Pull Function Iterator
    Push Promise Observable
    

    View Slide

38. Exemplo
    let observable = Rx.Observable.create((observer) => {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    setTimeout(() => {
    observer.next(4);
    observer.complete();
    }, 1000);
    });
    

    View Slide

39. let observable = Rx.Observable.create((observer) => {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    setTimeout(() => {
    observer.next(4);
    observer.complete();
    }, 1000);
    });
    console.log('just before subscribe');
    observable.subscribe({
    next: x => console.log('got value ' + x),
    error: err => console.error('something wrong occurred: ' + err),
    complete: () => console.log('done'),
    });
    console.log('just after subscribe');
    

    View Slide

40. Subjects
    

    View Slide

41. Demo
    
    http://jsbin.com/ribosa/edit?js,console
    

    View Slide

42. Onde posso aprender
    mais sobre RxJS?
    

    View Slide

43. Referências
    • http://reactivex.io/rxjs/manual/overview.html#subject
    • https://www.gitbook.com/book/btroncone/learn-rxjs/
    details
    • https://xgrommx.github.io/rx-book/why_rx.html
    • https://github.com/ReactiveX/rxjs
    • https://www.youtube.com/watch?v=COviCoUtwx4

    

    View Slide

44. Obrigado!
    @JonataWeber
    

    View Slide