{"id":101,"date":"2010-09-27T14:43:47","date_gmt":"2010-09-27T14:43:47","guid":{"rendered":"http:\/\/odhyan.com\/blog\/?p=101"},"modified":"2011-05-23T19:41:36","modified_gmt":"2011-05-23T14:11:36","slug":"caching-in-javascript-yui-cache","status":"publish","type":"post","link":"https:\/\/odhyan.com\/blog\/2010\/09\/caching-in-javascript-yui-cache\/","title":{"rendered":"Caching in Javascript (YUI Cache)"},"content":{"rendered":"

Today I read about YUI 3 Caching Utility<\/a>. It allows to cache frequently used data in javascript memory (Basic caching) or HTML5 localStorage object (Offline caching). Although we can implement our own caching mechanism in javascript, the YUI caching is general purpose and also provides a set of events. Moreover it can be easily integrated with YUI Datasource which can be very beneficial.<\/p>\n

I’ll show you how useful YUI caching utility can be using a very standard example, Factorial. Here I’ll only cover basic caching.<\/p>\n

Let’s write a factorial program in javascript without any caching\/memoization:<\/p>\n

\r\nYUI().use('node', function() {\r\n    \/\/ method to calculate factorial\r\n    var factorial = function(n) {\r\n        if(n === 0 || n === 1) {\r\n            return 1;\r\n        } else {\r\n            return n * factorial(n-1);\r\n        }\r\n    }\r\n    \/\/ calulate the factorials and display the values on browser\r\n    var MAX = 100,\r\n        ret = \"\",\r\n        el,\r\n        i;\r\n    for(i = 1; i < MAX; i++) {\r\n        ret += i + \"! = \" + factorial(i) + \"<\/br>\";\r\n    }\r\n    el = document.getElementById(\"fact\"); \/\/ create this div in HTML code\r\n    el.innerHTML = ret;\r\n});\r\n<\/pre>\n
Try increasing the value of MAX and you’ll see that your browser may get very slow\/crash. My firefox keeps on running the script and then shows a dialog box to stop the script. I assume all must be familiar with factorial and should be able to understand why this program is highly inefficient.<\/p>\n
Now lets write another factorial program using our own caching mechanism:<\/p>\n
\r\nYUI().use('node', function() {\r\n    \/\/ create a cache class\r\n    var MyCache = function() {\r\n        this.memo = [];\r\n    };\r\n    MyCache.prototype.add = function(key, val) {\r\n        this.memo[key] = val;\r\n    };\r\n    MyCache.prototype.retrieve = function(key) {\r\n        return this.memo[key];\r\n    };\r\n    \/\/ a new cache object\r\n    var cache = new MyCache();\r\n    \/\/ method to calculate factorial\r\n    var factorial = function(n) {\r\n        var ret;\r\n        if(n === 0 || n === 1) {\r\n            return 1;\r\n        } \r\n        ret = cache.retrieve(n);\r\n        if(ret !== undefined) {\r\n            return ret;\r\n        } else {\r\n            ret = n * factorial(n-1);\r\n            cache.add(n, ret);\r\n            return ret;\r\n        }\r\n    };\r\n    \/\/ calulate the factorials and display the values on browser\r\n    var MAX = 100,\r\n        ret = \"\",\r\n        el,\r\n        i;\r\n    for(i = 1; i < MAX; i++) {\r\n        ret += i + \"! = \" + factorial(i) + \"<\/br>\";\r\n    }\r\n    el = document.getElementById(\"fact\"); \/\/ create this div in HTML code\r\n    el.innerHTML = ret;\r\n});\r\n<\/pre>\n
The above code runs smoothly even if we increase the value of MAX(even 5000 should be fine although 5000! doesn’t make sense). That’s because we cache the value of every factorial we calculate and then reuse it for the next calculation.<\/p>\n
Now lets write the same program using YUI caching utility:<\/p>\n
\r\nYUI().use('cache', function(Y) {\r\n    \/\/ create a yui cache object\r\n    var cache = new Y.Cache({\r\n        max:100\r\n    });\r\n    \/\/ method to calculate factorial\r\n    var factorial = function(n) {\r\n        var ret;\r\n        if(n === 0 || n === 1) {\r\n            return 1;\r\n        }\r\n        ret = cache.retrieve(n);\r\n        if(ret !== null) {\r\n            return ret.response;\r\n        } else {\r\n            ret = n * factorial(n-1);\r\n            cache.add(n, ret);\r\n            return ret;\r\n        }\r\n    }\r\n    \/\/ calulate the factorials and display the values on browser\r\n    var MAX = 100,\r\n        ret = \"\",\r\n        el,\r\n        i;\r\n    for(i = 1; i < MAX; i++) {\r\n        ret += i + \"! = \" + factorial(i) + \"<\/br>\";\r\n    }\r\n    el = document.getElementById(\"fact\"); \/\/ create this div in HTML code\r\n    el.innerHTML = ret;\r\n});\r\n<\/pre>\n
This also runs smoothly for large values of MAX.<\/p>\n
For this particular example, implementation 2 (using our own caching) will be slightly more efficient than the YUI version due to the simplicity, but in more complex examples, YUI caching utility can be quite useful.<\/p>\n
You can read more about the YUI Cache here<\/a>.<\/p>\n
Related links:<\/p>\n