A brief introduction about Javascript design patterns

1. JAVASCRIPT
DESIGN
PATTERNS
BASED IN ADDY OSMANI’S BOOK
‘ESSENTIAL JAVASCRIPT & JQUERY DESIGN
PATTERNS’

2. PRESENTATION SCOPE
• Background.
• What is a Design Pattern?.
• Structure of a Design Pattern.
• Anti-patterns.
• Design Patterns in Javascript.
• MV* Patterns.

3. BACKGROUND
1977 First mention of
patterns in
engineering in 'A
Pattern Language' by
Christopher
Alexander.
1987 First studies about
applying patterns to
programming. Presented
at the OOPSLA
conference by Kent Beck
and Ward Cunningham
1995 'Design Patterns:
Elements Of Reusable
Object-Oriented
Software' by Erich
Gamma, Richard Helm,
Ralph Johnson and
John Vlissides so called
GoF

4. BACKGROUND
• 2002 Patterns of Enterprise Application Architecture
by Martin Fowler
• 2003 Enterprise Integration Patterns: Designing,
Building, and Deploying Messaging Solutions
by Gregor Hohpe and Bobby Woolf
• 2009 SOA Design Patterns by Thomas Erl

5. WHAT IS A DESIGN PATTERN?
1. A pattern is a general reusable solution to a commonly
occurring problem within a given context.
2. It is a description or template for how to solve a problem
that can be used in many different situation
REMEMBER …
A design pattern is not a finished design that can be
transformed directly into code

6. WHAT IS A DESIGN PATTERN?
1. Patterns are proven solutions.
Solid approaches to solving issues in
software development.
2. Patterns can be easily reused.
Less time about your code structure, more
time about solution logic
3. Patterns can be expressive.
Set structure and ‘vocabulary’ to the solution
presented. Communication is easier.

7. STRUCTURE OF A DESIGN PATTERN
• Pattern name and a description
• Context outline
• Problem statement.
• Solution.
• Design.
• Implementation.
• Illustrations.
• Examples.
• Co-requisites.
• Relations.
• Known usage.
• Discussions.

8. ANTI-PATTERNS
Term coined in 1995 by Andrew Koening in the C++ Report.
• Describe a bad solution to a particular problem which
resulted in a bad situation occurring
• Describe how to get out of said situation and how to go from
there to a good solution
The build Monkey Antipattern

9. DESIGN PATTERNS (IN JAVASCRIPT)
• Creational. How the entities should be created to
fit its purpose. Constructor, Factory, Abstract,
Prototype, Singleton and Builder.
• Structural. Simple ways of relationship between
different objects. Module, Decorator, Facade,
Flyweight, Adapter and Proxy
• Behavioral. improving or streamlining the
communication between disparate objects in a
system. Iterator, Mediator, Observer, Command
and Visitor.

10. CONSTRUCTOR AND PROTOTYPE
PATTERN.
Keep in mind that Javascript is a class-less programming language, but these
can be simulated usign functions.
function Car ( model,color,year ){
this.model = model;
this.color = 'silver';
this.year = '2012';
this.getInfo = function(){
return this.model + ' ' + this.year;
}
}
Constructor Pattern. Create new Car objects.
var civic = new Car( "Honda Civic" , "blue", 20000 );
Prototype Pattern. Functions in javascript have a property called a prototype.
Car.prototype.toString = function(){
return this.model + ” did " + this.miles + " miles";
};

11. MODULE PATTERN.
Group several related elements such as classes, singletons,
methods, globally used, into a simple object. It fakes classes in
Javascript.
Defined Richard Cornford in 2003 and popularized by Douglas
Crockford in his lectures.
Pros:
• Encapsulation, it gives us an API (public and private attributes or
methods),
• Avoid names conflicting with other function
• Easier debugging (public functions are named)
Cons:
• Difficult to refactor.

12. MODULE PATTERN.
var testModule = (function(){
var counter = 0;
var privateMethod = function() {
// do some very nasty stuff.
}
return {
incrementCounter: function() {
return counter++;
},
resetCounter: function() {
console.log('counter value before reset:’+ counter);
counter = 0;
}
};
})();

13. REVEALING MODULE PATTERN.
Coined by by Christian Heilmann (Mozilla Foundation).
Pros:
• Sintax more consistent and easy to read.
• Easier to refactor.
var myRevealingModule = (function(){
var name = 'John Smith';
function updatePerson(){
name = 'John Smith Updated';
}
function setPerson (value) {
name = value;
}
return {
set: setPerson,
};
}());

14. OBSERVER OR PUB/SUB PATTERN.
• It is a design pattern which allows an object (known as a
subscriber) to watch another object (the publisher).
• Loose coupling, ability to break down our applications into
smaller, general manageability.
• Many implementation in Javascript.
• Ben Alman's Pub/Sub gist https://gist.github.com/661855
(recommended)
• Rick Waldron's jQuery-core style take on the above
https://gist.github.com/705311
• Peter Higgins' plugin http://github.com/phiggins42/bloody-
jquery-plugins/blob/master/pubsub.js.
• AppendTo's Pub/Sub in AmplifyJS http://amplifyjs.com
• Ben Truyman's gist https://gist.github.com/826794

15. OBSERVER OR PUB/SUB PATTERN.
var pubsub = {};
(function(q) {
var topics = {},
subUid = -1;
q.publish = function( topic, args ) {
if ( !topics[topic] ) { return false; }
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);}
return this;
};
q.subscribe = function( topic, func ) {
if (!topics[topic]) { topics[topic] = []; }
var token = (++subUid).toString();
topics[topic].push({ token: token, func: func });
return token;
};
}( pubsub ));

