Reactive Programming

Terminology

Wikipedia

"In computing, reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change"

Stackoverflow

André Staltz

"Reactive programming is programming with asynchronous data streams."

RxJS

Reactive Extensions

• Async programming with streams
• Many Languages: Java, C#, C++, Swift, ...
• Simply Put: Observer Pattern on steroids
• Core pattern in Angular

Pretty much anything is a stream

                    
                        import { fromEvent } from 'rxjs';

                        const button = document.querySelector('.button');
                        const click$ = fromEvent(button, 'click');

                        click$.subscribe(console.log); // log whole click event
                    
                

Pretty much anything is a stream #2

                    
                        import { interval, from, of } from 'rxjs';

                        const source$ = interval(1000);

                        const array$ = from([1,2,3,4,5]);

                        const promise$ = from(fetch('/foo.json'));

                        const vars$ = of('Chris', 'Stefan', 'Patrick');
                    
                

Piping

• Chain operators together
• Each operator should be pure
• Share operator logic

Piping #2

                    
                        const { filter, map } from 'rxjs/operators';

                        source$
                            .pipe(
                                filter(value => value % 2 === 0),
                                map(value => x + x),
                            )
                            .subscribe(console.log)
                    
                

Piping #3

                    
                        import { from } from 'rxjs';
                        const { switchMap } from 'rxjs/operators';

                        source$
                            .pipe(
                                switchMap((url) => from(fetch(url))),
                            );
                        // cancel inner observable on each new emission
                    
                

Combining streams

                    
                        const { concat, merge } from 'rxjs/operators';

                        source$.pipe(concat(source2$));
                        // append second stream after first completed

                        source$.pipe(merge(source2$));
                        // emit every event from both streams
                        merge(source$, source2$); // also static
                    
                

Combining streams #2

                    
                        import { from } from 'rxjs';
                        const { forkJoin } from 'rxjs/operators';

                        source$
                            .pipe(
                                forkJoin(
                                    from(fetch('/api/first')),
                                    from(fetch('/api/second')),
                                ),
                            );
                        // emit after all observables completed
                        // emit final observable result
                    
                

Error Handling

                    
                        import { from, of } from 'rxjs';

                        source$
                            .pipe(
                                catchError(error => {
                                    console.error(error);
                                    return of([]);
                                })
                            );
                        // must return new Observable so operators
                        // down the stream won't fail
                    
                

RxJS Operators

https://github.com/btroncone/learn-rxjs