• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Moving to Dojo 1.7 and the path to 2.0
 

Moving to Dojo 1.7 and the path to 2.0

on

  • 14,192 views

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.

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.

Statistics

Views

Total Views
14,192
Views on SlideShare
12,197
Embed Views
1,995

Actions

Likes
11
Downloads
259
Comments
3

18 Embeds 1,995

http://jamesthom.as 1775
http://localhost 59
http://paper.li 36
http://feeds.feedburner.com 35
http://a0.twimg.com 21
https://twitter.com 18
http://www.scoop.it 16
http://us-w1.rockmelt.com 9
http://127.0.0.1 5
http://jthomas.vm.bytemark.co.uk 4
http://www.newsblur.com 3
http://public.jamesthom.as 3
http://safe.tumblr.com 3
http://rogerxu19.tumblr.com 3
http://dev.newsblur.com 2
http://data.jamesthom.as 1
https://si0.twimg.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice slides.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice! Time to get the Matthew Russell book updated.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Moving to Dojo 1.7 and the path to 2.0 Moving to Dojo 1.7 and the path to 2.0 Presentation Transcript

    • Moving to Dojo 1.7 ...and the path to 2.0http://www.flickr.com/photos/jenik/4836118314/Wednesday, 7 December 2011
    • Me. @thomasjWednesday, 7 December 2011
    • Dojo 1.7http://www.flickr.com/photos/anythreewords/3197918781Wednesday, 7 December 2011
    • Dojo 1.7http://www.flickr.com/photos/anythreewords/3197918781Wednesday, 7 December 2011
    • Wednesday, 7 December 2011
    • 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
    • http://www.flickr.com/photos/trancemist/361935363/Wednesday, 7 December 2011
    • Don’thttp://www.flickr.com/photos/trancemist/361935363/Wednesday, 7 December 2011
    • API compatibility until 2.0* * - There may be some exceptionsWednesday, 7 December 2011
    • What’s AMD?Wednesday, 7 December 2011
    • “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
    • What’s new about that?Wednesday, 7 December 2011
    • “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
    • “Dojo is slow....”Wednesday, 7 December 2011
    • “Dojo is slow....”Wednesday, 7 December 2011
    • AMD SupportWednesday, 7 December 2011
    • AMD Support Toolkits: JQuery 1.7+ Dojo 1.7+ MooTools 2.0+Wednesday, 7 December 2011
    • AMD Support Firebug 1.8+ http://www.flickr.com/photos/phil-jackson/3624102329/in/photostreamWednesday, 7 December 2011
    • AMD Support ...also seen in the BBC iPlayer http://www.flickr.com/photos/phil-jackson/3624102329/in/photostreamWednesday, 7 December 2011
    • Dojo 1.7 - “Nano”http://www.flickr.com/photos/argonne/4703475086Wednesday, 7 December 2011
    • http://www.flickr.com/photos/obiwanjr/5313551313 Dojo gives you lots of “blocks”Wednesday, 7 December 2011
    • The Dojo Toolkit Dojo Dijit DojoXWednesday, 7 December 2011
    • The Dojo Toolkit Dojo Core Dijit DojoX BaseWednesday, 7 December 2011
    • The Dojo Toolkit Dojo Core Dijit DojoX Base Base modules are always loadedWednesday, 7 December 2011
    • 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
    • http://www.flickr.com/photos/obiwanjr/5313551313 Do we always need them?Wednesday, 7 December 2011
    • http://www.flickr.com/photos/redux/4297873805/Wednesday, 7 December 2011
    • “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
    • Turning on AMDhttp://www.flickr.com/photos/reel-dreams/4893003699Wednesday, 7 December 2011
    • Non-AMD loader <script src="path/to/dojo.js"></script>Wednesday, 7 December 2011
    • Configuration Flag async: {true|false}Wednesday, 7 December 2011
    • 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
    • Enabling AMD loader <script> var dojoConfig = { async:true }; </script> <script src="path/to/dojo.js"></script>Wednesday, 7 December 2011
    • Writing AMD modulesWednesday, 7 December 2011
    • Let’s take an example...Wednesday, 7 December 2011
    • 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
    • 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
    • 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
    • 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
    • Let’s convert to AMD...Wednesday, 7 December 2011
    • 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
    • Don’thttp://www.flickr.com/photos/trancemist/361935363/Wednesday, 7 December 2011
    • 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
    • From the AMD API Specification define(id?, dependencies?, factory);Wednesday, 7 December 2011
    • From the AMD API Specification define(id?, dependencies?, factory); (Optional) String used as module identifier "org/widget/test"Wednesday, 7 December 2011
    • 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
    • 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
    • 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
    • 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
    • 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
    • What can we load? Internationalisation bundles “dojo/i18n!../nls/messages.json”Wednesday, 7 December 2011
    • What can we load? Text bundles “dojo/text!../tmpl/widget.html”Wednesday, 7 December 2011
    • What can we load? Third-party plugins for CSS, Coffeescript, LESS, Google Maps...Wednesday, 7 December 2011
    • What can we load? Third-party plugins for CSS, Coffeescript, LESS, Google Maps... ...or just write your own!Wednesday, 7 December 2011
    • 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
    • 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
    • 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
    • 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
    • Uses local arguments, no need for globalsWednesday, 7 December 2011
    • What about the template?Wednesday, 7 December 2011
    • 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
    • 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
    • HTML5 Data AttributesWednesday, 7 December 2011
    • 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
    • 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
    • What if I’m not defining modules?Wednesday, 7 December 2011
    • Let’s take an example...Wednesday, 7 December 2011
    • <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
    • <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
    • <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
    • <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
    • <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
    • Let’s convert to AMDWednesday, 7 December 2011
    • <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
    • <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
    • <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
    • NOT in the AMD API Specification require(dependencies?, callback);Wednesday, 7 December 2011
    • 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
    • <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
    • 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
    • <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
    • 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
    • <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
    • No global references...Wednesday, 7 December 2011
    • <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
    • ...only load modules we actually useWednesday, 7 December 2011
    • What about the new stuff?http://www.flickr.com/photos/fcrippa/3401571934Wednesday, 7 December 2011
    • Dojo Mobile http://www.flickr.com/photos/dominiksyka-photography/4334590250Wednesday, 7 December 2011
    • Dojo Mobile Lightweight set of Mobile UI widgetsWednesday, 7 December 2011
    • Dojo Mobile Blackberry iPhone Android Device-specific or device-neutral themes availableWednesday, 7 December 2011
    • Dojo Mobile ShowcaseWednesday, 7 December 2011
    • dGrid: Next Generation Dojo GridWednesday, 7 December 2011
    • 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
    • Wednesday, 7 December 2011
    • 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
    • Before getting started...Wednesday, 7 December 2011
    • Wednesday, 7 December 2011
    • 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