Tweet
Tweet

Slide 1

Slide 1 text

Reactive React by Sergei Egorov

Slide 2

Slide 2 text

The history of async in JavaScript

Slide 3

Slide 3 text

Callbacks hell

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

It has some benefits!

Slide 6

Slide 6 text

Easy to use!

Slide 7

Slide 7 text

But again…

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Do you even Promise, bro?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Promise .all(userIds.map(id => getUser(id))) .then(users => processUsers(users)) .then(() => console.log("Done!")) .catch(() => console.warn(“Ooops”));

Slide 12

Slide 12 text

Lifecycle

Slide 13

Slide 13 text

More states?

Slide 14

Slide 14 text

Promise is a single-value Observable

Slide 15

Slide 15 text

Observable?

Slide 16

Slide 16 text

const source$ = Rx.Observable.create(observer => { const source = new EventSource(url); source.onmessage = it => observer.onNext(it.data); source.onerror = e => { if(e.eventPhase === EventSource.CLOSED) { observer.onCompleted(); } else { observer.onError(e); } }; return () => source.close(); });

Slide 17

Slide 17 text

const source$ = Rx.Observable.create(observer => { const source = new EventSource(url); source.onmessage = it => observer.onNext(it.data); source.onerror = e => { if(e.eventPhase === EventSource.CLOSED) { observer.onCompleted(); } else { observer.onError(e); } }; return () => source.close(); });

Slide 18

Slide 18 text

const source$ = Rx.Observable.create(observer => { const source = new EventSource(url); source.onmessage = it => observer.onNext(it.data); source.onerror = e => { if(e.eventPhase === EventSource.CLOSED) { observer.onCompleted(); } else { observer.onError(e); } }; return () => source.close(); });

Slide 19

Slide 19 text

const source$ = Rx.Observable.create(observer => { const source = new EventSource(url); source.onmessage = it => observer.onNext(it.data); source.onerror = e => { if(e.eventPhase === EventSource.CLOSED) { observer.onCompleted(); } else { observer.onError(e); } }; return () => source.close(); });

Slide 20

Slide 20 text

const source$ = Rx.Observable.create(observer => { const source = new EventSource(url); source.onmessage = it => observer.onNext(it.data); source.onerror = e => { if(e.eventPhase === EventSource.CLOSED) { observer.onCompleted(); } else { observer.onError(e); } }; return () => source.close(); });

Slide 21

Slide 21 text

const subscription = source$.subscribe( message => console.log(`Got message: ${message}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") );

Slide 22

Slide 22 text

const subscription = source$.subscribe( message => console.log(`Got message: ${message}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") ); subscription.dispose();

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

source$ .map(data => JSON.parse(data)) .filter(event => event.type === "taskProgress") .takeWhile(event => event.value < 100) .retryWhen(errors$ = errors$.delay(1000).take(3)) .throttle(1000) .subscribe( event => console.log(`Got progress: ${event}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") );

Slide 25

Slide 25 text

source$ .map(data => JSON.parse(data)) .filter(event => event.type === "taskProgress") .takeWhile(event => event.value < 100) .retryWhen(errors$ = errors$.delay(1000).take(3)) .throttle(1000) .subscribe( event => console.log(`Got progress: ${event}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") );

Slide 26

Slide 26 text

source$ .map(data => JSON.parse(data)) .filter(event => event.type === "taskProgress") .takeWhile(event => event.value < 100) .retryWhen(errors$ = errors$.delay(1000).take(3)) .throttle(1000) .subscribe( event => console.log(`Got progress: ${event}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") );

Slide 27

Slide 27 text

source$ .map(data => JSON.parse(data)) .filter(event => event.type === "taskProgress") .takeWhile(event => event.value < 100) .retryWhen(errors$ = errors$.delay(1000).take(3)) .throttle(1000) .subscribe( event => console.log(`Got progress: ${event}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") );

Slide 28

Slide 28 text

source$ .map(data => JSON.parse(data)) .filter(event => event.type === "taskProgress") .takeWhile(event => event.value < 100) .retryWhen(errors$ = errors$.delay(1000).take(3)) .throttle(1000) .subscribe( event => console.log(`Got progress: ${event}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") );

Slide 29

Slide 29 text

source$ .map(data => JSON.parse(data)) .filter(event => event.type === "taskProgress") .takeWhile(event => event.value < 100) .retryWhen(errors$ = errors$.delay(1000).take(3)) .throttle(1000) .subscribe( event => console.log(`Got progress: ${event}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") );

Slide 30

Slide 30 text

RxJS is Lodash or Underscore for async - Ben Lesh, RxJS in-Depth @ AngularConnect 2015

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

=

Slide 34

Slide 34 text

Pure components • Properties in, VirtualDOM out • Stateless • Contains no business logic • Synchronous

Slide 35

Slide 35 text

Applications are asynchronous

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Stream of properties!

Slide 38

Slide 38 text

Demo