# RxJS Intro 

# ME * [Georg M. Sorst](mailto:g.sorst@findologic.com) * [@piefke_schorsch](https://twitter.com/piefke_schorsch) * CTO @  <!-- .element: style="vertical-align: middle; height: 50px;" -->

# ReactiveX? > Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change

# What? Implementation of observer pattern

# Observer pattern? <span>Observable</span><!-- .element: class="fragment" width="250" data-fragment-index="1" --> <span>→ Subscription</span><!-- .element: class="fragment" width="250" data-fragment-index="3" --> <span>→ Observer</span><!-- .element: class="fragment" width="250" data-fragment-index="5" --> <span><!-- .element: class="fragment" data-fragment-index="2" --> <!-- .element: width="250" style="vertical-align: middle"; --> </span> <span><!-- .element: class="fragment" data-fragment-index="4" --> → <!-- .element: width="250" style="vertical-align: middle"; --> </span> <span><!-- .element: class="fragment" data-fragment-index="6" --> → <!-- .element: width="250" style="vertical-align: middle"; --> </span>

# Observer pattern ```javascript /* Observable */ element /* Subscription */ .addEventListener('click', /* Observer */ function() {…}); ```

# Observable? <!-- .element: width="250" style="vertical-align: middle"; --> * Anything that emits values: * Promises * DOM events * Timers * Arrays * …

# Observables Everything is a stream <!-- .element: width="250" style="vertical-align: middle"; --> Even if it just emits a single value <!-- .element: width="250" style="vertical-align: middle"; -->

# Subscription? <!-- .element: width="250" style="vertical-align: middle"; --> * Compose and transform streams * Filter, map, zip, …

# Observer? <!-- .element: width="250" style="vertical-align: middle"; --> * Actually does something * Render, upload, store, …

# RxJS > RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code

# Code pls ```javascript rxjs.fromEvent(element, 'keypress').pipe( map(event => event.target.value), filter(value => value !== ''), ).subscribe(value => console.log(value)); ```

# Straight up pipe 

# Why ReactiveX?

# Functional Operators are pure functions ↓ Clean, stateless code ## `f(x) = y`

# Asynchronous Stateless functions are easy to run asynchronously ↓ Great concurrency 

# Versatile Lots of common operators built in ↓ Less code

# Support * ReactiveX has implementations in all major languages * Even <!-- .element: style="vertical-align: middle; height: 50px;" -->

# Usage * Great for asynchronous event driven architectures * <!-- .element: style="vertical-align: middle; height: 50px;" --> * <!-- .element: style="vertical-align: middle; height: 50px;" --> * Single page apps

# Operator overload 104 operators built in: audit auditTime buffer bufferCount bufferTime bufferToggle bufferWhen catchError combineAll combineLatest concat concatAll concatMap concatMapTo count debounce debounceTime defaultIfEmpty delay delayWhen dematerialize distinct distinctUntilChanged distinctUntilKeyChanged elementAt endWith every exhaust exhaustMap expand filter finalize find findIndex first flatMap groupBy ignoreElements isEmpty last map mapTo materialize max merge mergeAll mergeMap mergeMapTo mergeScan min multicast observeOn onErrorResumeNext pairwise partition pluck publish publishBehavior publishLast publishReplay race reduce refCount repeat repeatWhen retry retryWhen sample sampleTime scan sequenceEqual share shareReplay single skip skipLast skipUntil skipWhile startWith subscribeOn switchAll switchMap switchMapTo take takeLast takeUntil takeWhile tap throttle throttleTime throwIfEmpty timeInterval timeout timeoutWith timestamp toArray window windowCount windowTime windowToggle windowWhen withLatestFrom zip zipAll <!-- .element: style="font-size: x-large;" -->

# Finding the right operator Use [RxJS Operator Decision Tree](https://rxjs-dev.firebaseapp.com/operator-decision-tree) to find the right operator

# RX Marbles 

# [take](https://rxmarbles.com/#take)<!-- .element: target="_blank" -->

# [last](https://rxmarbles.com/#last)<!-- .element: target="_blank" -->

# [filter](https://rxmarbles.com/#filter)<!-- .element: target="_blank" -->

# How? Live demo time! 

# Live demo Let's built a Wikipedia autocomplete!

# Requirements 1. Listen to text input events 2. Get search field value 3. Filter out empty queries 4. Debounce rapid typing 5. Discard ongoing requests 6. Display spinner 7. Fetch suggestions 8. Hide spinner 9. Display results

## Listen to text input events Plain <pre><code data-noescape data-trim> element.addEventListener('input', (event) => {}); </code></pre> RxJS <pre><code data-noescape data-trim> rxjs.fromEvent(element, 'input').subscribe(); </code></pre>

## Get search field value Plain ```javascript let query = event.target.value.trim(); ``` RxJS ```javascript rxjs.operators.map(event => event.target.value.trim() ```

## Filter out empty queries Plain ```javascript if (query === '') { return; } ``` RxJS ```javascript rxjs.operators.filter(query => query !== '') ```

## Debounce rapid typing Plain ```javascript window.clearTimeout(debounceTimeout); debounceTimeout = window.setTimeout(() { /* Handle query */ }, 300); ``` RxJS ```javascript rxjs.operators.debounce(() => rxjs.interval(300)), /* Handle query */ ```

## Discard ongoing requests Plain ```javascript controller.abort(); let controller = new AbortController(); let signal = controller.signal; fetch(baseUrl + query, {signal}).then( /* Handle response */ ); ``` RxJS ```javascript rxjs.operators.switchMap(query => from(fetch(baseUrl + query)), /* Handle response */ ```

## Display spinner Plain ```javascript spinner.style.display = 'block'; ``` RxJS ```javascript rxjs.operators.tap(() => spinner.style.display = 'block') ```

## Fetch suggestions Plain ```javascript fetch(url) .then(response => response.json()) .then(/* Handle response */) ); ``` RxJS ```javascript rxjs.operators.switchMap(query => from(fetch(baseUrl + query)), rxjs.operators.switchMap(response => from(response.json()), /* Handle response */ ```

## Display spinner Plain ```javascript spinner.style.display = 'none'; ``` RxJS ```javascript rxjs.operators.tap(() => spinner.style.display = 'none') ```

## Display results Plain ```javascript fetch(url).then(json => { let titles = json[1]; let links = json[3]; render(container, titles, links); }); ``` RxJS ```javascript let fetchSuggestions = rxjs.operators.switchMap(query => from(fetch(baseUrl + query))); let prepareResults = rxjs.operators.map(json => ({'titles': json[1], 'links': json[3]})); let renderResults = ({titles, links}) => render(container, titles, links); rxjsfromEvent(element, 'input').pipe( fetchSuggestions, preparedResults, ).subscribe(renderResults); ```

# Full version ## Plain * [Demo](demo/plain/) * [Code](demo/plain/js/search.js) ## RxJS * [Demo](demo/rxjs/) * [Code](demo/rxjs/js/search.js)

# Gotchas

# Subscribe! * Observables without subscription do nothing * Just like functions that are not called

# Handle errors! Streams will stop once they throw an error  Handle error-prone actions (eg. fetching URL) in sub-stream

# No branching! * Pipes run in a straight line * No conditionals / branching <!-- .element: height="350" style="filter: brightness(20%);" --> <!-- .element: height="350" -->