RxJS from the ground up - Introduction to reactive JavaScript

RxJS is a very powerful tool and has been established in Angular as its central way of communication between Components and Services.

If you are not quite comfortable yet to use RxJS in all of its glory, then this Webinar is for you. Yannick is going to show you the basic concepts and ideas behind all of RxJS's moving parts, to make sure you can wield this powerful tool more confidently.

Agenda:
- Why streams?
- Asynchronicity and the observer pattern
- Working with RxJS
- Unsubscribing and completion
- Resources to help yourself

Transcript

1. RxJS from the ground up Introduction to reactive JavaScript Yannick Baron @yannick_baron https://www.thinktecture.com/yannick-baron
2. Intro: Why Streams?
3. • various forms of asynchronicity in modern web applications • WebSockets • DOM Events • AJAX Dealing with Asynchronicity
4. • 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
5. • 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
6. • programming paradigm • reacting to asynchronous events 
 (e.g. user input, data updates, asynchronous responses) • data streams and propagation of change Reactive programming
7. • 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
8. • 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
9. Practical Introduction working with RxJS
10. • 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
11. 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]
12. • 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]
13. • 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]
14. • 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]
15. • 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
16. Unsubscribing and Completion Always unsubscribe?
17. • 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]
18. • 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?
19. Getting Help learning to help yourself
20. • 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
21. It's a wrap! https://www.thinktecture.com/yannick-baron