Your SlideShare is downloading. ×
0
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
dojo is bizarro jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

dojo is bizarro jQuery

3,103

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 …

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
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
3,103
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×