This short tutorial describes a way to split up your application in different packages to reduce the size of your initial JavaScript data.

Typical candidates for packages can be

• parts of your application which are only accessed/used by a minor number of users
• parts which can be easily isolated from the main application e.g. a complex dialog window
• etc.

The first step is to discover which parts of your application should be splitted up in different packages.

Now you can use the generator python script to produce the packages. The generator will produce a package which consists of all member classes and their dependencies. So if you include a class like the Tree widget the dependend files will also be included in the package.

# BUILD VERSION
$ framework/tool/generator.py --class-path framework/source/class \
  --generate-compiled-script --compiled-script-file PACKAGE_NAME.js \
  --include module1,module2,class1,...

# SOURCE VERSION
$ framework/tool/generator.py --class-uri framework/source \
--class-path framework/source/class --generate-source-script \
--source-script-file PACKAGE_NAME.js --include module1,module2,class1,...

These example assume that you call the generator within the frontend directory of the qooxdoo framework.

You decided which classes are part of which packages and built them. Let’s use these packages in your application by loading them on demand. The Transport-API (AJAX) will do the job for us.

The simplest way to get the necessary package file is to set up a new qx.io.remote.Request object. With this object you can pull in your package file and make it available in your application.

var req = new qx.io.remote.Request("PATH_TO_MODULE_FILE", "GET", \
                                   qx.util.Mime.JAVASCRIPT);
 
req.addEventListener("completed", function(e) {
   // code for completed request
});
 
req.addEventListener("failed", function(e) {
   // code for failed request
});
 
req.addEventListener("timeout", function(e) {
   // code for timed out request
});

The three event listener methods are only for completeness. If you define the mimetype as qx.util.Mime.JAVASCRIPT the script content of the requested package file gets automatically evaluated (using a global eval). It is not necessary in the completed callback method to perform some “integration” magic. You can use these packages right away e.g. create a instance of your complex dialog. This instantiation needs to wait for the request however. This means that you may want to add the initialization logic to the completed listener.

It is planned to support the use of packages in an easier way. Please take a look at Using packages - further development to get a short overview of what is planned. Feel free to edit this article, it’s open for discussion.