Dojo - Javascript's Swiss Army Knife (7/15/2009)

JavaScript's Swiss Army Knife
Twin Cities Web Design User Group
July 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?


What is Dojo?

Dojo is a cutting edge,
powerful, open source
JavaScript toolkit.


Why Dojo?


Why Dojo?

Dojo makes creating
rich Internet applications
easier and faster.


Why Dojo?

Licensing
● New BSD License or Academic Free License

● Clean IP

● Contributor License Agreements (CLA)


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/hundredpoint
http://almaer.com/blog/being-open-is-hard-as-we-have-seen-this-week


Why Dojo?
Corporate Backing


Why Dojo?
Large & Active Developer Community
40+ committers worldwide

http://www.flickr.com/photos/dylans/2944089041


Why Dojo?
● It's fast!

http://dante.dojotoolkit.org/taskspeed/report/charts.html

11
/5/
2
11 007
/21
12 /20 - 1.0
/15 07 - .0
1

2008
/ 20
07 .0.1
-1
.0.
2
3/2
6/2
5/1 008
2/2 -
00 1.1.
8- 0
1.1
.1

10
/2/
11 200
/2/ 8
11 20 - 1.
/16 08 - 2.0
12 /200 1.2.
/4/
20 8 - 1 1
2009

08 .
Why Dojo?

- 1 2.2
.2.
3
Active Development

3/3
1/2
00
4/2 9-
9/2 1.3
00
9 - .0
7/1 1.3
5/2 .1
00
9-
1.3
.2

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)


Getting Dojo


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

Dojo Architecture


Dojo's Architecture


Dojo Base


Dojo Base
● 26KB (gzipped)
● Bootstrap
● Host detection (browser, SpiderMonkey, Rhino,
Appcelerator Titanium, AIR)
● Package system
● JavaScript enhancements
● Query, DOM, Ajax, Events, FX


Getting Started

<html>
<head>
<title>Dojo!</title>
<script type="text/javascript"
src="/path/to/dojo.js">
</script>
</head>
<body>
</body>
</html>


XDomain

<html>
<head>
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


djConfig

<html>
<head>
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

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


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")


Browser Detection
● dojo.isMoz ● dojo.isKhtml
● dojo.isFF ● dojo.isWebKit
● dojo.isIE ● dojo.isSafari
● dojo.isAIR ● dojo.isChrome
● dojo.isOpera ● dojo.isQuirks


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()
dojo.extend(MyObj, {
sayUpperCase: function(msg){ this.say(msg.toUpperCase()); }
});

obj.sayUpperCase("Hi!");
</script>


lang
● dojo.isString() ● dojo.mixin()
● dojo.isArray() ● dojo.hitch()
● dojo.isFunction() ● dojo.delegate()
● dojo.isObject() ● dojo.partial()
● dojo.isArrayLike() ● dojo.clone()
● dojo.isAlien() ● dojo.trim()


Cool Stuff
● dojo.mixin()
var obj = { firstName: "chris", lastName: "barber" };
var emp = dojo.mixin({ title: "hacker" }, obj);
</script>

● dojo.hitch()
var foo = dojo.hitch(obj, "say");
foo("Howdy!");
</script>


dojo.query()
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 ● coords ● blur
● splice ● place ● focus
● indexOf ● orphan ● change
● lastIndexOf ● adopt ● click
● every ● query ● error
● some ● filter ● keydown
● attr ● addContent ● keypress
● style ● instantiate ● keyup
● connect ● at ● load
● addClass ● mousedown
● removeClass ● mouseenter
● toggleClass ● mouseleave
● empty ● mousemove
● concat ● mouseout
● map ● mouseover
● forEach ● mouseup
● submit

DOM Functions
● dojo.byId()
<div id="someNode"></div>
var elem = dojo.byId("someNode");
</script>

● dojo.body()
var bodyElem = dojo.body();
</script>


DOM Functions
● dojo.create()
dojo.create("div",
{
id: "someNode",
innerHTML: "hi",
"class": "someCssClass",
style: {
border: "solid 1px red"
}
},
dojo.body()
});
</script>

● dojo.destroy()
dojo.destroy("someNode");
// or
var node = dojo.byId("someNode");
dojo.destroy(node);
</script>


DOM Functions
● dojo.attr()
dojo.attr(node, "id", "someId");
</script>

● dojo.style()
dojo.style(node, "display", "none");

dojo.style(node, {
display: "",
border: "solid 1px red"
});
</script>


DOM Functions
● dojo.place()
dojo.place(node, someOtherNode);
dojo.place(node, someOtherNode, "before");
</script>


Events
● dojo.addOnLoad()
dojo.addOnLoad(function(){
dojo.create("div", { innerHTML:"Page loaded!" }, dojo.body());
});
</script>

● dojo.addOnUnload()
dojo.addOnUnload(function(){
// example of unloading Google Maps API
GUnload();
});
</script>


Events
● dojo.connect()
<a href="http://www.cb1inc.com/" id="link">CB1 Website</a>
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>


Events
● dojo.disconnect()
<a href="http://www.cb1inc.com/" id="link">CB1 Website</a>
var h = dojo.connect(dojo.byId("link"), "onclick", function(evt){
dojo.stopEvent(evt);
console.log("This will only fire once");
dojo.disconnect(h);
});
</script>


Events - Topics
● dojo.subscribe()
var h = dojo.subscribe("myTopic", null, function(msg){
console.log(msg);
});
</script>

● dojo.publish()
dojo.publish("myTopic", ["Hello!"]);
</script>

● dojo.unsubscribe()
dojo.unsubscribe(h);
</script>


Ajax
● dojo.xhr()
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()
dojo.xhrPost({
url: "/some/page",
handleAs: "json", // or "text", "xml", "javascript"
sync: true, // defaults to false
load: function(response, ioArgs) {}
});
</script>


Ajax
● dojo.deferred awesomeness
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>


FX
● dojo.fadeIn(), dojo.fadeOut()
<div id="hello">Hello Dojo!</div>
dojo.fadeIn({
node: "hello",
start: 0,
duration: 2000,
onEnd: function(){
dojo.fadeOut({
node: "hello",
duration: 1000
}).play();
}
}).play();
</script>


FX
● dojo.animateProperty()
<div id="hello"
style="position:absolute;">Hello Dojo!</div>

dojo.animateProperty({
node: "hello",
duration: 2000,
properties: {
left: {
start: 50,
end: 200,
unit: "px"
},
top: {
start: 50,
end: 400,
unit: "px"
}
}
}).play();
</script>


Dojo Core


dojo.parser
● djConfig="parseOnLoad:true"
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>


More Dojo Core
● Unified Data API ● Utilities
● dojo.data ● dojo.string
● Drag n Drop ● dojo.date
● dojo.dnd ● dojo.regexp
● Advanced FX ● I/O Transports
● dojo.fx ● dojo.io.iframe
● Internationalization ● dojo.io.script
● dojo.i18n
● dojo.rpc
● Google Gears
● Browser History
● dojo.gears
● dojo.back
● OpenAjax

Dijit


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)

Simple Widget Example
/js/cb1/SimpleWidget.js
dojo.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>
dojo.require("cb1.SimpleWidget");
</script>
</head>
<body>
<h1>Hi Dojo!</h1>
<div dojoType="cb1.SimpleWidget">
</body>
</html>


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>


Declarative Instantiation
test_CapitalizedTextBox.html
<html>
<head>
<title>Capitalized Example</title>
djConfig="isDebug:true,parseOnLoad:true,modulePaths:{'cb1':'../cb1'}">
</script>
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.


Programatic Instantiation
test_CapitalizedTextBox.html
<html>
<head>
<title>Capitalized Example</title>
djConfig="isDebug:true,modulePaths:{'cb1':'../cb1'}">
</script>
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 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com

Widget Lifecycle
● constructor()
● postMixInProperties()
● buildRendering()
● postCreate()
● startup()


Dijit Layout Widgets
● BorderContainer
● ContentPane
● LinkPane
● TabContainer
● AccordionContainer
● SplitContainer
● StackContainer


Dojox


What is Dojox?
● Place for extra stuff
● Stuff that isn't ready for prime time
● (i.e. dojox.grid)


Tour of Dojox
● dojox.analytics ● dojox.form
● Client monitoring ● Additional form widgets
● dojox.charting ● dojox.fx
● dojox.cometd ● Cool FX
● dojox.data ● dojox.gfx
● Tons of data stores ● Cross-browser vector
graphics (SVG/VML)
● dojox.dtl
● dojox.gfx3d
● Django template library
● dojox.grid
● dojox.embed
● Grid widget
● Embed Flash, QuickTime

Tour of Dojox
● dojox.highlight ● dojox.rpc
● Syntax highlighting ● dojox.secure
● dojox.image ● Sandboxing
● Lightboxes, slideshow, ● dojox.storage
gallery, magnifier, etc ● Persistent client-side
● dojox.io storage
● Additional transports ● dojox.widgets
● dojox.layout ● Additional dijit widgets
● Dijit layout widgets ● dojox.xmpp
● dojox.off ● XMPP client
● Offline support

Util


Util
● Build system
● DOH - Dojo Objective Harness
● Testing framework


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

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


Build Profile
MyProfile.js 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"]
]
}


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">


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");


Advanced Builds
● Running Multiple Versions of Dojo
● scopeDjConfig
– Burn a djConfig into the build
● scopeMap
dependencies = {
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 */ ]
}


Dojo Toolbox Build GUI
● Pretty UI
● Doesn't support ShrinkSafe
● Currently not up-to-date


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


Dojo Management (or what I do)
● build.sh
#!/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

● 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

Resources


Documentation
● API Docs
● http://api.dojotoolkit.org
● Online Docs
● http://docs.dojocampus.org
● Blogs
● http://dojotoolkit.org/rss.xml
● http://dojocampus.org/content/feed


Getting Help
● IRC
● #dojo on irc.freenode.net
● dojo-interest Mailing List
● http://dojotoolkit.org/mailman/listinfo/dojo-interest


Books


Dojo Gatherings
● Dojo Developer Days
● Usually annual
● Usually 2 days (contributor day & community day)
● dojo.beer()
● Worldwide meet ups


@dojo
@dojocampus
@dojobeer


Solution Providers

● Web app development ● Training
● Single page apps ● Web app development
● Custom widgets ● Support
● Support ● Expert advice


Questions?


Dojo - Javascript's Swiss Army Knife (7/15/2009)

Recommended

Recommended

More Related Content

Similar to Dojo - Javascript's Swiss Army Knife (7/15/2009)

Similar to Dojo - Javascript's Swiss Army Knife (7/15/2009) (19)

More from Chris Barber

More from Chris Barber (10)

Recently uploaded

Recently uploaded (20)

Dojo - Javascript's Swiss Army Knife (7/15/2009)