Magento 2 - Is there a difference on how observables work in common knockoutjs and in the magento 2 framework?

Question

What is the difference between observables in common knockoutjs and in Magento 2?

Can any one differentiate by giving some example

Answer 1

From Alan Storm:

"Observables are used in many places, there are many ways of understanding "obervables" but what you do need to understand, is that HTTP requests return an Observable that gets completed on response (or on failure), it can't actually know when your back end decides to "send" more data, because it's just not built that way, your back end only responds to requests.

Well in Magento 2, use of "obervables" is little tricky. Magento 2's javascript frame works make heavy use of abservables that goes beyond what a normal front end developer needs to know.

Observables are stand-alone setter/getter objects. From a Magento bootstrapped page, run the following code in your browser’s javascript console. You should also be able to do this outside of Magento in systems that use a global ko variable instead of Magento’s special RequireJS module.

//load the Knockout.js library -- normally you'd do this in a `define`
ko = requirejs('ko');

//create the observable object with a default value
var objectToHoldMyValue = ko.observable('default value');

//fetch that value by calling the observable as a function
console.log( 'Value: ' + objectToHoldMyValue() );
"default value"

//set a new value by calling the observable as a function with an argument
objectToHoldMyValue('new value')

//fetch that value by calling the observable as a function
console.log( 'Value: ' + objectToHoldMyValue() );
"new value"    

As you can see from the above code and comments, the first job of an observable object is to store a value, return a value, and change a stored value. The syntax may be a little weird if you’re not used to the “objects can be anonymous functions” nature of javascript, but this is nothing too crazy. Also — nothing too necessary either, until you consider subscribers.

//subscribe to a change
objectToHoldMyValue.subscribe(function(newValue){
console.log("The subscriber sees: " + newValue);
});

The above code sets up a callback that is, in other terms, an event listener (i.e. you’re subscribing to an event). The event you’re subscribing to? A change in value of the observable. If you run the value setting code again.

objectToHoldMyValue('a second new value')
The subscriber sees: a second new value

you’ll see Knockout calls your subscriber method.

Important: Subscribers are only called when a value changes. If you pass in the observable’s current value, Knockout will not call subscriber callbacks

objectToHoldMyValue('a third new value')
The subscriber sees: a third new value

objectToHoldMyValue('a third new value')
[no output, because the subscriber was not called]

While this example is a little silly, in a real program observables let you take actions whenever the value of a variable changes. That’s an incredibly powerful feature.

For Magento 2 Developers

As a Knockout.js developer, you can live a life that’s mostly ignorant of how observables are implemented. Magento 2 developers don’t have this luxury. The UI Component systems make heavy use of observable properties, and also setup their own subscribers. The good news is: When you see something like

//...
someProp: ko.observable('default value')
//...

you don’t need to panic. The program is just using someProp to store a value. The bad news is — that observable may have a number of subscribers. These subscribers may come from a Knockout.js template’s data-bind attributes. They may come from Magento core code setting up their own subscribers. You can view the number of callbacks an observer has via the _subscriptions property

console.log(objectToHoldMyValue._subscriptions);
Object
change: Array[3]
    0: ko.subscription
    1: ko.subscription
    2: ko.subscription

Or peek at a particular callback like this

console.log(
objectToHoldMyValue._subscriptions.change[1].callback
);

However — you’re at the mercy of your debugger w/r/t to how this information is displayed, and there’s no easy way to tell where a particular subscriber comes from. Also, we’re deep into Knockout.js internals at this point, and relying on this sort of code for anything other than debugging introduces enormous potential for instabilities."

Source: https://alanstorm.com/knockout-observables-for-javascript-programmers/