Moving to Dojo 1.7 and the path to 2.0

14,670 views
14,525 views

Published on

With the upcoming 1.7 release, The Dojo Toolkit is beginning to introduce major structural and architectural changes in the toolkit, setting the path for their new major 2.0 release due in 2012.

These fundamental changes to the architecture and technologies underpinning the toolkit will dramatically change how we write Dojo applications in the future, bringing with it huge benefits in performance, cross-library compatibility and support for mobile platforms.

In this presentation, I'll be walking through these changes, explaining the benefits and how it'll impact developers. I'll also be providing migration tips to help you start taking advantage of these benefits in your application today, based upon my experience using Dojo 1.7 on the Watson project.

This talk will be technical in nature, aiming at developers and team leads who are using the toolkit in their products or on client engagements.

Published in: Technology, Sports
3 Comments
11 Likes
Statistics
Notes
  • Been trying to learn Dojo from 'Dojo: The Definitive Guide' but being published in 2008 it is a bit dated. Yet it is a nice tour and I like going through it better than the online tutorial. These slides made a nice road map for me. They plus the online API reference is really helping me put it all together. But the time I finish the book and browse the tutorial for missed concepts and tricks, I should be in good shape.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice slides.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice! Time to get the Matthew Russell book updated.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
14,670
On SlideShare
0
From Embeds
0
Number of Embeds
2,054
Actions
Shares
0
Downloads
281
Comments
3
Likes
11
Embeds 0
No embeds

No notes for slide

