Skip to main content

UnderscoreJS, a must include library on your single page app, well, otherwise also

Another Javascript library.....Argh!!!!! Please!!!

I know guys, that you all have already come across scores of JavaScript libraries by now, but this one, my friends, is the one which you were missing while doing complex calculations and data processing.

UnderscoreJS might seem as yet another JavaScript framework, which you might not be interested in learning, when jQuery is almost catering to all your JS needs. However, you might be mistaken here, as frameworks like jQuery/mootools/ExtJs/Ember/Backbone/Angular......are meant to action on the front-end or simply, the DOM.

On the other hand, UnderscoreJS primarily focuses on easy handling of Objects and Arrays. Functions like filtering, array/object mapping, grouping, type checking etc, which you always longed for and which don't come along with the vanilla JavaScript, are available at your discretion with underscorejs.

If you come from PHP background(like me), you know that PHP provides out-of-the-box functions like array_map, array_keys, array_filter, foreach etc.
And while working with JavaScript, like me, you too always felt the need of such functions.

Don't worry then, UnderscoreJS is at your rescue. You just need to include the lightweight(the min.js file is only 5.7 KB) underscore.js in your page and you will love programming with Javascript more, and you will definitely love UnderscoreJS.

Please cut to the chase now, and show me some magic, would you?
Okay, here we go, check this out guys -

   //create some random data
   var obj = [{name: 'sandeep', month : 'sept', sales : 10},
             {name: 'sandeep', month : 'sept', sales : 5},
             {name: 'sandeep', month : 'oct', sales : 15},
             {name: 'sandeep', month : 'oct', sales : 20},
             {name: 'rajoria', month : 'sept', sales : 5},
             {name: 'rajoria', month : 'sept', sales : 25},
             {name: 'rajoria', month : 'oct', sales : 5},
             {name: 'rajoria', month : 'oct', sales : 30},
             {name: 'sandeep', month : 'sept', sales : 15}];

Lets say we want to group the data by month. Possibly an equivalent to the query
SELECT month, count(*) as size FROM tbl GROUP BY month ORDER BY size.
Then we only need to write these few lines -

    var new_obj = _.chain(obj)
        .groupBy("month")//this will create 2 objects with keys sept and oct and partition obj based on them
        .map(function (value, key) {
            return {
month: key, size: _.size(value)};
/process each value using the callback function like in PHP
        .sortBy('size')//sort the result by size

        .value();// return the value, required as we are using chain()

This will return the following -

    [{ month="oct", size=4}{ month="sept", size=5}]

However if we want a equivalent to something like this
SELECT month, SUM(sales) as size FROM tbl GROUP BY month ORDER BY size
then we need to do the following -

   var new_obj = _.chain(obj)
        .groupBy("month")//this will create 2 objects with keys sept and oct and partition obj based on them
        .map(function (value, key) {
              return {month: key, size: _.reduce(value, 

                     function (group_sum, val) {  
                         return +group_sum + val['sales'];
                     },0)//reduces the list into a single value "group_sum"};
         })//process each value using the callback function like in PHP
        .sortBy('size')//sorts the result by the key size
        .value();// return the value, required as we are using chain()

And see now what new_obj is -

    [{ month="sept", size=60}{ month="oct", size=70}]

See how elegantly it is done, and doesn't it make your life so much easier. You need to start using it today.
Do check out the documentation to find more cool helper functions.

And while we are on it, you must also check Lo-Dash, a drop in replacement of UnderscoreJS, with all the underscore functions and many more on top of it, with improved speed and performance. Simply replace the underscore.min.js with the lodash.min.js and you are good to go, all the UnderscoreJS functions will still work.
I personally use Lo-Dash in all my projects, considering the performance benefits.

Happy coding folks!!

P.S. - Don't forget to check my Visualization App here, where I have extensively used UnderscoreJS(actually Lo-Dash).


Popular posts from this blog

Multi Tenancy with Codeigniter

In this post I will show you how I converted my normal Codeigniter application into a multi-tenant system.(first step to a SaaS implementation) Note - This implementation is a separate DB multi-tenancy implementation. Lets say we have an up and running CI application name ci_app , with the directory structure like this ./application ./application/config ./application/ many other important directories ./asset ./asset/js ./asset/images ./asset/css ./system ./index.php which is accessed through browser like http://localhost/ci_app So to implement the multi-tenant arch we are most concerned about the following files, and we will be editing them ./index.php ./application/config/config.php ./application/config/database.php And also we need to create a few new ones Create a tenant folder in your www root directory, lets say tenant_1 Cut the ./index.php from ci_app and paste it in tenant_1 directory  Create a blank file config.php in tenant_1 directory Crea

Profiling and checking PHP error_reporting in a Codeigniter App, without editing the config!!

Hi all, You must have definitely used the Profiling in Codeigniter and error_reporting many a times in Development and Testing environment, but I am sure you must have missed it on a real Production environment. As there are scenarios, where you want to quickly debug the Production application and find out what PHP errors is the application throwing, check the page profile, that too without putting the time and effort in replicating the whole production environment on your local machine, or perhaps a testing server. This small piece of code(we could perhaps call it a hack), which I have used in almost all of my CI applications, will make your life very easy, without losing anything on the security of the system. Following points, essentially sum up what exactly it does - Check for the dev(or root or admin, whichever name you use for the su access), if it is logged in, as we don't want others to see all the Profile data and other errors. Check for a specific query str

D3.js, the most powerful visualization library I came across

Hello Friends!! This post is dedicated to D3.js , which I came across a few months back. Prior to that, I always preferred Google Charts which catered to most of my charting needs. However, since I switched to D3.js I could not find a good reason to move back to Google Chart. If we take a very crude analogy, D3.js would be analogous to an Ubuntu of the OS world, while Google Charts could easily be a Windows 7(just that both of them are free in this case); in the sense that the control and the power the user(in our case the developer) gets from D3.js while working with it, is unmatchable . While Google Charts is simply too cool and simple for a free charting tool, but D3.js is a library which lets you create any chart that you could think and conceptualize, with so much of ease, and it lets you link any kind of interaction/control that you would want to put on events, on any of the elements of the chart. D3.js, like RaphaelJS and PaperJS is a library which is developed to