How AngularJS Embraced Traditional Design Patterns

How Angular Embraced
Traditional OOP Design
Patterns

Ran Mizrahi (@ranm8)

Open Source Dpt. Leader @ CodeOasis

About CodeOasis

•
•
•
•

CodeOasis specializes in cutting-edge web solutions.

!

Large variety of customers (from startups to enterprises).

!

We’re passionate about JavaScript (-:

!

Technologies we love:

•
•
•
•
•
•

!

Play Framework

AngularJS

nodeJS

HTML5

CSS3

!

Our Microsoft department works with C#, WPF, etc.

Implementing
Design Patterns in
JavaScript

Implementing Design Patterns in JavaScript
Most traditional object-oriented languages

•
•
•
•
•

Classes.

!

Interfaces.

!

Inheritance.

!

Encapsulation.

!

Polymorphism.

We don’t have classes…
var User = new Class({
initialize: function(name) {
this.name = name;
},
setEmail: function(mail) {
this.mail = mail;
}
});
!
var someUser = new User('Ran Mizrahi');
* MooTools Example

We don’t have interfaces…

var DynamicMap = new Interface('DynamicMap', ['centerOnPoint', 'zoom',
'draw']);

!

function displayRoute(mapInstance) {
Interface.ensureImplements(mapInstance, DynamicMap);

!

mapInstace.centerOnPoint(12, 34);
mapInstace.draw(5);
mapInstace.zoom();
}
* Taken from the book “Pro JavaScript Design Patterns”

We don’t have classical inheritance..
var User = new Class({
!
extends: BaseUser,
initialize: function(name) {
this.name = name;
},
setEmail: function(mail) {
this.mail = mail;
}
});
!
var someUser = new User('Ran Mizrahi');
* MooTools Example

Learning To Embrace JavaScript

“When I see a bird that walks
like a duck and sounds like a
duck, I call that bird a duck”
— James Whitcomb Riley


This is how a duck looks like…

function isWindow(obj) {
return obj && obj.document && obj.location
&& obj.alert && obj.setInterval;
}
* Angular implementation of the isWindow method…

JavaScript is simple (can be explained over a beer) and
makes us write less code…
Java:!
List<Book> books = new ArrayList<Book>();!

!

JavaScript:!
var books = [];!

Object is a unit responsible for state and behaviour and
JavaScript function has them both.
function Unit() {
var state;
!
function behaviour() {
// Some behaviour
}

}

return function() {
// Do something
}

We don’t have visibility keywords (e.g. private, protected,
public) but we do have closures
var Service = (function(window, undefined) {
// Private
function base64Encode(string) {
return window.btoa(string);
}
// Public
return {
encode: function(string) {
return base64Encode(string);
}
};
}(window));

State management can be as easy by using constructor
functions or closures…
function someFunction(baseUrl) {
var config = {
url: baseUrl
};

};

return function() {
return config.url + '/hey';
}

function Duck(name) {
// Object state
this.name = name;
}

Polymorphism can be beautiful without interfaces, if it’s just a
duck…
function Duck() {
// Private state here…

!

function Bird() {
// Private state here…

!

// Public state
return {
walk: function() {
// Walk like a duck
return quack();
},

// Public state
return {
walk: function() {
// Walk like a bird
return tweet();
},

talk: function() {
// Talk like a duck
}

talk: function() {
// Talk like a bird
}

};
}

};
}
function talker(someBird) {
// Make it talk
someBird.talk();
}

But what will happen if the duck won’t talk…

JavaScript has prototypical inheritance but yet, I don’t often
feel I need to inherit anything (prefer polymorphic composition
over inheritance).

For true coverage and conﬁdence, compilers won’t do the job
and they can’t replace real unit test coverage.

•
•
•

Almost everything is mutable.

!

Easily stub anything.

!

Easily fake dependencies.

MVC and Controllers
angular.module('myModule')
.controller('MyCtrl', ['$http', MyCtrl]);
!
// Dependencies are in closure (-:
function MyCtrl($http) {
var someState = {};

}

function doSomething() {
// Closure is accessible.
}

•

Controllers are just JavaScript function.  

•

They can encapsulate and preserve state by using closures.

•

!

Exposes behaviour with $scope.

Dependency Injection
.controller('MyCtrl', ['$http', MyCtrl]);
function MyCtrl($http) {
$http.get('http://google.com').then(getTheMonkey);
}

•

Simple dynamic dependency injection based on arrays and
naming convention.  

•

Makes your code polymorphic by easily replacing your
implementation.

•

!

Super easy to isolate and test.

Decorator
Decorator is a pattern used to “decorate” functionality of
certain object.

Decorator
Angular made service decoration really easy…
$provider.decorator('$log', ['delegate', function(delegate) {
// Convert warning to error
delegate.warn = delegate.error;
// Return the decorated service
return delegate;
}]);

Ask for a function, manipulate it and return a new one (-:

Facade
A facade is an object that provides a simpliﬁed interface to a
larger body of code and logic.
.factory('ReallyComplicatedService', [Service]);

!

function Service($http) {
// Do all the private stuff and handle the other library
// Expose really simple interface
return {
get: function() {
// Get it
},
del: function() {
// Delete it
}
};
}

Singleton
Singletons is a design pattern that restricts the instantiation of
a class to one object.
var Singleton = (function() {
function privateFunction() {
// Do private stuff
}
return {
someMethod: function() {
// Do public stuff
},
anotherMethod: function() {
// Do some more public stuff
}

};
}());

JavaScript makes singleton really easy (-:  
But still, it’s global and hard to conﬁgure…

Singleton
Angular used it and provided us with dependency injection to
avoid singleton downsides among others.
.provider('myHttp', myHttp);
function myHttp() {
var baseUrl;
this.baseUrl = function(value) {
if (!value) {
return baseUrl;
}
};

}

baseUrl = value;

this.$get = ['$q', function() {
// myHttp service implementation...
}];

How AngularJS Embraced Traditional Design Patterns

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to How AngularJS Embraced Traditional Design Patterns (20)

Recently uploaded (20)

How AngularJS Embraced Traditional Design Patterns