Slide 1

Slide 1 text

Programação Reativa com RxJS Por Jonata Weber

Slide 2

Slide 2 text

@JonataWeber

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Programação Reativa

Slide 6

Slide 6 text

Reactive programming is programming with asynchronous data streams.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Por que usar RP?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Callback Hell

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Promises Pendente Realizada Rejeitado Estabelecido

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

GET /search?q=pagode Search com Promises

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

GET /search?q=pagode Cenário ideal

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

RxJS

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ReactiveX is a combination of the best ideas from
 the Observer pattern, the Iterator pattern, and functional programming

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Demo

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Observable

Slide 37

Slide 37 text

Single Multiple Pull Function Iterator Push Promise Observable

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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');

Slide 40

Slide 40 text

Subjects

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Onde posso aprender mais sobre RxJS?

Slide 43

Slide 43 text

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


Slide 44

Slide 44 text

Obrigado! @JonataWeber