Tweet
Tweet

Slide 1

Slide 1 text

Moving to Dojo 1.7 ...and the path to 2.0 http://www.flickr.com/photos/jenik/4836118314/ Monday, 7 May 2012

Slide 2

Slide 2 text

Me. @thomasj Monday, 7 May 2012

Slide 3

Slide 3 text

Dojo 1.7 http://www.flickr.com/photos/anythreewords/3197918781 Monday, 7 May 2012

Slide 4

Slide 4 text

Dojo 1.7 http://www.flickr.com/photos/anythreewords/3197918781 Monday, 7 May 2012

Slide 5

Slide 5 text

Monday, 7 May 2012

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

http://www.flickr.com/photos/trancemist/361935363/ Monday, 7 May 2012

Slide 8

Slide 8 text

Don’t http://www.flickr.com/photos/trancemist/361935363/ Monday, 7 May 2012

Slide 9

Slide 9 text

API compatibility until 2.0* * - There may be some exceptions Monday, 7 May 2012

Slide 10

Slide 10 text

What’s AMD? Monday, 7 May 2012

Slide 11

Slide 11 text

“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

Slide 12

Slide 12 text

What’s new about that? Monday, 7 May 2012

Slide 13

Slide 13 text

“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

Slide 14

Slide 14 text

“Dojo is slow....” Monday, 7 May 2012

Slide 15

Slide 15 text

“Dojo is slow....” Monday, 7 May 2012

Slide 16

Slide 16 text

AMD Support Monday, 7 May 2012

Slide 17

Slide 17 text

AMD Support JQuery 1.7+ Dojo 1.7+ MooTools 2.0+ Toolkits: Monday, 7 May 2012

Slide 18

Slide 18 text

AMD Support Firebug 1.8+ http://www.flickr.com/photos/phil-jackson/3624102329/in/photostream Monday, 7 May 2012

Slide 19

Slide 19 text

AMD Support ...also seen in the BBC iPlayer http://www.flickr.com/photos/phil-jackson/3624102329/in/photostream Monday, 7 May 2012

Slide 20

Slide 20 text

Dojo 1.7 - “Nano” http://www.flickr.com/photos/argonne/4703475086 Monday, 7 May 2012

Slide 21

Slide 21 text

Dojo gives you lots of “blocks” http://www.flickr.com/photos/obiwanjr/5313551313 Monday, 7 May 2012

Slide 22

Slide 22 text

The Dojo Toolkit Dojo Dijit DojoX Monday, 7 May 2012

Slide 23

Slide 23 text

The Dojo Toolkit Dijit DojoX Core Dojo Base Monday, 7 May 2012

Slide 24

Slide 24 text

The Dojo Toolkit Dijit DojoX Core Dojo Base Base modules are always loaded Monday, 7 May 2012

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

http://www.flickr.com/photos/obiwanjr/5313551313 Do we always need them? Monday, 7 May 2012

Slide 27

Slide 27 text

http://www.flickr.com/photos/redux/4297873805/ Monday, 7 May 2012

Slide 28

Slide 28 text

“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

Slide 29

Slide 29 text

Turning on AMD http://www.flickr.com/photos/reel-dreams/4893003699 Monday, 7 May 2012

Slide 30

Slide 30 text

Non-AMD loader Monday, 7 May 2012

Slide 31

Slide 31 text

Configuration Flag async: {true|false} Monday, 7 May 2012

Slide 32

Slide 32 text

"async:true" Enabling AMD loader Monday, 7 May 2012

Slide 33

Slide 33 text

var dojoConfig = { async:true }; Enabling AMD loader Monday, 7 May 2012

Slide 34

Slide 34 text

Writing AMD modules Monday, 7 May 2012

Slide 35

Slide 35 text

Let’s take an example... Monday, 7 May 2012

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Let’s convert to AMD... Monday, 7 May 2012

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Don’t http://www.flickr.com/photos/trancemist/361935363/ Monday, 7 May 2012

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

define(id?, dependencies?, factory); From the AMD API Specification Monday, 7 May 2012

Slide 45

Slide 45 text

define(id?, dependencies?, factory); From the AMD API Specification (Optional) String used as module identifier "org/widget/test" Monday, 7 May 2012

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

“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

Slide 51

Slide 51 text

What can we load? Internationalisation bundles “dojo/i18n!../nls/messages.json” Monday, 7 May 2012

Slide 52

Slide 52 text

What can we load? Text bundles “dojo/text!../tmpl/widget.html” Monday, 7 May 2012

Slide 53

