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

How I solved design problems by using various design patterns in my Laravel Project

Hey guys, Lately I have been working on a Virtual marketplace application using Laravel and PostgreSQL. So, when I was asked to build this huge application, the biggest challenge I faced was the design. Having a fair bit of prior experience in Laravel and upon following the current community trend, I decided to go with Laravel. And I hoped and expected that this, somewhat opinionated framework, would take care of my design to a large extent. When I actually started designing it, I realized that for a small/medium application Laravel already has things in place, you, as a developer just need to follow the guidelines set in place by the framework and use the features its providing out-of-box. However, for a larger application, with lot of interdependent modules and complex business flows, you need to make your own design decisions as well along with the existing features. This gave me an opportunity to take a look into the various existing design patterns to solve my design probl