Understanding Design Patterns

Howard's photo
Howard
·

2 min read

Understanding Design Patterns

Hi folks, welcome back to my JavaScript Distilled series.

In this article, I will try my best to help you understand

  • What are Design Patterns?

  • Components of a Design Pattern

Enough talk.

Let's get into the article.

Definition 📚

In the context of the software engineering industry.

A design pattern is a REUSABLE TEMPLATE for solving COMMON SOFTWARE DESIGN PROBLEMS, enhancing your code readability and efficiency, and creating a common vocabulary among Software Engineers.

Originally, the term "design pattern" was from the architecture field in 70s.

For instance, as an architect, you want to design a tower or a house.

You might have to solve a common set of problems that someone else already solved.

You have some kind of recipe you can follow and there is no need to reinvent the wheel all the time.

Which could help you save tons of time and effort and achieve the end goal much faster.

Component of a Design Pattern 🏛️

  1. Name - For example: Singleton or Factory or Publisher - Subscriber

  2. Problem - the problem the design pattern is trying to solve

  3. Solution - with this problem, we use this solution.

  4. Context - Not every problem should be solved in the same way. The context here means you should apply this solution to this problem, when the context looks like this.

  5. Consequences - the result of applying this pattern can be Negative or Positive

  6. Examples - depend on the languages of choice.

Why is it important for Vanilla JavaScript?

  • Because JS is a flexible language, we have complete freedom to do whatever we want.

  • That's why we need to set guidelines to improve:

    • Reusability

    • Scalability

    • Efficiency

    • Debugging

    • Consistency

Caveat ❌

Don't use design patterns just because it sounds cool.

There are some consequences

  • Over-engineering

  • Misapplication

  • Inflexibility

  • Hard to understand code

  • Adding more overhead of complexity

  • Performance Overhead.

The Anti-Pattern

The practices that may initially seem beneficial but ultimately lead to poor outcomes. They are typically counterproductive and can introduce issues like increased complexity, decreased performance, readability, and maintainability problems.

Fun fact 😄

You probably stumbled upon many design patterns before but maybe you don't recognize them.

That's it for this article.

Let's continue on the next one.

Bye 👋

Reference: https://firt.dev/

design patternsJavaScript