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

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


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/hundredpointhttp://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


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


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


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


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.isFF

● dojo.isIE

● dojo.isAIR

● dojo.isOpera

● dojo.isKhtml

● dojo.isWebKit

● dojo.isSafari

● dojo.isChrome

● 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()

<script type="text/javascript"> dojo.extend(MyObj, { sayUpperCase: function(msg){ this.say(msg.toUpperCase()); } });

var obj = new MyObj; obj.sayUpperCase("Hi!");</script>


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


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>


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


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>


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>


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>


DOM Functions

● dojo.place()

<script type="text/javascript"> var node = dojo.byId("someNode"); dojo.place(node, someOtherNode); dojo.place(node, someOtherNode, "before");</script>


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>


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>


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>


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>


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>


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>


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>


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>


Dojo Core


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>


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


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


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


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


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


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

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


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

● 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 */ ]}


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

● 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


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

● Single page apps

● Custom widgets

● Support

● Training

● Web app development

● Support

● Expert advice


Questions?

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

Technology

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