moving to dojo 1.7 and the path to 2.0
Post on 09-May-2015
13.940 Views
Preview:
DESCRIPTION
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
top related