RxJS from the ground up Introduction to reactive JavaScript Yannick Baron @yannick_baron https://www.thinktecture.com/yannick-baron

Intro: Why Streams?

• various forms of asynchronicity in modern web applications • WebSockets • DOM Events • AJAX Dealing with Asynchronicity

• designed to handle asynchronicity • start running the moment you create it • will always resolve or reject • handles a single event/value 
 → can pretty much only cover AJAX • not cancellable Promises

• software design pattern • a Subject noti fi es a list of Observers by calling a provided method • Observers register and unregister with the Subject • useful to be noti fi ed of multiple events or actions The observer pattern

• programming paradigm • reacting to asynchronous events 
 (e.g. user input, data updates, asynchronous responses) • data streams and propagation of change Reactive programming

• library implementing the Observer pattern • API to describe data streams • shines when handling multiple reactive events • lots of useful operators 
 retrying, error handling, delaying, timing, fi ltering... → for more than just HTTP requests Rx - Reactive Extensions

• designed to handle asynchronicity • will generally not run until there is a subscriber • handles sequence of 0..N asynchronous events over time 
 → can handle multiple forms of asynchronicity • can be unsubscribed from (can notify producer) • communicate change or updates to subscribers • combine multiple streams and de fi ne how data fl ows • many operators to help control the fl ow Rx - On Observables and Streams

Practical Introduction working with RxJS

• Observable 
 data stream or source emitting data over time • Observer 
 function that will be called when new data is emitted • Subscription 
 one-sided connection between Observer and Observable • Operators (combination, fi ltering, transformation, ...) 
 replace your observables with a modi fi ed one Observable, Observer, Subscription & Operators

new Observable(observer => {
 observer.next('Value 1');
 observer.next('Value 2');
 observer.complete();
 
 return () => {
 // observer unsubscribed
 };
 });
 
 from(['Value 1', 'Value 2']);
 
 of('Value 1');
 
 create, fromEvent, interval, ...
 creating Observables is easy! 
 wrap asynchronous actions several (12) creation operators [Examples: 01]

• three events we can react to • next 
 receive the next value going through the stream • error 
 react to the observable throwing - no more values will be emitted 
 observers unsubscribe - observable does not complete • complete 
 observable completes without error - no more values will be emitted 
 observers unsubscribe 
 next, error, complete [Examples: 02, 03]

• Observable 
 data stream or source emitting data over time 
 is cold / unicast: start upon subscription with new execution context 
 → single listener (subscriber) • Subject (AsyncSubject / BehaviorSubject / ReplaySubject) 
 is an Observable that we can tell when to next / error / complete 
 hot / multicast: run without subscription and keep execution context 
 → multiple listeners (subscriber) Subject & Observable - Hot & Cold [Examples: 04, 05]

• Subject 
 emits values regularly - you can miss values • AsyncSubject 
 only emits the last value once the subject completes • BehaviorSubject (stateful) 
 emits default value or last emitted value upon subscription, then regularly • ReplaySubject 
 emits the last N values upon subscription, then regularly Subjects [Examples: 05, 06, 07, 08]

• Operators (combination, fi ltering, transformation, ...) 
 replace your observables with a modi fi ed one • https://rxmarbles.com/ Operators and marble diagrams Observable Events over time Operator Observable Resulting Observable

Unsubscribing and Completion Always unsubscribe?

• noti fi es Subject to remove Observer • Observable can perform cleanup logic 
 e.g. cancelling an http request, unsetting timers, closing connections, ... • will stop Subscription from executing 
 if subscription is kept alive on a destroyed Component, it will still execute 
 can cause memory leaks • possibility to unsubscribe via operators • Subject completion causes the Observers to unsubscribe Unsubscribing [Examples: leak]

• No... Well... Not directly... • ... if you know exactly what you are doing. • Always unsubscribing is the safest way to prevent leaks or side-effects 
 good fi rst step 
 more comfortable with RxJS → easily identify when to unsubscribe • Unsubscribe cleverly. At the right moment. In the most elegant way. 
 reason about it - make your app behave the way you need it to 
 make use of operators 
 (In Angular: async pipe unsubscribes for you!) 
 Do we always have to unsubscribe?

Getting Help learning to help yourself

• https://www.learnrxjs.io/ 
 explains all operators with examples and more • https://rxmarbles.com/ 
 visual representation of some operators • https://stackblitz.com/ 
 quickly construct a demo for your use case • https://rxjs-dev. fi rebaseapp.com/operator-decision-tree 
 helps you fi nd the right operator, good in the beginning Great resources

It's a wrap! https://www.thinktecture.com/yannick-baron