Modular JavaScript Facebook Application Tutorial | ASSIST Software Romania
get in touch



Facebook Share Tweet LinkedIn Share


LinkedIn Follow Xing Follow

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(){
   = "hello world";

    return {
        Init: _.Init,
        ShowAlert: _.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
  2. Run the following commands:
npm install


  1. Create a facebook application on 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:



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.

Do you want to get in touch with us? 

If you are interested in our software development services, you would like to join our team, or you simply want to find out more about us, we’d love to hear from you! Drop us a line and a member of the ASSIST team will get back to you as soon as possible. We are sure we can ASSIST you.