16. COMMAND PATTERN
The Command pattern aims to encapsulate method invocation, requests
or operations into a single object and gives you the ability to both
parameterize and pass method calls around that can be executed at your
discretion.
(function(){
var CarManager = {
buyVehicle: function( model, id ){
return 'You have purchased Item '
+ id + ', a ' + model;
}};
})();
CarManager.execute = function (name) {
return CarManager[name] && CarManager[name].apply
(CarManager, [].slice.call(arguments, 1));
};
CarManager.execute("buyVehicle", "Ford Escort", "34232");

17. MV* PATTERNS
• Software Design pattern or Architecture design pattern?.
• Coined by Trygve Reenskaug during his time working on
Smalltalk-80 (1979) where it was initially called Model-View-
Controller-Editor.
• Variations:
• MVC. Model-View-Controller. Spine.js / Backbone.js (MVR)
• MVP. Model-View-Presenter. Backbone.js
• MVVM. Model-View-ViewModel. Knockout.js / Knockback.js
• It has been structuring desktop and server-side applications,
but it's only been in recent years that come to being applied to
JavaScript.
• http://addyosmani.github.com/todomvc/

18. BACKBONE.JS MVC, MVP OR MVR?
• Flexible framework to build Javascript web applications.
• Backbone.js doesn’t fit in any specific pattern.
• There is no controller in Backbone. Views and Routers instead.
• Backbone’s Architecture.
• Model. Extend from Model or Collection.
var Todo = Backbone.Model.extend({
defaults: {
content: "empty todo...",
done: false
},
// Ensure that each todo created has `content`.
initialize: function() {
if (!this.get("content")) {
this.set({"content": this.defaults.content});
}
}
});

19. BACKBONE.JS COLLECTIONS
• Model. Extend from Collection.
var User = Backbone.Collection.extend({
model: User,
url: 'https://api.twitter.com/1/user/show.json?id=7&callback=?',
parse: function(response) {
//console.log('parsing user ...');
return response;
}
});

20. BACKBONE.JS VIEW
• View. It can see as a a View, a Presenter or even a Controller.
var PageView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'doSearch'
},
initialize: function() {
this.template = _.template('<li><%= name %></li>');
_.bindAll(this, 'render', 'addItem');
this.('reset', function(collection) {
_this.$('#tweets').empty();
collection.each(function(tweet) {
_this.addItem(tweet);
});
});
this.render();
}, …

21. BACKBONE.JS VIEW CONT.
…
doSearch: function() {
var subject = $('#search').val() || 'Node.js';
this.tweets.url = 'http://search.twitter.com/ search.json?q=’
+ subject + '&rpp=8&callback=?';
this.tweets.fetch();
},
render: function() {
var html = template({
img: item.get('profile_image_url') ,
user: item.get('from_user_name'),
text: item.get('text') });
$('#tweets', this.el).append(html);
return this;
}
});
You also use templating within the View layer. (Mustache.js, Jquery.tmpl, ….).

22. BACKBONE.JS ROUTER
• Router. It may be seen as a pseudo-controller.
var myRouter = Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/users
"search/:query/p:page": "search" // #search/users/p7
},
help: function() {
...
},
search: function(query, page) {
...
}
});

23. SPINE.JS. MVC LIBRARY.
• Controllers are considered the glue between
the Model and the View.
var PhotosController = Spine.Controller.sub({
init: function(){
this.item.bind("update", this.proxy(this.render));
this.item.bind("destroy", this.proxy(this.remove));
},
render: function(){
this.replace($("#photoTemplate").tmpl(this.item));
return this;
},
remove: function(){
this.el.remove();
this.release();
}
});

24. KNOCKOUT.JS MVVM
• Defined in 2005 by John Grossman for use with
Windows Presentation Foundation (WPF) and
Silverlight
• More clearly separate the development of user-
interfaces (UI) from that of the business logic and
behavior in an application.
• Make use of declarative data bindings to allow a
separation of work on Views from other layers. It
provides data-binding from the Model directly from
the View
• Based on Model View PresentationModel. Martin
Fowler wrote an article on PresentationModels
back in 2004

25. KNOCKOUT.JS MVVM
• Model. It uses the Observable property that can
notify subscribers about changes and automatically
detect dependencies
• View. A KnockoutJS View is simply a HTML
document with declarative bindings to link it to the
ViewModel
• ViewModel. The ViewModel can be considered a
specialized Controller that acts as a data converter.
It changes Model information into View information,
passing commands from the View to the Model.

26. KNOCKOUT.JS VIEWMODEL
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function() {
var currentVal = this.lastName();
this.lastName(currentVal.toUpperCase());
};
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());

27. KNOCKOUT.JS VIEW
• Plain HTML
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName">Go caps</button>