Modular JavaScript Facebook Application Tutorial | ASSIST Software Romania

CONTACT US

To prevent automated spam submissions leave this field empty.

SHARE

sebastian-varlan-rails-developer

Rails Developer at ASSIST

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

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

 Modular Javascript Facebook Application

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.

Ready to make it happen?

Drop us a line. We’d love to hear from you and see how we can help in solving your digital challenges. As one of the best software outsourcing companies in Romania, Eastern Europe, Europe and the world really, we are sure we can ASSIST.

GET IN TOUCH