Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactive React

Reactive React

Sergei Egorov

May 03, 2017
Tweet

More Decks by Sergei Egorov

Other Decks in Programming

Transcript

  1. 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(); });
  2. 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(); });
  3. 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(); });
  4. 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(); });
  5. 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(); });
  6. const subscription = source$.subscribe( message => console.log(`Got message: ${message}`), e

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

    => console.error(`Got error: ${e}`), () => console.log("Completed!") ); subscription.dispose();
  8. 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!") );
  9. 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!") );
  10. 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!") );
  11. 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!") );
  12. 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!") );
  13. 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!") );
  14. RxJS is Lodash or Underscore for async - Ben Lesh,

    RxJS in-Depth @ AngularConnect 2015
  15. =

  16. Pure components • Properties in, VirtualDOM out • Stateless •

    Contains no business logic • Synchronous