Programação Reativa com RxJS

Transcript

1. Programação Reativa com RxJS Por Jonata Weber
2. @JonataWeber
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?
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
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