{"id":38628,"date":"2016-07-29T20:10:21","date_gmt":"2016-07-29T14:40:21","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=38628"},"modified":"2016-08-11T19:38:54","modified_gmt":"2016-08-11T14:08:54","slug":"future-of-data-binding","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/future-of-data-binding\/","title":{"rendered":"Future of Data Binding"},"content":{"rendered":"

A new revolution has come. There are few new APIs introduced in ECMAScript 5<\/strong>, but the most interesting functionality is added to Object property code. This new code gives you the ability to redefine<\/strong> the capabilities<\/strong> of an Object property. Capabilities like preventing Object manipulation, enumeration, deletion and addition<\/strong> of new property and even defining their getters and setters<\/strong>.<\/p>\n

Three plus years back Rafael Weinstein, Erik Arvidsson and Adam Klein started<\/strong> implementing or we can say started developing the true way of data binding system of MDV (“model-driven views”)<\/strong>. They got an agreement from the V8<\/strong> team and started implementing Object.observe (“O.o”)<\/strong>. Behind them Polymer team started building their framework system on top of O.o. As of now the world has changed in a variety of ways as other frameworks like Angular and Ember<\/strong> started their own. It will be interesting to watch how far they will manage to build their frameworks without them.<\/p>\n

As O.o<\/strong> gets postponed from ECMAScript 5 and to be a part of ECMAScript 7<\/strong> because not all browsers have implemented this functionality yet. A Synonym to that is Object.watch<\/strong>, which was a part of Firefox for testing purposes. Due to this Polymer rewrote their framework to support all browsers and released their first production version 1.0 without O.o.<\/p>\n

Then comes Object.defineProperty<\/strong> which can create a watch over an Object property.
\nExample :-<\/p>\n

[code language=”html”]
\n<script>
\nfunction _observe(properties, callback) {
\n var _obj = {};
\n Object.keys(properties).forEach(function(key) {
\n Object.defineProperty(_obj, key, {
\n get: function() {
\n console.log(‘get!’);
\n return properties[key];
\n },
\n set: function(value) {
\n callback(key, properties[key], value);
\n properties[key] = value;
\n }
\n });
\n });
\n return _obj;
\n}
\nvar obj = { "firstname": "himanshu", "lastName": "adhikari" };
\nvar scope = _observe(obj, function(key, oldValue, newValue) {
\n console.log(key, oldValue, newValue)
\n});
\n<\/script>
\n[\/code]<\/p>\n

Now change scope.firstName and observe console pane<\/p>\n

scope.firstName = \u201cRaman\u201d;<\/p>\n

Note:<\/strong> Please don\u2019t try to replace _obj<\/strong> with properties<\/strong> in Object.defineProperty method as it will make it a recursive call to get function.<\/p>\n

Getter and Setters:<\/strong> When Getter and Setters were not present in javascript we need to do a dirty check over an object as to identify which property gets affected after an event finishes it execution or an async call gets completed. This dirty checking or we can say the extra time we are taking in finding whether it’s an \u201cupdate\u201d<\/strong>, an \u201caddition\u201d<\/strong> or a \u201cdeletion\u201d<\/strong> from an object can be overcome by setting Getters and Setters over object properties.<\/p>\n

Enumeration:<\/strong> Now try to run below method, and you\u2019ll find that nothing will appear on browser’s console.<\/p>\n

[code language=”html”]
\nObject.keys(scope).forEach(function(key){
\n\tconsole.log(key)
\n});
\n[\/code]<\/p>\n

This is because by default enumeration<\/strong> is false<\/strong> and the object property will not show up during property enumeration (for…in loop or Object.keys method)<\/strong>. To set it an example is given below:-<\/p>\n

[code language=”html”]<\/p>\n

function _observe(properties, callback) {
\n var _obj = {};
\n Object.keys(properties).forEach(function(key) {
\n Object.defineProperty(_obj, key, {
\n get: function() {
\n console.log(‘get!’);
\n return properties[key];
\n },
\n set: function(value) {
\n callback(key, properties[key], value);
\n properties[key] = value;
\n },
\n enumerable: true,
\n });
\n });
\n return _obj;
\n}
\n[\/code]<\/p>\n

Now run for loop over scope variable and this time logs will appear on browser’s console.<\/p>\n

Configurable:<\/strong> Now try to run below code, and you\u2019ll find that deleting a object property was never so tough before.<\/p>\n

[code language=”html”]
\ndelete scope.firstName;
\n[\/code]<\/p>\n

This is because by default configurable<\/strong> is set to false<\/strong> if not passed to Object.defineProperty. If you want to enable deletion<\/strong> on an object property then turn it to true<\/strong>.<\/p>\n

Writable:<\/strong> If set to false<\/strong> then you cannot change<\/strong> the value of an object property, defaults to false. Writable cannot be used when getters and setters<\/strong> are present to Object.defineProperty.<\/p>\n

[code language=”html”]
\nvar o = {}; \/\/ Creates a new object<\/p>\n

\/\/ Example of an object property added with defineProperty with a data property descriptor
\nObject.defineProperty(o, ‘a’, {
\n value: 37,
\n writable: true,
\n enumerable: true,
\n configurable: true
\n});
\n[\/code]<\/p>\n

Object.defineProperties:<\/strong>
\nThere is one more method which can create a watch over an Object. This method defines new<\/strong> or modifies<\/strong> existing properties directly on an object, returning the object.<\/p>\n

Syntax:<\/strong><\/p>\n

[code language=”html”]
\nObject.defineProperties(obj, properties)
\n[\/code]<\/p>\n

Example:<\/strong><\/p>\n

[code language=”html”]
\nvar obj = {};
\nObject.defineProperties(obj, {
\n "firstName": {
\n value: "john",
\n writable: true
\n },
\n "lastName": {
\n value: "carter",
\n writable: false
\n }
\n});
\n[\/code]<\/p>\n

Object.defineProperty<\/strong> is used when you want to define a single property<\/strong> directly on an object but if you want to define multiple<\/strong> properties on an object with different configurations then you can use Object.defineProperties<\/strong>.<\/p>\n

Till now we\u2019ve learnt how to define and modify property\/properties of an Object. Now let’s learn how we can react on DOM changes<\/strong>.<\/p>\n

Mutation Observers:<\/strong> provides a way to react to changes in a DOM<\/strong>, changes like addition<\/strong> and removal<\/strong> of HTML node on DOM and even more detects changes in HTML node attributes.<\/p>\n

Now lets create an example to observe the changes whenever a new attribute is added or being changed. Open your developer tools and go to console pane, now paste the below code.<\/p>\n

[code language=”html”]
\n\/\/ select the target node
\nvar target = document.querySelector(‘body’);<\/p>\n

\/\/ create an observer instance
\nvar observer = new MutationObserver(function(mutations) {
\n mutations.forEach(function(mutation) {
\n console.log(mutation);
\n });
\n});<\/p>\n

\/\/ configuration of the observer:
\n\/\/ set attributeOldValue to true if want to get old value of an attribute:
\nvar config = { attributes: true, attributeOldValue: true };<\/p>\n

\/\/ pass in the target node, as well as the observer options
\nobserver.observe(target, config);
\n[\/code]<\/p>\n

Now go to element pane<\/strong> in developer tools<\/strong> and add<\/strong> any new attribute with value<\/strong> to body tag. Now press Esc<\/strong> and observe logs in console pane<\/strong>. You can see Mutation Records, as what is being changed on the target node. It will only tell us what was the old value of an attribute, you can get the new value from target node by<\/p>\n

[code language=”html”]
\ntarget.getAttribute(MutationRecord.attributeName);<\/p>\n

\/\/ later, you can stop observing
\nobserver.disconnect();
\n[\/code]<\/p>\n

Now let’s observe the addition\/deletion<\/strong> of nodes in DOM.<\/p>\n

[code language=”html”]
\n<ol contenteditable oninput="">
\n <li>Press enter<\/li>
\n<\/ol><\/p>\n

<script>
\nvar MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;<\/p>\n

var list = document.querySelector(‘ol’);<\/p>\n

var observer = new MutationObserver(function(mutations) {
\n mutations.forEach(function(mutation) {
\n if (mutation.type === ‘childList’) {
\n var list_values = [].slice.call(list.children)
\n .map(function(node) {
\n return node.innerHTML;
\n })
\n .filter(function(s) {
\n if (s === ‘<br \/>’) {
\n return false;
\n } else {
\n return true;
\n }
\n });
\n }
\n });
\n});<\/p>\n

observer.observe(list, {
\n attributes: true,
\n childList: true,
\n characterData: true
\n});
\n<\/script>
\n[\/code]<\/p>\n

Set childList<\/strong> to true<\/strong> if want to observe any addition\/deletion to a particular child nodes.<\/p>\n

Now my question is do we still need dirty checking frameworks<\/strong> if we have a way to observe and react<\/strong> whenever a change happens on DOM\/Objects<\/strong> rather than checking every time as what was changed and if the code is not well written then you\u2019ll find that in background something is still executing. As the project increases its size it becomes slow in browsers.<\/p>\n

Till now we’ve learnt how to Observe the changes of an Object and how we can react to DOM manipulation. As the time is changing, there are several changes made to the web to make it smater. Now its time to make yourself smater and use only that much code which is required for making a website. I think every website is different from each other and each website requires their own framework’s according to their requirements. I request you to try implementing something from what we’ve discussed today.<\/p>\n

Meet you guys soon with my next blog, till then HAPPY CODING!!!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

A new revolution has come. There are few new APIs introduced in ECMAScript 5, but the most interesting functionality is added to Object property code. This new code gives you the ability to redefine the capabilities of an Object property. Capabilities like preventing Object manipulation, enumeration, deletion and addition of new property and even defining […]<\/p>\n","protected":false},"author":911,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[1],"tags":[3846,55,3845,3844,3843],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/38628"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/911"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=38628"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/38628\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=38628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=38628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=38628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}