Modular JavaScript Facebook Application Tutorial

In this tutorial you will learn how to develop a Modular JavaScript Application using Object Literal Pattern. I utilized Facebook API for an explicit illustration. This pattern is also mentioned in Addy Osmany e-book. The Object Literal is the simplest modular pattern, encapsulating all the module's functionality into one object.

Example of JavaScript Object Literal Pattern:

var module = {
    a : "",
    method : function () {},
    meta : { }
};

There is a downside of this pattern, the data from the modules is exposed. To handle this I used the Revealing Module Pattern. A revealing module is a self-executing anonymous function also known as an IIFE (immediately invoked function expression).

Example of Revealing Module Pattern:

var MyFunction = function(){

    var _ = {
        Init: function(){
            _.Config.foo = "hello world";
        },
        Config:{
            foo:null
        },
        ShowAlert:function(){
            alert(_.Config.foo);
        }
    }

    return {
        Init: _.Init,
        ShowAlert: _.ShowAlert
    };
}();

MyFunction.Init();
MyFunction.ShowAlert();

With this we can run a function that returns the module's value. If we return an object of methods, those methods are public and other modules have access to them. The main advantage is that we can create a lot of variables / functionality and other modules do not have access to them unless we expose them via the return object.

In order to run this application you must have npm and gulp installed on your local machine.

1. Clone the project on any local or online server (apache) from github.com
2. Run the following commands:

npm install

gulp

3. Create a facebook application on developers.facebook.com and get an appID;
4. Set the Canvas URL on your Facebook Application as localhost or on your online server;
5. Replace YOUR_APP_ID with your developer appID from index.html;
6. Open http://yourServer/index.html in any browser;
7. After Login, the application should look as follows:

Conclusion

If you’ve stepped through the code examples in this repo, you should have a basic understanding of the Object Literal pattern and how it might prove useful to you as you develop more complex features and interactions. I encourage you to give this pattern a try the next time you find yourself writing more than a few lines of JavaScript — it helps you to think through the elements and behaviors that make up a complex feature or interaction.