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.

Transcript

2. JavaScript
3. ReactiveUI - An advanced, composable, reactive model-view-viewmodel framework
4. 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}`))
8. Rx.Observable.fromEvent(button, 'click') .throttleTime(1000) .map(event => event.clientX) .scan((count, clientX) => count + clientX, 0) .subscribe(count => console.log(count));
10. Rx.Observable.fromEvent(document, 'mousemove') .subscribe(e => console.log(e.clientX + ', ' + e.clientY)); // "553, 239" // "550, 274" // "549, 281"
11. Rx.Observable.from(['a', 'b', 'c']) .subscribe(x => console.log(x)); // "a" // "b" // "c"
13. 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"
15. 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"
17. Rx.Observable.from(['a', 'b', 'c']) .scan((acc, curr) => acc + curr, '') .subscribe(x => console.log(x)); // "a" // "ab" // "abc"
18. 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"
19. 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"
20. Rx.Observable.fromEvent(input, 'input') .debounceTime(1000) .map(e => e.target.value) .subscribe(x => console.log(x)); // "Goo" // "Googling"
21. and more...
22. ReactiveX - Operators
24. // 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]));
25. // 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') });
26. 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() } }); }); }
29. Rx.Observable.fromEvent($('div'), 'click') .subscribe(e => console.log(e.clientX + ', ' + e.clientY));
30. Rx.Observable.interval(1000) // 1 sec .subscribe(x => console.log(x));
31. Rx.Observable.fromEvent(document, 'mousemove') .map(e => e.clientX) .filter(x => x % 2 == 0) .subscribe(x => console.log(x)); // 378 // 362 // 298
32. 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"