dojo is bizarro jquery
DESCRIPTION
My presentation at the Bocoup Loft (Boston, 2010-08-11). A fun diversion to illustrate some of the similarities and differences between jQuery and dojo. Also, a sneak peek of a few features of cujo.js (a web app platform that provides an MVC framework on top of dojo). The code samples and demos are not included in this version. I'm working on a version with more code!TRANSCRIPT
![Page 1: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/1.jpg)
dojo is bizarro jQuery
john hann@unscriptable
lifeIMAGE, Inc.
Thursday, August 26, 2010
![Page 2: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/2.jpg)
“bizarro” video tutorial
Thursday, August 26, 2010
![Page 3: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/3.jpg)
video lessons learned
what does “bizarro” mean?
what can we learn about “bizarro” from the video?
(discussion)
Thursday, August 26, 2010
![Page 4: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/4.jpg)
video lessons learned
Thursday, August 26, 2010
![Page 5: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/5.jpg)
video lessons learned
what makes something bizarro:• it’s similar at first glance but...• nearly opposite once you learn more
Thursday, August 26, 2010
![Page 6: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/6.jpg)
video lessons learned
what makes something bizarro:• it’s similar at first glance but...• nearly opposite once you learn more
lessons learned:• “opposite” is ambiguous• neither is undeniably better / perfect• can’t co-exist (really?)• not all behavior is appropriate to both
Thursday, August 26, 2010
![Page 7: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/7.jpg)
similar at first glance...
height
hair
style
order
Thursday, August 26, 2010
![Page 8: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/8.jpg)
but not quite the same...
Kevin Gene Feldman Jerry George Kramer
neat & pressed relaxed
plaid spots
Thursday, August 26, 2010
![Page 9: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/9.jpg)
...and quite nearly opposite!
friendly aloof
generous stingy
unforgiving accepting
Thursday, August 26, 2010
![Page 10: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/10.jpg)
similar at first glance...
selector engine
dom abstractions
dom manipulation
animations
Thursday, August 26, 2010
![Page 11: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/11.jpg)
Dojo:Zoomer
(jQuery-ish app done in dojo)
http://demos.dojotoolkit.org/demos/cropper/
Thursday, August 26, 2010
![Page 12: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/12.jpg)
dijit.form
(progressive enhancement demo)
image: http://modernmechanics.com/
Thursday, August 26, 2010
![Page 13: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/13.jpg)
but not quite the same...
$(‘*’) dojo.query(‘*’)
$.fn.css() dojo.style()
$(‘<div>’) dojo.create(‘div’)
$.fn.animate() dojo.animate()
3rd-party plugins ±100 “dijits”
Thursday, August 26, 2010
![Page 14: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/14.jpg)
plugd
“loosely based on my favorite bits of jQuery”-- Peter Higgins (@phiggins)
http://github.com/phiggins42/plugd
Thursday, August 26, 2010
![Page 15: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/15.jpg)
plugd
.wrap()
.show(), .hide(), .toggle()
.append(), .appendTo()
.create()
.grab()
.size()
.animate()
.destroy()
.selectable()
.hover(), .hoverClass()
.end()
Thursday, August 26, 2010
![Page 16: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/16.jpg)
plugd
$("div.baz") .appendTo("body") .addClass("bar") .onclick(function(e){ /* … */ });
$("<a href='foo.html'>bar</a>") .appendTo("body") .addClass("baz") .onclick(function(e){ /* … */ });
Thursday, August 26, 2010
![Page 17: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/17.jpg)
but don’t be fooled...the similarity ends here.
Thursday, August 26, 2010
![Page 18: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/18.jpg)
but don’t be fooled...the similarity ends here.
prepare to enterthe bizarro dojo universe!
Thursday, August 26, 2010
![Page 19: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/19.jpg)
up is down
unlike the comfy world of jQuery, in the bizarro world of dojo…
Thursday, August 26, 2010
![Page 20: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/20.jpg)
up is down
unlike the comfy world of jQuery, in the bizarro world of dojo…
dijits inject tiny bits of html into the dom
servers spew javascript & json, not html
“progressive enhancement” is a dirty word
seo and html validation are shunned
Thursday, August 26, 2010
![Page 21: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/21.jpg)
up is down
unlike the comfy world of jQuery, in the bizarro world of dojo…
dijits inject tiny bits of html into the dom
servers spew javascript & json, not html
“progressive enhancement” is a dirty word
seo and html validation are shunned
wut? are we
whack?!?!
Thursday, August 26, 2010
![Page 22: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/22.jpg)
up is down
nah... ‘cuz now we’ve got super powers!
image: http://www.supermanhomepage.com/
Thursday, August 26, 2010
![Page 23: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/23.jpg)
up is down
nah... ‘cuz now we’ve got super powers!
image: http://www.supermanhomepage.com/
modular widgets
centralized ui logic
html5 offline-ready*
ipad & google-pad “native” html5 apps*** sheesh! you gotta do some of the work yourself, slacker!** requires PhoneGap or equivalent
Thursday, August 26, 2010
![Page 24: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/24.jpg)
up is down
progressive enhancement? pffffftt!
that’s for lame-o blogsand marketing sites!
no javascript?no admittance!
ie mobile and wap phones canfind another bizarro worldwhere web 1.0 is still king!
image: http://hildygottlieb.com/
Thursday, August 26, 2010
![Page 25: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/25.jpg)
up is down
screw validation!
it adds no value* sincedijit’s html snippets are already easy to grok and debug:
•tiny & modular,
•unit-testable
* ok ok already! “resistance is futile”. we get it. we also get that validation helps future-proof your html. dojo 1.6 will be valid html5.
image: http://www.themindrobber.co.uk/
Thursday, August 26, 2010
![Page 26: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/26.jpg)
down is up
on the bizarro dojo seas...
one script tag will conjure a salvo of .js downloads
image: http://davelandweb.com/
Thursday, August 26, 2010
![Page 27: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/27.jpg)
down is up
on the bizarro dojo seas...
one script tag will conjure a salvo of .js downloads
or not.
image: http://davelandweb.com/
Thursday, August 26, 2010
![Page 28: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/28.jpg)
down is up
on the bizarro dojo seas...
one script tag will conjure a salvo of .js downloads
or not.
‘cuz a dojo pirate shoots whatever size .js slugs he wishes!
image: http://davelandweb.com/
Thursday, August 26, 2010
![Page 29: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/29.jpg)
dojo.require() imports dependencies
dojo’s build system packages javascript and html
down is up
my.HawtCalndr
dojo.require(‘dojo.date’);
dojo.date
dojo.provide(‘dojo.date’);
Thursday, August 26, 2010
![Page 30: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/30.jpg)
down is up
(show me the codez!)
(dojo.require() and dojo.provide())
image: http://makezine.com/
Thursday, August 26, 2010
![Page 31: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/31.jpg)
“hello” when he leaves
dojo pirates can sayanything they want –and in any language – and not get confused
image: http://www.savagechickens.com/
Thursday, August 26, 2010
![Page 32: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/32.jpg)
“hello” when he leaves
dijit’s html snippets are tokenized andare locale-aware
<div class=“my-hawt-widget”>! <button>${buttonLabel}</button></div>
dojo.requireLocalization();this.buttonLabel = dojo.i18n.getLocalization(! ‘my.HawtWidget’, ‘strings’)[‘buttonLabel’];
Thursday, August 26, 2010
![Page 33: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/33.jpg)
“hello” when he leaves
(more coadz!)
(templates, tokens, and i18n. oh my!)
image: http://modernmechanix.com/
Thursday, August 26, 2010
![Page 34: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/34.jpg)
“good bye” when he arrives
dojo’s bizarro components are loose and ignorant of their own parents!
but this is a goodthing! you wantyour “babies” to beindependent!
Thursday, August 26, 2010
![Page 35: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/35.jpg)
“good bye” when he arrives
dojo.connect() allows loose coupling
dojo.publish() and dojo.subscribe() provide global app events
my.HawtCalndr
onChangeTz: function (e) {dojo.publish(‘timezone_chg’,! [‘PDT’, true]);}
my.HawtWidget
dojo.subscribe(‘timezone_chg’,function (tz, bool) {
/* do something! */ }
);
Thursday, August 26, 2010
![Page 36: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/36.jpg)
“good bye” when he arrives
(back to the javascript!)
(dojo.connect(), dojo.publish(), and dojo.subscribe())
image: http://thedawgpound.com/
Thursday, August 26, 2010
![Page 37: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/37.jpg)
and now for something completely
bizarrocujo.js
web app platform
Thursday, August 26, 2010
![Page 38: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/38.jpg)
what is cujo.js?
web app platform:
•MVC-based framework
•CSS-centric, object-oriented
•based on dojo & dijit
•templates, guidance, examples, training
Thursday, August 26, 2010
![Page 39: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/39.jpg)
why is cujo.js bizarro?
data flows magically between nodes & server
template languages disappear (and so does the id attribute!)
views invoke the holey web trinity, instilling powers to lesser browsers
ancient browsers grok css2.1 and css3*
*dude! not all of css3! I’ve got a life ya know.
Thursday, August 26, 2010
![Page 40: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/40.jpg)
data flows magically
dojo data stores are hawt!
data stores are data models
most handle client-server communication so you don’t
data binding provides the “last mile”
the end result: “live” data
json-rest
couchdb
flickr
csv
xml
atom
etc...
Thursday, August 26, 2010
![Page 41: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/41.jpg)
template languages disappear
why do we even need a {{template language}}?
html5 data-* attrs ftw!
inheritance: data-cujo-override
loops: data-cujo-iter
conditionals: data-cujo-if
“oohtml”, anyone?
image: http://thedawgpound.com/
Thursday, August 26, 2010
![Page 42: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/42.jpg)
views invoke theholey web trinity
oojs + oohtml + oocss => cujo.mvc.View
complete module, yet still overridable
my/HawtWidget.js:
dojo.provide(‘my.HawtWidget’);cujo.requireCss(‘my.HawtWidget’);cujo.requireHtml(‘my.HawtWidget’);...
Thursday, August 26, 2010
![Page 43: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/43.jpg)
ancient browsers grok css2.1 and css3
once you take control of the stylesheets, the sky is the limit!
ever wish this worked in IE6?! .myWidget.selected {}
or this?! .myMenu > .myMenuItem[href=”#”] {}
or this?! transition: left 0.5s bounce 0.25s;
Thursday, August 26, 2010
![Page 44: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/44.jpg)
ancient browsers grok css2.1 and css3
once you take control of the stylesheets, the sky is the limit!
ever wish this worked in IE6?! .myWidget.selected {}
or this?! .myMenu > .myMenuItem[href=”#”] {}
or this?! transition: left 0.5s bounce 0.25s;
Thursday, August 26, 2010
![Page 45: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/45.jpg)
cujo.js in action
(demo and codez!)
Thursday, August 26, 2010
![Page 46: dojo is bizarro jQuery](https://reader038.vdocuments.site/reader038/viewer/2022110118/554dd2c5b4c905c70e8b48e7/html5/thumbnails/46.jpg)
even more bizarro
all things dojo:
http://dojotoolkit.org/http://twitter.com/dojo #dojo channel on freenode
keep up to date with cujo.js:
http://cujojs.com/http://twitter.com/cujojshttp://twitter.com/unscriptable (me)
image: http://modernmechanics.com/
Thursday, August 26, 2010