Best practices for managing and deploying large JavaScript apps

Question

What are some standard practices for managing a medium-large JavaScript application? My concerns are both speed for browser download and ease and maintainability of development.

Our JavaScript code is roughly "namespaced" as:

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

At the moment, we have one (unpacked, unstripped, highly readable) JavaScript file to handle all the business logic on the web application. In addition, there is jQuery and several jQuery extensions. The problem we face is that it takes forever to find anything in the JavaScript code and the browser still has a dozen files to download.

Is it common to have a handful of "source" JavaScript files that gets "compiled" into one final, compressed JavaScript file? Any other handy hints or best practices?

Answer 1

The approach that I've found works for me is having seperate JS files for each class (just as you would in Java, C# and others). Alternatively you can group your JS into application functional areas if that's easier for you to navigate.

If you put all your JS files into one directory, you can have your server-side environment (PHP for instance) loop through each file in that directory and output a <script src='/path/to/js/$file.js' type='text/javascript'> in some header file that is included by all your UI pages. You'll find this auto-loading especially handy if you're regularly creating and removing JS files.

When deploying to production, you should have a script that combines them all into one JS file and "minifies" it to keep the size down.

Answer 2

Also, I suggest you to use Google's AJAX Libraries API in order to load external libraries.

It's a Google developer tool which bundle majors JavaScript libraries and make it easier to deploy, upgrade and make them lighter by always using compressed versions.

Also, it make your project simpler and lighter because you don't need to download, copy and maintain theses libraries files in your project.

Use it this way :

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

Answer 3

Just a sidenode - Steve already pointed out, you should really "minify" your JS files. In JS, whitespaces actually matter. If you have thousand lines of JS and you strip only the unrequired newlines you have already saved about 1K. I think you get the point.

There are tools, for this job. And you should never modify the "minified"/stripped/obfuscated JS by hand! Never!