SWDC 2010: Programming to Patterns

Programming To
Patterns
Dylan Schiemann
(SitePen and Dojo)

SWDC, June 2, 2010

Sunday, May 30, 2010

Patterns?
• Abstraction is the key
• Focus less on the implementation at
hand and more on the code

• Think in terms of an API
• Imagine using it somewhere else
• Write granular, atomic components
• Use Test Driven Development

Example 1: The
Namespaced Library


Example 1: The
Namespaced Library
Classes
DatePicker
FormValidator
Fx
Request
Slideshow
etc...


Example 1: The
Namespaced Library
var myApp = {
init: function(){
myApp.apples()
myApp.orange() Classes
myApp.lemons() DatePicker
}, FormValidator
apples: function(){ Fx
$$(‘div.apple’).each(function(apple) { Request
var form = apple.getElement(‘form’); Slideshow
form.addEvent(‘submit’, function(event){ ....}); etc...
});
},
orange: function(){
$(‘orange’).getElements(‘li’).each...
},
etc...


Example 1: The
Namespaced Library
var myApp = {
init: function(){
myApp.apples()
myApp.orange() Classes
myApp.lemons() DatePicker
}, FormValidator
apples: function(){ Fx
$$(‘div.apple’).each(function(apple) { Request
var form = apple.getElement(‘form’); Slideshow
form.addEvent(‘submit’, function(event){ ....}); etc...
});
},
orange: function(){
$(‘orange’).getElements(‘li’).each...
},
etc...

This tends to get out of hand

Banging it out...
<script>dojo.ready(function() {
dojo.connect(dojo.byId('myForm'), 'onsubmit', function(evt){
dojo.stopEvent(evt);
var formNode = evt.target;
dojo.xhrPost({
form: formNode,
url: formNode.action,
handle: function(response, ioArgs){
dojo.byId('myContainer').innerHTML = response;
}
});});});
</script>

This is very tempting.

Pros
• Writing the logic for a speciﬁc app is fast
and furious

• The test environment is the app


Pros
• Writing the logic for a speciﬁc app is fast
and furious

& Cons
• It’s much harder to maintain
• A high percentage of code you write for the
app isn’t reusable



What to do?

• Objects; stateful objects
• Some people think of these as “Classes”
• This is how JavaScript itself solves these
problems

• Most toolkits/frameworks help you do this


`
This is how
MooTools does it
var Human = new Class({
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});

Human


`
This is how
MooTools does it
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});

var bob = new Human();
//bob.energy === 1

bob.eat();
//bob.energy === 2

Human

bob

