Modular JavaScript Facebook Application Tutorial

April 19, 2017
2 min read

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-Application-ASSIST-Software
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.

Share on:

Want to stay on top of everything?

Get updates on industry developments and the software solutions we can now create for a smooth digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Frequently Asked Questions

1. What is ASSIST Software's development process?  

The Software Development Life Cycle (SDLC) we employ defines the following stages for a software project. Our SDLC phases include planning, requirement gathering, product design, development, testing, deployment, and maintenance.

2. What software development methodology does ASSIST Software use?  

ASSIST Software primarily leverages Agile principles for flexibility and adaptability. This means we break down projects into smaller, manageable sprints, allowing continuous feedback and iteration throughout the development cycle. We also incorporate elements from other methodologies to increase efficiency as needed. For example, we use Scrum for project roles and collaboration, and Kanban boards to see workflow and manage tasks. As per the Waterfall approach, we emphasize precise planning and documentation during the initial stages.

3. I'm considering a custom application. Should I focus on a desktop, mobile or web app?  

We can offer software consultancy services to determine the type of software you need based on your specific requirements. Please explore what type of app development would suit your custom build product.   

  • A web application runs on a web browser and is accessible from any device with an internet connection. (e.g., online store, social media platform)   
  • Mobile app developers design applications mainly for smartphones and tablets, such as games and productivity tools. However, they can be extended to other devices, such as smartwatches.    
  • Desktop applications are installed directly on a computer (e.g., photo editing software, word processors).   
  • Enterprise software manages complex business functions within an organization (e.g., Customer Relationship Management (CRM), Enterprise Resource Planning (ERP)).

4. My software product is complex. Are you familiar with the Scaled Agile methodology?

We have been in the software engineering industry for 30 years. During this time, we have worked on bespoke software that needed creative thinking, innovation, and customized solutions. 

Scaled Agile refers to frameworks and practices that help large organizations adopt Agile methodologies. Traditional Agile is designed for small, self-organizing teams. Scaled Agile addresses the challenges of implementing Agile across multiple teams working on complex projects.  

SAFe provides a structured approach for aligning teams, coordinating work, and delivering value at scale. It focuses on collaboration, communication, and continuous delivery for optimal custom software development services. 

5. How do I choose the best collaboration model with ASSIST Software?  

We offer flexible models. Think about your project and see which models would be right for you.   

  • Dedicated Team: Ideal for complex, long-term projects requiring high continuity and collaboration.   
  • Team Augmentation: Perfect for short-term projects or existing teams needing additional expertise.   
  • Project-Based Model: Best for well-defined projects with clear deliverables and a fixed budget.   

Contact us to discuss the advantages and disadvantages of each model. 

ASSIST Software Team Members

See the past, present and future of tech through the eyes of an experienced Romanian custom software company. The ASSIST Insider newsletter highlights your path to digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Follow us

© 2025 ASSIST Software. All rights reserved. Designed with love.