dojo is bizarro jQuery
1 like2,077 views
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.
![“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](https://image.slidesharecdn.com/bocoupdojoisbizarrojquery-100814080042-phpapp01/85/dojo-is-bizarro-jQuery-32-320.jpg)
![“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](https://image.slidesharecdn.com/bocoupdojoisbizarrojquery-100814080042-phpapp01/85/dojo-is-bizarro-jQuery-35-320.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](https://image.slidesharecdn.com/bocoupdojoisbizarrojquery-100814080042-phpapp01/85/dojo-is-bizarro-jQuery-43-320.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](https://image.slidesharecdn.com/bocoupdojoisbizarrojquery-100814080042-phpapp01/85/dojo-is-bizarro-jQuery-44-320.jpg)
dojo is bizarro jQuery
- 1. dojo is bizarro jQuery john hann @unscriptable lifeIMAGE, Inc. Thursday, August 26, 2010
- 2. “bizarro” video tutorial Thursday, August 26, 2010
- 3. video lessons learned what does “bizarro” mean? what can we learn about “bizarro” from the video? (discussion) Thursday, August 26, 2010
- 4. video lessons learned Thursday, August 26, 2010
- 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
- 9. ...and quite nearly opposite! friendly aloof generous stingy unforgiving accepting Thursday, August 26, 2010
- 10. similar at first glance... selector engine dom abstractions dom manipulation animations Thursday, August 26, 2010
- 11. Dojo:Zoomer (jQuery-ish app done in dojo) http://demos.dojotoolkit.org/demos/cropper/ Thursday, August 26, 2010
- 12. dijit.form (progressive enhancement demo) image: http://modernmechanics.com/ Thursday, August 26, 2010
- 13. 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
- 14. plugd “loosely based on my favorite bits of jQuery” -- Peter Higgins (@phiggins) http://github.com/phiggins42/plugd Thursday, August 26, 2010
- 15. plugd .wrap() .show(), .hide(), .toggle() .append(), .appendTo() .create() .grab() .size() .animate() .destroy() .selectable() .hover(), .hoverClass() .end() Thursday, August 26, 2010
- 16. 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
- 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
- 45. cujo.js in action (demo and codez!) 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