I’ve been using, teaching, and evangelizing about jQuery for years. The library's simplicity is seductive; after a while, it kind of writes itself. So why did I venture into the unknown world of Dojo for a recent project? Find out what I learned about JavaScript code organization, inheritance, dependency management, and more in a whirlwind beginner's tour of a toolkit that answers some of the big questions surrounding JavaScript development.

1. Dojo Confessions
Rebecca Murphey @rmurphey Developer Day 2010, Durham, NC

3. 2007 I
jQuer
y!
“Youʼll wonder why
you ever considered
another library.”
– “Choosing jQuery,” blog.rebeccamurphey.com, December 3, 2007

4. + +

5. 2009

6. Classes & Inheritance

7. Abstract APIs
for Common Tasks

8. “Templating makes your
life so much
${yourStringHere}!”
Templates + Caching
+ String Interning

9. Consistency
across Components

10. Dependency
Management &
Build Tools

11. Backcompat Guarantee

12. Room to Grow

13. B u t I
u e ry!!1 !
jQ
DISCLAIMER: This presentation contains a comparison of toys. In the pursuit of fairness, we have
included only toys that are members of the Toy Hall of Fame. The following slides are not meant to
disparage or celebrate any particular toy in any particular way. No JavaScript libraries have been hurt
in the performance of this presentation. We hope.

14. jQuery

16. Dojo

18. $(function(){
loadImages("interesting");
$("#sidebar h1").click(function(){
setTag(this);
});
$("a#addlist").click(function(){
this.blur();
var tagname = prompt("Enter a tag to search Flickr for photos.","");
if (!tagname) return;
$("div#sidebar")
.append("<h1>"+tagname+"</h1>")
.find("h1:last-child")
.click(function(){
setTag(this);
});
setTag($("div#sidebar h1:last-child"));
});
$("a#removelist").click(function(){
jQuery: Node-focused
this.blur();
if ($("div#sidebar h1.active").text() == "Interesting Photos") return;
$("div#sidebar h1.active").remove();
setTag($("div#sidebar h1:last-child"));
});
});
function loadImages(tag){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+tag
+"&tagmode=any&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
img = new Image();
img.src = item.media.m;

19. dojo.provide('Flickr.SearchTerm');
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require('dojox.data.FlickrRestStore');
dojo.declare('Flickr.SearchTerm', [ dijit._Widget, dijit._Templated ], {
templateString : '<h1>${term}</h1>',
store : new dojox.data.FlickrRestStore(),
constructor : function(config) {
this.term = config.term;
},
postCreate : function() {
// listen for instructions to show the term
d.subscribe('/term/show', this, '_show');
// send instructions to show the term when clicked
this.connect(this.domNode, 'click', function() {
d.publish('/term/show', [ this.term ]);
Dojo: Component-focused
});
},
_show : function(term) {
// we can receive /term/show messages from any SearchTerm.
// look to see if this one is related to this SearchTerm;
// if not, set this SearchTerm as inactive
if (term != this.term) {
this.active = false;
dojo.removeClass(this.domNode, 'active');
return;

20. omg wtf?

21. “It’s just JavaScript.”
– Peter Higgins, Dojo project lead

22. • dflick: evolving flickr tag search fun
• transformers: pub/sub deathmatch

23. I STI
LL
jQuer
y!
Tell me more!

24. • twitterverse example app (github.com/
phiggins42/twitterverse/)
• Dojo: The Definitive Guide (OʼReilly)
• docs.dojocampus.org
• api.dojotoolkit.org
• the code!

25. jQ ue ry
I
EVER !!1!
4

26. • JavaScript MVC (esp. Controller)
• Custom events
• jQuery pub/sub
• pinboard.in/u:rmurphey/t:code-org/

27. Thanks.
www.rebeccamurphey.com
@rmurphey
http://pinboard.in/u:rmurphey/t:dojo/