Introduction to Object.observe

Two-way data binding is now one of the crucial features of client-side applications. Without data binding, a developer has to deal with a lot of logic to manually bind data to the view, whenever there is a change in the model. JavaScript libraries like Knockout, AngularJS, and Ember have support for two-way binding but these libraries use different techniques to to detect changes.

Knockout and Ember use observables. Observables are functions wrapped around the properties of the model objects. These functions are invoked whenever there is a change of the value of the corresponding object or property. Although this approach works well, and detects and notifies all the changes, it takes away the freedom of working with plain JavaScript objects as now we have to deal with functions.

Angular uses dirty checking to detect changes. This approach doesn't pollute the model object. It registers watchers for every object added to the model. All of these watchers are executed whenever Angular’s digest cycle kicks in and if there are any changes to the data. Those changes are processed by the corresponding watchers. The model still remains a plain object, as no wrappers are created around it. But, this technique causes performance degradation as the number of watchers grows.

What is Object.observe?

Object.observe, a.k.a. O.o, is a feature to be added to JavaScript as part of ECMAScript 7 to support object change detection natively in the browser. Although ES7 is not completed yet, this feature is already supported in Blink-based browsers (Chrome and Opera).

BecauseObject.observe will be supported by the browsers natively and it works directly on the object without creating any wrappers around it, the API is both easy to use and a win for performance. If Object.observe is supported by a browser, you can implement two-way binding without the need of an external library. It doesn't mean that all of the existing two-way binding libraries will be of no use once O.o is implemented. We still need them to update UIs efficiently after detecting the changes using O.o. Besides, libraries would internally polyfill the logic of change detection if not all targeted browsers support O.o.

Observing Properties of an Object

Now that you have an idea of what O.o is good for, let’s see it in action.

The observe() method is an asynchronous static method defined on Object. It can be used to look for changes of an object and it accepts three parameters:

• an object to be observed


• a callback function to be called when a change is detected


• an optional array containing types of changes to be watched for

Let’s see an example of using the method. Consider the following snippet:

[js] var person = { name: 'Ravi', country: 'India', gender: 'Male' }; function observeCallback(changes){ console.log(changes); }; Object.observe(person, observeCallback); person.name = 'Rama'; // Updating value person.occupation = 'writer'; // Adding a new property delete person.gender; // Deleting a property [/js]

Continue reading %Introduction to Object.observe%

by Ravi Kiran via SitePoint