$30 off During Our Annual Pro Sale. View Details »

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

  2. @JonataWeber

  3. None
  4. None
  5. Programação Reativa

  6. Reactive programming is programming with asynchronous data streams.

  7. Async em Web apps • AJAX • User Events (mouse

    clicks, mouvemoves, keyups, etc) • Animations • Sockets • Workers
  8. Por que usar RP?

  9. None
  10. callback É a maneira mais primitiva de trabalhar com async

    no JavaScript getSomeData((data) => { console.log('data received', data); });
  11. Callback Hell

  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); })
  13. Promises • Garante o Futuro • Imutável • Único valor

    • Caching
  14. Promises let promise = new Promise((resolve, reject) => { let

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

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

    success = doSomethingAsync(); if (success) { resolve("Stuff worked!"); } else { reject(Error("It broke")); } });
  17. Promises Pendente Realizada Rejeitado Estabelecido

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

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

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

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

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

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

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

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

  26. RxJS

  27. RxJS is a library for composing asynchronous and event-based programs

    by using observable sequences.
  28. ReactiveX is a combination of the best ideas from
 the

    Observer pattern, the Iterator pattern, and functional programming
  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
  30. Demo

  31. Hello World Rx.Observable .of(1, 2, 3, 4, 5) .subscribe(n =>

    console.log(n)); http://jsbin.com/muxigepeju/edit?js,console
  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
  33. None
  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
  35. Demo http://jsbin.com/fuviwin/edit?js,console,output

  36. Observable

  37. Single Multiple Pull Function Iterator Push Promise Observable

  38. Exemplo let observable = Rx.Observable.create((observer) => { observer.next(1); observer.next(2); observer.next(3);

    setTimeout(() => { observer.next(4); observer.complete(); }, 1000); });
  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');
  40. Subjects

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

  42. Onde posso aprender mais sobre RxJS?

  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

  44. Obrigado! @JonataWeber