dojo - javascript's swiss army knife (7/15/2009)
DESCRIPTION
This presentation is discusses the awesome Dojo Javascript Toolkit. It was originally presented 7/15/2009 and the Twin Cities Web Design User Group. Enjoy!TRANSCRIPT
JavaScript's Swiss Army KnifeTwin Cities Web Design User Group
July 15, 2009
Chris BarberCB1, INC.
http://www.cb1inc.com
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
About Me
● Chris Barber
● Software Consultant
● Dojo user for over 3 years
● Dojo committer
● http://www.cb1inc.com
● http://twitter.com/cb1kenobi
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
What is Dojo?
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
What is Dojo?
Dojo is a cutting edge,
powerful, open source
JavaScript toolkit.
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Why Dojo?
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Why Dojo?
Dojo makes creating
rich Internet applications
easier and faster.
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Why Dojo?
Licensing
● New BSD License or Academic Free License
● Clean IP
● Contributor License Agreements (CLA)
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Why Dojo?
100-point Open Source● 0 points: Say you are open● 10 points: Choose an OSI license (BSD, AFL, Apache, MIT, etc.)● 20 points: Define the governance of the code
● Does one company hold all of the cards? (No)
● Can others participate? (Yes)
● For code, who participates? (Committers and contributors)
● Can anyone patch? (Yes, with a CLA)
● Can you, and if so how do you become a committer? (Yes, follow instructions for contributing patches and getting involved)
● At the core: How are decisions made (In the Open)
● 30 points: A reference implementation under an open source license● 40 points: Where does the IP stand? (Clean, open, with CLAs). Did you donate it to a
foundation? (Yes)
http://dojofoundation.org/about/hundredpointhttp://almaer.com/blog/being-open-is-hard-as-we-have-seen-this-week
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Why Dojo?
Corporate Backing
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Why Dojo?
Large & Active Developer Community
40+ committers worldwide
http://www.flickr.com/photos/dylans/2944089041
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Why Dojo?
● It's fast!
http://dante.dojotoolkit.org/taskspeed/report/charts.html
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Why Dojo?
2008 2009
11/5
/200
7 - 1
.0.0
11/2
1/20
07 -
1.0.
1
12/1
5/20
07 -
1.0.
23/
26/2
008
- 1.1
.0
5/12
/200
8 - 1
.1.1
10/2
/200
8 - 1
.2.0
11/2
/200
8 - 1
.2.1
11/1
6/20
08 -
1.2.
2
12/4
/200
8 - 1
.2.3
3/31
/200
9 - 1
.3.0
4/29
/200
9 - 1
.3.1
7/15
/200
9 - 1
.3.2
Active Development
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Why Dojo?
Cutting Edge
● Support for latest browsers (IE8, Safari 4, FF3.5)
● Mobile friendly (iPhone, G1)
● cometd
● OAuth
● XMPP
● 2D/3D GFX
● Namespaced (won't conflict with other libraries)
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Getting Dojo
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Getting Dojo
● Download● http://download.dojotoolkit.org
● Subversion● Releases
– svn co http://svn.dojotoolkit.org/src/tags/release-1.3.2
● Trunk– svn co http://svn.dojotoolkit.org/src/view/anon/all/trunk
● Bazaar● bzr branch lp:dojo
● Git● git://github.com/dojo/dojo.git
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dojo Architecture
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dojo's Architecture
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dojo Base
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dojo Base
● 26KB (gzipped)
● Bootstrap
● Host detection (browser, SpiderMonkey, Rhino, Appcelerator Titanium, AIR)
● Package system
● JavaScript enhancements
● Query, DOM, Ajax, Events, FX
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Getting Started
<html> <head> <title>Dojo!</title> <script type="text/javascript" src="/path/to/dojo.js"> </script> </head> <body> </body></html>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
XDomain
<html> <head> <title>Dojo!</title> <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.3.1/dojo/dojo.xd.js"> </script> </head> <body> </body></html>
Or use http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
djConfig
<html> <head> <title>Dojo!</title> <script type="text/javascript" src="/path/to/dojo.js" djConfig="isDebug:true,parseOnLoad:true"> </script> </head> <body> </body></html>
● debugAtAllCosts: true/false● locale: 'ja-jp'● extraLocale: 'zn-ch'● baseUrl: 'http://www.domain.com/path/to/dojotoolkit'● modulePaths: {'cb1','/js/cb1'}● afterOnLoad: true/false● addOnLoad: function/array● useCustomLogger: anything != false● require: ['dojo.fx', 'dojo.string']● defaultDuration: 200 // int milliseconds
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
djConfig.isDebug
● Uses Firebug if installed, otherwise includes Firebug Lite
● console.*()● assert, count, debug, dir, dirxml, error, group, groupEnd,
info, log, profile, profileEnd, time, timeEnd, trace, warn
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Package System
● dojo.require("dojo.fx")● Downloads /path/to/dojotoolkit/dojo/fx.js
● dojo.registerModulePath("cb1", "/js/cb1")
● dojo.require("cb1.module")● Downloads /js/cb1/module.js
● dojo.require("blah.module")● 404 Error: /path/to/dojotoolkit/some/module.js
● dojo.provide("cb1.module")
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Browser Detection
● dojo.isMoz
● dojo.isFF
● dojo.isIE
● dojo.isAIR
● dojo.isOpera
● dojo.isKhtml
● dojo.isWebKit
● dojo.isSafari
● dojo.isChrome
● dojo.isQuirks
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Classes and Inheritance
● dojo.declare()
<script type="text/javascript"> dojo.declare("MyObj", null, { say: function(msg){ console.log(msg); } });
var obj = new MyObj; obj.say("Hi!");</script>
● dojo.extend()
<script type="text/javascript"> dojo.extend(MyObj, { sayUpperCase: function(msg){ this.say(msg.toUpperCase()); } });
var obj = new MyObj; obj.sayUpperCase("Hi!");</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
lang
● dojo.isString()
● dojo.isArray()
● dojo.isFunction()
● dojo.isObject()
● dojo.isArrayLike()
● dojo.isAlien()
● dojo.mixin()
● dojo.hitch()
● dojo.delegate()
● dojo.partial()
● dojo.clone()
● dojo.trim()
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Cool Stuff
● dojo.mixin()
<script type="text/javascript"> var obj = { firstName: "chris", lastName: "barber" }; var emp = dojo.mixin({ title: "hacker" }, obj);</script>
● dojo.hitch()
<script type="text/javascript"> var obj = new MyObj; var foo = dojo.hitch(obj, "say"); foo("Howdy!");</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
dojo.query()
<script type="text/javascript"> var nodes = dojo.query("li"); // can use CSS3 selectors
dojo.query("a").forEach(function(n){ n.innerHTML += "!!"; });
dojo.query("div").style({ padding:"1px", margin:"0px" });</script>
● slice● splice● indexOf● lastIndexOf● every● some● attr● style● connect● addClass● removeClass● toggleClass● empty● concat● map● forEach
● blur● focus● change● click● error● keydown● keypress● keyup● load● mousedown● mouseenter● mouseleave● mousemove● mouseout● mouseover● mouseup● submit
● coords● place● orphan● adopt● query● filter● addContent● instantiate● at
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
DOM Functions
● dojo.byId()
<div id="someNode"></div><script type="text/javascript"> var elem = dojo.byId("someNode");</script>
● dojo.body()
<script type="text/javascript"> var bodyElem = dojo.body();</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
DOM Functions
● dojo.create()<script type="text/javascript"> dojo.create("div", { id: "someNode", innerHTML: "hi", "class": "someCssClass", style: { border: "solid 1px red" } }, dojo.body() });</script>
● dojo.destroy()<script type="text/javascript"> dojo.destroy("someNode"); // or var node = dojo.byId("someNode"); dojo.destroy(node);</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
DOM Functions
● dojo.attr()
<script type="text/javascript"> var node = dojo.byId("someNode"); dojo.attr(node, "id", "someId");</script>
● dojo.style()
<script type="text/javascript"> dojo.style(node, "display", "none");
dojo.style(node, { display: "", border: "solid 1px red" });</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
DOM Functions
● dojo.place()
<script type="text/javascript"> var node = dojo.byId("someNode"); dojo.place(node, someOtherNode); dojo.place(node, someOtherNode, "before");</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Events
● dojo.addOnLoad()
<script type="text/javascript"> dojo.addOnLoad(function(){ dojo.create("div", { innerHTML:"Page loaded!" }, dojo.body()); });</script>
● dojo.addOnUnload()
<script type="text/javascript"> dojo.addOnUnload(function(){ // example of unloading Google Maps API GUnload(); });</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Events
● dojo.connect()
<a href="http://www.cb1inc.com/" id="link">CB1 Website</a><script type="text/javascript"> dojo.connect(dojo.byId("link"), "onclick", function(evt){ dojo.stopEvent(evt); console.log("You clicked the link!"); });
function foo(){ console.log("Hi from foo!"); } foo(); // outputs "Hi from foo!"
dojo.connect("foo", function(){ console.log("Foo was called!"); }); foo(); // outputs "Hi from foo!" and "Foo was called!"</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Events
● dojo.disconnect()
<a href="http://www.cb1inc.com/" id="link">CB1 Website</a><script type="text/javascript"> var h = dojo.connect(dojo.byId("link"), "onclick", function(evt){ dojo.stopEvent(evt); console.log("This will only fire once"); dojo.disconnect(h); });</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Events - Topics
● dojo.subscribe()
<script type="text/javascript"> var h = dojo.subscribe("myTopic", null, function(msg){ console.log(msg); });</script>
● dojo.publish()
<script type="text/javascript"> dojo.publish("myTopic", ["Hello!"]);</script>
● dojo.unsubscribe()
<script type="text/javascript"> dojo.unsubscribe(h);</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Ajax
● dojo.xhr()<script type="text/javascript"> dojo.xhr({ method: "head", // or "get", "post", "put", "delete" url: "/some/page", load: function(response, ioArgs) {}, error: function(response, ioArgs) {} });</script>
● dojo.xhrGet()● dojo.xhrPost()<script type="text/javascript"> dojo.xhrPost({ url: "/some/page", handleAs: "json", // or "text", "xml", "javascript" sync: true, // defaults to false load: function(response, ioArgs) {} });</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Ajax
● dojo.deferred awesomeness<script type="text/javascript"> var deferred = dojo.xhrPost({ url: "/some/page", load: function(response, ioArgs) {}, error: function(response, ioArgs) {} });
deferred.addCallback(function(response, ioArgs){}); deferred.addErrback(function(response, ioArgs){}); deferred.addBoth(function(response, ioArgs){});</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
FX
● dojo.fadeIn(), dojo.fadeOut()<div id="hello">Hello Dojo!</div><script type="text/javascript"> dojo.fadeIn({ node: "hello", start: 0, duration: 2000, onEnd: function(){ dojo.fadeOut({ node: "hello", duration: 1000 }).play(); } }).play();</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
FX
● dojo.animateProperty()<div id="hello" style="position:absolute;">Hello Dojo!</div>
<script type="text/javascript"> dojo.animateProperty({ node: "hello", duration: 2000, properties: { left: { start: 50, end: 200, unit: "px" }, top: { start: 50, end: 400, unit: "px" } } }).play();</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dojo Core
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
dojo.parser
● djConfig="parseOnLoad:true"
<script type="text/javascript"> dojo.require("dojo.parser"); dojo.declare("cb1.awesome", null, { constructor: function(params, node){ console.debug(params); console.debug(node);
node.innerHTML = "Hello!"; } });</script>
<div dojoType="cb1.awesome"></div>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
More Dojo Core
● Unified Data API● dojo.data
● Drag n Drop● dojo.dnd
● Advanced FX● dojo.fx
● Internationalization● dojo.i18n
● Google Gears● dojo.gears
● Utilities● dojo.string● dojo.date● dojo.regexp
● I/O Transports● dojo.io.iframe● dojo.io.script● dojo.rpc
● Browser History● dojo.back
● OpenAjax
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dijit
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
What is Dijit?
● Dojo's widget system
● Huge library of existing widgets● Form elements
– Buttons, drop downs, input fields, etc
● Layout widgets– Content pane, accordions, tab container, stack container, etc
● Rich experience widgets– Tree, progress bar, dialog, tooltip, menu, rich text editor, etc
● Accessibility (a11y)
● Templated - externalized HTML templates
● Themes (tundra, soria, nihilo, noir)
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Simple Widget Example
/js/cb1/SimpleWidget.jsdojo.provide("cb1.SimpleWidget");dojo.require("dijit._Widget");
dojo.declare("cb1.SimpleWidget", dijit._Widget, { postCreate: function(){ this.domNode.innerHTML = "Hello Dojo!"; }});
test_Simple.html<html><head> <title>Simple Widget Example</title> <script type="text/javascript" src="/release-1.3.2/dojo/dojo.js" djConfig="isDebug:true,parseOnLoad:true,modulePaths:{'cb1':'../cb1'}"> </script> <script type="text/javascript"> dojo.require("cb1.SimpleWidget"); </script></head><body> <h1>Hi Dojo!</h1> <div dojoType="cb1.SimpleWidget"></body></html>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Templated Example
/js/cb1/CapitalizedTextBox.js
dojo.provide("cb1.CapitalizedTextBox");dojo.require("dijit._Widget");dojo.require("dijit._Templated");
dojo.declare("cb1.CapitalizedTextBox", [dijit._Widget, dijit._Templated], { templatePath: dojo.moduleUrl("cb1", "templates/CapitalizedTextBox.html"),
_onKeyUp:function(){ this.textBox.value = this.textBox.value.toUpperCase(); }});
/js/cb1/templates/CapitalizedTextBox.html
<div> <input type="text" dojoAttachPoint="textBox" dojoAttachEvent="onkeyup:_onKeyUp"></div>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Declarative Instantiation
test_CapitalizedTextBox.html
<html><head> <title>Capitalized Example</title> <script type="text/javascript" src="/release-1.3.2/dojo/dojo.js" djConfig="isDebug:true,parseOnLoad:true,modulePaths:{'cb1':'../cb1'}"> </script> <script type="text/javascript"> dojo.require("cb1.CapitalizedTextBox"); </script></head><body> <h1>Hi Dojo!</h1>
<input dojoType="cb1.CapitalizedTextBox"></body></html>
Note: input field is still usable if JavaScript is disabled.
Twin Cities Web Design User Group | 7 .15 .2009 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
Programatic Instantiation
test_CapitalizedTextBox.html
<html><head> <title>Capitalized Example</title> <script type="text/javascript" src="/release-1.3.2/dojo/dojo.js" djConfig="isDebug:true,modulePaths:{'cb1':'../cb1'}"> </script> <script type="text/javascript"> dojo.require("cb1.CapitalizedTextBox"); dojo.addOnLoad(function(){ new cb1.CapitalizedTextBox({ /* params */ }, "myField"); }); </script></head><body> <h1>Hi Dojo!</h1>
<input id="myField"></body></html>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Widget Lifecycle
● constructor()
● postMixInProperties()
● buildRendering()
● postCreate()
● startup()
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dijit Layout Widgets
● BorderContainer
● ContentPane
● LinkPane
● TabContainer
● AccordionContainer
● SplitContainer
● StackContainer
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dojox
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
What is Dojox?
● Place for extra stuff
● Stuff that isn't ready for prime time● (i.e. dojox.grid)
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Tour of Dojox
● dojox.analytics● Client monitoring
● dojox.charting
● dojox.cometd
● dojox.data● Tons of data stores
● dojox.dtl● Django template library
● dojox.embed● Embed Flash, QuickTime
● dojox.form● Additional form widgets
● dojox.fx● Cool FX
● dojox.gfx● Cross-browser vector
graphics (SVG/VML)
● dojox.gfx3d
● dojox.grid● Grid widget
Twin Cities Web Design User Group | 7 .15 .2009 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
Tour of Dojox
● dojox.highlight● Syntax highlighting
● dojox.image● Lightboxes, slideshow,
gallery, magnifier, etc
● dojox.io● Additional transports
● dojox.layout● Dijit layout widgets
● dojox.off● Offline support
● dojox.rpc
● dojox.secure● Sandboxing
● dojox.storage● Persistent client-side
storage
● dojox.widgets● Additional dijit widgets
● dojox.xmpp● XMPP client
Twin Cities Web Design User Group | 7 .15 .2009 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
Util
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Util
● Build system
● DOH - Dojo Objective Harness● Testing framework
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Build System
● Reduce number of files sent over the wire
● Reduce JavaScript file sizes
● Profiles● Layers
● Build script● Executes Java, Rhino
● Compiles modules into layer .js files
● Strips whitespace, comments, console.*(), etc
● Minification (i.e. "var something = 123;" becomes "var _0=123;"
● Inlines widget HTML templates & @import CSS
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Build System
● Build script in /util/buildscripts● build.sh (GNU/Linux, MacOSX, Solaris, Unix)● build.bat (Windows)
● Pre-defined profiles in /util/buildscripts/profiles● base● cometd● demos-all● dtkapi● fx● layers● offline● rhino● sql● standard● standardCustomBase● storage
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Build Profile
dependencies = { stripConsole: "normal", version: "My custom Dojo 1.3.2 build", optimize: "shrinksafe", cssOptimize: "comments", copyTest: false,
layers: [ { name: "dojo.js", dependencies: [ "dojo.parser", "dojo.fx" ] }, { name: "../../cb1/common.js", resourceName: "cb1.common", dependencies: [ "dijit.form.Button", "cb1.someModule" ] } ],
prefixes: [ ["dijit", "../dijit"], ["dojox", "../dojox"], ["cb1", "../cb1"] ]}
MyProfile.js
Twin Cities Web Design User Group | 7 .15 .2009 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
Running a Build
cd release-1.3.2/util/buildscripts./build.sh profileFile=/path/to/MyProfile.js action=clean,release \ releaseDir=../../.. releaseName=mybuild
● Creates a directory next to release-1.3.2 called "mybuild"
● <script src="/mybuild/dojo/dojo.js">
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Advanced Builds
● customBase (6KB dojo.js)
● Conditional exclusions
//>>excludeStart("webkitMobile", kwArgs.webkitMobile);
dojo.create("div", { innerHTML: "This won't appear on an iPhone!"}, dojo.body());
//>>excludeEnd("webkitMobile");
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Advanced Builds
● Running Multiple Versions of Dojo● scopeDjConfig
– Burn a djConfig into the build
● scopeMapdependencies = { stripConsole: “normal", version: “My custom Dojo 1.3.2 build", optimize: “shrinksafe", cssOptimize: “comments", copyTest: false,
scopeDjConfig: { isDebug:true, parseOnLoad:true }, scopeMap: [ [“dojo", “mydojo"], [“dijit", “mydijit"], [“dojox", “mydojox"], ],
layers: [ /* snip */ ],
prefixes: [ /* snip */ ]}
Twin Cities Web Design User Group | 7 .15 .2009 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
Dojo Toolbox Build GUI
● Pretty UI● Doesn't support ShrinkSafe● Currently not up-to-date
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dojo Management (or what I do)
● Put Dojo in your version control repo (or externally reference)● Don't put builds into the repo
● Directory Structure:/myproject /dojo-build build.sh build.profile.js /public /js /cb1 /dojo-1.3.2 /dojo /dijit /dojox /util /js-build Created by the build /cb1 /dojo-1.3.2 /dojo /dijit /dojox index.html
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dojo Management (or what I do)
● build.sh
● Run build.sh after doing a pull/checkout/update
● Consider multiple scripts/profiles● build-frontend.sh & frontend.profile.js● build-backend.sh & backend.profile.js● build-dev.sh & dev.profile.js
#!/bin/sh
cd ../public/js/dojo-1.3.2/util/buildscripts
./build.sh profileFile=../../../../../dojo-build/build.profile.js \ action=clean,release releaseDir=../../../../ releaseName=js-build
cd ../../../../../dojo-build
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Resources
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Documentation
● API Docs● http://api.dojotoolkit.org
● Online Docs● http://docs.dojocampus.org
● Blogs● http://dojotoolkit.org/rss.xml ● http://dojocampus.org/content/feed
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Getting Help
● IRC● #dojo on irc.freenode.net
● dojo-interest Mailing List● http://dojotoolkit.org/mailman/listinfo/dojo-interest
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Books
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Dojo Gatherings
● Dojo Developer Days● Usually annual● Usually 2 days (contributor day & community day)
● dojo.beer()● Worldwide meet ups
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
@dojo
@dojocampus
@dojobeer
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Solution Providers
● Web app development
● Single page apps
● Custom widgets
● Support
● Training
● Web app development
● Support
● Expert advice
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
Questions?