Learning RxJS Operators by Example Playbook

The strength of RxJS is its over 100 operators; they provide the power. Learning those operators was hard, until now. This course will teach you every single operator, with examples and marble diagrams, all in framework-agnostic vanilla JavaScript.
Course info
Rating
(21)
Level
Intermediate
Updated
Dec 19, 2018
Duration
3h 48m
Table of contents
Course Overview
RxJS 101
Buffering
Error Handling
Filtering to Multiple Results
Filtering to One Result
Grouping Observables
Grouping Values
Observable Transformation
Time, Duration, & Scheduled
Value Transformation
Multicasting
Utilities
Wrap Up
Description
Course info
Rating
(21)
Level
Intermediate
Updated
Dec 19, 2018
Duration
3h 48m
Description

The true strength of RxJS is the over 100 operators it includes. Unfortunately, this is also a weakness - it's hard to learn everything those operators offer. In this course, Learning RxJS Operators by Example Playbook, you will learn how the power these operators offer can make your applications easier to code and troubleshoot. First, you will explore how to improve performance. Next, you will discover operators that you didn't even know existed. Finally, you will be able to add them to your coding toolbelt. Every single operator is covered; first in an overview with a marble diagram and then in code, with at least one example per operator. All examples are in vanilla JavaScript so there's nothing extraneous. Watch it straight through to learn it all, or jump in and skip around to learn just the operators you need right now. When you're finished with this course, you will have the skills and knowledge of RxJS needed to write high-performing, easy-to-maintain code.

About the author
About the author

Dave is a start-up co-founder and CTO, an 11-time Microsoft MVP, and full-stack web developer, trainer and author focusing on JavaScript, NodeJS, document DBs and C#.

More from the author
Functional JavaScript Libraries Playbook
Intermediate
2h 59m
Jun 1, 2018
Constructing a User Interface with Angular
Intermediate
4h 35m
Feb 5, 2018
More courses by David Mann
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi my name is David Mann, and welcome to my course Learning RxJS Operators by Example Playbook. I'm a cofounder of a startup, making heavy use of JavaScript for our products. I've been doing JavaScript development for, let's just say, more years than I'd like to admit. But I do remember when jQuery was the new shiny object in the JavaScript world, and I've banged my head against the wall of IE6, and even Netscape Navigator, enough times to have bruises. This is a by example course and so there are demos, lots of demos, over 150 of them, at least 1 per operator, sometimes 3 or 4 per operator. We also start each operator with an overview of its functionality and a marble diagram. Each example is as simple and straightforward as I could make it, focused on just one operator or one aspect of the operator. We walk through the code, cover what it does, and see it running live. The examples are all in pure, library agnostic vanilla JavaScript, so there's nothing extraneous, but adapting them if you need to to work with TypeScript, View, Angular, React or any other library de jour is simple. Before beginning the course, you should be comfortable with JavaScript development and have some exposure to RxJS and Reactive programming. If you're a little rusty, we do cover some RxJS 101 introductory type material at the beginning of the course. Otherwise, you can pick up a lot in all of the demos. I hope you'll join me on this journey to learn more about RxJS and it's over 100 operators with the Learning RxJS Operators by Example Playbook course at Pluralsight.

Buffering
Module 1 gave us a basic understanding of RxJS and more specifically where operators fit into the process. So now we can dive into the meat of this course, taking a look at each of the available operators. We'll cover our first 10 operators, all related to working with the output from our source observables in batches. These are the specific operators we're going to take a look at. You can see that other than the difference between a buffer and a window, these are identical lists. I provide some use cases for each category of operators as we go through the course. So for this first module, the use case is pretty simple. These operators provide support for batching values and receiving them in our subscribers as a collection of values based upon the criteria we provide. Each group of operators allows us to define how the values from the source observable are grouped into batches and emitted. The difference is that the buffering operators emit the values as an array and the windowing operators emit them as an observable. Other than that, the operators in this category are identical.

