September 2013 – Zubin's Web Log

Masonry & Isotope – Amazing Javascript Layout Libraries

What is Masonry?

Masonry is a cascading grid layout library written in Javascript. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. If you have seen Tumblr, you already know what I’m talking about. Masonry was written by David DeSandro, who is a web designer at Twitter.

What is Isotope?

This another javascript layout library by the same David DeSandro who wrote Masonry. Isotope adds sorting and filtering of UI elements. It uses Masonry layouts in addition to other layouts.

I found both of them to be so amazing, I whipped up a few demos to see for myself!

Demo: Masonry with jQuery

In this demo, masonry layout is used. Go ahead and resize the browser window to see the elements in the window automatically changing the layout to fit the screen. Usage of this appropriately will make the design fluid and gracefully fit on screens of varying sizes, as is common these days.

Demo: Isotope with jQuery

In this demo, isotope is used with masonry layout. You can see client side filtering in action here. Go ahead and click on the various categories displayed on top. Notice when you resize the window here, it behaves different from the masonry demo above. This demo uses a fixed column masonry layout, meaning, the number of columns will remain the same, but each element gets resized to fit the screen.

Reference:
Masonry: Home | Github
Isotope: Home | Github

Implementing Singleton Pattern in Javascript

In singleton pattern, one instance of a class will be instantiated and no more. The same object is returned to all the clients that request for a new object of a singleton class. In traditional object oriented languages, this is achieved by making the constructor private and exposing a static public property which in turn returns the same instance every time.

Let’s see how this is done in javascript:

var singletonModule = (function () {

    // private property to hold the instance
    var instance;

    // private function to instantiate the object
    var init = function () {

        var random = Math.random();

        // expose publicly from funtion init()
        return {
            getRandom: function () {
                return random;
            },
            anotherPublicMethod: function () {
                //another public method
            }
        };
    };

    return {
        getInstance: function () {
            // check if the instance already exists. create if it does not
            if (!instance) {
                instance = init();
            }

            return instance;
        }

    };

})();

// Usage:
var m1 = singletonModule.getInstance();
var m2 = singletonModule.getInstance();

console.log(m1.getRandom() == m2.getRandom());

var singletonModule = (function () {

// private property to hold the instance

var instance;

// private function to instantiate the object

var init = function () {

var random = Math.random();

// expose publicly from funtion init()

return {

getRandom: function () {

return random;

anotherPublicMethod: function () {

//another public method

}

};

return {

getInstance: function () {

// check if the instance already exists. create if it does not

if (!instance) {

instance = init();

}

return instance;

}

};

})();

// Usage:

var m1 = singletonModule.getInstance();

var m2 = singletonModule.getInstance();

console.log(m1.getRandom() == m2.getRandom());

The public method getInstance() exposes the object instance. A check is done to see if an instance was created earlier. If it was created before, that same instance is used; otherwise a new instance is created and returned.

The init() function exposes the public and private methods of the instance. Private methods and properties are protected from outside access. Public methods and properties are accessible from outside, just like any other modules.

The singleton pattern is not very useful in the context of javascript in traditional webpages, as the application scope gets reset every time the page is refreshed.

However, the singleton implementations come particularly handy in Singe Page Applications commonly referred as SPA. In a SPA, the entire lifetime of the application is managed in a single page and there are no page refreshes that reset the application life cycle.

Module Pattern In Javascript

Module pattern allows to emulate the concept of classes in Javascript. It allows to create private methods and variables along with their public counterparts inside the same class, thus shielding particular parts of the class from the global scope.

Let’s look at an example:

        var module = function () {

            var random = Math.random();

            return {

                showRandom: function () {
                    console.log(random);
                }
            };

        };

        // Usage:
        var m1 = new module();
        m1.showRandom();

        var m2 = new module();
        m2.showRandom();

        //error - can't access the private variable 'random' from outside
        console.log(m2.random);

var module = function () {

var random = Math.random();

return {

showRandom: function () {

console.log(random);

}

};

// Usage:

var m1 = new module();

m1.showRandom();

var m2 = new module();

m2.showRandom();

//error - can't access the private variable 'random' from outside

console.log(m2.random);

Here, the private variable ‘random’ is encapsulated and any code outside of the module can’t access this variable. The functions and properties inside the ‘return{ }’ are exposed publicly and anything outside of ‘return{ }’ are considered private.

This is can also be written as a self-contained module:

        var module = function () {

            var random = Math.random();

            return {

                showRandom: function () {
                    console.log(random);
                }
            };

        }();

        // Usage:
        module.showRandom();

var module = function () {

var random = Math.random();

return {

showRandom: function () {

console.log(random);

}

};

}();

// Usage:

module.showRandom();

Notice the () at the end of the module definition? This will create an instance and return it in the global variable ‘module’.

Passing arguments

A variation of this pattern allows to import modules and alias them locally by passing it as arguments to the anonymous function.

Let’s look at another example:

        var module = function (jq) {

            var getValue = function (elem) {
                console.log(jq(elem).html());
            }

            return {

                getHeader: function () {
                    getValue("#header");
                },

                getFooter: function () {
                    getValue("#footer");
                }
            }
        } (jQuery);

        // Usage:
        module.getHeader();
        module.getFooter();

var module = function (jq) {

var getValue = function (elem) {

console.log(jq(elem).html());

}

return {

getHeader: function () {

getValue("#header");

getFooter: function () {

getValue("#footer");

}

} (jQuery);

// Usage:

module.getHeader();

module.getFooter();

Here, the global variable jQuery is passed as ‘jq’ into the module making it local inside the scope of the module.

Reference:
From the excellent online book by Addy Osmani:
Learning Javascript Design Patterns