Javascript Design Patterns


Published on

A brief introduction about Javascript design patterns

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Pattern Name and Classification: A descriptive and unique name that helps in identifying and referring to the pattern.
    Intent: A description of the goal behind the pattern and the reason for using it.
    Also Known As: Other names for the pattern.
    Motivation (Forces): A scenario consisting of a problem and a context in which this pattern can be used.
    Applicability: Situations in which this pattern is usable; the context for the pattern.
    Structure: A graphical representation of the pattern. Class diagrams and Interaction diagrams may be used for this purpose.
    Participants: A listing of the classes and objects used in the pattern and their roles in the design.
    Collaboration: A description of how classes and objects used in the pattern interact with each other.
    Consequences: A description of the results, side effects, and trade offs caused by using the pattern.
    Implementation: A description of an implementation of the pattern; the solution part of the pattern.
    Sample Code: An illustration of how the pattern can be used in a programming language.
    Known Uses: Examples of real usages of the pattern.
    Related Patterns: Other patterns that have some relationship with the pattern; discussion of the differences between the pattern and similar patterns.
  • Object literal.

    var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function () {
    return this.color + ' ' + this.type + ' apple';
  • Implementation.
    Known usage.
  • Implementation.
    Known usage.
  • Implementation.
    Known usage.
  • In Spine, controllers are considered the glue for an application, adding and responding to DOM events, rendering templates and ensuring that views and models are kept in sync (which makes sense in the context of what we know to be a controller).
  • Javascript Design Patterns

    2. 2. PRESENTATION SCOPE • Background. • What is a Design Pattern?. • Structure of a Design Pattern. • Anti-patterns. • Design Patterns in Javascript. • MV* Patterns.
    3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 (recommended) • Rick Waldron's jQuery-core style take on the above • Peter Higgins' plugin jquery-plugins/blob/master/pubsub.js. • AppendTo's Pub/Sub in AmplifyJS • Ben Truyman's gist
    15. 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. 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, [], 1)); }; CarManager.execute("buyVehicle", "Ford Escort", "34232");
    17. 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. •
    18. 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. 19. BACKBONE.JS COLLECTIONS • Model. Extend from Collection. var User = Backbone.Collection.extend({ model: User, url: '', parse: function(response) { //console.log('parsing user ...'); return response; } });
    20. 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. 21. BACKBONE.JS VIEW CONT. … doSearch: function() { var subject = $('#search').val() || 'Node.js'; this.tweets.url = ' 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. 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. 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. 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. 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. 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. 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>