DOJO – Build And Optimize Your DOJO Project

If you are a Java developer, you must be very familiar with the build scripts and have good understanding on the various build tools like ant, maven, etc. We know that the main purpose of the build is too compile (Read : Java Compiler API) the source code to the executable form and then make the distributable archive file. In Java, source files are compiled to byte codes using the compiler and executed in the Java Runtime Environment (JRE).

Why DOJO Build: OK, then why we we need build tool for JavaScript framework?. Is it compiled?. This would be the first question asked by any Java developer who want to start learning the DOJO / JavaScript build. Let me first clear this basic question before start explaining the build process.

Server Loading Time: Whenever you have to send a code to the client machines through the network, it takes the bandwidth. If the web page is more complicated with more number of JS, CSS and Images, then it has to be downloaded to the browser which is going to make the user wait till the page is loaded. Also browser can not download all the resources simultaneously. It has the limitation of maximum 4 files can be downloaded simultaneously. It means that browser has to make the repeated HTTP requests to server for
downloading the resources.

Optimise CSS, JS, Images: For the above reasons, it is good idea if we optimise the resources used in our web application. Take an example, we have 10 CSS files for the development, if that can be merged into one file at the time of moving the code to production, that saves 9 extra HTTP requests to the server. It is only one way, there are many other aspects like inline, minification, etc. are part of compressing the resources. Note that, optimization will be done only after completing the development and moving the code to production. DOJO build does exactly same thing, it reads the DOJO library and project specific script files, then optimize it by implementing the concept of minification. This is very important for any DOJO project. Without the build process, performance of the application
will be impacted.

This post explores the DOJO build process with very simple example which would be easy for any beginner to understand without much difficulty. If you have any issues on running the DOJO build, please write it in the comments section with code samples. I will try my best to help you solving the problems.

Create DOJO Project Structure

What is Package?: As a first step, create DOJO project as mentioned in this article. It is always good idea to follow the best practice for creating the project structure. The structure consists of packages and modules. Package is a list of modules. We can say that it is a logical grouping of files. Dijit, dojo and dojox packages are separate packages grouped based on their functionality. When you write your own application, you would create your own package to add your files.

What is Module?: Module is a file and it defines a functionality. The keyword define is used for creating the modules. dojo/_base/declare is an example for a module. This file is part of dojo package.

Create Package Descriptor

The package descriptor file (package.json) gives you information about the current package name, such as the name of the package, information about its dependencies, links to licensing and bug tracking information, etc. This file has to be created for every package and copied to the root of the package.This file has the several attributes, but for the dojo build system, dojoBuild is the important and must have property in all the package descriptors. This property informs the dojo build about the location of profile file. Profile file is explained in the next section. A simple package file looks like:

{
 "name": "app",
 "description": "DOJOAPP",
 "version": 1.0,
 "dojoBuild": "dojoapp.profile.js"
 }

The last property tells the profile file name. Rest of the properties are only optional.

Create Profile File

This is most important file for helping the dojo build system to inform about how it should process the packages. The packages mentioned in this file only will be taken for the build. In our example, util folder under dojo is not required for the application, we can omit that in the profile file. Profile file is created for the each packages and placed on root folder. Most of the applications would have entire application in single package as root, in that case create one profile for root package.

var profile = {
basePath: "./",
releaseDir: "../release_js",
hasReport: true,
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "warn",
selectorEngine: "lite",

packages:[
{
name: "dojo",
location: "dojo"
},
{
name: "dojox",
location: "dojox"
},
{
name: "dijit",
location: "dijit"
}
]
};

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project basedir="." default="build-dojo" name="DOJOBuild">
<property name="WebContent" value="${basedir}/WebContent" />
<target name="build-dojo" >
<java fork="true" dir="${WebContent}/src/util/buildscripts"
classname="org.mozilla.javascript.tools.shell.Main" maxmemory="1024m" >
<classpath>
<pathelement location="${WebContent}/src/util/shrinksafe/shrinksafe.jar" />
<pathelement location="${WebContent}/src/util/shrinksafe/js.jar" />
<pathelement location="${WebContent}/src/util/closureCompiler/compiler.jar" />
</classpath>
<arg value="../../dojo/dojo.js" />
<arg value="baseUrl=../../dojo" />
<arg value="load=build" />
<arg value="profileFile=../../dojo.profile.js" />
<arg value="action=release" />
<arg value="loader=xdomain" />
</java>
</target>
</project>