moving to dojo 1.7 and the path to 2.0
DESCRIPTION
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.TRANSCRIPT
Moving to Dojo 1.7...and the path to 2.0
http://www.flickr.com/photos/jenik/4836118314/
Wednesday, 7 December 2011
Me.
@thomasj
Wednesday, 7 December 2011
Dojo 1.7
http://www.flickr.com/photos/anythreewords/3197918781
Wednesday, 7 December 2011
Dojo 1.7
http://www.flickr.com/photos/anythreewords/3197918781
Wednesday, 7 December 2011
Wednesday, 7 December 2011
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....
Wednesday, 7 December 2011
http://www.flickr.com/photos/trancemist/361935363/
Wednesday, 7 December 2011
Don’t
http://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 Support
Wednesday, 7 December 2011
AMD Support
JQuery 1.7+
Dojo 1.7+
MooTools 2.0+
Toolkits:
Wednesday, 7 December 2011
AMD Support
Firebug 1.8+http://www.flickr.com/photos/phil-jackson/3624102329/in/photostream
Wednesday, 7 December 2011
AMD Support
...also seen in the BBC iPlayerhttp://www.flickr.com/photos/phil-jackson/3624102329/in/photostream
Wednesday, 7 December 2011
Dojo 1.7 - “Nano”
http://www.flickr.com/photos/argonne/4703475086
Wednesday, 7 December 2011
Dojo gives you lots of “blocks”
http://www.flickr.com/photos/obiwanjr/5313551313
Wednesday, 7 December 2011
The Dojo Toolkit
Dojo Dijit DojoX
Wednesday, 7 December 2011
The Dojo Toolkit
Dijit DojoXCore
Dojo
Base
Wednesday, 7 December 2011
The Dojo Toolkit
Dijit DojoXCore
Dojo
Base
Base modules are always loadedWednesday, 7 December 2011
NodeList.js array.js connect.js event.js html.js lang.js query.js xhr.jsDeferred.js _loader browser.js declare.js fx.js json.js query-sizzle.js window.jsColor.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 need
< 4KB gzip+minifiedhttp://www.flickr.com/photos/redux/4297873805/
Wednesday, 7 December 2011
Turning on AMD
http://www.flickr.com/photos/reel-dreams/4893003699
Wednesday, 7 December 2011
<script src="path/to/dojo.js"></script>
Non-AMD loader
Wednesday, 7 December 2011
Configuration Flag
async: {true|false}
Wednesday, 7 December 2011
<script src="path/to/dojo.js"></script>
"async:true"
<script data-dojo-config="async:true" src="path/to/dojo.js"></script>
Enabling AMD loader
Wednesday, 7 December 2011
<script> var dojoConfig = { async:true };</script>
<script src="path/to/dojo.js"></script>
Enabling AMD loader
Wednesday, 7 December 2011
Writing AMD modules
Wednesday, 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’t
http://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
define(id?, dependencies?, factory);
From the AMD API Specification
Wednesday, 7 December 2011
define(id?, dependencies?, factory);
From the AMD API Specification
(Optional) String used as module identifier "org/widget/test"
Wednesday, 7 December 2011
define(id?, dependencies?, factory);
From the AMD API Specification
(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
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
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
“Loader plugins extend an AMD implementation by allowing loading of resources that are not traditional JavaScript dependencies.”
From the AMD API Specification
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
define(id?, dependencies?, factory);
From the AMD API Specification
“ function that should be executed to instantiate the module or an object...”
Wednesday, 7 December 2011
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 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 globals
Wednesday, 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 Attributes
Wednesday, 7 December 2011
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
Wednesday, 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 AMD
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
<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
require(dependencies?, callback);
NOT in the AMD API Specification
Wednesday, 7 December 2011
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
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
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
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
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.”
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
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 use
Wednesday, 7 December 2011
What about the new stuff?
http://www.flickr.com/photos/fcrippa/3401571934
Wednesday, 7 December 2011
Dojo Mobile
http://www.flickr.com/photos/dominiksyka-photography/4334590250
Wednesday, 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 Showcase
Wednesday, 7 December 2011
dGrid: Next Generation Dojo Grid
Wednesday, 7 December 2011
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
Wednesday, 7 December 2011
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....
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 today
http://www.flickr.com/photos/9948354@N08/763399258
Wednesday, 7 December 2011