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.

Möchten Sie mit uns in Kontakt treten?

Wenn Sie an unseren Softwareentwicklungsdienstleistungen interessiert sind, sich unserem Team anschließen möchten oder einfach mehr über uns erfahren möchten, würden wir uns freuen, von Ihnen zu hören! Schreiben Sie uns ein paar Zeilen und ein Mitglied des ASSIST-Teams wird sich so schnell wie möglich bei Ihnen melden. Wir sind sicher, dass wir Ihnen helfen können.