RxJS von Grund auf Einführung in reaktives 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 notifies a list of Observers by calling a provided method • Observers register and unregister with the Subject • useful to be notified 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, filtering... → 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 define how data flows • many operators to help control the flow 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, filtering, transformation, ...)
 replace your observables with a modified 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, filtering, transformation, ...)
 replace your observables with a modified one • https://rxmarbles.com/ Operators and marble diagrams Observable Events over time Operator Observable Resulting Observable

Unsubscribing and Completion Always unsubscribe?

• notifies 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 first 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.firebaseapp.com/operator-decision-tree
 helps you find the right operator, good in the beginning Great resources

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