Introduction:
The most awaited recently launched chrome 36 browser has a unique feature called Object.Observe().If it is questioned like what is so unique about Object.Observe() then the answer would be given appropriately by a JavaScript developer.While developing websites or apps generally the code and the display is generally separated that is their structures are separated and when they are combined together and made to execute the display on the browser would not be as it is coded.With the help of JavaScript the user would get a WYSIWG (What you see is what you get) display based on exactly what the app is doing.Although Object.Observe() is a low-level API it solves several problems.
What is object.observe() all about?
Object.observe() is nothing but a low-level primitive and an enabling technology that makes some JavaScript libraries and frameworks work faster and robust.It simplifies the problem by acting as a pipeline between the app’s datastructure and display.
One can simply state that Object.Observe() is simply a function that can simply be built into JavaScript though developers will not work on it directly but frameworks like backbone,Angular and Ember will add new libraries that will rely on Object.observe that will make the code and display in a proper sync.
Object.Observe() mainly follows a concept called as databinding which makes sure that the programs underlying code and the display are in a sync.
What is databinding all about?
As we know that while devolping an application a developer makes use of a MVC architecture.If a ser wants to declare a relationship between the data and the document object model and if a user wants to keep the document object model up to date a databinding is used.Databinding is mainly useful when we have a complex user-interface wherein we need to establish relationships between multiple elements in the views and the underlying data.
Example:
Let’s create a sample object.
Whenever changes are made to the object a call back is issued.
Let’s create a sample object.
var mysample = {
label: 'hello',
completed: false
};
function observing(changes){
changes.forEach(function(change, i){
console.log('what property has changed? ' + change.name);
console.log('how did it the property change? ' + change.type);
console.log('whats the current value of the object? ' + change.object[change.name]);
console.log(change); // all changes
});
}
When ever the call back function is used there is a change in the object multiple times so the changed values and the given values need not be the same thing.
We can then observe these changes using O.o(), passing in the object as our first argument and the callback as our second:
Object.observe(mysample, observing);
Some changes to the model can be as follows
mysample.label = 'I love databinding’;
We can change another property like this
mysample.completeBy = '30/09/2014';
After some time if a user decides to delete the property completed from the object this can be done as follows-
delete mysample.completed;
Now it is easy for a user to identify how to delete an object and how to add a new object.
Object.unobserve();
Object.unobserve(mysample,observing);
Conclusion:
Want to know more on what a Object.Observe() does?Have you ever noticed notifications on your phone and have you ever felt annoying ?Yes but some times these notifications tend to be useful and these can be implemented using Object.Observe().So go and check out how Object.Observe() makes all this.Since only chrome36 only supports Object.Observe() we should wait and see that all the other browsers all support this Object.Observe() to improve the performance in the browser display.Hopefully we will find a better and exciting observation ahead with Object.Observe().
