What is Object.observe()?
Features and drawbacks:
Features & Advantages:
- Observes changes (add, delete, update) of properties of an object or an array.
- Customizing observations: If you want to trigger the observer only in case of add, delete etc.
- Can be easily used for two way data binding.
- Using Object.unobserve() you can easily remove your observer without making any garbage.
- Frameworks will be more performent by implementing it. (polymer or observe.js already started using Object.observe()).
- This is a recent implementation, so will not work in older browsers.
- 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
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.
Still having issues?
If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.