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 first glance but...• nearly opposite once you learn more



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


similar at first 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 first 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.

prepare to enterthe bizarro dojo universe!


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


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


up is down

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

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


http://www.supermanhomepage.com


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




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/


http://hildygottlieb.com

http://hildygottlieb.com

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/


http://www.themindrobber.co.uk

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



or not.





down is up



or not.

‘cuz a dojo pirate shoots whatever size .js slugs he wishes!





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


down is up

(show me the codez!)

(dojo.require() and dojo.provide())

image: http://makezine.com/


http://simplecomplexity.net

http://simplecomplexity.net

“hello” when he leaves

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

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





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



(more coadz!)

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

image: http://modernmechanix.com/


http://thedawgpound.com


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



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! */ }

);



(back to the javascript!)

(dojo.connect(), dojo.publish(), and dojo.subscribe())

image: http://thedawgpound.com/




and now for something completely

bizarrocujo.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 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.


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

google

csv

xml

atom

etc...


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


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/cujojshttp://twitter.com/unscriptable (me)

image: http://modernmechanics.com/


http://twitter.com/cujojs

http://dojotoolkit.org

http://dojotoolkit.org

http://twitter.com/dojo

http://twitter.com/dojo

http://getcujo.com

http://getcujo.com




dojo is bizarro jQuery

Technology

Transcript of dojo is bizarro jQuery