Filtering to Multiple Results
Often when working with streams, you don't need or want to process every value. And that's where the operators in this module come in. They let you filter the stream to a subset of items based on the criteria you specify. There are 15 different operators in this module, but one through four and five through eight are each two sides of the same coin, so pretty straightforward. For the rest, the three distinct operators are pretty similar, and then we have filter, sample, audit, and throttle. And the last three are confusingly similar. We're going to take a look at each of these, so let's get started. Starting with the very basic skip operator. Skip does exactly what you would expect. You provide the number of values that you don't care about and that number will be filtered out from the beginning of the source observable. In our marble diagram here, we specify 3 as our parameter to skip, and so a, b, and c are dropped and never seen by our subscribers. Taking a look at skip, we start with an observable that's going to emit 3 values, 1, 2, and 3. We pipe it through skip and tell it we want to ignore the first two values, so those are going to get dropped. We're just going to log out the output. So if I go ahead and run this over in the console, you can see that the only value we get emitted is the 3, we've dropped the 1 and the 2.

Filtering to One Result
Like in the last module, in this module we're going to look at operators that let you filter values coming out of a source observable. Now, however, the operators are limiting the source to just a single value. Here are the eight operators that serve primarily as a means of limiting a source to that one value. Most of them are pretty straightforward, but we're going to take a quick look at each one. Like I said, straightforward. The first operator does exactly what you would expect. It emits just the first value from a source and then unsubscribes. At its most basic, first is extremely simple. As we can see in example 1 here, we have a sequence that emits 5 values, but first is going to give us just the first value. So we get an output of 0. Taking a look at the second example, we're specifying a function as a parameter to the first operator now. So what we're going to get is the first value from our source that causes that function to evaluate to true. So the first even number is 10 - 1, 3, 5, 7, and 9 are ignored and 10 gets emitted as our first value. Taking a look at example 3, in this case, we're using the same function, but there are no even values in our source. So what we get instead is an error that there are no elements in the sequence. And that would happen if you called first on an empty observable as well. There's no first value. Taking a look at this running over in node, you can see the output exactly what we saw in the comments, first time we get 0 and then complete, second time we get 10 and then complete, and then the last time we get no elements in sequence.

Observable Transformation
You could pretty easily say that every operator in RxJS belongs in this category because at a basic level, modifying observables is what all operators do. They take in one observable, perform some transformation, and emit a new observable. While that's true, most of the others can be categorized elsewhere, which is why there's only four operators in this category. The first two are pretty easy to guess what they do, but the last two aren't quite as straightforward. We're going to take a look at them all though. With a simple repeat, as you likely guessed, repeat reemits the values from the source observable a specified number of times. The only thing a little confusing about this operator is that the parameter you specify isn't the number of repeats you want, it's the total number of times you want the values passed to the subscribers. So in our marble diagram here, we're using a repeat value of 3, meaning we get a and b values a total of 3 times. Taking a look at repeat, we start with our source observable, just an of 1, 2, 3, we pipe that through repeat and say we're going to have 2 values. Just remember that what you're specifying here is the total number of times that you're going to get the values, not the number of times that it repeats the values. The output, if we run this in node, is as we'd expect, the values 1, 2, 3, a total of 2 times.

Utilities
There are five operators that don't really fit in anywhere else, or in some cases it's because they could easily have gone in multiple places, so I dropped them into a catch all utilities module. It's not that they're not useful, it's just they're far more utilitarian. Here they are. Two of them, count and isEmpty, are pretty easy to tell what they do by their names. The rest, not so much. One of them, tap, we've seen multiple times in other modules because it's just so useful, especially from a teaching point of view. Anyway, we'll be taking a look at all five of these now. The first utility operator we cover is count. Count simply waits for a source observable to complete and then it just emits the total number of values that came from source. None of the values actually emitted from source get passed along to the subscribers, they just receive that total count. We actually have two different examples for count. In the first, we just do a count of each value that gets emitted from our source and then we log out that count. In the second example, we pass in a predicate function and we count the number of values that satisfy that predicate. So if I go ahead and run this, for the first time we get the total number of values that came out of our source, which is 7, and then for the second one we get the total number of values that match our predicate, which is x is less than 0, so we get a value of 3 because only 3 values match that function that we specified.