0 to Production


December 3, 2008
Peter Higgins
SpringOne Americas
Me.



© SitePen, Inc. 2008. All Rights Reserved
Show of Hands?




© SitePen, Inc. 2008. All Rights Reserved
Quick Start



© SitePen, Inc. 2008. All Rights Reserved
Notes about Dojo


            Long Standing Development
            Large, Active Developer Base
            Friendly Pro...
Notes about Dojo


                    Comprised of Base, Core,
                    Dijit, and DojoX
                    U...
Base



© SitePen, Inc. 2008. All Rights Reserved
Using Dojo Base

         <html>
           <head>

                    <title>Hello, Dojo</title>

                    <!...
Aka: dojo.js (26KB of Joy)
                    Ajax: dojo.xhr, dojo.xhrGet, dojo.xhrPost ...
                    Events: n...
Patterns in Dojo
         // style and add class to a node:
         dojo.addClass(“someNode”, “someClass”);
         dojo...
Simple OO, Simulated Inheritance
         dojo.declare(“some.Person”, null, {
             name: ”default”,
             c...
Package System == modular code
        And more...                                     Works with Dojo and custom code


 ...
The   Core



© SitePen, Inc. 2008. All Rights Reserved
More Patterns
                    Use at will - everything additive.
                    No dependency tracking - just doj...
Added Joy - a require() away
                    dojo.data - Uni ed Data API
                    dojo.dnd - Drag and Drop ...
Additional Debugging

                 FireBug Lite Shipped
                     console.* provided in less
              ...
The Dojo Widget Framework




© SitePen, Inc. 2008. All Rights Reserved
Take Your Pick
                    Compartmentalized Behavior using Existing Markup
                    Fully dynamic, reu...
Includes Suite of Widgets

                 Layouts - Accordions, Tabs
                 Form - Validation and
            ...
Setup is Easy
          <html>
            <head>
              <title>index.html</title>
              <!-- some css -->
...
Flexible Instantiation
         // load the resource:
         dojo.require(“dijit.dijit”); // Base Dijit
         dojo.re...
CSS Driven Skinning

                 Three full themes:
                      Tundra
                      Soria
        ...
Full Localization (i18n) Support




© SitePen, Inc. 2008. All Rights Reserved
Full Accessibility (a11y) Support


                                            Screen reader support

                   ...
Custom Widgets
         dojo.provide(“my.Widget”);
         dojo.require(“dijit._Widget”);
         dojo.require(“dijit._T...
Custom Extensions



                                            Leverage the Dijit widget
                               ...
Custom Widgets: Subclassing
          dojo.require(“dijit.Dialog”);

         // “subclassing”:
         dojo.declare(“my....
Ultra Rapid Prototyping
          <div id=”foo” dojoType=”dijit.Dialog” title=”Hello”>
            <p> ... </p>

         ...
Helping Designers
         /* Convenience Rules added to <html> element */
         .mybox {
            width:250px;
    ...
© SitePen, Inc. 2008. All Rights Reserved
Extensions, Extras, Experiments
                    Extend Dijit:
                          dojox.widget, dojox.layout, do...
... there’s more: DojoX GFX




                                Cross-browser vector graphics
                            ...
DojoX: DataGrid




                                   Fully dojo.data-Ready
                            Lazy Row Selectio...
dojox.data Stores
                    AndOrReadStore          GoogleSearchStore
                    AppStore              ...
Other Goodies
                    dojox.av - Audio / Video helpers
                    dojox.dtl - django templating syste...
Simple Gems: Google Analytics
                   Why Write This?

              <script type=quot;text/javascriptquot;>
  ...
Simple Gems: Google Analytics with Dojo
                   Just Write This:


              // load the resource
         ...
in Production



© SitePen, Inc. 2008. All Rights Reserved
Dojo Build System
                    Reduce number of HTTP requests
                          Template Interning and reso...
Advanced Builds
                    Stubs Dojo (6k dojo.js)
                    Custom Base
                    “Layers”
 ...
D.O.H - Unit test Suite




           Supports Build Up, Tear Down, sync or async Testing
                doh.robot - Aut...
Resources



© SitePen, Inc. 2008. All Rights Reserved
Basic Documentation
                    Full API Docs:
                          http://api.dojotoolkit.org
              ...
Additional Documentation




                                                 Dojo Dead Trees!


© SitePen, Inc. 2008. All...
That’s



© SitePen, Inc. 2008. All Rights Reserved
Questions?



© SitePen, Inc. 2008. All Rights Reserved
Upcoming SlideShare
Loading in...5
×

Zero To Dojo

9,908

Published on

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,908
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
666
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

Zero To Dojo

  1. 1. 0 to Production December 3, 2008 Peter Higgins SpringOne Americas
  2. 2. Me. © SitePen, Inc. 2008. All Rights Reserved
  3. 3. Show of Hands? © SitePen, Inc. 2008. All Rights Reserved
  4. 4. Quick Start © SitePen, Inc. 2008. All Rights Reserved
  5. 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. 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. 7. Base © SitePen, Inc. 2008. All Rights Reserved
  8. 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. 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. 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. 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. 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. 13. The Core © SitePen, Inc. 2008. All Rights Reserved
  14. 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. 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. 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. 17. The Dojo Widget Framework © SitePen, Inc. 2008. All Rights Reserved
  18. 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. 19. Includes Suite of Widgets Layouts - Accordions, Tabs Form - Validation and more ... WYSIWYG Editor Tree, Sliders, ProgressBar ... © SitePen, Inc. 2008. All Rights Reserved
  20. 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. 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. 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. 23. Full Localization (i18n) Support © SitePen, Inc. 2008. All Rights Reserved
  24. 24. Full Accessibility (a11y) Support Screen reader support High contrast mode support Keyboard navigation ... with every Dijit © SitePen, Inc. 2008. All Rights Reserved
  25. 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. 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. 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. 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. 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. 30. © SitePen, Inc. 2008. All Rights Reserved
  31. 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. 32. ... there’s more: DojoX GFX Cross-browser vector graphics GFX API, Charting: 2d / 3d, GFX Animation © SitePen, Inc. 2008. All Rights Reserved
  33. 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. 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. 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. 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. 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. 38. in Production © SitePen, Inc. 2008. All Rights Reserved
  39. 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. 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. 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. 42. Resources © SitePen, Inc. 2008. All Rights Reserved
  43. 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. 44. Additional Documentation Dojo Dead Trees! © SitePen, Inc. 2008. All Rights Reserved
  45. 45. That’s © SitePen, Inc. 2008. All Rights Reserved
  46. 46. Questions? © SitePen, Inc. 2008. All Rights Reserved
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×