Thursday, May 11th, 2006

Ajax Experience Day 2: Alex Russell’s Intro to Dojo

Category: The Ajax Experience

Notes from Alex Russell’s Intro to Dojo at The Ajax Experience.

Background

JS alone doesn’t give you much – it’s defined by the environments it runs in.
“At the mercy” of them.

Dojo provides a single flat interface for these things.

Dojo: Set of layered interfaces. Can use some or all.

Licensing: Can I use Dojo in my apps? YES. Ideally would be in public domain, but legal issues such as disclaimers of warranties. The foundation licenses it under BSD or AFL. AFL even more liberal – essentially, only have to honour copyright, not even include notice.

PACKAGING

Bootstrap and package system. Almost always see “dojo.”. dojo.require etc.

Can say “I need this package”. Other dependencies will then be pulled in automatically, and in correct order.

When pull in “dojo.foo.*” using dojo.require(“name.foo.*”), will try in this order:

http://.../dojo/src/foo/__package__.js
http://.../dojo/src/foo.js
http://.../dojo/src/__package__.js
...

Number of HTTP connections is often a greater issue than how big the files are. So Dojo lets you pull everything into a single file, one connection to download all content.

Builds: Get compressed version for speed and uncompressed version for debugging. These features initally came about from Dojo developers’ own needs. Optional – can

Q: If only want to use the core Dojo package system, how can I minimise the footprint?
A: [Alex demonstrates building it]. End up with bootstrap.js, loader.js, hostenv_browser.js, bootstrap2.js. Compresses to 15kb dojo.js, which gzips to just 5kb!

Q: Making your own packages?
A: Yes. [Alex demonstrates jotspot package and Rhino]

Q: Using Rhino/Spidermonkey
A: Yes. …

Language Utils

Including dojo.lang.isString etc. “false”, “undefined”, “null” in basic Javascript evaluate similarly, so dojo.lang.is* gives you a nice test to determine. Another eg.: Is it array-like or an array? (“arguments” given to function isn’t an actually array – has length, but not push pop etc.)

The handiest dojo.lang packages (Alex’s favourites highlighted): forEach, map, declare, hitch, extend, mixin, setTimeout, delayThese, curry, assert.

[Demo of hitch] The variable “this” is magical – always points to the object that the function is being run as part of. “this” is kind of promiscuous. hitch lets you run a function as part of a particular object (bind it), so it potentially changes the meaning of “this” inside the function.

Event System

“Like crack for web developers”
Runtime AOP.
Similar to hitch syntax. Bind dojo.event.connect

> dojo.event.connect(“before”, foo, “bar”, baz, “thud”);

Now before foo.bar() is called, baz.thud will be called.

Q: In an event system, how do I pass the event object?
A: In standard JS, apart from IE, event is always passed into event handler. In Dojo, it’s always passed in. Still respects standard W3C approach of preventing bubbling etc.

Q: What does “this” refer to?
A: Same as if was connected by hitch.

Q: Can I build cyclical connections?
A: Yes, but bad. You’ll know it due to app hanging. No cycle breaking built in to Dojo right now.

UI Utilities

Packages: io, html, style, dnd, ldf, dom

io: ie. Ajax remoting.

dom: Why doesn’t W3C allow insert at front? That’s the kind of thing in dom.

Remoting

dojo.io.bind() is an abstraction for remoting, not always XHR. bind() lets you swap in behaviour for a particular implementation. Submits forms for you. Handles text encoding (i18n).

ScriptSrcIO package: Brand New.
Can append script element asynchronously. (MM – On-Demand Javascript). Uses JSON-P. Yahoo’s exposing their APIs with JSON. This new package makes it really easy to call them.

“Isn’t an HTML form just WSDL for REST?”

Drag-And-Drop

Not just referencing DOM nodes, but higher-level components.

DragSource, DragObject, DropTarget

Animation and Effects

dojo.lfx.wipeOut(“foo”, 300);

dojo.lfx.fadeOut([“foo”, “bar”, “baz”], 300, dojo.lfx.easeInOut).play();

Q: Could use chaining and “play” concept for *anything* asynchronous, to chain
things together.
A: Based on Mochikit, there’s chaining functionality available. (“?defer” API)

Q: Can run partial animation?
A: Yes, can say “go up to a certain percent”

Widgets

dojo.require(“dojo.widget.Editor2”);

<textarea dojoType=”Editor2″>
</textarea>

Custom Widgets

Declared in markup
Each widget usually has an HTML, CSS, and JS file.
JS file: defines the widgets – points to corresponding HTML and CSS.

Posted by Michael Mahemoff at 11:48 am
6 Comments

+++--
3.7 rating from 25 votes

6 Comments »

Comments feed TrackBack URI

Oh for some real documentation on dojo… what they have now is brutally useless. We’re using it on a project right now and it seems really great, but it’s so hard to figure some stuff out.

Cmon dojo guys…docs!

Comment by Tom — May 12, 2006

I agree, the documentation needs to be improved.

Comment by Joe — May 12, 2006

For example, 99% of the dojo widgets are “undocumented” in the dojo wiki help page. If the want to promote their framework, they need to make it easy for others to use it. I have to browse the source code and learn it myself.

Comment by Joe — May 12, 2006

Lately I played with both Dojo and the Yahoo’s lib.
I have to say, Dojo’s lib seems fenomenal but I agree with Joe.
The docs are really poor. Even have somebody write a few basic tutorials.
Yahoo’s lib is documented super well and it seems to be extremely solid.
I am currently working on a rails project using of course prototype and scriptaculous and I am considering writing parts of it with one of the above library. My application can really benefit from a widget framework. :D
But again Dojo’s docs are non existent and the nightly build tests just don’t cut it. Especially when they don’t work because of when they are in mid build.
So guys anything you can share please do. :D
Diego

Comment by Diego — May 12, 2006

[…] Notes from Alex Russell’s “Dojo In Depth” talk at The Ajax Experience, continuing on from his Intro To Dojo and covering more advanced topics. […]

Pingback by Ajaxian » Ajax Experience Day 2: Alex Russell’s Dojo In Depth — May 12, 2006

[…] Ajax Experience Day 2: Alex Russell’s Intro to Dojo (tags: javascript) […]

Pingback by The Miles Rausch DootDoot Weblog Page Website By Awayken » Blog Archive » links for 2006-05-14 — May 14, 2006

Leave a comment

You must be logged in to post a comment.