Need help?

I'm available for remote short term contracting or consultancy work. Please check out my LinkedIn profile for more details on my experience.

Please feel free to use the form below to contact me.




JavaScript Application Architecture (Layout)

The concept of organising your JavaScript to this level may seem alien to some, but the advantages are limitless. This greatly improves maintainability and scalability, and as JS gets more and more advanced, so will the structure (from an architectural point of view).

Some of the best browsers to date have improved their JS rendering engine so much that you can basically build a full fledged application and wouldn't be able to tell the difference between a stand-alone app and the one running in your browser - amazing huh? Have you ever heard of OpenGL? Well, they're also coming out with WebGL, which will obviously be powered by JavaScript - say bye bye to flash and hello JS. If this alone doesn't convince you that it's growing extremely rapidly, then I don't know what will.

Well, enough talk about why you should do it, and lets get down to it.

If you're at all familiar with the MVC (Model View Controller) pattern, then you may understand some of these concepts. And most of this is to be used at your discretion (obviously) - if your website is very small and doesn't use much JavaScript, then there's no real need to have this sort of structure.

The first thing we're going to start with is the bootstrap file, or you can just name it app or Application.js - this is main namespace and all other js objects/files will be under this.

And it's going to look something like this:


(function() {

  // setting up the main namespace which will be accessible by all other js files
  var main = window.main = window.main || {};

  // include all the js files you need (for the current page and/or any other globally accessible js files)

})();

So that sets up your bootstrap js file. You could also use this file to load up any other js files (using jQuery or Require JS), or just load them normally in your head tag.

You'll also need another js file that stores all the globally accessible methods - you can create one called global.js for that.

Global JS example:


(function() {

  // getting a reference to the main namespace if it exists - empty object otherwise
  var main = window.main = window.main || {};

  // setting up the global namespace - this will be loaded from within the bootstrap and accessible globally to all other namespaces
  var global = main.global = {

    // setup any properties if you want

    parseStuff: function() {

      // function that parses stuff - just an example, but you can create any methods here that will be accessible application wide (any pages under the main namespace will have access to main.global

    }

  };

})();

Now that the global stuff is done, you can setup a js file for each page that will be using JavaScript on your web application.

Here's an example below:


(function() {

  // getting a reference to the main namespace if it exists - empty object otherwise
  var main = window.main = window.main || {};

  // setting up the articlesPage namespace - this is for the js object for the articles page obviously
  var articlesPage = main.articlesPage = {

    // setup any properties if you want

    // init method, which will initialise everything (on a global level)
    init: function () {

      // do what you need to do here - setup events with jquery or whatever

    }

  };

  articlesPage.init();

})();

As you can see, it's a very similar structure to the bootstrap file - the main difference is the fact that it has a reference back to the main object, which will allow you to call any of the methods in the main object.

So, for every page that uses JavaScript, you'll create something similar to the example I just posted above.

Obviously this is not a true object oriented approach, but it's a good way to organise your JS throughout your web application using namespaces.

If you have any different opinions or approaches, please feel free to post.


jon | August 25, 2010 | Comments (2)

Comments

Good Start, though.... although i think that you won't have to keep defining main variable across all of your JS files... since you defined it in bootstrap.js. Bootstrap.js does bring other JS files into context, so all of the other JS files automatically see window.main namespace that was set up in bootstrap.js file

any comments?

thanks
Comment by Yousif Atique - June 11, 2011 @ 9:27 pm
Thank you for providing the idea of building the core of js app. Additionally I'd recommend this article by Nicholas Zakas:
http://msdn.microsoft.com/en-us/scriptjunkie/gg314983
Comment by Alex - May 09, 2011 @ 6:05 pm

Name (required)
Email (will not be published) (required)
Website

captcha