The Dojo Build System

7,704
-1

Published on

This talk was held at the dojo.beer(2) session.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,704
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
118
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

The Dojo Build System

  1. 1. The Dojo Build System Tobias von Klipstein - uxebu Ltd. klipstein@uxebu.com
  2. 2. What? • Process for • compressing your JS files • grouping several JS files into one • interning external non-JS files (HTML Templates) • resolving of css @import statements Speed up your app
  3. 3. We need? • Dojo source release • Java 1.5 (recommended) for running Rhino • A Dojo application, we want to optimize
  4. 4. Dojo Source Release • dojo (Base / Core) • dijit • dojox • util (Rhino / Shrinksafe)
  5. 5. Our App
  6. 6. GET index.html index.html @import url(quot;dojo.cssquot;); dojo.css @import url(quot;tundra.cssquot;); tundra.css @import quot;dijit/form/Button.cssquot;; dijit/form/Button.css ... Client Webserver <script src=“dojo.js“></script> dojo.js dojo.require(“dijit.form.Button“) dijit/form/Button.js Usual Page Load dojo.require(“dojo.string“) dojo/string.js ...
  7. 7. GET index.html index.html @import style.css style.css Client Webserver <script src=“dojo.js“></script> Optimized Page Load dojo.js
  8. 8. Build Profile (1) • like ant‘s build.xml or Makefiles • consists of • layers • modules • util/buildscripts/profiles/<profile name>.profile.js
  9. 9. Build Profile (2) The simplest build profile ¶
  10. 10. Build profile (3) dependencies = { layers: [ { //always quot;../[....]quot; or just quot;dojo.jsquot; name: quot;../beer/layername.jsquot;, dependencies: [ quot;dojo.stringquot; quot;dijit.form.Buttonquot; ], //relative to the util/buildscripts //directory or an absolute path. copyrightFile: quot;myCopyright.txtquot; } ], prefixes: [ //relative to the dojo/dojo.js file [quot;dijitquot;, quot;../dijitquot;, [quot;beerquot;, quot;../beerquot;, quot;../beer/copyright.txtquot;], ] };
  11. 11. Doing a Build • cd util/buildscripts • build.sh [or .bat] profile=<profile name> action=release + [more options]
  12. 12. build.sh [options] (1) • releaseName [default: dojo] • releaseDir [default: ../../release/] • version [default: 0.0.0.dev] • profileFile (instead of profile option) • localeList [default: de-de, en-gb, ...]
  13. 13. build.sh [options] (2) • loader [default or xdomain] • scopeDjConfig
  14. 14. build.sh [options] (3) • cssOptimize (comments or comments.keepLines) • optimize (shrinksafe / shrinksafe.keepLines / packer) • layerOptimize [default: shrinksafe] • mini [default: false]
  15. 15. Shrinksafe (1) • removing whitespace • removing comments • replacing non-public symbols (argument / variable / function names) with shorter ones
  16. 16. Shrinksafe (2) function MyClass(){ this.foo = function(argument1, argument2) { var addedArgs = parseInt(argument1)+ function MyClass(){ parseInt(argument2); this.foo=function(_1,_2){ return addedArgs; var _3=parseInt(_1)+parseInt(_2); } return _3; var anonymousInnerFunction = function(){ }; // do stuff here! var _4=function(){ } }; } } function MyFunc(){ function MyFunc(){ // this is a top-level function } } // we've got multiple lines of whitespace here
  17. 17. Let‘s build ./build.sh profile=beer action=clean,release
  18. 18. What else you can do? • Use a CDN (if just <5 modules are used) • GZIP your content • Loading your javascript files at the end and CSS upfront • Creating a separate domain for your js files: js.example.com (xdomain) • Determine often used modules (regularly)
  19. 19. Links • docs.dojocampus.org/quickstart/custom- builds • dojotoolkit.org/docs/shrinksafe • dojocampus.org/content/2008/05/03/dojo- build-101-basics/ • dojocampus.org/content/2008/05/26/dojo- build-201-layers-and-css-optimizing-builds/ • download.dojotoolkit.org (source release)

×