`
This is how This is how
MooTools does it Dojo does it
var Human = new Class({ dojo.declare("Human",
isAlive: true, null, {
energy: 1, isAlive: true,
eat: function(){ energy: 1,
this.energy++; eat: function(){
} this.energy++;
}); }
}
);
//bob.energy === 1
bob.eat(); //bob.energy === 1
//bob.energy === 2
bob.eat();
//bob.energy === 2


Prototypes


Prototypes
var humanBase = {
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
};

humanBase

object (our prototype)


Prototypes
var humanBase = { //MooTools
isAlive: true, var Human =
energy: 1, new Class(humanBase);
eat: function(){
this.energy++; //Dojo
} dojo.declare(“Human”,
}; null, humanBase);

humanBase Human

object (our prototype) Function (constructor)


Prototypes
var humanBase = { //MooTools
isAlive: true, var Human =
energy: 1, new Class(humanBase); //MooTools & Dojo
eat: function(){ var bob = new Human()
this.energy++; //Dojo
} dojo.declare(“Human”,
}; null, humanBase);

humanBase Human bob

object (our prototype) Function (constructor) object (our instance)


Prototypes
energy ==
energy == 1
humanBase Human bob undeﬁned


bob.energy == Human.prototype.energy


Prototypes
energy ==
energy == 1



bob.foo == undefined //bob.foo AND Human.prototype.foo are not found


Prototypes
energy ==
energy == 1

foo == “bar”



bob.foo = “bar” //bob has a “foo” property, the prototype is not checked


Prototypes
energy == 1 energy == 2
humanBase Human bob

foo == “bar”



bob.foo = “bar” //bob has a “foo” property, the prototype is not checked

bob.eat() //assigns a value to bob.energy; Human.prototype.energy is no
//longer checked


Extending Classes
(MooTools)


Extending Classes
(MooTools)

initialize: function(name, age){
this.name = name;
this.age = age;
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});


Extending Classes
(MooTools)

var Human = new Class({ var Ninja = new Class({
initialize: function(name, age){ Extends: Human,
this.name = name; initialize: function(side, name, age){
this.age = age; this.side = side;
}, this.parent(name, age);
isAlive: true, },
energy: 1, energy: 100,
eat: function(){ attack: function(target){
this.energy++; this.energy = this.energy - 5;
} target.isAlive = false;
}); }
});


Extending Classes
(MooTools)

isAlive: true, },
}); }
});

var bob = new Human('Bob', 25);


Extending Classes
(MooTools)

isAlive: true, },
}); }
});

var bob = new Human('Bob', 25);

var blackNinja =
new Ninja('evil', 'Nin Tendo', 'unknown');
//blackNinja.isAlive = true
//blackNinja.name = 'Nin Tendo'

blackNinja.attack(bob);
//bob never had a chance


Extending Classes
(Dojo)


Extending Classes
(Dojo)

dojo.declare("Human", null, {
constructor: function(kwArgs) {
dojo.mixin(this, kwArgs);
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});


Extending Classes
(Dojo)

dojo.declare("Human", null, { dojo.declare(“Ninja”, Human,
constructor: function(kwArgs) { {
dojo.mixin(this, kwArgs); // Auto constructor inheritance
}, energy: 100,
isAlive: true, attack: function(target){
energy: 1, this.energy = this.energy - 5;
eat: function(){ target.isAlive = false;
this.energy++; }
} );
});


Extending Classes
(Dojo)

}, energy: 100,
this.energy++; }
} );
});

var bob = new Human({name:'Bob', age: 25});


Extending Classes
(Dojo)

}, energy: 100,
this.energy++; }
} );
});

var bob = new Human({name:'Bob', age: 25});

var blackNinja =
new Ninja({side:'evil', name:'Nin Tendo', age:'unknown'});
//blackNinja.isAlive = true
//blackNinja.name = 'Nin Tendo'

blackNinja.attack(bob);
//bob never had a chance


Mixins with Dojo


Mixins with Dojo
dojo.declare(“Human”, null, {
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});


Mixins with Dojo
dojo.declare(“Human”, null, {
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});

dojo.declare(“Warrior”, null, {
energy: 100,
kills: 0,
attack: function(target){
if (target.energy < this.energy) {
target.isAlive = false;
this.kills++;
}
this.energy = this.energy - 5;
}
});


Mixins with Dojo
dojo.declare(“Human”, null, { dojo.declare(“Ninja”, [Human, Warrior], {
constructor: function(kwArgs) { });
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});
dojo.declare(“Samurai”, [Human, Warrior], {
side: 'good',
dojo.declare(“Warrior”, null, { energy: 1000
energy: 100, });
kills: 0,
this.kills++;
}
}
});


Mixins with MooTools


this.name = name;
this.age = age;
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});


this.name = name;
this.age = age;
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});

var Warrior = new Class({
energy: 100,
kills: 0,
this.kills++;
}
}
});


this.name = name; Implements: [Warrior],
this.age = age; initialize: function(side, name, age){
}, this.side = side;
isAlive: true, this.parent(name, age);
energy: 1, }
eat: function(){ });
this.energy++;
}
});

var Warrior = new Class({ var Samurai = new Class({
energy: 100, Extends: Human,
kills: 0, Implements: [Warrior],
attack: function(target){ side: 'good',
if (target.energy < this.energy) { energy: 1000
target.isAlive = false; });
this.kills++;
}
}
});


When to write a class...


Best Practices


Best Practices
• Shallow inheritance works best.


Best Practices
• Break up logic into small methods.


Best Practices
• Break up functionality into small classes.


Best Practices
• Build ‘controller’ classes for grouped
functionality.


Best Practices
functionality.

• Use options and events liberally.


Best Practices
functionality.

• Use options and events liberally.
• Don’t be afraid to refactor, but avoid
breaking the interface.


Let’s look at that earlier example again
<script>dojo.ready(function() {
dojo.connect(dojo.byId('myForm'), 'onsubmit',function(evt){
dojo.stopEvent(evt);
var formNode = evt.target;
dojo.xhrPost({
form: formNode,
url: formNode.action,
handle: function(response, ioArgs){
dojo.byId('myContainer').innerHTML = response;
}
});});});


And here's the MooTools version
<script>window.addEvent(‘domready’, function(){
$(‘myForm’).addEvent(‘submit’, function(evt){
evt.preventDefault();
this.set(‘send’, {
onComplete: function(result){
$(‘myContainer’).set(‘html’, result);
}
});
this.send();
});
});</script>


Program a Pattern
var FormUpdater = new Class({
initialize: function(form, container, options) {
this.form = $(form);
this.container = $(container);
this.request = new Request(options);
this.request.addEvent(‘success’,this.onComplete.bind(this));
this.attach();
},
attach: function(){
this.form.addEvent(‘submit’,this.send.bind(this));
},
send: function(evt){
if (evt) evt.preventDefault();
this.request.send({
url: this.form.get(‘action’),
data: this.form
});
},
onComplete: function(responseTxt){
this.container.set(‘html’, responseTxt);
}
});
new FormUpdater($(‘myForm’), $(‘myContainer’));


...and the Dojo Version
dojo.declare(‘foo.FormUpdater’, null, {
constructor: function(form, container, options) {
this.form = form;
this.container = container;
this.requestOptions = options;
this.attach();
},
attach: function(){

dojo.connect(this.form, ‘onsubmit’, this ‘send’);
},
send: function(evt){
if(evt) dojo.stopEvent(evt);
dojo.xhrPost(dojo.mixin({
form: this.form,
url: this.form.action,
handle: dojo.hitch(this, "onComplete")
}, this.requestOptions));
},
onComplete: function(data){

dojo.attr(this.container, ‘innerHTML’, data);
}
});
new foo.FormUpdater(dojo.byId(‘myForm’),
dojo.byId(‘myContainer’));

And then extend it...
dojo.declare(“foo.FormUpdater.Append”, FormUpdater, {
onComplete: function(data){
dojo.create(‘p’, {innerHTML: data}, this.container);
}
});
new foo.FormUpdater.Append(dojo.byId(‘myForm’),
dojo.byId(‘myTarget’));


The MooTools version...
var FormUpdater.Append = new Class({
Extends: FormUpdater,
onComplete: function(responseTxt){
this.container.adopt(
new Element(‘div’, {html: responseTxt})
);
}
});
new FormUpdater.Append($(‘myForm’), $(‘myTarget’));


Developing with Class


var myApp = {
init: function(){
myApp.apples() Classes
myApp.orange() DatePicker
myApp.lemons() FormValidator
}, Fx
apples: function(){ Request
new AppleGroup($$(‘div.apple’)); Slideshow
}, Apple
orange: function(){ AppleGroup
new Orange($(‘orange’) Orange
}, etc...
etc...


var myApp = {
init: function(){
myApp.apples() Classes
myApp.orange() DatePicker
myApp.lemons() FormValidator
}, Fx
apples: function(){ Request
new AppleGroup($$(‘div.apple’)); Slideshow
}, Apple
orange: function(){ AppleGroup
new Orange($(‘orange’) Orange
}, etc...
etc...

Write as little of this as possible


Pros
• Small, reusable, readable, generic classes
• Only the variables are managed in a speciﬁc application
• The footprint between a speciﬁc app and your generic
codebase is as small as possible - only instantiation calls


Pros
• Small, reusable, readable, generic classes
• Only the variables are managed in a speciﬁc application
• The footprint between a speciﬁc app and your generic
codebase is as small as possible - only instantiation calls

& Cons
• Requires a bit more skill.
• Can often mean more bytes of code in the short term.
• Test driven development is a must.


MooTools and Dojo Help You Do This


• MooTools and Dojo make JavaScript easier
(as do all toolkits & frameworks).



• They encourage you to reuse your work,
and to write your code to be ﬂexible for
future use.



future use.

• They are designed to be extended.



future use.

• They are designed to be extended.
• These are qualities of JavaScript really;
MooTools and Dojo just make the interface
more accessible.


Q&A
• http://bit.ly/dofyM5
• http://dojotoolkit.org/
• http://mootools.net/
• http://sitepen.com/
• http://jsﬁddle.net/
• @dylans @dojo @mootools
• Thanks to Aaron Newton

SWDC 2010: Programming to Patterns

More Related Content

Similar to SWDC 2010: Programming to Patterns

More from dylanks

Recently uploaded

SWDC 2010: Programming to Patterns