Moving to Dojo 1.7 and the 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