Many javascript libraries like MooTools, Dojo, ExtJS, YUI, and Qooxdoo have their source code organized in a structure that developers can use as a basis for organizing their own code. MooTools, YUI, and ExtJS have an online means of selecting the pieces of code needed and downloading a single script with all the selected code and required dependencies. This is great for optimizing the target library, but your code left not optimized: existing in separate files, uncompressed, and a polluter of the global namespace (if you care). This article describes one means for solving these issues.

This information is provided as an example of how to organize code and optimize javascript that is sent to the browser. It demonstrates process that I perform and does not serve as and official “how-to” on the javascript libraries used. I use MooTools for my web development purposes so it is used in this article. With that said:

Obtaining Required Files

First things first. There are a few utilities that I use that are essential regardless of which javascript framework you use.

1. Ant: ant is used to automate several tasks when generating the javascript that will be used on a webpage. It is already installed on the Mac OS X. For all others, it can be downloaded from here: Ant Download
2. YUI Compressor: the yuicompressor is used to compress the javascript file that will be used on a webpage. There are several other compressors available but YUI Compressor is the one I use here. It can be downloaded from here: YUI Compressor
3. Build script and dependency file: These two files are a product of the MooTools development team. They are a critical piece of the process. Modified versions of these files are provided here: articlefiles.zip

Organizing the Source Code

Download your framework source code. I recommend downloading the commented, uncompressed version since compression will be handled in this process. Your file structure should have a separate folder for all the javascript code. Below is an example layout of your code.

All of the framework source code as well as your website source code should exist under the Source folder. The script build.rb expects the Source folder to exist at the same level and the scripts.json dependency file should exist inside the Source folder. This can certainly be changed but the changes should be reflected in the script build.rb.

The scripts.json file is written in JSON (hence the extension). It is organized exactly like your directory structure under the Source folder. The scripts.json file for the directory structure above is:

{

"Website": {

"ka.Website": {

"deps": ["Class", "Class.Extras", "Selectors", "DomReady"],

"desc": "The website files."

},

"ka.Home": {

"deps": ["ka.Website", "Cookie"]

}

},

"Core": {

"Core": {

"deps": ["Core"]

},

"Browser": {

"deps": ["Core"]

}

},

"Utilities": {

"JSON": {

"deps": ["Array", "String", "Function", "Number", "Hash"]

},

"Cookie": {

"deps": ["Browser", "Class", "Class.Extras"]

}

},

"Request": {

"Request": {

"deps": ["Class.Extras", "Element"]

},

"Request.JSON": {

"deps": ["Request", "JSON"]

}

},

"3rdParty": {

"Lightbox": {

"deps":["Element.Event", "Element.Dimensions", "Selectors"]

}

}

}

The folder public/js/src/build exists for quick development and testing of your website code. You can place complete framework downloads here. e.g. MooTools with complete core and more files, Clientcide’s complete plugin framework, Prototype and Scriptaculous combined, etc.

The folder public/js/src/lib is for java archives used in the build process. Since I use yuicompressor.jar to compress the files, I’ve included it in this directory.

Files

build.rb - this script uses the scripts.json file to concatenate all or specified code files into one file. It also reads the dependency information in the scripts.json file and loads the appropriate code files accordingly.

script.json - this file uses JSON to show the Source directory organization. It should also have dependency information for each file represented so that required files are included in the build.

build.xml - this is the ant build file. It contains the tasks needed to complete the build process. If you are not familiar with ant, take a look at the manual for more information.

build.properties - this file provides a convenient means of assigning property values in the build.xml without having to modify it. It is also the place where I specify which website page script to build.

version.txt - this file is here just so that I can specify the versions of the files I am using.

Optimizing Your Code

Now that your code is properly organized, you can begin developing. The MooTools framework is modular based. This means that you can include only the parts of the library that you need. This is useful in that it allows you minimize the amount of code downloaded to the browser. Instead of using the entire framework on each page, you can use just specific parts.

Start by ensuring your scripts.json file is properly setup to mimic the Source directory structure. Any new folders and scripts added to the directory should be noted in this file. I created a empty script for each of the files I anticipated using on my website, placed them in the Website folder and created the entries in the scripts.json file.

The website was small so not many files were needed. If the target website was large then I would create the scripts and add the entry to the scripts.json file as needed.

Next, make any necessary changes to the ant build.xml file. In the target section “minify” I have added a header and footer. This is useful for prepending and appending text to the final compressed script.

In my build.xml file, I have wrapped the compressed code in an anonymous function. By doing this I have eliminated quite a bit of code from the global namespace.

Once the build.xml file is modified, you should never have to make any changes to it again (at least not for the target website). The build.properties should be modified each time you are ready to perform a build for a page. It may be possible to pass these values in as command-line arguments. If anyone makes this happen, please share.

Run the ant command. That’s it!

Using this process, I have seen pages using four or five compressed scripts (~93K) get reduced to using one compressed script (~40K).

The Process

1. Create new script (Source/Website/ka.Home.js)
2. Develop and test the new script using the full framework source
3. Add entry “ka.Home”: { “deps”: [“ka.Home”] } in scripts.json and specify all dependencies
4. Edit the build.properties files and change the target class property to ka.Home. The page.name property is the name of the finalized script. It can be set to home.
5. Navigate to the folder public/js/src/ in an application that provides access to the command-line (that’s Terminal for the Mac zealots).
6. Type ant and <return>.
7. The new script will be created and copied into the “src” directory (as specified in the build.properties file)
8. Test your new file and deploy it.

Tags: Javascript, Optimize, Organize