Javascript Architecture/Application Structure Best Practices?

Question

I like to use a sort of MVC client side architecture.

• I have a page CONTROLLER
• The DOM is my VIEW
• The server is my MODEL

Typically I create a singleton page controller class (with supporting classes off that is needed) that controls the ajax calls and view binding.

var pageXController = {
  init: function(param) {
    pageXController.wireEvents();
    // something else can go here
  },

  wireEvents : function() {
    // Wire up page events
  }

  // Reactive methods from page events
  // Callbacks, etc
  methodX : function() {}
}

$(document).ready( function() {
  // gather params from querystring, server injection, etc
  pageXController.init(someparams);
});

I should also add here that your MODEL in this case is your DTO's (Data Transfer Objects) which are optimised to the problem they solve. This is NOT your domain model.

For complex Javascript development, structuring your codebase it critical in my experience. Historically being a patching language, there is a great tendency that Javascript development ending up with massive script files.

I'd recommend to logically separate the functional areas of the application in to clear modules that are loosely coupled and self contained. For example as shown below your product suite might have multiple product modules and each module with multiple sub modules:

Once you have the ability to create hierachical modules, it is a mater of creating UI components in relavant sub-module. These UI components should also preferably be self contained. Meaning each with own template, css, localization, etc. like shown below:

I created a JS reference architecture with sample code to share my expierince I gained in couple of large scale JS projects. I'm the author of boilerplateJS. If you want a reference codebase where several of the critical concerns built-in, feel fee to use it as your startup codebase.

http://boilerplatejs.org

One thing you might want to look into is Backbone.js which gives you a nice framework for building Model classes to represent that data in your application and bind them to your HTML UI. This is preferred to tying your data to the DOM.

More generally, here is a great article on JavaScript best practices from the Opera development blog.

If we are talking about javascript apps architecture then Nicholas Zakas 2011 podcast is a must see: Nicholas Zakas: Scalable JavaScript Application Architecture

Also Addy Osmani's online reference: Patterns For Large-Scale JavaScript Application Architecture