Txjs

IT’S JUST JAVASCRIPT. Peter Higgins / @phiggins / #txjs / 2010-06-04

DOJO. http://dojotoolkit.org

yay Dojo. A Library. 5+ years testing, revision, support. Backwards compatible APIs (to a painful degree)

IN THE END ... It’s just a LOT of JavaScript.

IN THE END ... It’s just a LOT of modular JavaScript.

IN THE END ... It’s just a LOT of optional JavaScript.

JAVASCRIPT IS MAGIC.

MORE THAN JUST TEH DOM

pub/sub, ftw. ambiguous coupling cometd

dojo.subscribe("/hello/world", function(){ console.warn(arguments); }); dojo.publish("/hello/world", ["foo", "bar"]); Also availabile for jQuery: http://higginsforpresident.net/js/static/jq.pubsub.js

OO / CLASSY

dojo.declare("Thing", [inheritance, chain], { myProps:"override", aMethod:function(){ this.inherited(arguments); } }); new Thing();

`THIS` IS MAGIC.

.CALL / .APPLY

var obj = { b:2 } var obj2 = { b:1, foo: function(num){ this.b += num; return this.b; } } obj2.foo(1); // 2 obj2.foo.call(obj, 3); // 5 obj2.foo.apply(obj, [3]); // 5

curry, bind, hitch, partial, etc Scope/context manipulation via apply/call. Simple wrapper. promotes code re-use / DRY

// partial is to curry ... var foo = function(direction){ if(direction){ goleft(); }else{ goright(); } } var left = foo.curry(1), right = dojo.partial(foo, 0) ; left(); right();

// as bind is to hitch var o = { handler:function(response){ ... }, send:function(){ dojo.xhrPost({ url:"/the/url", handle: dojo.hitch(this, "method") }) } }; o.send();

ALSO FOR JQUERY ... http://higginsforpresident.net/js/static/jq.hitch.js

DUCK PUNCH aka: AOP

(function(d){ var rqr = d.require; d.require = function(module){ if(d.isArray(module)){ d.forEach(module, rqr, d); }else{ rqr.apply(d, arguments); } return d; // mmm chaining. } })(dojo);

// old api: dojo.require(“foo.Bar”); // new ducked apis: dojo.require([“foo.Bar”, “bar.Baz”]); dojo.require(“bam.Foo”).require(“omg.Really”) .require([“oh.Right”, “doit.ThisWayToo”]) ;

dojo(function(){ /* onload */}); dojo("#someId").style({ color:”red” }).onclick(fn); dojo.style("someId", { color:”red” }); dojo.fn.myRadPlugin = function(){ return this.forEach(...); }

Ubiquitous Unicorn.

NATIVE PROTOTYPES for fun and profit.

if(!Array.prototype.forEach){ Array.prototype.forEach = function(cb, thisObj){ thisObj = thisObj || window; for(var i = 0, l = this.length; i < l; i++){ cb.call(thisObj, ar[i], i, ar); } } } [1,2,3].forEach(function(num){ alert(num); });

if(!Array.prototype.forEach){ Array.prototype.forEach = function(cb){ for(var i = 0, l = this.length; i < l; i++){ cb.call(ar[i], i, ar); } } } [1,2,3].forEach(function(){ alert(this); });

DOJOTYPE! http://code.google.com/p/dojotype

1:1.333333 Mapping to Dojo Base Dojo dojo.date dojo.string dojo.Color

LAME MODERN BROWSERS “win”.blink()

es3ex-String! http://code.google.com/p/dojotype/source/browse/trunk/es3ex-String.js .anchor(), .link(), .fontsize, .fontcolor node.innerHTML = “click here”.link(“http://google.com”); blink(), sup(), small(), et al.

new Date() i18n formatting comparison addition

d._clobber(Date.prototype, { json: function(){ // summary: Serializes a Date object as an ISO String. Helps // when serializing a JSON string from an object containing // Date objects. return d.date.stamp.toISOString(this, { selector: 'date' }); } }); d._clobber(String.prototype, { toDate: function(options){ // summary: Convert this string into a Date object, provided it is formatted properly. return dojo.date.locale.parse(this, options); } });

JUST JAVASCRIPT. Still.

Take Away: JavaScript is fun and flexible. The DOM is the culprit. and evil. Because you can do something, doesn’t mean you should. Don’t let that stop you. Embrace the language as a whole.

THANKS! clap. or ask questions. or don’t.

@PHIGGINS http://higginsforpresident.net

Txjs

by Peter Higgins

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 122

Statistics

Txjs Presentation Transcript