What really is Observable?

According to the definition, Observable’s are defined as lazy Push collections of multiple values. Don’t confuse, Just bear with me, all your doubts will be gone.

Before Diving into understanding the Observable’s, lets understand two strategies or say protocols PUSH & PULL used in the programming languages.

Now when you wrote some code, so may be some code is producing some data & other code is just going to consume it. So in simple terms we may have a Data-Producer, which produce the data and Data-Consumer who is just going to consume it.

So let’s take an example to understand Producer and Consumer.

Let suppose we have a function sum & some code like below.

// producer
function foo() {
 return 1;
}
// consumer
const val = foo();
console.log(val);

Here, you can simply say that function foo is producing data, So you can consider it as a Producer. And the below code is calling foo to consume the data when it required, So you can consider it as a Consumer.

Now we are comfortable what may be a Data Producer OR Data Consumer. Let’s discuss the PUSH & PULL system.

PULL System:

In PULL system, Producer produce data when requested & consumer decides when it should be requested.
If you see the above example, you can observe, that foo method is producing the data only when called. So in the above case,Consumer is the main aspect who will decide when to request data.

PUSH strategy:

Producer produces data on the basis of its availability & Consumer can react only to receive the data.

Let’s take an example. Promise is the simplest type of Push system in JavaScript. Taking the above example but with Promise & let’s rewriting it again -

// Producer
function sum() {
  return new Promise(resolve => {
  setTimeOut(()=>{
   return resolve(1); 
  })
});
// Consumer
const sum = sum(3 + 5).then((data)=>{
 console.log(data);
});

So as you can see, Now the consumer can react to the the producer only, but don’t have authority to request the data from the Producer. Here is the Producer is the active main aspect which decide when to send the data on the availability of the data. So once the data is available, it can be received via Callback to the producer. Or it can also be possible that data never available to the Producer & as a result it didn’t send. Because now only Producer define when to send the data.

Now may be you got an idea about PULL & PUSH systems as well. So let’s continue with Observable’s.

You can consider Observable as a advance Push system, it means it is Observable’s who decide when to send/produce the data to the consumer once consumer reacts/subscribes to it.

But unlike Promise it can produce multiple values or you can say Observable is a producer of multiple values. And that a point of sale for Observable’s. It can produce multiple values synchronously as well asynchronously.

But for most of the scenarios, we use Observable’s for asynchronous work only.

Get techyaura’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

We will understand this thing with the help of an example.

As we already know that Observable is not supported natively by JavaScript, currently it is provided by the RxJs library. But there is an ongoing proposal for the native support for the Observable’s. And may be we can find Observable’s as a native part of Javascript in future.

So let’s use Observable from RxJs library.

A typical synchronous observable is like as below -

import { Observable } from ‘rxjs’;
const observable = new Observable(subscriber => {
 subscriber.next(1); // next is used to produce the data;
 subscriber.next(2);
 subscriber.next(3);
});

If some code have to utilize the value produce/managed by our Producer (Observable), then that code or simply the consumer have to subscribe the observable. Ex:-

observable.subscribe({
 next(x) { console.log(‘got value ‘ + x); },
 error(err) { console.error(‘something wrong occurred: ‘ + err); },
 complete() { console.log(‘done’); }
})

OR we can write the above code as below as well

observable.subscribe(
 data=>{
  console.log(‘got value ‘ + x);
 },
 err=>{
  console.error(‘something wrong occurred: ‘ + err);
 },
 complete=> {
  complete() { console.log(‘done’); }
 }
);

And If you run this program, you will get output as

got value 1
got value 2
got value 3
done

When you subscribe to an observable, the observer/subscriber takes 3 arguments, one is for data which sent via by calling next method from the producer. Then second is error, if any error happens from the producer side & third is complete, when your producer finished to send the data to the consumer.

Now takes an Asynchronous Example -

const observable = new Observable(subscriber => {
   setTimeOut(()=>{subscriber.next(1);}, 1000);
   setTimeOut(()=>{subscriber.next(2);}, 3000);
   setTimeOut(()=>{subscriber.complete()}, 2000); // after 3 seconds complete 
});
observable.subscribe(
  data=>{
    console.log('got value ' + x);
  },
  err=>{
    console.error('something wrong occurred: ' + err);
  },
  complete=> {
    complete() { console.log('done'); }
  }
);

Output

1
done

The reason is that once your observable completes or throw an error then the consumer will not receive any further data.

So now, I thinks you got some basic concept about Observable’s. But still if are unable to grab the concept, let me relate the observable to a very basic real scenario. And you can relate it to any scenario around you.

- Everybody knows about Netflix. On Netflix there are third party content providers and as well Netflix Original content provider. So these are are the Data Producer.

Now, think Netflix OTT as an Observable which decide when to stream that data from these content providers. You as a subscriber have paid amount to the Netflix for monthly subscription service for viewing the content.

Now here you & your family members will be act as the observers only who don’t know when the new content is produced or not or simply when the new movie or some season will come. Here you can just observe only by reacting/observing through Netflix app/web. So App or web is just a observer object.

Now, this app/web can only do things in three manners
- Streaming content — until unless you are a Netflix Subscriber & Netflix server are working properly. So you are receiving the content. Like data from Observer emit by next method.

- Eror/ No Content — let suppose, Netflix server down while streaming. So in that case, you are not able to receive the content. So no more data will recieve.

- Complete — Let’s assume that your paid subscription expired or you have cancelled the subscription. So it means, your Netflix Subscription no more exist (Observable) or have been completed. And you are not able to access streaming until unless, you again subscribe it.

May be you got some understanding over observable’s.

Thanks

Happy Observable’s