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.

1. Moving to Dojo 1.7
...and the path to 2.0
http://www.flickr.com/photos/jenik/4836118314/
Wednesday, 7 December 2011

2. Me.
@thomasj
Wednesday, 7 December 2011

3. Dojo 1.7
http://www.flickr.com/photos/anythreewords/3197918781
Wednesday, 7 December 2011

4. Dojo 1.7
http://www.flickr.com/photos/anythreewords/3197918781
Wednesday, 7 December 2011

5. Wednesday, 7 December 2011

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. http://www.flickr.com/photos/trancemist/361935363/
Wednesday, 7 December 2011

8. Don’t
http://www.flickr.com/photos/trancemist/361935363/
Wednesday, 7 December 2011

9. API compatibility until
2.0*
* - There may be some exceptions
Wednesday, 7 December 2011

10. What’s AMD?
Wednesday, 7 December 2011

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. What’s new about that?
Wednesday, 7 December 2011

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. “Dojo is slow....”
Wednesday, 7 December 2011

15. “Dojo is slow....”
Wednesday, 7 December 2011

16. AMD Support
Wednesday, 7 December 2011

17. AMD Support
Toolkits:
JQuery 1.7+
Dojo 1.7+
MooTools 2.0+
Wednesday, 7 December 2011

18. AMD Support
Firebug 1.8+
http://www.flickr.com/photos/phil-jackson/3624102329/in/photostream
Wednesday, 7 December 2011

19. AMD Support
...also seen in the BBC iPlayer
http://www.flickr.com/photos/phil-jackson/3624102329/in/photostream
Wednesday, 7 December 2011

20. Dojo 1.7 - “Nano”
http://www.flickr.com/photos/argonne/4703475086
Wednesday, 7 December 2011

21. http://www.flickr.com/photos/obiwanjr/5313551313
Dojo gives you lots of “blocks”
Wednesday, 7 December 2011

22. The Dojo Toolkit
Dojo Dijit DojoX
Wednesday, 7 December 2011

23. The Dojo Toolkit
Dojo
Core
Dijit DojoX
Base
Wednesday, 7 December 2011

24. The Dojo Toolkit
Dojo
Core
Dijit DojoX
Base
Base modules are always loaded
Wednesday, 7 December 2011

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
Wednesday, 7 December 2011

26. http://www.flickr.com/photos/obiwanjr/5313551313
Do we always need them?
Wednesday, 7 December 2011

27. http://www.flickr.com/photos/redux/4297873805/
Wednesday, 7 December 2011

28. “Base-less” Dojo
Just the AMD loader by default....
only load what you need
http://www.flickr.com/photos/redux/4297873805/
< 4KB gzip+minified
Wednesday, 7 December 2011

29. Turning on AMD
http://www.flickr.com/photos/reel-dreams/4893003699
Wednesday, 7 December 2011

30. Non-AMD loader
<script src="path/to/dojo.js"></script>
Wednesday, 7 December 2011

31. Configuration Flag
async: {true|false}
Wednesday, 7 December 2011

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. Enabling AMD loader
<script>
var dojoConfig = {
async:true
};
</script>
<script src="path/to/dojo.js"></script>
Wednesday, 7 December 2011

34. Writing AMD modules
Wednesday, 7 December 2011

35. Let’s take an example...
Wednesday, 7 December 2011

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. 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. 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. 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. Let’s convert to AMD...
Wednesday, 7 December 2011

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. Don’t
http://www.flickr.com/photos/trancemist/361935363/
Wednesday, 7 December 2011

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. From the AMD API Specification
define(id?, dependencies?, factory);
Wednesday, 7 December 2011

45. From the AMD API Specification
define(id?, dependencies?, factory);
(Optional) String used as module identifier
"org/widget/test"
Wednesday, 7 December 2011

46. From the AMD API Specification
define(id?, dependencies?, factory);
(Optional) String used as module identifier
"org/widget/test"
* - Ignore for anonymous modules
Wednesday, 7 December 2011

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. From the AMD API Specification
define(id?, dependencies?, factory);
(Optional) Array of module dependencies
["org/widget/base", "dojo/json"]
Resolved modules passed as factory arguments
Wednesday, 7 December 2011

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. 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. What can we load?
Internationalisation bundles
“dojo/i18n!../nls/messages.json”
Wednesday, 7 December 2011

52. What can we load?
Text bundles
“dojo/text!../tmpl/widget.html”
Wednesday, 7 December 2011

53. What can we load?
Third-party plugins for CSS, Coffeescript,
LESS, Google Maps...
Wednesday, 7 December 2011

54. What can we load?
Third-party plugins for CSS, Coffeescript,
LESS, Google Maps...
...or just write your own!
Wednesday, 7 December 2011

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. 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. 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 object
Wednesday, 7 December 2011

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. Uses local arguments,
no need for globals
Wednesday, 7 December 2011

60. What about the
template?
Wednesday, 7 December 2011

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. 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
Wednesday, 7 December 2011

63. HTML5 Data Attributes
Wednesday, 7 December 2011

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-config
Wednesday, 7 December 2011

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. What if I’m not defining
modules?
Wednesday, 7 December 2011

67. Let’s take an example...
Wednesday, 7 December 2011

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. <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. <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. <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. <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. Let’s convert to AMD
Wednesday, 7 December 2011

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. <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. <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. NOT in the AMD API Specification
require(dependencies?, callback);
Wednesday, 7 December 2011

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/require
Wednesday, 7 December 2011

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. NOT in the AMD API Specification
require(dependencies?, callback);
(Optional) Array of module dependencies
["org/widget/base", "dojo/json"]
Resolved modules passed as factory arguments
Wednesday, 7 December 2011

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. 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 arguments
Wednesday, 7 December 2011

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. No global references...
Wednesday, 7 December 2011

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. ...only load modules we
actually use
Wednesday, 7 December 2011

87. What about the new stuff?
http://www.flickr.com/photos/fcrippa/3401571934
Wednesday, 7 December 2011

88. Dojo Mobile
http://www.flickr.com/photos/dominiksyka-photography/4334590250
Wednesday, 7 December 2011

89. Dojo Mobile
Lightweight set of Mobile UI widgets
Wednesday, 7 December 2011

90. Dojo Mobile
Blackberry iPhone Android
Device-specific or device-neutral themes available
Wednesday, 7 December 2011

91. Dojo Mobile Showcase
Wednesday, 7 December 2011

92. dGrid: Next
Generation Dojo Grid
Wednesday, 7 December 2011

93. Small, fast and light
• < 30KB minified, <80KB
with dependencies
• 6 - 10x faster that
DataGrid
• Pluggable modules
• Mobile device support
• Customisable with CSS
Wednesday, 7 December 2011

94. Wednesday, 7 December 2011

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. Before getting started...
Wednesday, 7 December 2011

97. Wednesday, 7 December 2011

98. Dojo 1.7 provides early
access to 2.0 features...
Start “future proofing” your
application today
http://www.flickr.com/photos/9948354@N08/763399258
Wednesday, 7 December 2011