👻 Who’s Afraid of Observables?

In this article, we’ll create a simple implementation of the observable pattern and work to understand the core concepts behind it.

The Observer pattern:

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and automatically notifies them of any state changes (usually by calling one of their methods). (Wikipedia)

The observable object represents a push-based collection. Observables are just what you’d imagine — things you wish to observe and take action on.

The observable object class sends notifications, while the observer object class receives them.

Let’s start by defining the observable class.

The Observable class considers one parameter — a subscription function. The subscription function is named as such because this is the function that invokes our observable when someone calls subscribe().

Sometimes people refer to the subscription function as the “producer” function, because this function also produces the values for the observer.

Let’s create a new instance of our Observable.

A subscription function receives an observer. An observer is simply a plain object with three optional methods: next(), error(), and complete().

• next() : Call this method when you have a new value.
• error(): Call this method on error.
• complete(): Call this method on complete.

As you can imagine, in this phase we still don’t invoke anything. Observables are lazy — nothing executes until we call subscribe(). (in case of cold observables)

Let’s create the subscribe() method.

The subscribe() method takes an observer and calls the subscription function with it. Note that each call to subscribe() invokes the subscription function again.

Let’s continue by creating an interval observable.

When we subscribe to the interval observable we are invoking the subscription function, that executes the native JS setInterval() function and notifies the observer each time it’s invoked.

But that’s not enough. We should also be able to “stop” the subscription function. Each observable should return the unsubscribe() method responsible for cleaning.

The unsubscribe() method of our interval stops the interval by calling clearInterval() with the provided ID.

Operators

Operators are observables that operate on a source observable. Let’s create the map() operator.

Now, let’s see how we can use this operator with our interval observable.

The map() operator returns a new Observable that subscribes to the source — in our case, the interval observable.

When the source emits a new value, the value first gets to the map() subscription function. Then, after applying the projection function on the value, the map() observable emits the value to the final subscription.

This is called the Observable chain.

Let’s continue with the filter operator.

The filter operator filters the source values by only allowing items through that pass a test that you specify in the form of a predicate function.

Let’s finish with the mergeMap operator. The mergeMap operator is handy for cases when you have an observable that returns an observable. Let’s create the of observable so we can put it into practice.

The of observable converts arguments to an observable sequence. Let’s use it with our interval.

Each time the source emits a value, we need to subscribe to the inner observable (the of observable) and emits its values back to the pipeline.

That’s why it’s called mergeMap; we are performing both a map operation and a merge operation at once.

These are the essential components of observables and operators. After learning these basics, you can continue on to learn about more advanced parts:

Hot vs Cold Observables

Understanding mergeMap and switchMap in RxJS

Understanding Subjects in RxJS

RxJS Subjects for human beings

RxJS: Understanding the publish and share Operators

👂🏻 Last but Not Least, Have you Heard of Akita?

Akita is a state management pattern that we’ve developed here in Datorama. It’s been successfully used in a big data production environment for over seven months, and we’re continually adding features to it.

Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.

I highly recommend checking it out.

🚀 Introducing Akita: A New State Management Pattern for Angular Applications

Follow me on Medium or Twitter to read more about Angular, Akita and JS!