Moving to Dojo 1.7 and the path to 2.0

  1. 1. Moving to Dojo 1.7 ...and the path to 2.0http://www.flickr.com/photos/jenik/4836118314/Wednesday, 7 December 2011
  2. 2. Me. @thomasjWednesday, 7 December 2011
  3. 3. Dojo 1.7http://www.flickr.com/photos/anythreewords/3197918781Wednesday, 7 December 2011
  4. 4. Dojo 1.7http://www.flickr.com/photos/anythreewords/3197918781Wednesday, 7 December 2011
  5. 5. Wednesday, 7 December 2011
  6. 6. Lots has changed... • AMD Module format • Touch events support • New Loader • Gauges & Charting • New Build system • Data Stores • Better Mobile support • MVC support • Feature detection • Slim-line widgets • Improved Grid • Dojo Package Repo • and much more... • and much more....Wednesday, 7 December 2011
  7. 7. http://www.flickr.com/photos/trancemist/361935363/Wednesday, 7 December 2011
  8. 8. Don’thttp://www.flickr.com/photos/trancemist/361935363/Wednesday, 7 December 2011
  9. 9. API compatibility until 2.0* * - There may be some exceptionsWednesday, 7 December 2011
  10. 10. What’s AMD?Wednesday, 7 December 2011
  11. 11. “Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded”Wednesday, 7 December 2011
  12. 12. What’s new about that?Wednesday, 7 December 2011
  13. 13. “Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded”Wednesday, 7 December 2011
  14. 14. “Dojo is slow....”Wednesday, 7 December 2011
  15. 15. “Dojo is slow....”Wednesday, 7 December 2011
  16. 16. AMD SupportWednesday, 7 December 2011
  17. 17. AMD Support Toolkits: JQuery 1.7+ Dojo 1.7+ MooTools 2.0+Wednesday, 7 December 2011
  18. 18. AMD Support Firebug 1.8+ http://www.flickr.com/photos/phil-jackson/3624102329/in/photostreamWednesday, 7 December 2011
  19. 19. AMD Support ...also seen in the BBC iPlayer http://www.flickr.com/photos/phil-jackson/3624102329/in/photostreamWednesday, 7 December 2011
  20. 20. Dojo 1.7 - “Nano”http://www.flickr.com/photos/argonne/4703475086Wednesday, 7 December 2011
  21. 21. http://www.flickr.com/photos/obiwanjr/5313551313 Dojo gives you lots of “blocks”Wednesday, 7 December 2011
  22. 22. The Dojo Toolkit Dojo Dijit DojoXWednesday, 7 December 2011
  23. 23. The Dojo Toolkit Dojo Core Dijit DojoX BaseWednesday, 7 December 2011
  24. 24. The Dojo Toolkit Dojo Core Dijit DojoX Base Base modules are always loadedWednesday, 7 December 2011
  25. 25. NodeList.js array.js connect.js event.js html.js lang.js query.js xhr.js Deferred.js _loader browser.js declare.js fx.js json.js query-sizzle.js window.js Color.js ~32KB gzip+minifiedWednesday, 7 December 2011
  26. 26. http://www.flickr.com/photos/obiwanjr/5313551313 Do we always need them?Wednesday, 7 December 2011
  27. 27. http://www.flickr.com/photos/redux/4297873805/Wednesday, 7 December 2011
  28. 28. “Base-less” Dojo Just the AMD loader by default.... only load what you needhttp://www.flickr.com/photos/redux/4297873805/ < 4KB gzip+minifiedWednesday, 7 December 2011
  29. 29. Turning on AMDhttp://www.flickr.com/photos/reel-dreams/4893003699Wednesday, 7 December 2011
  30. 30. Non-AMD loader <script src="path/to/dojo.js"></script>Wednesday, 7 December 2011
  31. 31. Configuration Flag async: {true|false}Wednesday, 7 December 2011
  32. 32. Enabling AMD loader <script src="path/to/dojo.js"></script> "async:true" <script data-dojo-config="async:true" src="path/to/dojo.js"></script>Wednesday, 7 December 2011
  33. 33. Enabling AMD loader <script> var dojoConfig = { async:true }; </script> <script src="path/to/dojo.js"></script>Wednesday, 7 December 2011
  34. 34. Writing AMD modulesWednesday, 7 December 2011
  35. 35. Let’s take an example...Wednesday, 7 December 2011
  36. 36. dojo.provide("org.test.widget"); dojo.require("org.test.base"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.cache"); dojo.declare("org.test.widget", [dijit._Widget, dijit._Templated, org.test.base], { templateString: dojo.cache("org.test.template", "Widget.html") });Wednesday, 7 December 2011
  37. 37. dojo.provide("org.test.widget"); dojo.require("org.test.base"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.cache"); dojo.declare("org.test.widget", [dijit._Widget, dijit._Templated, org.test.base], { templateString: dojo.cache("org.test.template", "Widget.html") });Wednesday, 7 December 2011
  38. 38. dojo.provide("org.test.widget"); dojo.require("org.test.base"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.cache"); dojo.declare("org.test.widget", [dijit._Widget, dijit._Templated, org.test.base], { templateString: dojo.cache("org.test.template", "Widget.html") });Wednesday, 7 December 2011
  39. 39. dojo.provide("org.test.widget"); dojo.require("org.test.base"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.cache"); dojo.declare("org.test.widget", [dijit._Widget, dijit._Templated, org.test.base], { templateString: dojo.cache("org.test.template", "Widget.html") });Wednesday, 7 December 2011
  40. 40. Let’s convert to AMD...Wednesday, 7 December 2011
  41. 41. define([ "org/test/base", "dijit/_Widget", "dijit/_Templated", "dojo/_base/declare", "dojo/text!../template/Widget.html"], function (base, _Widget, _Templated, declare, template) { return declare([base, _Widget, _Templated], { templateString: template }); } );Wednesday, 7 December 2011
  42. 42. Don’thttp://www.flickr.com/photos/trancemist/361935363/Wednesday, 7 December 2011
  43. 43. define([ "org/test/base", "dijit/_Widget", "dijit/_Templated", "dojo/_base/declare", "dojo/text!../template/Widget.html"], function (base, _Widget, _Templated, declare, template) { return declare([base, _Widget, _Templated], { templateString: template }); } );Wednesday, 7 December 2011
  44. 44. From the AMD API Specification define(id?, dependencies?, factory);Wednesday, 7 December 2011
  45. 45. From the AMD API Specification define(id?, dependencies?, factory); (Optional) String used as module identifier "org/widget/test"Wednesday, 7 December 2011
  46. 46. From the AMD API Specification define(id?, dependencies?, factory); (Optional) String used as module identifier "org/widget/test" * - Ignore for anonymous modulesWednesday, 7 December 2011
  47. 47. define([ "org/test/base", "dijit/_Widget", "dijit/_Templated", "dojo/_base/declare", "dojo/text!../template/Widget.html"], function (base, _Widget, _Templated, declare, template) { return declare([base, _Widget, _Templated], { templateString: template }); } );Wednesday, 7 December 2011
  48. 48. From the AMD API Specification define(id?, dependencies?, factory); (Optional) Array of module dependencies ["org/widget/base", "dojo/json"] Resolved modules passed as factory argumentsWednesday, 7 December 2011
  49. 49. define([ "org/test/base", "dijit/_Widget", "dijit/_Templated", "dojo/_base/declare", "dojo/text!../template/Widget.html"], function (base, _Widget, _Templated, declare, template) { return declare([base, _Widget, _Templated], { templateString: template }); } );Wednesday, 7 December 2011
  50. 50. From the AMD API Specification “Loader plugins extend an AMD implementation by allowing loading of resources that are not traditional JavaScript dependencies.”Wednesday, 7 December 2011
  51. 51. What can we load? Internationalisation bundles “dojo/i18n!../nls/messages.json”Wednesday, 7 December 2011
  52. 52. What can we load? Text bundles “dojo/text!../tmpl/widget.html”Wednesday, 7 December 2011
  53. 53. What can we load? Third-party plugins for CSS, Coffeescript, LESS, Google Maps...Wednesday, 7 December 2011
  54. 54. What can we load? Third-party plugins for CSS, Coffeescript, LESS, Google Maps... ...or just write your own!Wednesday, 7 December 2011
  55. 55. define([ "org/test/base", "dijit/_Widget", "dijit/_Templated", "dojo/_base/declare", "dojo/text!../template/Widget.html"], function (base, _Widget, _Templated, declare, template) { return declare([base, _Widget, _Templated], { templateString: template }); } );Wednesday, 7 December 2011
  56. 56. From the AMD API Specification define(id?, dependencies?, factory); “ function that should be executed to instantiate the module or an object...”Wednesday, 7 December 2011
  57. 57. From the AMD API Specification define(id?, dependencies?, factory); “ function that should be executed to instantiate the module or an object...” * - Can also return an objectWednesday, 7 December 2011
  58. 58. define([ "org/test/base", "dijit/_Widget", "dijit/_Templated", "dojo/_base/declare", "dojo/text!../template/Widget.html"], function (base, _Widget, _Templated, declare, template) { return declare([base, _Widget, _Templated], { templateString: template }); } );Wednesday, 7 December 2011
  59. 59. Uses local arguments, no need for globalsWednesday, 7 December 2011
  60. 60. What about the template?Wednesday, 7 December 2011
  61. 61. Widget Template <div> <label>First name</label> <input dojoAttachPoint="first_name" placeHolder="First name" dojoType="dijit.form.TextBox"> <label>Second name</label> <input dojoAttachPoint="second_name" placeHolder="Second name" dojoType="dijit.form.TextBox"> <button dojoAttachEvent="onClick:sendName" dojoType="dijit.form.Button"> </div>Wednesday, 7 December 2011
  62. 62. Widget Template <div> <label>First name</label> <input dojoAttachPoint="first_name" placeHolder="First name" dojoType="dijit.form.TextBox"> <label>Second name</label> <input dojoAttachPoint="second_name" placeHolder="Second name" dojoType="dijit.form.TextBox"> <button dojoAttachEvent="onClick:sendName" dojoType="dijit.form.Button"> </div> Non-standard HTML attributesWednesday, 7 December 2011
  63. 63. HTML5 Data AttributesWednesday, 7 December 2011
  64. 64. HTML5 Data Attributes dojoAttachPoint data-dojo-attach-point dojoAttachEvent data-dojo-attach-event dojoType data-dojo-type custom widget attr data-dojo-props dojoConfig data-dojo-configWednesday, 7 December 2011
  65. 65. Widget Template <div> <label>First name</label> <input data-dojo-attach-point="first_name" data-dojo-props="placeHolder:First Name" data-dojo-type="dijit.form.TextBox"> <label>Second name</label> <input data-dojo-attach-point="first_name" data-dojo-props="placeHolder:Second Name" data-dojo-type="dijit.form.TextBox"> <button dojo-dojo-attach-point="onClick:sendName" data-dojo-type="dijit.form.Button"> </div>Wednesday, 7 December 2011
  66. 66. What if I’m not defining modules?Wednesday, 7 December 2011
  67. 67. Let’s take an example...Wednesday, 7 December 2011
  68. 68. <script src="dojo.js" dojoConfig="parseOnLoad: true"></script> <script> dojo.require("dijit.form.Form"); dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.Button"); dojo.ready({ dojo.query("input").forEach(function () {...}); dojo.connect(dojo.byId("send"), "onclick", function (){...}); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  69. 69. <script src="dojo.js" dojoConfig="parseOnLoad: true"></script> <script> dojo.require("dijit.form.Form"); dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.Button"); dojo.ready({ dojo.query("input").forEach(function () {...}); dojo.connect(dojo.byId("send"), "onclick", function (){...}); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  70. 70. <script src="dojo.js" dojoConfig="parseOnLoad: true"></script> <script> dojo.require("dijit.form.Form"); dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.Button"); dojo.ready({ dojo.query("input").forEach(function () {...}); dojo.connect(dojo.byId("send"), "onclick", function (){...}); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  71. 71. <script src="dojo.js" dojoConfig="parseOnLoad: true"></script> <script> dojo.require("dijit.form.Form"); dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.Button"); dojo.ready({ dojo.query("input").forEach(function () {...}); dojo.connect(dojo.byId("send"), "onclick", function (){...}); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  72. 72. <script src="dojo.js" dojoConfig="parseOnLoad: true"></script> <script> dojo.require("dijit.form.Form"); dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.Button"); dojo.ready({ dojo.query("input").forEach(function () {...}); dojo.connect(dojo.byId("send"), "onclick", function (){...}); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  73. 73. Let’s convert to AMDWednesday, 7 December 2011
  74. 74. <script src="dojo.js" dojoConfig="async: true, parseOnLoad: true"> </script> <script> require(["dojo/query", "dojo/on", "dojo/dom", "dojo/ready", "dojo/parser", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button"], function (query, on, dom, ready) { ready(function () { query("input").forEach(function () {...}); on(dom.byId("send"), "click", function (){...}); }); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  75. 75. <script src="dojo.js" dojoConfig="async: true, parseOnLoad: true"> </script> <script> require(["dojo/query", "dojo/on", "dojo/dom", "dojo/ready", "dojo/parser", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button"], function (query, on, dom, ready) { ready(function () { query("input").forEach(function () {...}); on(dom.byId("send"), "click", function (){...}); }); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  76. 76. <script src="dojo.js" dojoConfig="async: true, parseOnLoad: true"> </script> <script> require(["dojo/query", "dojo/on", "dojo/dom", "dojo/ready", "dojo/parser", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button"], function (query, on, dom, ready) { ready(function () { query("input").forEach(function () {...}); on(dom.byId("send"), "click", function (){...}); }); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  77. 77. NOT in the AMD API Specification require(dependencies?, callback);Wednesday, 7 December 2011
  78. 78. NOT in the AMD API Specification require(dependencies?, callback); “... implementation-dependent API that will kick off module loading.” https://github.com/amdjs/amdjs-api/wiki/requireWednesday, 7 December 2011
  79. 79. <script src="dojo.js" dojoConfig="async: true, parseOnLoad: true"> </script> <script> require(["dojo/query", "dojo/on", "dojo/dom", "dojo/ready", "dojo/parser", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button"], function (query, on, dom, ready) { ready(function () { query("input").forEach(function () {...}); on(dom.byId("send"), "click", function (){...}); }); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  80. 80. NOT in the AMD API Specification require(dependencies?, callback); (Optional) Array of module dependencies ["org/widget/base", "dojo/json"] Resolved modules passed as factory argumentsWednesday, 7 December 2011
  81. 81. <script src="dojo.js" dojoConfig="async: true, parseOnLoad: true"> </script> <script> require(["dojo/query", "dojo/on", "dojo/dom", "dojo/ready", "dojo/parser", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button"], function (query, on, dom, ready) { ready(function () { query("input").forEach(function () {...}); on(dom.byId("send"), "click", function (){...}); }); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  82. 82. NOT in the AMD API Specification require(dependencies?, callback); “...once all the modules are available, the function callback is executed.” Resolved modules passed as callback argumentsWednesday, 7 December 2011
  83. 83. <script src="dojo.js" dojoConfig="async: true, parseOnLoad: true"> </script> <script> require(["dojo/query", "dojo/on", "dojo/dom", "dojo/ready", "dojo/parser", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button"], function (query, on, dom, ready) { ready(function () { query("input").forEach(function () {...}); on(dom.byId("send"), "click", function (){...}); }); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  84. 84. No global references...Wednesday, 7 December 2011
  85. 85. <script src="dojo.js" dojoConfig="async: true, parseOnLoad: true"> </script> <script> require(["dojo/query", "dojo/on", "dojo/dom", "dojo/ready", "dojo/parser", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button"], function (query, on, dom, ready) { ready(function () { query("input").forEach(function () {...}); on(dom.byId("send"), "click", function (){...}); }); }); </script> <form dojoType="dijit.form.Form"> <label>First Name:</label> <input dojoType="dijit.form.TextBox"> ... <button dojoType="dijit.form.Button"> </form>Wednesday, 7 December 2011
  86. 86. ...only load modules we actually useWednesday, 7 December 2011
  87. 87. What about the new stuff?http://www.flickr.com/photos/fcrippa/3401571934Wednesday, 7 December 2011
  88. 88. Dojo Mobile http://www.flickr.com/photos/dominiksyka-photography/4334590250Wednesday, 7 December 2011
  89. 89. Dojo Mobile Lightweight set of Mobile UI widgetsWednesday, 7 December 2011
  90. 90. Dojo Mobile Blackberry iPhone Android Device-specific or device-neutral themes availableWednesday, 7 December 2011
  91. 91. Dojo Mobile ShowcaseWednesday, 7 December 2011
  92. 92. dGrid: Next Generation Dojo GridWednesday, 7 December 2011
  93. 93. Small, fast and light • < 30KB minified, <80KB with dependencies • 6 - 10x faster that DataGrid • Pluggable modules • Mobile device support • Customisable with CSSWednesday, 7 December 2011
  94. 94. Wednesday, 7 December 2011
  95. 95. There’s lots more... • AMD Module format • Touch events support • New Loader • Gauges & Charting • New Build system • Data Stores • Better Mobile support • MVC support • Feature detection • Slim-line widgets • Improved Grid • Dojo Package Repo • and much more... • and much more....Wednesday, 7 December 2011
  96. 96. Before getting started...Wednesday, 7 December 2011
  97. 97. Wednesday, 7 December 2011
  98. 98. Dojo 1.7 provides early access to 2.0 features... Start “future proofing” your application todayhttp://www.flickr.com/photos/9948354@N08/763399258Wednesday, 7 December 2011

×