Programming To
Patterns

How I used to write

How I used to write
Classes
DatePicker
FormValidator
Fx
Request
Slideshow
etc...

How I used to write
var myApp = {
init: function(){
myApp.apples() Classes
myApp.orange() DatePicker
myApp.lemons() FormValidator
}, Fx
apples: function(){ Request
$$(‘div.apple’).each(function(apple) { Slideshow
var form = apple.getElement(‘form’); etc...
form.addEvent(‘submit’, funciton(event){ ....});
});
},
orange: function(){
$(‘orange’).getElements(‘li’).each...
},
etc...

How I used to write
var myApp = {
init: function(){
myApp.apples() Classes
myApp.orange() DatePicker
myApp.lemons() FormValidator
}, Fx
apples: function(){ Request
$$(‘div.apple’).each(function(apple) { Slideshow
var form = apple.getElement(‘form’); etc...
form.addEvent(‘submit’, funciton(event){ ....});
});
},
orange: function(){
$(‘orange’).getElements(‘li’).each...
},
etc...
This tends to get out of hand

Banging it out...
<script>
window.addEvent(‘domready’, function(){
$(‘myForm’).addEvent(‘submit’, function(evt){
evt.preventDefault();
this.send({
onComplete: function(result){ ... },
update: $(‘myContainer’)
});
});
});
</script>
This is very tempting.

Pros
• Writing the logic for a specific app is fast
and furious
• The test environment is the app

Pros
• Writing the logic for a specific app is fast
and furious
• The test environment is the app
& Cons
• It’s much harder to maintain
• A high percentage of code you write for the
app isn’t reusable

Using Classes

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

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

Extending Classes

Extending Classes
var Human = new Class({
initialize: function(name, age){
this.name = name;
this.age = age;
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});

Extending Classes
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
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
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;
}); }
});
var bob = new Human('Bob', 25);

Extending Classes
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;
}); }
});
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

Implementing Classes

Implementing Classes
var Human = new Class({
initialize: function(name, age){
this.name = name;
this.age = age;
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});

Implementing Classes
var Human = new Class({
initialize: function(name, age){
this.name = name;
this.age = age;
},
isAlive: true,
energy: 1,
eat: function(){
this.energy++;
}
});
var Warrior = new Class({
energy: 100,
kills: 0,
attack: function(target){
if (target.energy < this.energy) {
target.isAlive = false;
this.kills++;
}
this.energy = this.energy - 5;
}
});

Implementing Classes
var Human = new Class({ var Ninja = new Class({
initialize: function(name, age){ Extends: Human,
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++;
}
this.energy = this.energy - 5;
}
});

When to write a class...

When to write a class...

When to write a class...

When to write a class...

When to write a class...

Key Aspects of JS Classes

Key Aspects of JS Classes
• Shallow inheritance works best.

Key Aspects of JS Classes
• Shallow inheritance works best.
• Break up logic into small methods.

Key Aspects of JS Classes
• Shallow inheritance works best.
• Break up logic into small methods.
• Break up functionality into small classes.

Key Aspects of JS Classes
• Shallow inheritance works best.
• Break up logic into small methods.
• Break up functionality into small classes.
• Build ‘controller’ classes for grouped
functionality.

Key Aspects of JS Classes
• Shallow inheritance works best.
• Break up logic into small methods.
• Break up functionality into small classes.
• Build ‘controller’ classes for grouped
functionality.
• Use options and events liberally.

Key Aspects of JS Classes
• Shallow inheritance works best.
• Break up logic into small methods.
• Break up functionality into small classes.
• Build ‘controller’ classes for grouped
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>
$(‘myForm’).addEvent(‘submit’, function(evt){
evt.preventDefault();
this.send({
onComplete: function(result){ ... },
update: $(‘myContainer’)
});
});
</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.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’),
onComplete: this.onComplete.bind(this)
});
},
onComplete: function(responseTxt){
this.container.set(‘html’, responseTxt);
}
});
new FormUpdater($(‘myForm’), $(‘myContainer’));

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

How I write now

How I write now
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...

How I write now
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...
I write as little of this as possible

Pros
• Small, reusable, readable, generic classes
• Only the variables are managed in a specific application
• The footprint between a specific 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 specific application
• The footprint between a specific 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.

I use MooTools

I use MooTools
• MooTools makes JavaScript easier (as do
all frameworks).

I use MooTools
• MooTools makes JavaScript easier (as do
all frameworks).
• It encourages you to reuse your work, and
to write your code to be flexible for future
use.

I use MooTools
• MooTools makes JavaScript easier (as do
all frameworks).
• It encourages you to reuse your work, and
to write your code to be flexible for future
use.
• It is designed to be extended.

I use MooTools
• MooTools makes JavaScript easier (as do
all frameworks).
• It encourages you to reuse your work, and
to write your code to be flexible for future
use.
• It is designed to be extended.
• These are qualities of JavaScript really;
MooTools just makes the interface more
accessible.