Reactive React

https://medium.com/@benlesh/learning-observable-by-building-observable-d5da57405d87
https://www.learnrxjs.io/operators/filtering/skipuntil.html
https://xgrommx.github.io/rx-book/
http://reactivex.io/rxjs/manual/overview.html
https://bsideup.gitbooks.io/rxconnect/content/
https://github.com/bsideup/rx-connect/tree/master/examples

Transcript

1. Reactive React by Sergei Egorov
2. The history of async in JavaScript
3. Callbacks hell
5. It has some benefits!
6. Easy to use!
7. But again…
9. Do you even Promise, bro?
11. Promise .all(userIds.map(id => getUser(id))) .then(users => processUsers(users)) .then(() => console.log("Done!")) .catch(() => console.warn(“Ooops”));
12. Lifecycle
13. More states?
14. Promise is a single-value Observable
15. Observable?
16. 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(); });
17. 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(); });
18. 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(); });
19. 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(); });
20. 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(); });
21. const subscription = source$.subscribe( message => console.log(`Got message: ${message}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") );
22. const subscription = source$.subscribe( message => console.log(`Got message: ${message}`), e => console.error(`Got error: ${e}`), () => console.log("Completed!") ); subscription.dispose();
24. 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!") );
25. 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!") );
26. 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!") );
27. 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!") );
28. 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!") );
29. 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!") );
30. RxJS is Lodash or Underscore for async - Ben Lesh, RxJS in-Depth @ AngularConnect 2015
33. =
34. Pure components • Properties in, VirtualDOM out • Stateless • Contains no business logic • Synchronous
35. Applications are asynchronous
37. Stream of properties!
38. Demo