Operators are one of the greatest strengths of RxJS, but what are they?

Operators are functions that can be applied to streams in order to transform them in various ways. Most operators are also fluent: you can chain them because applying an operation to a stream usually returns a new stream. Thanks to this feature, you can declare a set of operations to be performed whenever a value arrives, therefore defining complex stream processing rules in a declarative manner.

The composability of operators represents a key advantage of RxJS, but it should not be abused. You need to be careful because it is easy to make your code complex to read and understand if you go overboard.

RxJS provides dozens of operators out of the box (https://rxjs-dev.firebaseapp.com/api?type=function). Here are some examples of functional ones: map, flatMap, concat, and reduce. If you are already familiar with functional programming, then you'll surely recognize these terms.

There are many operators that you'll combine depending on your requirements. Some of them are not straightforward to use, but there is a nice concept that can help you understand how they work: marble diagrams.

Marble diagrams help visualize how operators work. They represent input streams and output streams after operators are applied. On these diagrams, time flows from left to right.

Here is an example for the map operator:

In this example, you can see that the map operator applies a provided function to the values that are emitted by Observable; in this case, it is multiplied by 10. The map function is applied to each element of the input stream as they are emitted. After the operator has been applied to a value, the mapped value is emitted on the output stream.

Marble diagrams offer a great mental model for what happens with streams and values. If you apply multiple operations to a stream, then you have to imagine that values coming into the original stream fall down into the operator, get modified, and are then pushed into a new stream down below.

We won't explore RxJS in any more detail, but rest assured that this is a library that you should definitely understand, if not master. The Observable API is a candidate for being integrated into future versions of ECMAScript, as a companion to the existing Promise API that we learned about previously.

Let's now take a look at Angular forms and examine how RP can be leveraged to make them really powerful.