Your SlideShare is downloading. ×
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
Zero To Dojo
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

Zero To Dojo

9,790

Published on

Slides From my talk at SpringOne America 2008 - Dojo: 0 to Production

Slides From my talk at SpringOne America 2008 - Dojo: 0 to Production

Published in: Technology
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,790
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
660
Comments
2
Likes
15
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. 0 to Production December 3, 2008 Peter Higgins SpringOne Americas
  • 2. Me. © SitePen, Inc. 2008. All Rights Reserved
  • 3. Show of Hands? © SitePen, Inc. 2008. All Rights Reserved
  • 4. Quick Start © SitePen, Inc. 2008. All Rights Reserved
  • 5. Notes about Dojo Long Standing Development Large, Active Developer Base Friendly Professional Community Liberally Licensed, Clean IP © SitePen, Inc. 2008. All Rights Reserved
  • 6. Notes about Dojo Comprised of Base, Core, Dijit, and DojoX Uni ed Tools and Components Extras: ShrinkSafe, Build Utils D.O.H. © SitePen, Inc. 2008. All Rights Reserved
  • 7. Base © SitePen, Inc. 2008. All Rights Reserved
  • 8. Using Dojo Base <html> <head> <title>Hello, Dojo</title> <!-- load Dojo from a CDN: --> <script type=quot;text/javascriptquot; src=quot;http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.jsquot;> </script> </head> <body> </body> </html> © SitePen, Inc. 2008. All Rights Reserved
  • 9. Aka: dojo.js (26KB of Joy) Ajax: dojo.xhr, dojo.xhrGet, dojo.xhrPost ... Events: normalization, keys, Objects or Nodes DOM/CSS: dojo.byId, dojo.style, dojo.place, dojo.attr Animation: dojo.fadeIn/Out, dojo.animateProperty Query/NodeList: CSS3 Selectors. aka: All of the Above Advanced JS: dojo.delegate, .hitch, .partial, .exists ... dojo.declare Native JS: forEach, map, lter, some, every, indexOf ... Browser Sni ng: dojo.isIE < 7, isFF, isWebKit ... © SitePen, Inc. 2008. All Rights Reserved
  • 10. Patterns in Dojo // style and add class to a node: dojo.addClass(“someNode”, “someClass”); dojo.style(“someNode”, { opacity:0.5, lineHeight:”1.3em” }); dojo.attr(“someNode”, { id:”newId” }); // or chained dojo.query(“#someNode”) .addClass(“someClass”) .attr({ id:”newId” }) .style({ opacity:0.5, lineHeight:”1.3em” }) // connect: dojo.connect(dojo.byId(“foo”), “onclick”, function(e){...}); // or connect: dojo.query(“#foo”).connect(“onclick”, function(e){ ... }); // or sugar: dojo.query(“#foo”).onclick(function(e){ ... }); © SitePen, Inc. 2008. All Rights Reserved
  • 11. Simple OO, Simulated Inheritance dojo.declare(“some.Person”, null, { name: ”default”, constructor: function(args){ dojo.mixin(this, args); } }); dojo.declare(“some.Employee”, some.Person, { employeeId: 0 }); var bob = new some.Person({ name:”Bob Bobson” }); var joy = new some.Employee({ name:”Joy”, employeeId:24 }); © SitePen, Inc. 2008. All Rights Reserved
  • 12. Package System == modular code And more... Works with Dojo and custom code Local: dojo.require(“dojo.io.script”); dojo.require(“my.Widget”); Robust: dojo.registerModulePath(“external”, “/external/js”); dojo.require(“external.Thinger”); Easy: dojo.provide(“my.Widget”); Ready: dojo.addOnLoad, .addOnUnLoad ... © SitePen, Inc. 2008. All Rights Reserved
  • 13. The Core © SitePen, Inc. 2008. All Rights Reserved
  • 14. More Patterns Use at will - everything additive. No dependency tracking - just dojo.require(“it”) Few, if any, “rules” Scale: Grows to t your needs © SitePen, Inc. 2008. All Rights Reserved
  • 15. Added Joy - a require() away dojo.data - Uni ed Data API dojo.dnd - Drag and Drop API dojo.fx / dojo.NodeList-fx - Additional Advanced FX dojo.i18n - Internationalization tools dojo.string, dojo.date, dojo.regexp - Common utility dojo.io.iframe, dojo.io.script, dojo.rpc - Advanced IO ... more: dojo.behavior, dojo.html, dojo.gears, dojo.cookie, dojo.parser, dojo.jaxer ... © SitePen, Inc. 2008. All Rights Reserved
  • 16. Additional Debugging FireBug Lite Shipped console.* provided in less sane browsers Load with djCon g = { isDebug:true } if(dojo.con g.isDebug){ .. } © SitePen, Inc. 2008. All Rights Reserved
  • 17. The Dojo Widget Framework © SitePen, Inc. 2008. All Rights Reserved
  • 18. Take Your Pick Compartmentalized Behavior using Existing Markup Fully dynamic, reusable Templated components Extend existing or Create ... © SitePen, Inc. 2008. All Rights Reserved
  • 19. Includes Suite of Widgets Layouts - Accordions, Tabs Form - Validation and more ... WYSIWYG Editor Tree, Sliders, ProgressBar ... © SitePen, Inc. 2008. All Rights Reserved
  • 20. Setup is Easy <html> <head> <title>index.html</title> <!-- some css --> <link rel=”stylesheet” href=”dojotoolkit/dijit/themes/tundra/tundra.css”> <script type=quot;text/javascriptquot; src=quot;dojotoolkit/dojo/dojo.jsquot;></script> </head> <body class=”tundra”> </body> </html> © SitePen, Inc. 2008. All Rights Reserved
  • 21. Flexible Instantiation // load the resource: dojo.require(“dijit.dijit”); // Base Dijit dojo.require(“dijit.Dialog”); // Dialog Code // create programatically: var myDialog = new dijit.Dialog({ title:”Login” }, “formArea”); <!-- or declaratively in markup --> <div id=”formArea” dojoType=”dijit.Dialog” title=”Login”> <p>...</p> </div> // access the instance: dijit.byId(“formArea”).show(); // myDialog.show(); © SitePen, Inc. 2008. All Rights Reserved
  • 22. CSS Driven Skinning Three full themes: Tundra Soria Nihilo Fully customizable Even easier with constraints: Embedded WebKit ? © SitePen, Inc. 2008. All Rights Reserved
  • 23. Full Localization (i18n) Support © SitePen, Inc. 2008. All Rights Reserved
  • 24. Full Accessibility (a11y) Support Screen reader support High contrast mode support Keyboard navigation ... with every Dijit © SitePen, Inc. 2008. All Rights Reserved
  • 25. Custom Widgets dojo.provide(“my.Widget”); dojo.require(“dijit._Widget”); dojo.require(“dijit._Templated”); // define: dojo.declare(“my.Widget”, [dijit._Widget, dijit._Templated], { value:”default”, templatePath: dojo.moduleUrl(“my.templates”, “Widget.html”, postCreate: function(args){ // init code } }); // instantiate: new my.Widget({ value:”bar” }, “someNode”); // declarative way: <input id=”someNode” dojoType=”my.Widget” value=”Foo”> © SitePen, Inc. 2008. All Rights Reserved
  • 26. Custom Extensions Leverage the Dijit widget system for speci c purposes Reuse Existing a11y and i18n code in Dijit © SitePen, Inc. 2008. All Rights Reserved
  • 27. Custom Widgets: Subclassing dojo.require(“dijit.Dialog”); // “subclassing”: dojo.declare(“my.Dialog”, dijit.Dialog, { canShow: true, show: function(){ if(this.canShow){ // then call inherited: this.inherited(arguments); } } }); var showable = new my.Dialog({ canShow: false }); © SitePen, Inc. 2008. All Rights Reserved
  • 28. Ultra Rapid Prototyping <div id=”foo” dojoType=”dijit.Dialog” title=”Hello”> <p> ... </p> <script type=”dojo/method” event=”hide”> // override instance’s hide() method ... test. </script> <script type=”dojo/connect” event=”show”> // monitor instance’s show() method ... </script> </div> © SitePen, Inc. 2008. All Rights Reserved
  • 29. Helping Designers /* Convenience Rules added to <html> element */ .mybox { width:250px; } /* love the quirks: */ .dj_ie6 .mybox { margin-right:1px } .dj_ie7 .mybox { margin-right:2px; } .dj_quirks .mybox { margin:3px; } © SitePen, Inc. 2008. All Rights Reserved
  • 30. © SitePen, Inc. 2008. All Rights Reserved
  • 31. Extensions, Extras, Experiments Extend Dijit: dojox.widget, dojox.layout, dojox.form Additional FX: dojox.fx Morph, Text, Extras ... Image Gadgets: FlickrBadge, Lightbox (Nano), SlideShow ... Comet: dojox.cometd Advanced IO: RPC, REST, SMD, ScriptFrame ... © SitePen, Inc. 2008. All Rights Reserved
  • 32. ... there’s more: DojoX GFX Cross-browser vector graphics GFX API, Charting: 2d / 3d, GFX Animation © SitePen, Inc. 2008. All Rights Reserved
  • 33. DojoX: DataGrid Fully dojo.data-Ready Lazy Row Selection,Virtual Scrolling Simplified Use: Layout Ready, Easy instantiation © SitePen, Inc. 2008. All Rights Reserved
  • 34. dojox.data Stores AndOrReadStore GoogleSearchStore AppStore HtmlStore AtomReadStore jsonPathStore CouchDBRestStore jsonRestStore CssRuleStore OpmlStore CsvStore QueryReadStore FileStore ServiceStore FlickrRestStore / S3Store FlickrStore WikipediaStore GoogleFeedStore XmlStore © SitePen, Inc. 2008. All Rights Reserved
  • 35. Other Goodies dojox.av - Audio / Video helpers dojox.dtl - django templating system implementation dojox.o , dojox.storage - O ine helpers dojox.lang - Advanced JS techniques dojox.xmpp - Full protocol implementation dojox.validate - Regexps + Functions ... much, much more! © SitePen, Inc. 2008. All Rights Reserved
  • 36. Simple Gems: Google Analytics Why Write This? <script type=quot;text/javascriptquot;> var gaJsHost = ((quot;https:quot; == document.location.protocol) ? quot;https://ssl.quot; : quot;http://www.quot;); document.write(unescape(quot;%3Cscript src='quot; + gaJsHost + quot;google- analytics.com/ga.js' type='text/javascript'%3E%3C/script%3Equot;)); </script> <script type=quot;text/javascriptquot;> var pageTracker = _gat._getTracker(quot;UA-xxxxxx-xquot;); pageTracker._trackPageview(); </script> © SitePen, Inc. 2008. All Rights Reserved
  • 37. Simple Gems: Google Analytics with Dojo Just Write This: // load the resource dojo.require(“dojox.analytics.Urchin”); <!-- and create in markup --> <div dojoType=”dojox.analytics.Urchin” acct=”12345-UA-23”></div> // or in script: new dojox.analytics.Urchin({ acct:”UA-xxxxx-x” }); © SitePen, Inc. 2008. All Rights Reserved
  • 38. in Production © SitePen, Inc. 2008. All Rights Reserved
  • 39. Dojo Build System Reduce number of HTTP requests Template Interning and resource concatenation Reduce JavaScript le size: Remove Comments and whitespace Variable obfuscation (ShrinkSafe) CSS Optimization Comment Removal @import “...” concatenation StripConsole options © SitePen, Inc. 2008. All Rights Reserved
  • 40. Advanced Builds Stubs Dojo (6k dojo.js) Custom Base “Layers” Automatic dependency tracking Cross-dependent layers RestoreRequire X-Domain Dojo - Local CDN BuildExclude syntax © SitePen, Inc. 2008. All Rights Reserved
  • 41. D.O.H - Unit test Suite Supports Build Up, Tear Down, sync or async Testing doh.robot - Automated UI Unit testing © SitePen, Inc. 2008. All Rights Reserved
  • 42. Resources © SitePen, Inc. 2008. All Rights Reserved
  • 43. Basic Documentation Full API Docs: http://api.dojotoolkit.org Full On-Line Docs: http://docs.dojocampus.org O ine Docs: http://sitepen.com/labs/toolbox Tutorials, Blogs, Examples: http://dojocampus.org © SitePen, Inc. 2008. All Rights Reserved
  • 44. Additional Documentation Dojo Dead Trees! © SitePen, Inc. 2008. All Rights Reserved
  • 45. That’s © SitePen, Inc. 2008. All Rights Reserved
  • 46. Questions? © SitePen, Inc. 2008. All Rights Reserved

×