Your SlideShare is downloading. ×
Dojo - Javascript's Swiss Army Knife (7/15/2009)
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 - Javascript's Swiss Army Knife (7/15/2009)

14,734

Published on

This presentation is discusses the awesome Dojo Javascript Toolkit. It was originally presented 7/15/2009 and the Twin Cities Web Design User Group. Enjoy!

This presentation is discusses the awesome Dojo Javascript Toolkit. It was originally presented 7/15/2009 and the Twin Cities Web Design User Group. Enjoy!

Published in: Technology, Business
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,734
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
485
Comments
0
Likes
16
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. JavaScript's Swiss Army Knife Twin Cities Web Design User Group July 15, 2009 Chris Barber CB1, INC. http://www.cb1inc.com
  • 2. About Me ● Chris Barber ● Software Consultant ● Dojo user for over 3 years ● Dojo committer ● http://www.cb1inc.com ● http://twitter.com/cb1kenobi Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 3. What is Dojo? Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 4. What is Dojo? Dojo is a cutting edge, powerful, open source JavaScript toolkit. Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 5. Why Dojo? Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 6. Why Dojo? Dojo makes creating rich Internet applications easier and faster. Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 7. Why Dojo? Licensing ● New BSD License or Academic Free License ● Clean IP ● Contributor License Agreements (CLA) Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 8. Why Dojo? 100-point Open Source ● 0 points: Say you are open ● 10 points: Choose an OSI license (BSD, AFL, Apache, MIT, etc.) ● 20 points: Define the governance of the code ● Does one company hold all of the cards? (No) ● Can others participate? (Yes) ● For code, who participates? (Committers and contributors) ● Can anyone patch? (Yes, with a CLA) ● Can you, and if so how do you become a committer? (Yes, follow instructions for contributing patches and getting involved) ● At the core: How are decisions made (In the Open) ● 30 points: A reference implementation under an open source license ● 40 points: Where does the IP stand? (Clean, open, with CLAs). Did you donate it to a foundation? (Yes) http://dojofoundation.org/about/hundredpoint http://almaer.com/blog/being-open-is-hard-as-we-have-seen-this-week Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 9. Why Dojo? Corporate Backing Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 10. Why Dojo? Large & Active Developer Community 40+ committers worldwide http://www.flickr.com/photos/dylans/2944089041 Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 11. Why Dojo? ● It's fast! http://dante.dojotoolkit.org/taskspeed/report/charts.html Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 12. 11 /5/ 2 11 007 /21 12 /20 - 1.0 /15 07 - .0 1 2008 / 20 07 .0.1 -1 .0. 2 3/2 6/2 5/1 008 2/2 - 00 1.1. 8- 0 1.1 .1 10 /2/ 11 200 /2/ 8 11 20 - 1. /16 08 - 2.0 12 /200 1.2. /4/ 20 8 - 1 1 2009 08 . Why Dojo? - 1 2.2 .2. 3 Active Development 3/3 1/2 00 4/2 9- 9/2 1.3 00 9 - .0 7/1 1.3 5/2 .1 00 9- 1.3 .2 Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 13. Why Dojo? Cutting Edge ● Support for latest browsers (IE8, Safari 4, FF3.5) ● Mobile friendly (iPhone, G1) ● cometd ● OAuth ● XMPP ● 2D/3D GFX ● Namespaced (won't conflict with other libraries) Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 14. Getting Dojo Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 15. Getting Dojo ● Download ● http://download.dojotoolkit.org ● Subversion ● Releases – svn co http://svn.dojotoolkit.org/src/tags/release-1.3.2 ● Trunk – svn co http://svn.dojotoolkit.org/src/view/anon/all/trunk ● Bazaar ● bzr branch lp:dojo ● Git ● git://github.com/dojo/dojo.git Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 16. Dojo Architecture Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 17. Dojo's Architecture Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 18. Dojo Base Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 19. Dojo Base ● 26KB (gzipped) ● Bootstrap ● Host detection (browser, SpiderMonkey, Rhino, Appcelerator Titanium, AIR) ● Package system ● JavaScript enhancements ● Query, DOM, Ajax, Events, FX Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 20. Getting Started <html> <head> <title>Dojo!</title> <script type="text/javascript" src="/path/to/dojo.js"> </script> </head> <body> </body> </html> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 21. XDomain <html> <head> <title>Dojo!</title> <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.3.1/dojo/dojo.xd.js"> </script> </head> <body> </body> </html> Or use http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 22. djConfig <html> <head> <title>Dojo!</title> <script type="text/javascript" src="/path/to/dojo.js" djConfig="isDebug:true,parseOnLoad:true"> </script> </head> <body> </body> </html> ● debugAtAllCosts: true/false ● locale: 'ja-jp' ● extraLocale: 'zn-ch' ● baseUrl: 'http://www.domain.com/path/to/dojotoolkit' ● modulePaths: {'cb1','/js/cb1'} ● afterOnLoad: true/false ● addOnLoad: function/array ● useCustomLogger: anything != false ● require: ['dojo.fx', 'dojo.string'] ● defaultDuration: 200 // int milliseconds Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 23. djConfig.isDebug ● Uses Firebug if installed, otherwise includes Firebug Lite ● console.*() ● assert, count, debug, dir, dirxml, error, group, groupEnd, info, log, profile, profileEnd, time, timeEnd, trace, warn Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 24. Package System ● dojo.require("dojo.fx") ● Downloads /path/to/dojotoolkit/dojo/fx.js ● dojo.registerModulePath("cb1", "/js/cb1") ● dojo.require("cb1.module") ● Downloads /js/cb1/module.js ● dojo.require("blah.module") ● 404 Error: /path/to/dojotoolkit/some/module.js ● dojo.provide("cb1.module") Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 25. Browser Detection ● dojo.isMoz ● dojo.isKhtml ● dojo.isFF ● dojo.isWebKit ● dojo.isIE ● dojo.isSafari ● dojo.isAIR ● dojo.isChrome ● dojo.isOpera ● dojo.isQuirks Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 26. Classes and Inheritance ● dojo.declare() <script type="text/javascript"> dojo.declare("MyObj", null, { say: function(msg){ console.log(msg); } }); var obj = new MyObj; obj.say("Hi!"); </script> ● dojo.extend() <script type="text/javascript"> dojo.extend(MyObj, { sayUpperCase: function(msg){ this.say(msg.toUpperCase()); } }); var obj = new MyObj; obj.sayUpperCase("Hi!"); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 27. lang ● dojo.isString() ● dojo.mixin() ● dojo.isArray() ● dojo.hitch() ● dojo.isFunction() ● dojo.delegate() ● dojo.isObject() ● dojo.partial() ● dojo.isArrayLike() ● dojo.clone() ● dojo.isAlien() ● dojo.trim() Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 28. Cool Stuff ● dojo.mixin() <script type="text/javascript"> var obj = { firstName: "chris", lastName: "barber" }; var emp = dojo.mixin({ title: "hacker" }, obj); </script> ● dojo.hitch() <script type="text/javascript"> var obj = new MyObj; var foo = dojo.hitch(obj, "say"); foo("Howdy!"); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 29. dojo.query() <script type="text/javascript"> var nodes = dojo.query("li"); // can use CSS3 selectors dojo.query("a").forEach(function(n){ n.innerHTML += "!!"; }); dojo.query("div").style({ padding:"1px", margin:"0px" }); </script> ● slice ● coords ● blur ● splice ● place ● focus ● indexOf ● orphan ● change ● lastIndexOf ● adopt ● click ● every ● query ● error ● some ● filter ● keydown ● attr ● addContent ● keypress ● style ● instantiate ● keyup ● connect ● at ● load ● addClass ● mousedown ● removeClass ● mouseenter ● toggleClass ● mouseleave ● empty ● mousemove ● concat ● mouseout ● map ● mouseover ● forEach ● mouseup ● submit Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 30. DOM Functions ● dojo.byId() <div id="someNode"></div> <script type="text/javascript"> var elem = dojo.byId("someNode"); </script> ● dojo.body() <script type="text/javascript"> var bodyElem = dojo.body(); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 31. DOM Functions ● dojo.create() <script type="text/javascript"> dojo.create("div", { id: "someNode", innerHTML: "hi", "class": "someCssClass", style: { border: "solid 1px red" } }, dojo.body() }); </script> ● dojo.destroy() <script type="text/javascript"> dojo.destroy("someNode"); // or var node = dojo.byId("someNode"); dojo.destroy(node); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 32. DOM Functions ● dojo.attr() <script type="text/javascript"> var node = dojo.byId("someNode"); dojo.attr(node, "id", "someId"); </script> ● dojo.style() <script type="text/javascript"> dojo.style(node, "display", "none"); dojo.style(node, { display: "", border: "solid 1px red" }); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 33. DOM Functions ● dojo.place() <script type="text/javascript"> var node = dojo.byId("someNode"); dojo.place(node, someOtherNode); dojo.place(node, someOtherNode, "before"); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 34. Events ● dojo.addOnLoad() <script type="text/javascript"> dojo.addOnLoad(function(){ dojo.create("div", { innerHTML:"Page loaded!" }, dojo.body()); }); </script> ● dojo.addOnUnload() <script type="text/javascript"> dojo.addOnUnload(function(){ // example of unloading Google Maps API GUnload(); }); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 35. Events ● dojo.connect() <a href="http://www.cb1inc.com/" id="link">CB1 Website</a> <script type="text/javascript"> dojo.connect(dojo.byId("link"), "onclick", function(evt){ dojo.stopEvent(evt); console.log("You clicked the link!"); }); function foo(){ console.log("Hi from foo!"); } foo(); // outputs "Hi from foo!" dojo.connect("foo", function(){ console.log("Foo was called!"); }); foo(); // outputs "Hi from foo!" and "Foo was called!" </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 36. Events ● dojo.disconnect() <a href="http://www.cb1inc.com/" id="link">CB1 Website</a> <script type="text/javascript"> var h = dojo.connect(dojo.byId("link"), "onclick", function(evt){ dojo.stopEvent(evt); console.log("This will only fire once"); dojo.disconnect(h); }); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 37. Events - Topics ● dojo.subscribe() <script type="text/javascript"> var h = dojo.subscribe("myTopic", null, function(msg){ console.log(msg); }); </script> ● dojo.publish() <script type="text/javascript"> dojo.publish("myTopic", ["Hello!"]); </script> ● dojo.unsubscribe() <script type="text/javascript"> dojo.unsubscribe(h); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 38. Ajax ● dojo.xhr() <script type="text/javascript"> dojo.xhr({ method: "head", // or "get", "post", "put", "delete" url: "/some/page", load: function(response, ioArgs) {}, error: function(response, ioArgs) {} }); </script> ● dojo.xhrGet() ● dojo.xhrPost() <script type="text/javascript"> dojo.xhrPost({ url: "/some/page", handleAs: "json", // or "text", "xml", "javascript" sync: true, // defaults to false load: function(response, ioArgs) {} }); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 39. Ajax ● dojo.deferred awesomeness <script type="text/javascript"> var deferred = dojo.xhrPost({ url: "/some/page", load: function(response, ioArgs) {}, error: function(response, ioArgs) {} }); deferred.addCallback(function(response, ioArgs){}); deferred.addErrback(function(response, ioArgs){}); deferred.addBoth(function(response, ioArgs){}); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 40. FX ● dojo.fadeIn(), dojo.fadeOut() <div id="hello">Hello Dojo!</div> <script type="text/javascript"> dojo.fadeIn({ node: "hello", start: 0, duration: 2000, onEnd: function(){ dojo.fadeOut({ node: "hello", duration: 1000 }).play(); } }).play(); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 41. FX ● dojo.animateProperty() <div id="hello" style="position:absolute;">Hello Dojo!</div> <script type="text/javascript"> dojo.animateProperty({ node: "hello", duration: 2000, properties: { left: { start: 50, end: 200, unit: "px" }, top: { start: 50, end: 400, unit: "px" } } }).play(); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 42. Dojo Core Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 43. dojo.parser ● djConfig="parseOnLoad:true" <script type="text/javascript"> dojo.require("dojo.parser"); dojo.declare("cb1.awesome", null, { constructor: function(params, node){ console.debug(params); console.debug(node); node.innerHTML = "Hello!"; } }); </script> <div dojoType="cb1.awesome"></div> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 44. More Dojo Core ● Unified Data API ● Utilities ● dojo.data ● dojo.string ● Drag n Drop ● dojo.date ● dojo.dnd ● dojo.regexp ● Advanced FX ● I/O Transports ● dojo.fx ● dojo.io.iframe ● Internationalization ● dojo.io.script ● dojo.i18n ● dojo.rpc ● Google Gears ● Browser History ● dojo.gears ● dojo.back ● OpenAjax Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 45. Dijit Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 46. What is Dijit? ● Dojo's widget system ● Huge library of existing widgets ● Form elements – Buttons, drop downs, input fields, etc ● Layout widgets – Content pane, accordions, tab container, stack container, etc ● Rich experience widgets – Tree, progress bar, dialog, tooltip, menu, rich text editor, etc ● Accessibility (a11y) ● Templated - externalized HTML templates ● Themes (tundra, soria, nihilo, noir) Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 47. Simple Widget Example /js/cb1/SimpleWidget.js dojo.provide("cb1.SimpleWidget"); dojo.require("dijit._Widget"); dojo.declare("cb1.SimpleWidget", dijit._Widget, { postCreate: function(){ this.domNode.innerHTML = "Hello Dojo!"; } }); test_Simple.html <html> <head> <title>Simple Widget Example</title> <script type="text/javascript" src="/release-1.3.2/dojo/dojo.js" djConfig="isDebug:true,parseOnLoad:true,modulePaths:{'cb1':'../cb1'}"> </script> <script type="text/javascript"> dojo.require("cb1.SimpleWidget"); </script> </head> <body> <h1>Hi Dojo!</h1> <div dojoType="cb1.SimpleWidget"> </body> </html> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 48. Templated Example /js/cb1/CapitalizedTextBox.js dojo.provide("cb1.CapitalizedTextBox"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.declare("cb1.CapitalizedTextBox", [dijit._Widget, dijit._Templated], { templatePath: dojo.moduleUrl("cb1", "templates/CapitalizedTextBox.html"), _onKeyUp:function(){ this.textBox.value = this.textBox.value.toUpperCase(); } }); /js/cb1/templates/CapitalizedTextBox.html <div> <input type="text" dojoAttachPoint="textBox" dojoAttachEvent="onkeyup:_onKeyUp"> </div> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 49. Declarative Instantiation test_CapitalizedTextBox.html <html> <head> <title>Capitalized Example</title> <script type="text/javascript" src="/release-1.3.2/dojo/dojo.js" djConfig="isDebug:true,parseOnLoad:true,modulePaths:{'cb1':'../cb1'}"> </script> <script type="text/javascript"> dojo.require("cb1.CapitalizedTextBox"); </script> </head> <body> <h1>Hi Dojo!</h1> <input dojoType="cb1.CapitalizedTextBox"> </body> </html> Note: input field is still usable if JavaScript is disabled. Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 50. Programatic Instantiation test_CapitalizedTextBox.html <html> <head> <title>Capitalized Example</title> <script type="text/javascript" src="/release-1.3.2/dojo/dojo.js" djConfig="isDebug:true,modulePaths:{'cb1':'../cb1'}"> </script> <script type="text/javascript"> dojo.require("cb1.CapitalizedTextBox"); dojo.addOnLoad(function(){ new cb1.CapitalizedTextBox({ /* params */ }, "myField"); }); </script> </head> <body> <h1>Hi Dojo!</h1> <input id="myField"> </body> </html> Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
  • 51. Widget Lifecycle ● constructor() ● postMixInProperties() ● buildRendering() ● postCreate() ● startup() Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 52. Dijit Layout Widgets ● BorderContainer ● ContentPane ● LinkPane ● TabContainer ● AccordionContainer ● SplitContainer ● StackContainer Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 53. Dojox Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 54. What is Dojox? ● Place for extra stuff ● Stuff that isn't ready for prime time ● (i.e. dojox.grid) Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 55. Tour of Dojox ● dojox.analytics ● dojox.form ● Client monitoring ● Additional form widgets ● dojox.charting ● dojox.fx ● dojox.cometd ● Cool FX ● dojox.data ● dojox.gfx ● Tons of data stores ● Cross-browser vector graphics (SVG/VML) ● dojox.dtl ● dojox.gfx3d ● Django template library ● dojox.grid ● dojox.embed ● Grid widget ● Embed Flash, QuickTime Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 56. Tour of Dojox ● dojox.highlight ● dojox.rpc ● Syntax highlighting ● dojox.secure ● dojox.image ● Sandboxing ● Lightboxes, slideshow, ● dojox.storage gallery, magnifier, etc ● Persistent client-side ● dojox.io storage ● Additional transports ● dojox.widgets ● dojox.layout ● Additional dijit widgets ● Dijit layout widgets ● dojox.xmpp ● dojox.off ● XMPP client ● Offline support Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
  • 57. Util Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
  • 58. Util ● Build system ● DOH - Dojo Objective Harness ● Testing framework Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 59. Build System ● Reduce number of files sent over the wire ● Reduce JavaScript file sizes ● Profiles ● Layers ● Build script ● Executes Java, Rhino ● Compiles modules into layer .js files ● Strips whitespace, comments, console.*(), etc ● Minification (i.e. "var something = 123;" becomes "var _0=123;" ● Inlines widget HTML templates & @import CSS Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 60. Build System ● Build script in /util/buildscripts ● build.sh (GNU/Linux, MacOSX, Solaris, Unix) ● build.bat (Windows) ● Pre-defined profiles in /util/buildscripts/profiles ● base ● cometd ● demos-all ● dtkapi ● fx ● layers ● offline ● rhino ● sql ● standard ● standardCustomBase ● storage Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 61. Build Profile MyProfile.js dependencies = { stripConsole: "normal", version: "My custom Dojo 1.3.2 build", optimize: "shrinksafe", cssOptimize: "comments", copyTest: false, layers: [ { name: "dojo.js", dependencies: [ "dojo.parser", "dojo.fx" ] }, { name: "../../cb1/common.js", resourceName: "cb1.common", dependencies: [ "dijit.form.Button", "cb1.someModule" ] } ], prefixes: [ ["dijit", "../dijit"], ["dojox", "../dojox"], ["cb1", "../cb1"] ] } Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 62. Running a Build cd release-1.3.2/util/buildscripts ./build.sh profileFile=/path/to/MyProfile.js action=clean,release releaseDir=../../.. releaseName=mybuild ● Creates a directory next to release-1.3.2 called "mybuild" ● <script src="/mybuild/dojo/dojo.js"> Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
  • 63. Advanced Builds ● customBase (6KB dojo.js) ● Conditional exclusions //>>excludeStart("webkitMobile", kwArgs.webkitMobile); dojo.create("div", { innerHTML: "This won't appear on an iPhone!" }, dojo.body()); //>>excludeEnd("webkitMobile"); Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 64. Advanced Builds ● Running Multiple Versions of Dojo ● scopeDjConfig – Burn a djConfig into the build ● scopeMap dependencies = { stripConsole: “normal", version: “My custom Dojo 1.3.2 build", optimize: “shrinksafe", cssOptimize: “comments", copyTest: false, scopeDjConfig: { isDebug:true, parseOnLoad:true }, scopeMap: [ [“dojo", “mydojo"], [“dijit", “mydijit"], [“dojox", “mydojox"], ], layers: [ /* snip */ ], prefixes: [ /* snip */ ] } Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 65. Dojo Toolbox Build GUI ● Pretty UI ● Doesn't support ShrinkSafe ● Currently not up-to-date Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
  • 66. Dojo Management (or what I do) ● Put Dojo in your version control repo (or externally reference) ● Don't put builds into the repo ● Directory Structure: /myproject /dojo-build build.sh build.profile.js /public /js /cb1 /dojo-1.3.2 /dojo /dijit /dojox /util /js-build Created by the build /cb1 /dojo-1.3.2 /dojo /dijit /dojox index.html Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 67. Dojo Management (or what I do) ● build.sh #!/bin/sh cd ../public/js/dojo-1.3.2/util/buildscripts ./build.sh profileFile=../../../../../dojo-build/build.profile.js action=clean,release releaseDir=../../../../ releaseName=js-build cd ../../../../../dojo-build ● Run build.sh after doing a pull/checkout/update ● Consider multiple scripts/profiles ● build-frontend.sh & frontend.profile.js ● build-backend.sh & backend.profile.js ● build-dev.sh & dev.profile.js Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 68. Resources Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 69. Documentation ● API Docs ● http://api.dojotoolkit.org ● Online Docs ● http://docs.dojocampus.org ● Blogs ● http://dojotoolkit.org/rss.xml ● http://dojocampus.org/content/feed Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 70. Getting Help ● IRC ● #dojo on irc.freenode.net ● dojo-interest Mailing List ● http://dojotoolkit.org/mailman/listinfo/dojo-interest Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 71. Books Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 72. Dojo Gatherings ● Dojo Developer Days ● Usually annual ● Usually 2 days (contributor day & community day) ● dojo.beer() ● Worldwide meet ups Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 73. @dojo @dojocampus @dojobeer Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 74. Solution Providers ● Web app development ● Training ● Single page apps ● Web app development ● Custom widgets ● Support ● Support ● Expert advice Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
  • 75. Questions? Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

×