Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Programação Reativa com RxJS

Programação Reativa com RxJS

Jonata Weber

May 27, 2017
Tweet

More Decks by Jonata Weber

Other Decks in Technology

Transcript

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

    View full-size slide

  2. @JonataWeber

    View full-size slide

  3. Programação Reativa

    View full-size slide

  4. Reactive programming is
    programming with
    asynchronous data streams.

    View full-size slide

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

    View full-size slide

  6. Por que usar RP?

    View full-size slide

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

    View full-size slide

  8. Callback Hell

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Promises
    Pendente
    Realizada
    Rejeitado
    Estabelecido

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. ReactiveX is a combination of the best ideas from

    the Observer pattern, the Iterator pattern, and functional programming

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. Demo

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

    View full-size slide

  30. Single Multiple
    Pull Function Iterator
    Push Promise Observable

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. Demo

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

    View full-size slide

  34. Onde posso aprender
    mais sobre RxJS?

    View full-size slide

  35. 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 full-size slide

  36. Obrigado!
    @JonataWeber

    View full-size slide