Development

In the latest Indy builds we’ve added support for performing custom Dojo builds.  Without a custom Dojo build, browsers pull down Dojo piece by piece, and wait for each synchronous web call to finish before performing the next one.  Custom Dojo builds allow you to create a file with just the Dojo functions your application needs, which can significantly improve performance. In
this blog post we’ll walk through how this works using the zero.books.demo sample application.

You’ll need one of the latest development builds, which you can download and install from here:
http://www.projectzero.org/download/indy.php

Once you have WebSphere sMash installed, you’ll first need to create a copy of the sample application to work with, since we’ll be modifying it to use the custom build.  Run the following command:

zero create books.demo from zero:zero.books.demo

to create your own copy.  Then follow the steps in README.txt within the app to perform the necessary setup.

If you want at this point you can run the application to try it out before performing the custom build.

Next, create a profile file in books.demo/profiles/books.profile.js and add this text:

dependencies ={
layers:  [
{
name: "booksdojo.js",
dependencies: [
"dojox.atom.widget.FeedViewer",
"dojox.atom.widget.FeedEntryEditor"
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ]
]
};

This will create a custom build with just the pieces this app needs to run within the booksdojo.js file.  For more information about the profile files and the custom build process in general, see the Dojo documentation here: http://www.dojotoolkit.org/reference-guide/quickstart/custom-builds.html

Next you’ll need access to the Dojo build tools.  You could add it as a dependency of your current app, but that’s not ideal because you would need to remember to remove it after performing the build.  Instead, we’ll create a separate application whose sole purpose is to contain the tools and you can use this app to work with any other application that needs a custom build.

Return to the directory where you created books.demo and create the tools application:
zero create dojotools from zero:zero.dojo.tools

Then change directories into the dojotools directory and run the custom build using the profile file you created earlier.
zero dojo build -profileFile=profiles/books.profile.js -action=release

This will create a directory called release within your dojotools directory which contains a dojo folder containing dojo, dijit, and dojox folders.  You could also use the releaseDir option to
specify an alternate location for these files to go.  Copy or move the three directories under dojo into books.demo/public, so you end up with books.demo/public/dojo, books.demo/public/dijit, etc.

The last step is to edit index.gt within books.demo/public

Currently index.gt contains the following line:
<script type="text/javascript" src="<%= getRelativeUri("/dojo/dojo.js") %>"
djConfig="parseOnLoad: true, isDebug: false">
</script>

This line needs to stay since it loads the core dojo functionality, including the dojo namespace, but you also need to load the custom dojo file you created by adding this line below the existing one:

<script type="text/javascript" src="<%= getRelativeUri("/dojo/booksdojo.js") %>">
</script>

You can now start the app (zero start) and if you use something like Firebug to monitor network calls you can see that booksdojo.js is loaded all at once rather than needing separate calls.

The instructions above work for the command line, but there is a complication when using appbuilder since you can’t run commands in one app in order to operate on another.  We’re working on a way to improve this, but for the time being if you are going to use appbuilder to perform the custom build you need to add a dependency from your app (in this case zero.books.demo) on zero.dojo.tools:

<dependency name=”zero.dojo.tools” org=”zero” rev=”[1.0.0.0,2.0.0.0[”/>

You should be careful to remove this dependency after you are done running your build.