Getting Started with JavaScript Design Patterns

Design patterns are blueprint solutions that you use to solve common programming problems swiftly and elegantly.

Everything began in 1994, when four computer scientists Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides, published an iconic book "Design Patterns: Elements of Reusable Object-Oriented Software".

The content in the book speaks of ways of solving common, specific problems that appear continuously in the software development world. It became a major success, and the four authors became known as the "Gang of Four" or "GoF".

Why design patterns are important

How often do you feel stuck when getting from idea to implementation?

Learning and understanding design patterns play a pivotal role in catalyzing your programming problem-solving skills. It ramps up your efficiency as you don't have to reinvent the wheel every time you get a new coding task.

The trick is to identify these common problems as early as the start of the design phase of software development. Then you can use the appropriate design patterns to solving those problems. And voila, you've made design patterns of use to you, but most importantly, to progress through your difficulties with already accepted, widely used, and proven best practices.

Common Problems

A good software application must be modular, extensible, or flexible for changes instead of immobility, not rigid or fragile.

As programmers or architects, we do realize that software requirements are susceptible to changes. They tend to eventually and consistently evolve in a way that none of us can anticipate.

Hence, design is the first most crucial step towards building an elegant solution.

As a result, we should not introduce any new bugs or different maintenance problems. It's essential to keep our focus and to try to solve one problem at a time. Changing one part of the code or design should not break any other parts.

Design patterns can come in handy here. Although they don't solve all of the design problems, you won't get a code that you can copy-paste blindly, but the design patterns can certainly help support you in developing a scheme to approach their issues at hand.

Design Patterns for JavaScript

The "Gang of Four" referenced Design Patterns in their book with object-oriented programming languages, speaking of classes, objects, and interfaces.

While it's been natural for Java since its creation, most of the classic design patterns became available in JS only with the advent of ES6. It introduced classes and other object-oriented features to JavaScript, and now you can elegantly implement most design patterns in JS.

JavaScript has several ways of creating objects, implementing modules, supporting lightweight interfaces; hence, with complex server-side javascript applications in the picture, design patterns are expected to provide multiple ways to improvise and maintain the application design.

Three groups of Design Patterns in programming

The book by the "Gang of Four" introduced 23 design patterns broadly classified into three groups — Creational, Structural and Behavioral, according to their purpose.

• Creational — oriented towards the creation of objects.
• Structural — dealing with the composition of classes or objects.
• Behavioral — concerned with interaction among classes and objects and segregating individual responsibilities.

Creational Design Patterns

They deal with the techniques for object creation. In Javascript, we have multiple ways of creating an object. We can adapt the common design patterns to reduce the complexities of object creation, like Factory, Constructor, Builder, Singleton.

Structural Design Patterns

These design patterns deal with techniques for establishing relationships among objects and object composition. They aid in adding new functionalities to applications without modifying the unrelated parts of the application. Commonly used Structural Design Patterns are Bridge, Decorator, Adapter, and Facade.

Behavioral Design Patterns

These design patterns provide techniques to communicate with multiple unrelated objects optimally, thus ensuring segregated responsibilities of involved objects. Common types of Behavioral Design patterns are Strategy, Observer, and Chain of Responsibility.

Everyday Examples of Design Patterns

Instead of directly delving into the jargon and technical implementations of design patterns, let's take a bird view of them relative to our everyday life.

A design pattern is a blueprint to solving a common programming problem. You can look up various scenarios where design patterns have aided in solving various everyday issues.

• To make a variety of breakfasts quickly, buy a multipurpose OTG - Creational
• To wake up for an early day, use an alarm - Behavioral
• To cross a river, build a bridge - Structural

As a student, you've reused multiple formulae to solve your math problems. If asked to find 20% of a large number, say 645395583, using multiplication and division to do it one after another is probably not a great idea. It works, no doubt, but at the cost of time, memory and energy. Instead, dividing the number by five is a better approach.

Once you are familiar with better and more accessible alternatives of these approaches to your problems, you tend to use them to solve any problem wherever this fits. For example, when you are at a restaurant having to leave your server a 20% tip. Hence, this is the repeated reuse of a pattern.

Imagine having to plug your phone charger into a socket in a different country, only to realize it doesn't fit. What would you do?

Would you buy a new phone, or would you run to a local store, pick up a power adapter that allows an electrical plug from one country to fit into an electrical appliance in another country?

Design patterns, when used correctly for the right scenarios, act as adapters in your projects.

Become a better developer

Design Patterns are not tied to a particular programming language. If you're beginning to learn to code, understanding the language constructs along with design patterns could train your mind to foresee potential problems with your design.

Consider working on a software development project. As a programmer, you're not entitled to just coding. Clean code, clean design, and extensibility make your code easy to read, easy to understand, and, most importantly, easy to maintain.

Imagine writing the same piece of code in multiple places. Once you start evolving as a programmer, you'll learn how to reuse code, use abstractions, hide complexities wherever possible, and decouple critically performing code pieces. With practice comes perfection.

Why should you learn the Design Pattens?

Knowledge of Design patterns is essential to manipulate your brain to start thinking to improve your coding and design skills. With poorly designed projects, maintainability becomes a nightmare. The result is any minor changes to the project may prove costly in terms of time, may lead to either complicated implementations or easy "fixes".

Now, let's dive into our first JavaScript Design Pattern - Builder.

You can also get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript