The Dojo Build System
    Tobias von Klipstein - uxebu Ltd.
         klipstein@uxebu.com
What?
• Process for
 • compressing your JS files
 • grouping several JS files into one
 • interning external non-JS files (HT...
We need?

• Dojo source release
• Java 1.5 (recommended) for running Rhino
• A Dojo application, we want to optimize
Dojo Source Release

• dojo (Base / Core)
• dijit
• dojox
• util (Rhino / Shrinksafe)
Our App
GET index.html
                    index.html


             @import url(quot;dojo.cssquot;);
                     dojo.cs...
GET index.html
                   index.html




               @import style.css
                    style.css




Client...
Build Profile (1)

•   like ant‘s build.xml or Makefiles

•   consists of

    •   layers

    •   modules

•   util/buildsc...
Build Profile (2)
 The simplest build profile


            ¶
Build profile (3)
dependencies = {
   layers: [
      {
         //always quot;../[....]quot; or just quot;dojo.jsquot;
   ...
Doing a Build

• cd util/buildscripts
• build.sh [or .bat]
     profile=<profile name>
     action=release
     + [more opti...
build.sh [options] (1)

• releaseName [default: dojo]
• releaseDir [default: ../../release/]
• version [default: 0.0.0.dev...
build.sh [options] (2)


• loader [default or xdomain]
• scopeDjConfig
build.sh [options] (3)
• cssOptimize (comments or
  comments.keepLines)
• optimize (shrinksafe / shrinksafe.keepLines /
  ...
Shrinksafe (1)

• removing whitespace
• removing comments
• replacing non-public symbols (argument /
  variable / function...
Shrinksafe (2)

function MyClass(){
    this.foo = function(argument1, argument2)
{
        var addedArgs = parseInt(argum...
Let‘s build


./build.sh profile=beer action=clean,release
What else you can do?
• Use a CDN (if just <5 modules are used)
• GZIP your content
• Loading your javascript files at the ...
Links
• docs.dojocampus.org/quickstart/custom-
  builds
• dojotoolkit.org/docs/shrinksafe
• dojocampus.org/content/2008/05...
Upcoming SlideShare
Loading in...5
×

The Dojo Build System

7,615

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,615
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
117
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×