dojo is bizarro jQuery

dojo is bizarro jQuery
john hann
@unscriptable
lifeIMAGE, Inc.

Thursday, August 26, 2010

“bizarro” video tutorial


video lessons learned

what does “bizarro” mean?

what can we learn about “bizarro” from
the video?

(discussion)


what makes something bizarro:
• it’s similar at ﬁrst glance but...
• nearly opposite once you learn more


what makes something bizarro:
• it’s similar at ﬁrst 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


similar at ﬁrst glance...
height

hair

style

order


but not quite the same...

Kevin Gene Feldman Jerry George Kramer

neat & pressed relaxed

plaid spots


...and quite nearly
opposite!

friendly aloof

generous stingy

unforgiving accepting


similar at ﬁrst glance...
selector engine

dom abstractions

dom manipulation

animations


Dojo:Zoomer
(jQuery-ish app done in dojo)
http://demos.dojotoolkit.org/demos/cropper/


dijit.form
(progressive enhancement demo)

image: http://modernmechanics.com/


but not quite the same...

$(‘*’) dojo.query(‘*’)
$.fn.css() dojo.style()
$(‘<div>’) dojo.create(‘div’)
$.fn.animate() dojo.animate()
3rd-party plugins ±100 “dijits”


plugd
“loosely based on my favorite bits of jQuery”
-- Peter Higgins (@phiggins)
http://github.com/phiggins42/plugd


plugd
.wrap()
.show(), .hide(), .toggle()
.append(), .appendTo()
.create()
.grab()
.size()
.animate()
.destroy()
.selectable()
.hover(), .hoverClass()
.end()


plugd
$("div.baz")
.appendTo("body")
.addClass("bar")
.onclick(function(e){ /* … */ })
;

$("<a href='foo.html'>bar</a>")
.appendTo("body")
.addClass("baz")
.onclick(function(e){ /* … */ })
;


but don’t be fooled...
the similarity ends here.


but don’t be fooled...
the similarity ends here.
the bizarro dojo universe!
prepare to enter


up is down
unlike the comfy world of jQuery, in the
bizarro world of dojo…


up is down

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


up is down

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


up is down
nah... ‘cuz now we’ve got super powers!

image: http://www.supermanhomepage.com/


up is down
nah... ‘cuz now we’ve got super powers!

modular widgets

centralized ui logic

html5 ofﬂine-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/


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
ﬁnd another bizarro world
where web 1.0 is still king!

image: http://hildygottlieb.com/


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/


down is up
on the bizarro dojo seas...
one script tag will
conjure a salvo of .js
downloads

image: http://davelandweb.com/


down is up
one script tag will
downloads
or not.



down is up
one script tag will
downloads
or not.
‘cuz a dojo pirate shoots
whatever size .js
slugs he wishes!


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’);


down is up
(show me the codez!)
(dojo.require() and dojo.provide())

image: http://makezine.com/


“hello” when he leaves

dojo pirates can say
anything they want –
and in any language –
and not get confused

image: http://www.savagechickens.com/


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’];


(more coadz!)
(templates, tokens, and i18n. oh my!)

image: http://modernmechanix.com/

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


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]);
} }
);


(back to the javascript!)
(dojo.connect(), dojo.publish(), and
dojo.subscribe())

image: http://thedawgpound.com/

and now for
something completely
bizarro
cujo.js
web app platform


what is cujo.js?
web app platform:

•MVC-based framework
•CSS-centric, object-oriented
•based on dojo & dijit
•templates, guidance, examples, training


why is cujo.js bizarro?
data ﬂows 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.


data ﬂows magically
dojo data stores are hawt!
json-rest
data stores are data models couchdb
ﬂickr
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


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/


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’);
...


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;


cujo.js in action
(demo and codez!)


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/


dojo is bizarro jQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (19)

Similar to dojo is bizarro jQuery

Similar to dojo is bizarro jQuery (16)

Recently uploaded

Recently uploaded (20)

dojo is bizarro jQuery