Slide 53 text

What can we load? Third-party plugins for CSS, Coffeescript, LESS, Google Maps... Monday, 7 May 2012

Slide 54

Slide 54 text

What can we load? Third-party plugins for CSS, Coffeescript, LESS, Google Maps... ...or just write your own! Monday, 7 May 2012

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Uses local arguments, no need for globals Monday, 7 May 2012

Slide 60

Slide 60 text

What about the template? Monday, 7 May 2012

Slide 61

Slide 61 text

Widget Template
First name Second name
Monday, 7 May 2012

Slide 62

Slide 62 text

Widget Template
First name Second name
Non-standard HTML attributes Monday, 7 May 2012

Slide 63

Slide 63 text

HTML5 Data Attributes Monday, 7 May 2012

Slide 64

Slide 64 text

HTML5 Data Attributes dojoAttachPoint data-dojo-attach-point Monday, 7 May 2012

Slide 65

Slide 65 text

HTML5 Data Attributes dojoAttachPoint dojoAttachEvent data-dojo-attach-point data-dojo-attach-event Monday, 7 May 2012

Slide 66

Slide 66 text

HTML5 Data Attributes dojoAttachPoint dojoAttachEvent dojoType data-dojo-attach-point data-dojo-attach-event data-dojo-type Monday, 7 May 2012

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Widget Template
First name Second name
Monday, 7 May 2012

Slide 70

Slide 70 text

What if I’m not defining modules? Monday, 7 May 2012

Slide 71

Slide 71 text

Let’s take an example... Monday, 7 May 2012

Slide 72

Slide 72 text

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 (){...}); }); First Name: ... Monday, 7 May 2012

Slide 73

Slide 73 text

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 (){...}); }); First Name: ... Monday, 7 May 2012

Slide 74

Slide 74 text

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 (){...}); }); First Name: ... Monday, 7 May 2012

Slide 75

Slide 75 text

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 (){...}); }); First Name: ... Monday, 7 May 2012

Slide 76

Slide 76 text

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 (){...}); }); First Name: ... Monday, 7 May 2012

Slide 77

Slide 77 text

Let’s convert to AMD Monday, 7 May 2012

Slide 78

Slide 78 text

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 (){...}); }); }); First Name: ... Monday, 7 May 2012

Slide 79

Slide 79 text

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 (){...}); }); }); First Name: ... Monday, 7 May 2012

Slide 80

Slide 80 text

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 (){...}); }); }); First Name: ... Monday, 7 May 2012

Slide 81

Slide 81 text

require(dependencies?, callback); NOT in the AMD API Specification Monday, 7 May 2012

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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 (){...}); }); }); First Name: ... Monday, 7 May 2012

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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 (){...}); }); }); First Name: ... Monday, 7 May 2012

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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 (){...}); }); }); First Name: ... Monday, 7 May 2012

Slide 88

Slide 88 text

No global references... Monday, 7 May 2012

Slide 89

Slide 89 text

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 (){...}); }); }); First Name: ... Monday, 7 May 2012

Slide 90

Slide 90 text

...only load modules we actually use Monday, 7 May 2012

Slide 91

Slide 91 text

What about the new stuff? http://www.flickr.com/photos/fcrippa/3401571934 Monday, 7 May 2012

Slide 92

Slide 92 text

Dojo Mobile http://www.flickr.com/photos/dominiksyka-photography/4334590250 Monday, 7 May 2012

Slide 93

Slide 93 text

Dojo Mobile Lightweight set of Mobile UI widgets Monday, 7 May 2012

Slide 94

Slide 94 text

Dojo Mobile Blackberry iPhone Android Device-specific or device-neutral themes available Monday, 7 May 2012

Slide 95

Slide 95 text

Dojo Mobile Showcase Monday, 7 May 2012

Slide 96

Slide 96 text

Dojo Mobile Showcase Monday, 7 May 2012

Slide 97

Slide 97 text

Dojo Mobile Showcase Monday, 7 May 2012

Slide 98

Slide 98 text

Dojo Mobile Showcase Monday, 7 May 2012

Slide 99

Slide 99 text

dGrid: Next Generation Dojo Grid Monday, 7 May 2012

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

Monday, 7 May 2012

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

Before getting started... Monday, 7 May 2012

Slide 104

Slide 104 text

Monday, 7 May 2012

Slide 105

Slide 105 text

Dojo 1.7 provides early access to 2.0 features... http://www.flickr.com/photos/9948354@N08/763399258 Monday, 7 May 2012

Slide 106

Slide 106 text

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