Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Moving to Dojo 1.7 and the path to 2.0

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.

James Thomas

May 07, 2012
Tweet

More Decks by James Thomas

Other Decks in Technology

Transcript

  1. 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
  2. “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
  3. “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
  4. The Dojo Toolkit Dijit DojoX Core Dojo Base Base modules

    are always loaded Monday, 7 May 2012
  5. 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
  6. “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
  7. 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
  8. 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
  9. define(id?, dependencies?, factory); From the AMD API Specification (Optional) String

    used as module identifier "org/widget/test" Monday, 7 May 2012
  10. 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
  11. 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
  12. 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
  13. 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
  14. “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
  15. What can we load? Third-party plugins for CSS, Coffeescript, LESS,

    Google Maps... ...or just write your own! Monday, 7 May 2012
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. <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
  26. <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
  27. <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
  28. <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
  29. <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
  30. <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
  31. <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
  32. <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
  33. 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
  34. <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
  35. 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
  36. <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
  37. 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
  38. <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
  39. <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
  40. 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
  41. 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
  42. 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