The document discusses how to write JavaScript code using classes and patterns. It begins by showing an example of how code was written without classes. It then demonstrates how to implement classes in JavaScript by creating base classes, extending classes, and composing classes. The benefits of writing code using classes such as reusability and readability are discussed. The document also provides tips for when and how to write classes in JavaScript.

1. Programming To
Patterns

2. How I used to write

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

4. 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...

5. 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

6. 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.

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

8. 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

9. Using Classes

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

11. 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

12. Extending Classes

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

14. 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;
}); }
});

15. 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;
}); }
});

16. 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);

17. 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

18. Implementing Classes

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

20. 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;
}
});

21. 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;
}
});

22. When to write a class...

23. When to write a class...

24. When to write a class...

25. When to write a class...

26. When to write a class...

27. Key Aspects of JS Classes

28. Key Aspects of JS Classes
• Shallow inheritance works best.

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

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

31. 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.

32. 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.

33. 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.

34. Let’s look at that earlier example again
...
<script>
$(‘myForm’).addEvent(‘submit’, function(evt){
evt.preventDefault();
this.send({
onComplete: function(result){ ... },
update: $(‘myContainer’)
});
});
</script>

35. 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’));

36. ...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’));

37. How I write now

38. 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...

39. 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

40. 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

41. 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.

42. I use MooTools

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

44. 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.

45. 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.

46. 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.