Dojo is described as the "bizarro" version of jQuery. While they appear similar at first glance, they operate quite differently. Dojo favors a more modular approach where widgets inject HTML into the DOM, servers provide JSON/JavaScript rather than HTML, and progressive enhancement is not a priority. It also has stronger internationalization support and loose coupling between components. Cujo.js takes Dojo's philosophies further with an MVC framework structure.
5. video lessons learned
what makes something bizarro:
• it’s similar at first glance but...
• nearly opposite once you learn more
Thursday, August 26, 2010
6. 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
7. similar at first glance...
height
hair
style
order
Thursday, August 26, 2010
8. but not quite the same...
Kevin Gene Feldman Jerry George Kramer
neat & pressed relaxed
plaid spots
Thursday, August 26, 2010
17. but don’t be fooled...
the similarity ends here.
Thursday, August 26, 2010
18. but don’t be fooled...
the similarity ends here.
the bizarro dojo universe!
prepare to enter
Thursday, August 26, 2010
19. up is down
unlike the comfy world of jQuery, in the
bizarro world of dojo…
Thursday, August 26, 2010
20. 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
21. up is down
unlike the comfy world of jQuery, in the
bizarro world of dojo…
wut? are we
dijits inject tiny bits of html into the dom
servers spew javascript & json, not html
whack?!?!
“progressive enhancement” is a dirty word
seo and html validation are shunned
Thursday, August 26, 2010
22. up is down
nah... ‘cuz now we’ve got super powers!
image: http://www.supermanhomepage.com/
Thursday, August 26, 2010
23. up is down
nah... ‘cuz now we’ve got super powers!
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
image: http://www.supermanhomepage.com/
Thursday, August 26, 2010
24. up is down
progressive enhancement? pffffftt!
that’s for lame-o blogs
and marketing sites!
no javascript?
no admittance!
ie mobile and wap phones can
find another bizarro world
where web 1.0 is still king!
image: http://hildygottlieb.com/
Thursday, August 26, 2010
25. up is down
screw validation!
it adds no value* since
dijit’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
26. 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
27. 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
28. 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
29. down is up
dojo.require() imports dependencies
dojo’s build system packages javascript
and html
my.HawtCalndr dojo.date
dojo.require(‘dojo.date’); dojo.provide(‘dojo.date’);
Thursday, August 26, 2010
30. down is up
(show me the codez!)
(dojo.require() and dojo.provide())
image: http://makezine.com/
Thursday, August 26, 2010
31. “hello” when he leaves
dojo pirates can say
anything they want –
and in any language –
and not get confused
image: http://www.savagechickens.com/
Thursday, August 26, 2010
32. “hello” when he leaves
dijit’s html snippets are tokenized and
are 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
33. “hello” when he leaves
(more coadz!)
(templates, tokens, and i18n. oh my!)
image: http://modernmechanix.com/
Thursday, August 26, 2010
34. “good bye” when he arrives
dojo’s bizarro components are loose and
ignorant of their own parents!
but this is a good
thing! you want
your “babies” to be
independent!
Thursday, August 26, 2010
35. “good bye” when he arrives
dojo.connect() allows loose coupling
dojo.publish() and dojo.subscribe()
provide global app events
my.HawtWidget my.HawtCalndr
dojo.subscribe(‘timezone_chg’, onChangeTz: function (e) {
function (tz, bool) { dojo.publish(‘timezone_chg’,
/* do something! */ ! [‘PDT’, true]);
} }
);
Thursday, August 26, 2010
36. “good bye” when he arrives
(back to the javascript!)
(dojo.connect(), dojo.publish(), and
dojo.subscribe())
image: http://thedawgpound.com/
Thursday, August 26, 2010
37. and now for
something completely
bizarro
cujo.js
web app platform
Thursday, August 26, 2010
38. 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
39. 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
40. data flows magically
dojo data stores are hawt!
json-rest
data stores are data models couchdb
flickr
most handle client-server google
communication so you don’t csv
data binding provides the xml
“last mile” atom
etc...
the end result: “live” data
Thursday, August 26, 2010
41. 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
42. views invoke the
holey 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
43. 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
44. 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
46. 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/cujojs
http://twitter.com/unscriptable (me)
image: http://modernmechanics.com/
Thursday, August 26, 2010