JavaScript Design Patterns

“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.

Categories of Design Patterns

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.

creational-patterns
Image Credit: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#summarytabledesignpatterns

# 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.

structural-patterns
Image Credit: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#summarytabledesignpatterns

# Behavioral Design Patterns

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

behavorial-patterns
Image Credit: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#summarytabledesignpatterns

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!

The Module Pattern
The Revealing Module Pattern
The Singleton Pattern
The Observer Pattern
The Mediator Pattern
The Prototype Pattern
The Facade Pattern
The Factory Pattern

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

2 responses!

Jethro Larson said: (5 months ago) Reply

Nice collection, I hope you keep it up. I’m definitely eager to see the difference between mixin and decorator patterns. I thought they were synonyms. I may just have to google it for now I guess. Some of the already written ones could use some additional fleshing out as well. I’m still not keen on the difference between mediator and observer patterns as well.

    carldanley said: (5 months ago) Reply

    Thanks for taking the time to read through these articles! I’ll do my best to release the last 2 articles sometime within the next day or so.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>