Moving to Dojo 1.7 and the path to 2.0

Converting your project to use the new features in Dojo 1.7 and the migration path to 2.0.

Transcript

1. Moving to Dojo 1.7 ...and the path to 2.0 http://www.flickr.com/photos/jenik/4836118314/ Monday, 7 May 2012
2. Me. @thomasj Monday, 7 May 2012
3. Dojo 1.7 http://www.flickr.com/photos/anythreewords/3197918781 Monday, 7 May 2012
4. Dojo 1.7 http://www.flickr.com/photos/anythreewords/3197918781 Monday, 7 May 2012
5. Monday, 7 May 2012
6. Lots has changed... • AMD Module format • New Loader • New Build system • Better Mobile support • Feature detection • Improved Grid • and much more... • Touch events support • Gauges & Charting • Data Stores • MVC support • Slim-line widgets • Dojo Package Repo • and much more.... Monday, 7 May 2012
7. http://www.flickr.com/photos/trancemist/361935363/ Monday, 7 May 2012
8. Don’t http://www.flickr.com/photos/trancemist/361935363/ Monday, 7 May 2012
9. API compatibility until 2.0* * - There may be some exceptions Monday, 7 May 2012
10. What’s AMD? Monday, 7 May 2012
11. “Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded” Monday, 7 May 2012
12. What’s new about that? Monday, 7 May 2012
13. “Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded” Monday, 7 May 2012
14. “Dojo is slow....” Monday, 7 May 2012
15. “Dojo is slow....” Monday, 7 May 2012
16. AMD Support Monday, 7 May 2012
17. AMD Support JQuery 1.7+ Dojo 1.7+ MooTools 2.0+ Toolkits: Monday, 7 May 2012
18. AMD Support Firebug 1.8+ http://www.flickr.com/photos/phil-jackson/3624102329/in/photostream Monday, 7 May 2012
19. AMD Support ...also seen in the BBC iPlayer http://www.flickr.com/photos/phil-jackson/3624102329/in/photostream Monday, 7 May 2012
20. Dojo 1.7 - “Nano” http://www.flickr.com/photos/argonne/4703475086 Monday, 7 May 2012
21. Dojo gives you lots of “blocks” http://www.flickr.com/photos/obiwanjr/5313551313 Monday, 7 May 2012
22. The Dojo Toolkit Dojo Dijit DojoX Monday, 7 May 2012
23. The Dojo Toolkit Dijit DojoX Core Dojo Base Monday, 7 May 2012
24. The Dojo Toolkit Dijit DojoX Core Dojo Base Base modules are always loaded Monday, 7 May 2012
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+minified Monday, 7 May 2012
26. http://www.flickr.com/photos/obiwanjr/5313551313 Do we always need them? Monday, 7 May 2012
27. http://www.flickr.com/photos/redux/4297873805/ Monday, 7 May 2012
28. “Base-less” Dojo Just the AMD loader by default.... only load what you need < 4KB gzip+minified http://www.flickr.com/photos/redux/4297873805/ Monday, 7 May 2012
29. Turning on AMD http://www.flickr.com/photos/reel-dreams/4893003699 Monday, 7 May 2012
30. <script src="path/to/dojo.js"></script> Non-AMD loader Monday, 7 May 2012
31. Configuration Flag async: {true|false} Monday, 7 May 2012
32. <script src="path/to/dojo.js"></script> "async:true" <script data-dojo-config="async:true" src="path/to/dojo.js"></script> Enabling AMD loader Monday, 7 May 2012
33. <script> var dojoConfig = { async:true }; </script> <script src="path/to/dojo.js"></script> Enabling AMD loader Monday, 7 May 2012
34. Writing AMD modules Monday, 7 May 2012
35. Let’s take an example... Monday, 7 May 2012
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") }); Monday, 7 May 2012
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") }); Monday, 7 May 2012
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") }); Monday, 7 May 2012
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") }); Monday, 7 May 2012
40. Let’s convert to AMD... Monday, 7 May 2012
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 }); } ); Monday, 7 May 2012
42. Don’t http://www.flickr.com/photos/trancemist/361935363/ Monday, 7 May 2012
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 }); } ); Monday, 7 May 2012
44. define(id?, dependencies?, factory); From the AMD API Specification Monday, 7 May 2012
45. define(id?, dependencies?, factory); From the AMD API Specification (Optional) String used as module identifier "org/widget/test" Monday, 7 May 2012
46. define(id?, dependencies?, factory); From the AMD API Specification (Optional) String used as module identifier "org/widget/test" * - Ignore for anonymous modules Monday, 7 May 2012
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 }); } ); Monday, 7 May 2012
48. define(id?, dependencies?, factory); From the AMD API Specification (Optional) Array of module dependencies ["org/widget/base", "dojo/json"] Resolved modules passed as factory arguments Monday, 7 May 2012
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 }); } ); Monday, 7 May 2012
50. “Loader plugins extend an AMD implementation by allowing loading of resources that are not traditional JavaScript dependencies.” From the AMD API Specification Monday, 7 May 2012
51. What can we load? Internationalisation bundles “dojo/i18n!../nls/messages.json” Monday, 7 May 2012
52. What can we load? Text bundles “dojo/text!../tmpl/widget.html” Monday, 7 May 2012
53. What can we load? Third-party plugins for CSS, Coffeescript, LESS, Google Maps... Monday, 7 May 2012
54. What can we load? Third-party plugins for CSS, Coffeescript, LESS, Google Maps... ...or just write your own! Monday, 7 May 2012
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 }); } ); Monday, 7 May 2012
56. define(id?, dependencies?, factory); From the AMD API Specification “ function that should be executed to instantiate the module or an object...” Monday, 7 May 2012
57. define(id?, dependencies?, factory); From the AMD API Specification “ function that should be executed to instantiate the module or an object...” * - Can also return an object Monday, 7 May 2012
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 }); } ); Monday, 7 May 2012
59. Uses local arguments, no need for globals Monday, 7 May 2012
60. What about the template? Monday, 7 May 2012
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> Monday, 7 May 2012
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 attributes Monday, 7 May 2012
63. HTML5 Data Attributes Monday, 7 May 2012
64. HTML5 Data Attributes dojoAttachPoint data-dojo-attach-point Monday, 7 May 2012
65. HTML5 Data Attributes dojoAttachPoint dojoAttachEvent data-dojo-attach-point data-dojo-attach-event Monday, 7 May 2012
66. HTML5 Data Attributes dojoAttachPoint dojoAttachEvent dojoType data-dojo-attach-point data-dojo-attach-event data-dojo-type Monday, 7 May 2012
67. HTML5 Data Attributes dojoAttachPoint dojoAttachEvent dojoType custom widget attr data-dojo-attach-point data-dojo-attach-event data-dojo-type data-dojo-props Monday, 7 May 2012
68. HTML5 Data Attributes dojoAttachPoint dojoAttachEvent dojoType custom widget attr dojoConfig data-dojo-attach-point data-dojo-attach-event data-dojo-type data-dojo-props data-dojo-config Monday, 7 May 2012
69. 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> Monday, 7 May 2012
70. What if I’m not defining modules? Monday, 7 May 2012
71. Let’s take an example... Monday, 7 May 2012
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> Monday, 7 May 2012
73. <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> Monday, 7 May 2012
74. <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> Monday, 7 May 2012
75. <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> Monday, 7 May 2012
76. <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> Monday, 7 May 2012
77. Let’s convert to AMD Monday, 7 May 2012
78. <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> Monday, 7 May 2012
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> Monday, 7 May 2012
80. <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> Monday, 7 May 2012
81. require(dependencies?, callback); NOT in the AMD API Specification Monday, 7 May 2012
82. require(dependencies?, callback); NOT in the AMD API Specification “... implementation-dependent API that will kick off module loading.” https://github.com/amdjs/amdjs-api/wiki/require Monday, 7 May 2012
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> Monday, 7 May 2012
84. require(dependencies?, callback); NOT in the AMD API Specification (Optional) Array of module dependencies ["org/widget/base", "dojo/json"] Resolved modules passed as factory arguments Monday, 7 May 2012
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> Monday, 7 May 2012
86. require(dependencies?, callback); NOT in the AMD API Specification Resolved modules passed as callback arguments “...once all the modules are available, the function callback is executed.” Monday, 7 May 2012
87. <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> Monday, 7 May 2012
88. No global references... Monday, 7 May 2012
89. <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> Monday, 7 May 2012
90. ...only load modules we actually use Monday, 7 May 2012
91. What about the new stuff? http://www.flickr.com/photos/fcrippa/3401571934 Monday, 7 May 2012
92. Dojo Mobile http://www.flickr.com/photos/dominiksyka-photography/4334590250 Monday, 7 May 2012
93. Dojo Mobile Lightweight set of Mobile UI widgets Monday, 7 May 2012
94. Dojo Mobile Blackberry iPhone Android Device-specific or device-neutral themes available Monday, 7 May 2012
95. Dojo Mobile Showcase Monday, 7 May 2012
96. Dojo Mobile Showcase Monday, 7 May 2012
97. Dojo Mobile Showcase Monday, 7 May 2012
98. Dojo Mobile Showcase Monday, 7 May 2012
99. dGrid: Next Generation Dojo Grid Monday, 7 May 2012
100. Small, fast and light • < 30KB minified, <80KB with dependencies • 6 - 10x faster that DataGrid • Pluggable modules • Mobile device support • Customisable with CSS Monday, 7 May 2012
101. Monday, 7 May 2012
102. There’s lots more... • AMD Module format • New Loader • New Build system • Better Mobile support • Feature detection • Improved Grid • and much more... • Touch events support • Gauges & Charting • Data Stores • MVC support • Slim-line widgets • Dojo Package Repo • and much more.... Monday, 7 May 2012
103. Before getting started... Monday, 7 May 2012
104. Monday, 7 May 2012
105. Dojo 1.7 provides early access to 2.0 features... http://www.flickr.com/photos/9948354@N08/763399258 Monday, 7 May 2012
106. Dojo 1.7 provides early access to 2.0 features... Start “future proofing” your application today http://www.flickr.com/photos/9948354@N08/763399258 Monday, 7 May 2012