Your SlideShare is downloading. ×
0
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,846

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,846
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
662
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

×