JavaScript Design Patterns
August 8, 2014

"One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them. This is an area where knowledge of design patterns can prove invaluable."
- Addy Osmani

In modern day JavaScript, it's easy to pursue the development of large scale JavaScript applications. We are constantly writing more and more complex web apps that thrive on the latest frameworks and libraries. It's easy for a developer to use four or more libraries in one project. Often though, we tend to overlook some of the core principles involved in the creation of these libraries.

It's important to understand the significance of how and why your favorite libraries are written the way they are.

Having structured, reusable code makes for an easily maintainable code base that helps us to prevent repeating ourselves. JavaScript design patterns don't solve every design problem but they do, however, provide a clear approach that provides stability and in some cases security, for our web apps.

Why are design patterns important?

Design patterns are established ways of programming that help you facilitate scalable, easily maintainable and highly decoupled code, all of which are extremely important concepts when engineering large JavaScript applications. When a design pattern is implemented correctly, it makes the code base easier for others to grok. Having an established pattern in play helps to keep your code clean and promotes a declarative method for you and your team to follow.

"The implementation of a design pattern per day keeps the angry developer away."
- Old Chinese proverb

Let's take a look at some reasons as to why design patterns are extremely useful.

  • Patterns are an easy way to refer to a very specific implementation of code while avoiding the additional discussion it would take to get everyone on the same page if the vocabulary used for patterns didn't exist.
  • Patterns can help to thwart minor issues that can create major problems later down the road.
  • Patterns exemplify a level of sophistication that can provide both performance boosts and reduction of excess memory usage.
  • Patterns are established through rigorous testing which means they are, for the most part, "tried and true" and do aid in solving a particular type of problem.

Design Patterns Categories

There are numerous ways we can categorize all of the design patterns but for the sake of brevity, the three most popular are: creational, structural & behavioral. Creational focuses on object creation (imagine that). Structural focuses on object composition. Behavioral focuses on communication between objects. While no single implementation of these types of design patterns are perfect, it's important to understand that being familiar with all of them can educate you to make an informed decision based on the needs of your application. Take some time to review the following tables as they summarize the methods that each design pattern implements.

# Creational Design Patterns

Creational design patterns deal directly with object initialization procedures focusing on the creation of situation-specific objects. Without thinking about how objects are created, a level of complexity can be added to the design of an application. Creational design patterns work to solve this problem by adding a layer to the object creation process.

# Structural Design Patterns

Structural design patterns are ones that focus on easing the relationship between different components of an application. They help to provide stability by ensuring that if one part of the app changes, the entire thing doesn't need to as well.

# Behavioral Design Patterns

Behavioral design patterns emphasize flexibility through the identification of common communication patterns between various objects.

If you've made it this far, you should have a pretty basic understanding of the different design patterns and what they do. Please feel free to refer back to these tables at any time as a point of reference; they're perfect for jogging your memory on a slow Monday morning.

Modern Day JavaScript Design Patterns

Below is a list of each JavaScript design pattern I've had the opportunity to write about with breakdowns on various aspects of that pattern such as their advantages and disadvantages. Browse away!

Closing Thoughts

The idea behind this article, and the individual pattern articles listed above, originated from my hopes to thoroughly understand modern day JavaScript design patterns. Thanks to Addy Osmani (and the others involved) for writing the book "Learning JavaScript Design Patterns" which has vastly improved my understanding (and opinions) of the many design pattern implementations. If you have any questions, please feel free to drop a comment as I would be happy to help wherever I can.

I mentioned this before but I feel like it's worth mentioning again as a conclusive note: there is no one design pattern that is perfect but rather the use of multiple design patterns can help to facilitate a better approach to the web applications you write.

"You have your way. I have my way. As for the right way, the correct way, and the only way, it does not exist."
- Friedrich Nietzsche