Javascript – The importance of Design Patterns with Javascript, NodeJs et al

design-patternsjavascriptnode.js

With Javascript appearing to be the ubiquitous programming language of the web over the next few years, new frameworks popping up every five minutes and event driven programming taking a lead both server and client side:

Do you as a Javascript developer consider the traditional Design Patterns as important or less important than they have been with other languages / environments?.

Please name the top three design patterns you, as a Javascript developer use regularly and give an example of how they have helped in your Javascript development.

Best Answer

Do you as a Javascript developer consider the traditional Design Patterns as important or less important than they have been with other languages / environments?.

Classical design patterns do not apply to JavaScript.

What does apply is writing modular and functional code.

You should use a mixture of Constructors and first class functions.

As a JavaScript developer I personally push towards treating JavaScript as LISP rather then Java. So try to emulate monads and high level functional style code rather then trying to emulate classical OOP code.

Please name the top three design patterns you, as a Javascript developer use regularly and give an example of how they have helped in your Javascript development.

Again design patterns do not really apply that much but below are three important constructs.

  1. Use of closures
  2. Use of first class functions
  3. Use of Object factories with or without new

Please leave some kind of context for which I can show examples of these kind of techniques compared to doing the same kind of code using traditional design patterns.

Let's take a look at some of the classical Design Patterns and how to implement them in js as well as alternative patterns more suited to js itself:

Observer Pattern:

In node.js this is simply events.EventEmitter. In jQuery this is $.fn.bind && $.fn.trigger. In backbone this is Backbone.Events.trigger and Backbone.Events.bind. This is a very common pattern used in day to day code.

I never stop and think "Hey I'm using an observer pattern here!". No this is just a low level way to pass messages around or a way to cascade change.

For example in backbone all the MVC views bind to the models onchange event so changing the model cascades any changes automatically to the view. Yes this is a powerful pattern, but it's use is so common in event driven programming that were not realising were using it everywhere.

In the WebSocket prototcol we have .on which we use to bind to on("message", ... events. Again this is very common but it's an observer on a stream rather then your classical OOP based while (byte b = Stream.ReadNextByte()).

These are all powerful uses of the Observer pattern. But this isn't a pattern you use. This is a simple part of the language. This is just code.

Memento Pattern:

This is simply JSON. It allows you to serialize the state of an object so you can undo an action. 

function SomeObject() {
    var internalState;

    this.toJSON = function() {
        return internalState;
    }

    this.set = function(data) {
        internalState = data;
    }

    this.restore = function(json) {
        internalState = JSON.parse(json);
    }
}

var o = new SomeObject();
o.set("foo"); // foo
var memento = JSON.stringify(o);
o.set("bar"); // bar
o.restore(memento);

In JavaScript we natively support an API for mementos. Just define a method called toJSON on any object. When you call JSON.stringify it will internally call .toJSON on your object to get the real data you want to serialize to JSON.

This allows you to trivially make snapshots of your code.

Again I don't realise this a memento pattern. This is simply using the serialization tool that is JSON.

State Pattern / Strategy Pattern:

You don't need a state pattern. You have first class functions and dynamic types. Just inject functions or change properties on the fly.

Related Topic