The future ECMA script standard has now started being implemented in browsers. Chrome is the first candidate in this race. Chrome 36 defaultly has the support of Object.observe() in it; whereas Chrome 33 started experimenting it for the first time (to enable Object.observe in Chrome 33 you need to enable 'Experimental JavaScript' in chrome://flags/)

What is Object.observe()?

In laymen's words JavaScript's Object.observe() is a function, which is used to track a JavaScript object (or array) for any change (addition, deletion or updation of any property in an object or array). Object.observe() assynchronously observes the JavaScript objects without using any framework or library. Using this you can achive similar data-binding features provided by the well known frameworks like Ember, Angular and Backbone. Though lots of JavaScript developers think Object.observe() will replace the JavaScript frameworks in the market, but Rafael Weinstein, a software engineer at Google, who submitted the proposal of Object.observe() says, it is not true. Rather this low level premitive api can be used to increse the performace and robustness of the frameworks, he added.

Features and drawbacks:

Features & Advantages:

1. Observes changes (add, delete, update) of properties of an object or an array.
2. Customizing observations: If you want to trigger the observer only in case of add, delete etc.
3. Observes the raw JavaScript object; so no overhead of dirty checking or using getters and setters.
4. Can be easily used for two way data binding.
5. Using Object.unobserve() you can easily remove your observer without making any garbage.
6. Frameworks will be more performent by implementing it. (polymer or observe.js already started using Object.observe()).

Drawbacks:

1. This is a recent implementation, so will not work in older browsers.
2. It can not observe non-objects.

How it can be a revolution?

Till date the frameworks used to make their own algorithm for data binding. The algos are never efficient for all kind of situations. Let's see how the renouned frameworks' algos works.

Angular's dirty checking

To detect change in object or properties AngularJS uses an algorithm called dirty checking, where it scans each an every object in the scope and compares with their previous values (which was preserved) to detect if there is a change or not. This approach obviously hampers performance in case of large data set. Eg: http://jsbin.com/AGIJUmOj/1/ In the example, first click on "Render" button and once the elements are rendered in the page, type something in the textbox. (type faster). You will find the updation is not realtime. Cause Angular's dirty checking algorithm is taking time to scan all the objects.

Ember's watcher concept

EmberJS binds a watcher with each object. The watcher raises an event whenever its object has a change. Then the listeners listen that event and works accordingly. This observing technique is better than dirty checking in terms of robustness but attaching a watcher to each object makes them really heavy. Another overhead is you must use getters and setters to get or set values, so that those watchers can detect the change. This approach detects the change comparatively in a lesser time, but attatching a watcher is a heavy process, thus the rendering gets slower. Eg: http://jsbin.com/IYAdIVEP/2/

How Object.observe() works

Object.observe() is (will be) an inbuilt function of JavaScript. Ofcourse the JavaScript interpreter knows when an object is changed or going to be changed; cause it itself does this. So in this case the object itself becomes an event emitter and the listeners can listen the changing events and work accordingly. Because of that Object.observe() doesn't have overheads like extar watcher, neither it executes less performent algorithm like dirty checking. So it is much more faster. A recent test by Angular team proves it; where they implemented binding in a 100 X 20 table (2000 cells) and found that Angular's dirty checking takes nearly 40ms to perform this operation whereas using Object.observe() the execution time becomes 1ms to 2ms. Almost 20 to 40 times faster.

Data binding with Object.observe()

Object.observe() makes your data binding much more simple. Today I'm making a demo to do the same using handlebars as my templating engine. You can use any other templating engine to make similar things. Note: The following example will not work, if not using chrome 36. Object.observe with handlebars - A VoidCanvas.com example Here using Object.observe() I am watching the changes in my model. Whenever someone (add button) adds some values in my model or someone else (delete button) removes an item from the model; my Object.observe() fires and recompiles the template. Similar thing can be done for updation also.

Conclusion:

Object.observe() is a very low level API and hence it will be inconvinient to say that it will remove the need of JavaScript frameworks in the current market. Rather it can give a huge performance boost to the frameworks and help them to be more performent. Angular team is already planning to use Object.observe() to detect changes. Hope soon all frameworks will adapt it and the JavaScript apps will reach new heights.