JavaScript Architecture Brief

Every Unobtrusive JavaScript driven Web Applications should have 3.5 tiers:

  • 1. Framework tier
  • 2. Toolkit/Utility tier
  • 3. Business logic tier
  • 3.5 Server-client variables

Framework Tier

This tier will contain the objects, functions, and resources that will be used on every (or almost every) page in the application. I suggest packaging all Framework files into 1 file so end-user browsers need only download a single, cacheable file (it is more efficient to download 1 large file, than several smaller files, unless the client has enabled special browser settings). At the bare minimum the Framework tier should contain the DOM and Event manipulation code. I usually also modify native JavaScript objects and my AJAX system. Every page of your site using JavaScript should reference your Framework tier and it is safe to use these functions in your Toolkit and Business tiers.

Here is how you might create one library.js file from several files to create your Framework tier:

cat core.js dom.js form.js string.js array.js event.js > library.js

Toolkit Tier

This tier contains JavaScript tools that you only use sometimes throughout your Web Application, such as Autocomplete or Animation. These files should be included as needed throughout your site. If you find yourself using these tools on every page, then go ahead and include it in your Framework file, as it will improve site performance. Also, you may find that certain tools, like a Dialog and Animation utility are always used together; you may improve performance by combining them into one file. Generally speaking, I recommend building a utility for any code that may be used on more than 2 pages.

Business Tier

This tier will contain all page specific code. I recommend you name the file the same as your page name. So, if your page is called login.html, then your JavaScript business file should be named login.js (any page specific stylesheet should be named login.css as well). These pages should be included last and can reference any objects or functions from the Framework and Toolkit tiers. All your events should be attached to the DOM here and cache frequently used DOM Elements. It is good practice to put all your Business logic inside a namespace object, such as Login so as to not override any variables defined in the other Tiers or in the global namespace. For example:

var Login = (function() {
var dom = {collection of dom references};
Event.addListener(dom.someElement, someEvent, someFunction);
…
}());

In-page tier

This tier should actually go before the Business tier, so that the Business tier can reference objects passed from the server. You do not need this tier if you do not use any server-side language. Whenever, your server-side language generates a variable, such as a JSON object, create a script tag just prior to the Business tier and set any variables that you need. For examples, suppose on the login page you want to retrieve a username and a JSON object representing the users messages in a PHP environment:

Now the username and messages variables can be referenced by the Business logic code inside login.js&rsquot;.