7 Patterns to Refactor JavaScript Applications: Decorators

Note: This is part seven (prev) of a seven part series that starts here.

When a process has side effects that need to be executed only in certain situations, this functionality can be layered onto an existing operation using Decorators. A Decorator takes an object and wraps auxiliary functionality around it, letting you add on what you need when you need it and keeping the core procedure untouched.


Let's imagine a Service Object that generates report cards for each student in a class. A teacher can generate these report cards at any point, but there are some situations where those report cards should be mailed to the student’s parent.

One way to address this would be to have two separate Service Objects, GenerateReportCards and GenerateReportCardsAndEmailParent, but this creates duplication and is hard to maintain when there are many cases with many conditional steps.

Another way would be to chain separate services, such as:

new GenerateReportCard(student).run()
  .then(function(student) {
    return new EmailReportCardToParent(student).run()

This isn't bad, but it relies on the return value from the Service Object to be usable for the subsequent process. Additionally, the same process may need to happen in both procedures, such as generating the HTML for the report card.

This problem calls for a Decorator, which targets a specific method of the object being decorated and wraps it with additional procedures, allowing us to tap into an existing operation and add functionality. So, for this example, our Service Object that will be decorated looks like this:

var _ = require('underscore')

var GenerateReportCard = function(student) {
  this.student = student

GenerateReportCard.prototype = _.extend(GenerateReportCard.prototype, {

  run: function() {
    return _.compose(

  getStudentGrade: function() {
    // some actions here to 
    // determine grade
    return grade

  generateReportCardHtml: function(grade) {
    // some actions here to 
    // build html for report card
    return html

  saveReportCardAsPDF: function(html) {
    // some actions here to 
    // save PDF and get the url
    return pdfUrl


We could create a Decorator object that accepts an instance of the Service Object as its argument and returns that Service Object with the specified method wrapped with the added functionality.

var EmailReportCardToParent = function(obj) {
  this.obj = obj
  return obj

EmailReportCardToParent.prototype = _.extend(EmailReportCardToParent.prototype, {

  // specify the method that you want to decorate
  methodToDecorate: 'saveReportCardAsPDF',

  decorate: function() {
    var self = this

    // store the original function for use in a closure
    var originalFn = this.obj[this.methodToDecorate]

    // define the decorated function, which captures the originalFn in its closure
    var decoratedFn = function(html) {
      // call the decorator method with the result of the originalFn as the argument
      var res = originalFn(html)
      return res;

    // override the method on the object with the new decoratedFn
    this.obj[this.methodToDecorate] = decoratedFn

  sendPdfAsEmail: function() {
    // some actions here to
    // send email to parent


// Example usage
new EmailReportCardToParent(new GenerateReportCard())).run()

One key goal of the Decorator pattern is that the returned object is the same object as the input object—both in terms of identity and API—but with an altered property. So the following should be true if the object is decorated properly:

var generateReportCardService = new GenerateReportCard()
var decoratedService = new EmailReportCardToParent(generateReportCardService)

// returned object is exact same object
decoratedService === generateReportCardService // true

With this pattern in practice, we can layer on any number of Decorators that decorate any number of methods on the original Service Object:

new EmailReportCardToParent(new PrintReportCard(new GenerateReportCard(student))).run()


When testing a Decorator, it is wise to test that the method is both decorating the original object properly and that the auxiliary method (or methods) are performing the right actions. A reasonably comprehensive test suite for the EmailReportCardToParent Decorator above could look like this:

var chai = require('chai')
var expect = chai.expect
var sinon = require('sinon')

describe('EmailReportCardToParent', function(){
  var generateReportCard
  var decorated

    generateReportCard = new GenerateReportCard()
    decorated = new EmailReportCardToParent(generateReportCard)

  it('returns the original object', function(){

  it('calls the original method', function(){
    var originalDecoratedFn = sinon.spy(

  it('calls the decorator method with the result of the original method', function(){
    var decoratorMethodFn = sinon.spy(

  describe('#sendPdfAsEmail', function(){
    // any tests for the decorator method itself



Decorators are useful when you want to layer on functionality to existing operations without modifying those operations for all scenarios. This means greater code portability and reuse, which is always valuable.

This concludes the series on 7 Patterns for Refactoring JavaScript Applications. I hope these concepts have provided you with new ideas of ways in which you can refactor your own applications. These techniques are just a small glimpse at how object-oriented techniques can help with code cleanliness, readability, and testability.

What are some of your favorites of the patterns I've covered here? Are there others that I didn't mention that you've used?

The post was originally written for the Crush & Lovely Blog in 2012 and has been lovingly brought up-to-date for Engine Yard by Michael Phillips, the original author. Special thanks to Justin Reidy and Anisha Vasandani for help with the original.

7 Patterns to Refactor JavaScript Applications: Policy Objects

Note: This is part six (prev/next) of a seven part series that starts here.

Business logic always includes some boolean rules for data models, such as if a User is activated, or if a Student is passing. These rules interpret model attributes and return true or false, describing whether the object does or does not pass the policy.

For example, if a process sends an email to a given set of users, a Policy Object can be used to filter that set down to only those users that are email-able. A User would pass the Policy Object if they: have an email address, that email address has been verified, and they have not unsubscribed from correspondence.

Brian Helmkamp describes the potential overlap in concept between a Policy Object and a Query Object or a Service Object. He writes, “Policy Objects are similar to Service Objects, but I use the term ‘Service Object’ for write operations and ‘Policy Object’ for reads. They are also similar to Query Objects, but Query Objects focus on executing SQL to return a result set, whereas Policy Objects operate on domain models already loaded into memory.”

Read More
Learn about Engine Yard
Try Engine Yard for your Ruby or PHP Apps

7 Patterns to Refactor JavaScript Applications: View Objects

Note: This is part five (prev/next) of a seven part series that starts here.

When a model has associated logic or attributes that are used exclusively for creating a representation of the model—as in HTML for a website or JSON for an API endpoint—a best practice is to avoid storing those values directly on the model.

Storing view-specific attributes on the model can create confusion about what is truth (stored in the database) and what is purely representational. View Objects, then, act as an adapter between the truth and the representation of the truth.

For example, the truth of an imagined inventory item is that the price attribute stored in the database is 599 cents. But the representation for the product page may be a mutation of the truth, such as $5.99.

It would be inappropriate to store the representational data as a secondary price attribute on the model. It would be even worse to inject the formatting logic into the template.

What View Objects do is dress up the data, by way of transforming, adding, or removing data properties, returning a new object for use in the presentation layer. This approach creates a nice home for our presentation-specific logic and attributes, keeping it removed from the model truth.

Read More

A Look at Rails 5

From the start, Rails was praised for being the easiest way to get Ruby on the web. It was the easiest option, and the best. Since then, many other options have arrived, but Rails is still the industry leading framework for Ruby developers.

As is tradition, this April at RailsConf 2015 in Atlanta, the creator of Rails, David Heinemeier Hansson (aka DHH) took the stage to announce what was new in Rails and to mark the release of Rails 5. This fits with the schedule of a major release every two years. And of course, folks were excited to get in early and see what our BDFL had to say about the future of Rails.

Here’s a look at some of the highlights.

Read More

Goodbye MVP, Hello v1

You've done it!

It all started with a simple concept and two friends in your garage. After weeks of coding and tweaking, you've proven that your business idea is the greatest thing since sliced bread. You used the Build, Measure, Learn cycle to find out what your customers want, and you're pretty sure you have a product market fit.

Now what?

It's time to build your v1. In this post, we'll look at how to take the most important lessons from the information you've gleaned during the MVP stage of your product's lifecycle and apply them to building the first full release of your product.

Read More


Look through our specially curated posts to get focused, in-depth information on a single topic.