Copyright © 2011, Zeleos Project Team
Rich Internet applications that heavily rely on JavaScript and CSS require some optimization to work properly. For instance JavaScript files need to be as compact as possible to fasten the load of the application, this is also true for CSS files.
When building a complex application in JavaScript, it also important to validate that the code is correct. JavaScript is not a compiled language and permissive in many ways, it is therefore very important to be able to check that the code is correct.
ZWT uses JavaScript objects and loads the dependencies between classes using a dynamic loading system. We wanted to provide a very clean API with isolated classes to ease the maintenance and make the framework as intuitive as possible, however this increase the loading time of the applications.
ZWT Tools have been created to answer these issues and much more. They can for instance be used outside the scope of ZWT to validate or optimize any JavaScript code.
ZWT defines Ant tasks to execute ZWT Tools. In order to use them, you simply need to include this line into your Ant script:
<taskdef resource="org/zeleos/zwt/tools/ant/zwt-tools.properties" classpath="${zwtpath.zwt.home}/lib/zwt-tools.jar"></taskdef>
Property zwtpath.zwt.home must point to your ZWT installation.
The JavaScript compiler strictly follows ECMA262 specification. By strictly, I mean it doesn't support automatic semicolon insertion, neither Regular Expression Literals. This has been decided in order to put some strictness in JavaScript: a semicolon must not be optional and a regular expression has to be created with a RegExp object.
This compiler parses one or more JavaScript files, validates the content according to the ECMA262 grammar. It creates result files with formatted and/or optimized code.
For now optimization only removes comments and spaces and replaces the local variable names by two letters identifiers. In the future, we'll certainly extend the optimization to any kind of variables.
If you specify the same directory for the source and destination directories, you must specify a file extension for the compiled files. If no destination directory is specified, the compiler only validate the file against the ECMA262 grammar.
Attribute | Description | Required |
---|---|---|
srcDir |
The source directory which contains the JavaScript source files. |
Yes |
destDir |
The destination directory into which the JavaScript compiled files are stored. |
No |
optimize |
Indicates whether compiled files should be optimized; defaults to true. |
No, defaults to true |
format |
Indicates whether compiled files should be formatted; defaults to false. |
No, defaults to false |
extension |
The file extension to use for the compiled files. |
No |
<zwt-jsc srcDir="${src}" destDir="${build}" optimize="true"/>
compiles all .js
files under the ${src}
directory and stores the compiled files in ${build}
directory. Compiled files are optimized.
<zwt-jsc srcDir="${src}" destDir="${build}" optimize="false" format="true" extension="js.fmt"/>
compiles all .js
files under the ${src}
directory and stores the compiled files with the extension .fmt
in ${build}
directory. This compilation actually only formats the source files with no optimization.
The Zeleos JavaScript Compiler differs from the standard JavaScript Compiler (see zwt-jsc) since it also checks the code against the ZWT coding convention.
Attribute | Description | Required |
---|---|---|
srcDir |
The source directory which contains the ZWT JavaScript source files. |
Yes |
destDir |
The destination directory into which the ZWT JavaScript compiled files are stored. |
No |
optimize |
Indicates whether compiled files should be optimized; defaults to true. |
No, defaults to true |
format |
Indicates whether compiled files should be formatted; defaults to false. |
No, defaults to false |
extension |
The file extension to use for the compiled files. |
No |
<zwt-zjsc srcDir="${src}" destDir="${build}" optimize="true"/>
compiles all .js
files under the ${src}
directory and stores the compiled files in ${build}
directory. Compiled files are optimized.
<zwt-zjsc srcDir="${src}" destDir="${build}" optimize="false" format="true" extension="js.fmt"/>
compiles all .js
files under the ${src}
directory and stores the compiled files with the extension .fmt
in ${build}
directory. This compilation actually only formats the source files with no optimization.
The Zeleos Merger is used to patch a Zeleos JavaScript file. It basically adds includes, methods, classes and properties from a patch file to the source file if they don't already exist in the source file.
The merged files can be optimized, formatted and include or not the comments from the source file.
You can specify different file extensions for the source files, patch files and merged files so you can use the source directory as the destination directory.
Attribute | Description | Required |
---|---|---|
srcDir |
The source directory which contains the ZWT JavaScript source files to patch. |
Yes |
patchDir |
The directory which contains the ZWT JavaScript patch files. |
Yes |
destDir |
The destination directory into which the ZWT JavaScript merged files are stored. |
Yes |
srcExtension |
The file extension of the source files. |
No |
patchExtension |
The file extension of the patch files. |
No |
extension |
The file extension to use for the merged files. |
No |
optimize |
Indicates whether merged files should be optimized; defaults to true. |
No, defaults to true |
format |
Indicates whether merged files should be formatted; defaults to false. |
No, defaults to false |
includeComments |
Indicates whether merged files should keep comments from the source file; defaults to false. |
No, defaults to false |
<zwt-zjsmerge srcDir="${src}" patchDir="${patch}" destDir="${build}" srcExtension="js" patchExtension="js.patch" extension="js.merge"/>
patches all .js
files under the ${src}
directory with .js.patch
files under the ${patch}
directory and stores the merged files in ${build}
directory with the extension .js.merge
. Merged files are optimized by default.
<zwt-zjsmerge srcDir="${src}" patchDir="${src}" destDir="${src}" srcExtension="js.old" patchExtension="js.patch" extension="js" optimize="false" format="true" includeComments="true"/>
patches all .js.old
files with .js.patch
files and stores the merged files with the extension .js.merge
. All the files are under the same ${src}
directory. Merged files are not optimized, formated and comments from the source file are included.
The Zeleos CSS merger is used to patch a Zeleos CSS file. It basically adds CSS selectors from a patch file to the source file if they don't already exist in the source file.
The merged files can be optimized (remove spaces, comments...), formatted and include or not the comments from the source file.
You can specify different file extensions for the source files, patch files and merged files so you can use the source directory as the destination directory.
Attribute | Description | Required |
---|---|---|
srcDir |
The source directory which contains the CSS source files to patch. |
Yes |
patchDir |
The directory which contains the CSS patch files. |
Yes |
destDir |
The destination directory into which the CSS merged files are stored. |
Yes |
srcExtension |
The file extension of the source files. |
No |
patchExtension |
The file extension of the patch files. |
No |
extension |
The file extension to use for the merged files. |
No |
optimize |
Indicates whether merged files should be optimized; defaults to true. |
No, defaults to true |
format |
Indicates whether merged files should be formatted; defaults to false. |
No, defaults to false |
includeComments |
Indicates whether merged files should keep comments from the source file; defaults to false. |
No, defaults to false |
<zwt-zcssmerge srcDir="${src}" patchDir="${patch}" destDir="${build}" srcExtension="css" patchExtension="css.patch" extension="css.merge"/>
patches all .css
files under the ${src}
directory with .css.patch
files under the ${patch}
directory and stores the merged files in ${build}
directory with the extension .css.merge
. Merged files are optimized by default.
<zwt-zcssmerge srcDir="${src}" patchDir="${src}" destDir="${src}" srcExtension="css.old" patchExtension="css.patch" extension="css" optimize="false" format="true" includeComments="true"/>
patches all .css.old
files with .css.patch
files and stores the merged files with the extension .css.merge
. All the files are under the same ${src}
directory. Merged files are not optimized, formated and comments from the source file are included.
The ZWT JavaScript API is separated into multiple files, one per class, dependencies are dynamically loaded at runtime. This process is very flexible but doesn't present good performances. The Zeleos Packager is used to package a ZWT application class (defining a main method) into one single JavaScript file containing all required dependencies.
When publishing an application, you'll probably want to package it to improve the loading time and overall performances.
The resulting file can be obfuscated and/or split per class path: one file is generated for each class path.
Attribute | Description | Required |
---|---|---|
srcDir |
The source directory which contains the Zeleos application files to package (any file that contains a main method). |
Yes, unless classList is present |
classList |
A comma separated list of classes to package. The resulting files (one per class) need to be declared in the right order in the HTML file as dependencies are included once for all the classes in the list. Basically if the first class defines a dependency, then it is included in the packaged file of the first class but not in the other files even if they define the same dependency. |
Yes, unless srcDir is present |
destDir |
The destination directory into which the packaged files are stored. |
Yes |
classPath |
A comma separated list of classpaths. These paths are used to resolve the different dependencies found in the files. Note that you can define either local paths or URLs. |
Yes |
obfuscate |
Indicates whether packaged files should be obfuscated; defaults to true. |
No, defaults to true |
split |
Indicates whether packaged files should be split per classpaths; default to false. |
No, defaults to false |
<zwt-zjspack srcDir="${src}" destDir="${build}" classPath="${classPath}" />
packages the ZWT Application files under ${src}
and stores the packaged files in ${build}
directory using ${classPath}
to resolve dependencies. Packaged files are obfuscated by default.
<zwt-zjspack classList="org.zeleos.TestClass1,org.zeleos.TestClass2" destDir="${build}" classPath="${classPath}" />
packages the ZWT Application classes org.zeleos.TestClass1
and org.zeleos.TestClass2
and stores the packaged files in ${build}
directory using ${classPath}
to resolve dependencies. Packaged files are obfuscated by default.
The Zeleos UIDL Compiler is used to compile ZUIDL file and generates corresponding JavaScript, CSS and HTML files.
Some generated JavaScript files (Controller callbacks and Models) are merged to the existing files (if they actually exist).
CSS files are all merged to the existing ones.
Basically every files a developer is supposed to modify are not overridden if they already exist.
Attribute | Description | Required |
---|---|---|
srcDir |
The source directory which contains the ZUIDL files to compile. |
Yes |
zwtapidir |
The path to the ZWT API directory. |
Yes |
zwtthemesdir |
The path to the ZWT Themes directory. |
Yes |
zwttheme |
The theme to use in the generated HTML files. |
Yes |
jsdestdir |
The destination directory into which JavaScript files are stored. |
Yes |
cssdestdir |
The destination directory into which CSS files are stored. |
Yes |
htmldestdir |
The destination directory into which HTML files are stored. |
Yes |
jspackdestdir |
The directory where packaged JavaScript are stored. |
Yes |
generateJS |
Indicates whether JavaScript files are generated. |
Yes |
generateCSS |
Indicates whether CSS files are generated. |
Yes |
generateHTML |
Indicates whether HTML files are generated. |
Yes |
generateHTMLPack |
Indicates whether packaged HTML files are generated. |
Yes |
<zwt-zuidlc srcDir="${src}" generateJS="true" generateCSS="true" generateHTML="true" generateHTMLPack="false" zwtapidir="${zwtAPI}" zwtthemesdir="${zwtThemes}" zwttheme="Default" jsdestdir="${jsBuild}" cssdestdir="${cssBuild}" htmldestdir="${htmlBuild}"/>
generates JavaScript, CSS and HTML files from the ZUIDL files under ${src}
and stores them in ${jsBuild}
, ${cssBuild}
and ${htmlBuild}
.
The theme to use is Default
, the path to the Themes is ${zwtThemes}
and the path to the ZWT API is ${zwtAPI}
.