The Dojo Build System
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

The Dojo Build System

  • 11,981 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,981
On Slideshare
11,745
From Embeds
236
Number of Embeds
9

Actions

Shares
Downloads
115
Comments
0
Likes
5

Embeds 236

http://disole.wordpress.com 118
http://www.slideshare.net 71
http://ecp-alpha.cisco.com 16
http://blog.uxebu.com 15
http://hub.uxebu.com 6
http://ignar.name 4
http://blog.ignar.name 2
http://uxebo.com 2
http://uxebu.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The Dojo Build System Tobias von Klipstein - uxebu Ltd. klipstein@uxebu.com
  • 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. We need? • Dojo source release • Java 1.5 (recommended) for running Rhino • A Dojo application, we want to optimize
  • 4. Dojo Source Release • dojo (Base / Core) • dijit • dojox • util (Rhino / Shrinksafe)
  • 5. Our App
  • 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. GET index.html index.html @import style.css style.css Client Webserver <script src=“dojo.js“></script> Optimized Page Load dojo.js
  • 8. Build Profile (1) • like ant‘s build.xml or Makefiles • consists of • layers • modules • util/buildscripts/profiles/<profile name>.profile.js
  • 9. Build Profile (2) The simplest build profile ¶
  • 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. Doing a Build • cd util/buildscripts • build.sh [or .bat] profile=<profile name> action=release + [more options]
  • 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. build.sh [options] (2) • loader [default or xdomain] • scopeDjConfig
  • 14. build.sh [options] (3) • cssOptimize (comments or comments.keepLines) • optimize (shrinksafe / shrinksafe.keepLines / packer) • layerOptimize [default: shrinksafe] • mini [default: false]
  • 15. Shrinksafe (1) • removing whitespace • removing comments • replacing non-public symbols (argument / variable / function names) with shorter ones
  • 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. Let‘s build ./build.sh profile=beer action=clean,release
  • 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. 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)