Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

dojo is bizarro jQuery

3,720 views

Published on

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!

Published in: Technology

dojo is bizarro jQuery

  1. 1. dojo is bizarro jQuery john hann @unscriptable lifeIMAGE, Inc. Thursday, August 26, 2010
  2. 2. “bizarro” video tutorial Thursday, August 26, 2010
  3. 3. video lessons learned what does “bizarro” mean? what can we learn about “bizarro” from the video? (discussion) Thursday, August 26, 2010
  4. 4. video lessons learned Thursday, August 26, 2010
  5. 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. 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. 7. similar at first glance... height hair style order Thursday, August 26, 2010
  8. 8. but not quite the same... Kevin Gene Feldman Jerry George Kramer neat & pressed relaxed plaid spots Thursday, August 26, 2010
  9. 9. ...and quite nearly opposite! friendly aloof generous stingy unforgiving accepting Thursday, August 26, 2010
  10. 10. similar at first glance... selector engine dom abstractions dom manipulation animations Thursday, August 26, 2010
  11. 11. Dojo:Zoomer (jQuery-ish app done in dojo) http://demos.dojotoolkit.org/demos/cropper/ Thursday, August 26, 2010
  12. 12. dijit.form (progressive enhancement demo) image: http://modernmechanics.com/ Thursday, August 26, 2010
  13. 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. 14. plugd “loosely based on my favorite bits of jQuery” -- Peter Higgins (@phiggins) http://github.com/phiggins42/plugd Thursday, August 26, 2010
  15. 15. plugd .wrap() .show(), .hide(), .toggle() .append(), .appendTo() .create() .grab() .size() .animate() .destroy() .selectable() .hover(), .hoverClass() .end() Thursday, August 26, 2010
  16. 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. 17. but don’t be fooled... the similarity ends here. Thursday, August 26, 2010
  18. 18. but don’t be fooled... the similarity ends here. the bizarro dojo universe! prepare to enter Thursday, August 26, 2010
  19. 19. up is down unlike the comfy world of jQuery, in the bizarro world of dojo… Thursday, August 26, 2010
  20. 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. 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. 22. up is down nah... ‘cuz now we’ve got super powers! image: http://www.supermanhomepage.com/ Thursday, August 26, 2010
  23. 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. 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. 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. 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. 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. 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. 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. 30. down is up (show me the codez!) (dojo.require() and dojo.provide()) image: http://makezine.com/ Thursday, August 26, 2010
  31. 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. 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. 33. “hello” when he leaves (more coadz!) (templates, tokens, and i18n. oh my!) image: http://modernmechanix.com/ Thursday, August 26, 2010
  34. 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. 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. 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. 37. and now for something completely bizarro cujo.js web app platform Thursday, August 26, 2010
  38. 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. 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. 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. 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. 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. 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. 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. 45. cujo.js in action (demo and codez!) Thursday, August 26, 2010
  46. 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

×