If you have been working with angular 2 and you’ve been using the reactive approach a lot then you might be aware of the crazy world of Observables and its operators.

While working with observables what’s most astonishing is the overwhelming availability of observable operators. One should not start worrying about not being able to recall or use at a glance these operators, believe me, it takes time getting your head around Observables and these world of operators.

I think Observables can be explained very intuitively using the chart below.

Representation to show power of Observables

In short, observables can be thought of as an evolution from Objects to arrays to promises and finally observables.

Objects are good at returning a value.

Promises are good at returning a value asynchronously.

Arrays can return multiple values but again synchronously.

Welcome Observables, they return multiple values asynchronously.

Promises die once they return a value, whereas observables continue to live even though they may have returned values. They keep returning values, and its in our control to set a rule as to when they die.

Rule

Disclaimer: I call it a rule internally at Aviabird and its not a standard term. A rule is nothing but how should an observable behave over time, for example, I can say create an observable using range(0, 10) this returns an array from 0 up to 10 numbers or I can say create an observable which listens to a click event on a button or I can say create an observable which hits the Wikipedia API and fetches some results. All these are nothing but Rules.

Let’s see an observable in action IMO this is the most basic example of observables.

Let’s look at line 1. It creates an observable which is only a rule. It doesn’t do anything really. It just states that observable for a range from 0 up to 10 numbers be created. Remember this doesn’t do anything as of yet, you must subscribe to it if you have to get anything out of an observable.

RULE OF THUMB: To get anything out of an observable(which is reactive nature) one has to subscribe to it.

That’s what we do on line 3 and then the value emitted from the observable can be caught inside of the subscribe method first callback. 2nd and 3rd are reserved for errors and completed states, we’ll come back to it later.

In the above example when we subscribe to the observable it just spits all the values at once, pretty straightforward. Next, let’s look at a little complex scenario.

In this example, we create an observable but we have not added any rule to it like in the previous example of range.

We are relying on an onNext function which does exactly the same. It tells the subscriber from within that something has changed inside of me, please pay attention and use the first callback to handle the data that I am sending to you.

Since I wanted to delay that a bit so I added a timeout which just delays the emission from the observable.

Now you must be thinking where could this be used in real world scenario. Imagine you are a celebrity who has a twitter profile. You just break the internet when you post something on twitter. What if for each like or retweet you got a push notification in the browser, wouldn’t it make your life very difficult if for each push notification you get a pop sound. Damn so many ding dongs.

Possible Observable solution: Keep listening to the notification observable and use a very cool operator called buffer operator which can take a buffer of 5 mins(not used in this example) or refresh notifications button and then summarize all the notifications in one notification. For ex. You’ve got 1.5 million likes since you last checked.

You can see it in action here.

Whenever you click on check new notifications button it checks and counts what are the new number of notifications since the last time the button was clicked by you and emits those new notifications.

In this time/stream diagram, buffer operator functionality is visualized and how it works.

Buffer to the rescue here thank god my notification area won’t be spammed.

Now I think after this example the observable pattern is a bit clear, believe me I have not even scratched the surface of what observables are capable of and I’d be writing a lot of blog posts on how many ways we can use observables to make our lives easier while working with complex cases in our day to day life.