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

Everything’s a stream. An introduction to RxJS and avoiding anti-patterns

Everything’s a stream. An introduction to RxJS and avoiding anti-patterns

To reactive extensions, everything's a stream. RxJS simplifies concurrent and async programming in JavaScript by producing and transforming immutable streams, allowing you to easily reason about the events. This talk will give an introduction to using RxJS including common anti-patterns and how to avoid them.

Paul Heasley

June 22, 2017
Tweet

More Decks by Paul Heasley

Other Decks in Programming

Transcript

  1. getDataFromNetwork() .filter(s => s != null) .map(s => s +

    'transformed') .forEach(s => console.log(`next => ${s}`)) getDataFromNetwork() .filter(s => s != null) .map(s => s + 'transformed') .subscribe(s => console.log(`next => ${s}`))
  2. Rx.Observable.from(['a', 'b', 'c']) .subscribe( x => console.log("next -> " +

    x), x => console.log("error -> " + x), () => console.log("complete")); // "next -> a" // "next -> b" // "next -> c" // "complete"
  3. var foo = Rx.Observable.create(function (observer) { observer.next(Math.floor(Math.random() * 100)); observer.complete();

    }); foo.subscribe(x => console.log('x: ' + x)); foo.subscribe(y => console.log('y: ' + y)); // "x: 84" // "y: 96"
  4. Rx.Observable.from(['a', 'b', 'c']) .scan((acc, curr) => acc + curr, '')

    .subscribe(x => console.log(x)); // "a" // "ab" // "abc"
  5. var ints = Rx.Observable.range(0, 3); Rx.Observable.from(['a', 'b', 'c']) .zip(ints, (a,

    b) => a + ':' + b) .subscribe(x => console.log(x)); // "a:0" // "b:1" // "c:2"
  6. getRemoteFolders() .mergeMap(folder => getRemoteFiles(folder) .map(file => [folder, file])) .subscribe(x =>

    console.log(x[0] + '/' + x[1])); // "Documents/Receipt.pdf" // "Downloads/RxJS.zip" // "Pictures/Mum.jpg" // "Pictures/Screenshot.png"
  7. // Don't Rx.Observable.range(1, 2) .subscribe(x => { Rx.Observable.range(0, x) .subscribe(y

    => console.log(x + ':' + y)); }); // Do Rx.Observable.range(1, 2) .mergeMap(x => Rx.Observable.range(0, x) .map(y => [x, y])) .subscribe(x => console.log(x[0] + ':' + x[1]));
  8. // Don't Rx.Observable.range(1, 2) .mergeMap(x => Rx.Observable.range(0, x) .do(y =>

    doSomething(x, y))) .subscribe({ complete: () => console.log('done') }); // Do Rx.Observable.range(1, 2) .mergeMap(x => Rx.Observable.range(0, x) .map(y => [x, y])) .subscribe({ next: x => doSomething(x[0], x[1]), complete: () => console.log('done') });
  9. Rx.Observable.prototype.isLast = function() { var source = this; var prev

    = []; return Rx.Observable.create(function subscribe(observer) { source.subscribe({ next: v => { if (prev.length > 0) observer.next({ x: prev[0], isLast: false }); prev[0] = v }, error: err => observer.error(err), complete: () => { if (prev.length > 0) observer.next({ x: prev[0], isLast: true }); observer.complete() } }); }); }
  10. Rx.Observable.fromEvent(document, 'mousemove') .map(e => e.clientX) .filter(x => x % 2

    == 0) .subscribe(x => console.log(x)); // 378 // 362 // 298
  11. Rx.Observable.from(['a', 'b', 'c']) .scan((acc, curr) => acc + curr, '')

    .subscribe(x => console.log(x)); // "a" // "ab" // "abc" Rx.Observable.from(['a', 'b', 'c']) .reduce((acc, curr) => acc + curr, '') .subscribe(x => console.log(x)); // "abc"