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 startu...
Implementing
Design Patterns in
JavaScript
Implementing Design Patterns in JavaScript
Most traditional object-oriented languages

•
•
•
•
•

Classes.

!

Interfaces....
Implementing Design Patterns in JavaScript
We don’t have classes…
var User = new Class({
initialize: function(name) {
this...
Implementing Design Patterns in JavaScript
We don’t have interfaces…

var DynamicMap = new Interface('DynamicMap', ['cente...
Implementing Design Patterns in JavaScript
We don’t have classical inheritance..
var User = new Class({
!
extends: BaseUse...
Stop Forcing It!
Embrace It!
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”...
Learning To Embrace JavaScript

This is how a duck looks like…

function isWindow(obj) {
return obj && obj.document && obj...
Learning To Embrace JavaScript
JavaScript is simple (can be explained over a beer) and
makes us write less code…
Java:!
  ...
Learning To Embrace JavaScript
Object is a unit responsible for state and behaviour and
JavaScript function has them both....
Learning To Embrace JavaScript
We don’t have visibility keywords (e.g. private, protected,
public) but we do have closures...
Learning To Embrace JavaScript
State management can be as easy by using constructor
functions or closures…
function someFu...
Learning To Embrace JavaScript
Polymorphism can be beautiful without interfaces, if it’s just a
duck…
function Duck() {
//...
Learning To Embrace JavaScript
But what will happen if the duck won’t talk…

JavaScript has prototypical inheritance but y...
Learning To Embrace JavaScript
For true coverage and confidence, compilers won’t do the job
and they can’t replace real uni...
Design Patterns in
AngularJS
MVC and Controllers
angular.module('myModule')
.controller('MyCtrl', ['$http', MyCtrl]);
!
// Dependencies are in closure ...
Dependency Injection
angular.module('myModule')
.controller('MyCtrl', ['$http', MyCtrl]);
function MyCtrl($http) {
$http.g...
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) {
// Co...
Facade
A facade is an object that provides a simplified interface to a
larger body of code and logic.
angular.module('myMod...
Singleton
Singletons is a design pattern that restricts the instantiation of
a class to one object.
var Singleton = (funct...
Singleton
Angular used it and provided us with dependency injection to
avoid singleton downsides among others.
angular.mod...
Thank you!

Questions?
Upcoming SlideShare
Loading in...5
×

How AngularJS Embraced Traditional Design Patterns

8,346

Published on

Ran Mizrahi talks about how AngularJS embraced traditional design patterns and used the benefits of JavaScript for that cause.

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,346
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
61
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

How AngularJS Embraced Traditional Design Patterns

  1. 1. How Angular Embraced Traditional OOP Design Patterns Ran Mizrahi (@ranm8) Open Source Dpt. Leader @ CodeOasis
  2. 2. 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.
  3. 3. Implementing Design Patterns in JavaScript
  4. 4. Implementing Design Patterns in JavaScript Most traditional object-oriented languages • • • • • Classes. ! Interfaces. ! Inheritance. ! Encapsulation. ! Polymorphism.
  5. 5. Implementing Design Patterns in JavaScript 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
  6. 6. Implementing Design Patterns in JavaScript 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”
  7. 7. Implementing Design Patterns in JavaScript 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
  8. 8. Stop Forcing It!
  9. 9. Embrace It!
  10. 10. 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
  11. 11. Learning To Embrace JavaScript 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…
  12. 12. Learning To Embrace JavaScript 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 = [];!
  13. 13. Learning To Embrace JavaScript 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 }
  14. 14. Learning To Embrace JavaScript 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));
  15. 15. Learning To Embrace JavaScript 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; }
  16. 16. Learning To Embrace JavaScript 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(); }
  17. 17. Learning To Embrace JavaScript 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).
  18. 18. Learning To Embrace JavaScript For true coverage and confidence, 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.
  19. 19. Design Patterns in AngularJS
  20. 20. 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.
  21. 21. Dependency Injection angular.module('myModule') .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.
  22. 22. Decorator Decorator is a pattern used to “decorate” functionality of certain object.
  23. 23. 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 (-:
  24. 24. Facade A facade is an object that provides a simplified interface to a larger body of code and logic. angular.module('myModule') .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 } }; }
  25. 25. 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 configure…
  26. 26. Singleton Angular used it and provided us with dependency injection to avoid singleton downsides among others. angular.module('myModule') .provider('myHttp', myHttp); function myHttp() { var baseUrl; this.baseUrl = function(value) { if (!value) { return baseUrl; } }; } baseUrl = value; this.$get = ['$q', function() { // myHttp service implementation... }];
  27. 27. Thank you! Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×