The document summarizes the history of web development from 1993 to the present. It discusses early technologies like Ajax and Flash from 1999-2005. It then covers the Dojo JavaScript framework, noting technologies it implemented early like asynchronous module loading. The document concludes by discussing current trends in frontend frameworks, modular JavaScript, and the continued potential of Node.js on the backend.

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

2. Me!
* JSconf alumni
* Former Dojo Project Lead
* generic code monkey
Wednesday, May 29, 13

3. PROFESSIONAL CAT HERDER
(TRUE OF ANY OSS LEAD)
Wednesday, May 29, 13

4. PRINCESS FLUFFYBUTT
(I’VE BEEN PREOCCUPIED)
Wednesday, May 29, 13

5. Welcome to JSCONF ...
Wednesday, May 29, 13

6. JSCONF
* Enjoy your lunch transition
* Digest, contemplate.
* Innovate.
Wednesday, May 29, 13

7. History of the World
Part III
Wednesday, May 29, 13

8. CELEBRATING 20 YEARS OF INTERWEBS
TUBES?
Wednesday, May 29, 13

9. 1993-1998:
The dark ages
Wednesday, May 29, 13

10. `93-`98
* best when viewed in ...
* still BBSing
Wednesday, May 29, 13

11. 1999-2000:
y2kmang
Wednesday, May 29, 13

12. `99-`NaN
* Ajax
* IE 5(ish)
* Netscape 5(ish)
* Opera 4(ish)
* lynx
* Konqueror
Wednesday, May 29, 13

13. 2001-2005:
A renaissance of sorts.
Wednesday, May 29, 13

14. `01-`05
* Flash.
* Everywhere.
* Lots of learning, hacking.
* Beginnings of js libs
Wednesday, May 29, 13

15. 2006-2009:
Sweet spot.
Wednesday, May 29, 13

16. `06-`09
* Lots of fighting.
* ... we’ll double back.
* Dojo doing things
Wednesday, May 29, 13

17. 2010-Date.now()
The modern era.
Wednesday, May 29, 13

18. `11+
HTTPS://SPEAKERDECK.COM/ANGUSCROLL/THE-POLITICS-OF-JAVASCRIPT
Wednesday, May 29, 13

19. `11+
HTTPS://SPEAKERDECK.COM/ANGUSCROLL/THE-POLITICS-OF-JAVASCRIPT
Wednesday, May 29, 13

20. And Dojo Did?
It.
Wednesday, May 29, 13

21. <div dojoType="foo.bar.baz"></div>
Wednesday, May 29, 13

22. <div dojoType="foo.bar.baz"></div>
var cls = getObject(node.getAttribute("dojoType"));
new cls({ props }, node);
Wednesday, May 29, 13

23. <!-- div dojoType="foo.bar.baz"></div-->
<div data-dojo-type="foo.bar.baz"></div>
var cls = getObject(node.getAttribute("data-dojo-type"));
new cls({ props }, node);
Wednesday, May 29, 13

24. <!-- div dojoType="foo.bar.baz"></div-->
<div data-dojo-type="foo.bar.baz"></div>
var cls = getObject(node.getAttribute("data-dojo-type"));
new cls({ props }, node);
// WAT? no dataset?
Wednesday, May 29, 13

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

26. 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"));
new cls({ props }, node);
Wednesday, May 29, 13

27. <div dojoType="foo.bar.baz"></div>
<div data-dojo-type="foo.bar.baz"></div>
// Backboneish
new MyView({
$el: $(node)
})
// bootstrappy
<button data-reset-text="ha" data-foo-text="bar!"
>ha</button>
$("button").button("foo");
Wednesday, May 29, 13

28. Module Loading
o/
Wednesday, May 29, 13

29. Wednesday, May 29, 13

30. // fetch foo/bar/__package__.js
dojo.require("foo.bar.*");
dojo.addOnLoad(function(){
console.warn(foo.bar.baz)
});
Wednesday, May 29, 13

31. // fetch foo/bar/baz.js
dojo.require("foo.bar.baz");
dojo.addOnLoad(function(){
console.warn(foo.bar.baz)
});
Wednesday, May 29, 13

32. // 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.
Wednesday, May 29, 13

33. SYNCHRONOUS XHR + EVAL
* ORIGIN LIMITATIONS
* **
** EVIL (?)
Wednesday, May 29, 13

34. James burke
Dojo / AMD / requirejs / et al
Wednesday, May 29, 13

35. 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 */
}
}
};
});
Wednesday, May 29, 13

36. AMD
* asynchronous
* anonymous
* x-domain
Wednesday, May 29, 13

37. define(["foo/bar/baz"], function(foobarbaz){
return {
bam: true
};
});
Wednesday, May 29, 13

38. node.js /
ecma
* Still being argued
* UMD a mess
Wednesday, May 29, 13

39. BACKEND JAVASCRIPT
NODE, ET AL
Wednesday, May 29, 13

40. Dojo Did
* Rhino / multi-env support
* Dojo Build tools
* dojox.dtl
Wednesday, May 29, 13

41. Dojo Did
* Rhino / multi-env support
* Dojo Build tools
* dojox.dtl
ADDED NODE.JS
USING NODE.JS
ABANDONED :(
Wednesday, May 29, 13

42. No end to Node potential.
Wednesday, May 29, 13

43. UI LIBRARIES
AND “PLUGINS”
Wednesday, May 29, 13

44. Dijit
... could do a whole talk here
Wednesday, May 29, 13

45. Dijit
* instance based control
* externalized resources
* a11y
* l10n / i18n
Wednesday, May 29, 13

46. Dijit
* Backwards compatible
* Unified “everything”
Wednesday, May 29, 13

47. Dijit could:
* better event registration
* alternate templating
Wednesday, May 29, 13

48. CORE JS
... IT’S JUST JAVASCRIPT
Wednesday, May 29, 13

49. Underscore
* lots of handy stuff.
Wednesday, May 29, 13

50. Underscore
“The tie to go with jQuery’s tux”
Wednesday, May 29, 13

51. Underscore
Shouldn’t have to fix
* map()
* or bind()
* or `this`
Wednesday, May 29, 13

52. Underscore
is not amd/umd ready ...*
* LODASH
Wednesday, May 29, 13

53. Lots of stuff
is not amd/umd ready ...
Wednesday, May 29, 13

54. It’s Just JS
* Don’t be limited by “best
practice”
* Understand the language
* Enjoy the nuance
Wednesday, May 29, 13

55. Questions?
Wednesday, May 29, 13

56. PROJECT
DATE CLIENT
29/5/2013 @PHIGGINS
FIN.
GRACIAS.
Wednesday, May 29, 13