Jsconf.us.2013

#dadt
Dojo Already Did That
@phiggins / JSconf.us 2013
Wednesday, May 29, 13

Me!
* JSconf alumni
* Former Dojo Project Lead
* generic code monkey

PROFESSIONAL CAT HERDER
(TRUE OF ANY OSS LEAD)

PRINCESS FLUFFYBUTT
(I’VE BEEN PREOCCUPIED)

Welcome to JSCONF ...

JSCONF
* Enjoy your lunch transition
* Digest, contemplate.
* Innovate.

History of the World
Part III

CELEBRATING 20 YEARS OF INTERWEBS
TUBES?

1993-1998:
The dark ages

`93-`98
* best when viewed in ...
* still BBSing

1999-2000:
y2kmang

`99-`NaN
* Ajax
* IE 5(ish)
* Netscape 5(ish)
* Opera 4(ish)
* lynx
* Konqueror

2001-2005:
A renaissance of sorts.

`01-`05
* Flash.
* Everywhere.
* Lots of learning, hacking.
* Beginnings of js libs

2006-2009:
Sweet spot.

`06-`09
* Lots of ﬁghting.
* ... we’ll double back.
* Dojo doing things

2010-Date.now()
The modern era.

`11+
HTTPS://SPEAKERDECK.COM/ANGUSCROLL/THE-POLITICS-OF-JAVASCRIPT

And Dojo Did?
It.

var cls = getObject(node.getAttribute("dojoType"));
new cls({ props }, node);

<div data-dojo-type="foo.bar.baz"></div>
var cls = getObject(node.getAttribute("data-dojo-type"));

var cls = getObject(node.getAttribute("data-dojo-type"));
// WAT? no dataset?

var hasDataset = (function(){
var n = document.createElement("div");
n.setAttribute("data-a-b", "c");
return !!(n.dataset && n.dataset.aB == "c");
})();

var getdata, setdata;
if(hasDataset){
getdata = function(n, prop){ return n.dataset[prop]; };
setdata = function(n, prop, data){ n.dataset[prop] = data; };
}else{
function _hypen(m){ return "-" + m.toLowerCase(); }
function toDataHyphen(str){ return "data-" + str.replace(/[A-Z]/g, _hypen); }
getdata = function(n, prop){
return n.getAttribute(toDataHyphen(prop));
};
setdata = function(n, prop, data){
n.setAttribute(toDataHyphen(prop), data);
};
}
var cls = getObject(getdata(node, "dojoType"));

// Backboneish
new MyView({
$el: $(node)
})
// bootstrappy
<button data-reset-text="ha" data-foo-text="bar!"
>ha</button>
$("button").button("foo");

Module Loading
o/

// fetch foo/bar/__package__.js
dojo.require("foo.bar.*");
dojo.addOnLoad(function(){
console.warn(foo.bar.baz)
});

// fetch foo/bar/baz.js
dojo.require("foo.bar.baz");
dojo.addOnLoad(function(){
console.warn(foo.bar.baz)
});

// fetch foo/bar/baz.js
dojo.require("foo.bar.baz");
SYNCHRONOUS XHR + EVAL
dojo.provide("foo.bar.baz");
dojo.require("foo.bar.baz.bam");
foo.bar.baz = { bam: true };
REPEAT.

SYNCHRONOUS XHR + EVAL
* ORIGIN LIMITATIONS
* **
** EVIL (?)

James burke
Dojo / AMD / requirejs / et al

dojo._xdResourceLoaded(function(){
return {
depends:[
["provide","dojo.foo"],
],
defineResource: function(dojo, dijit, dojox){
if(!dojo._hasResource["dojo.foo"]){
dojo._hasResource["dojo.foo"] = true;
/* original code */
}
}
};
});

AMD
* asynchronous
* anonymous
* x-domain

define(["foo/bar/baz"], function(foobarbaz){
return {
bam: true
};
});

node.js /
ecma
* Still being argued
* UMD a mess

BACKEND JAVASCRIPT
NODE, ET AL

Dojo Did
* Rhino / multi-env support
* Dojo Build tools
* dojox.dtl

Dojo Did
* Rhino / multi-env support
* Dojo Build tools
* dojox.dtl
ADDED NODE.JS
USING NODE.JS
ABANDONED :(

No end to Node potential.

UI LIBRARIES
AND “PLUGINS”

Dijit
... could do a whole talk here

Dijit
* instance based control
* externalized resources
* a11y
* l10n / i18n

Dijit
* Backwards compatible
* Uniﬁed “everything”

Dijit could:
* better event registration
* alternate templating

CORE JS
... IT’S JUST JAVASCRIPT

Underscore
* lots of handy stuff.

Underscore
“The tie to go with jQuery’s tux”

Underscore
Shouldn’t have to ﬁx
* map()
* or bind()
* or `this`

Underscore
is not amd/umd ready ...*
* LODASH

Lots of stuff
is not amd/umd ready ...

It’s Just JS
* Don’t be limited by “best
practice”
* Understand the language
* Enjoy the nuance

Questions?

PROJECT
DATE CLIENT
29/5/2013 @PHIGGINS
FIN.
GRACIAS.

Jsconf.us.2013

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Plus de Peter Higgins

Plus de Peter Higgins (8)

Jsconf.us.2013