What, Why, and Where: Design Patterns
Introduction
As developers, we often encounter new concepts, tools, or techniques that raise fundamental questions in our minds:
- What problem does it solve?
- Why should we use it?
- Where do we implement it?
In this blog, I’ll explore these aspects in the context of design patterns in JavaScript. But first, let’s start with a simple definition: Design patterns is the approach to solve the recurring problems in our code and help to structure the code in a way that is efficient, maintainable, and scalable.
What Problems Do We Face Without Design Patterns?
- Without design patterns, developers may find themselves writing repetitive code to solve similar problems which can lead to duplication of code and increasing the risk of bugs.
- As a project grows, the complexity of the code can increase and without design patterns, there is a high risk of adding new features.
- Without proper design, resource management (like memory, file handles, or network connections) can be inefficient, leading to leaks or excessive resource usage.
- Debugging and testing become a challenge when code is not modular or well-structured.
Why Should We Use Design Patterns?
- Design patterns encourage the creation of reusable code components. By using it, developers can create solutions that can be used across different parts of an application.
- Design patterns are designed with scalability and flexibility in mind. They allow the system to grow without requiring a complete rewrite of the codebase.
- It often leads to code that is modular and loosely coupled, making it easier to isolate and fix bugs and to update or replace parts of the system without affecting other parts.
Where and When to Use Different Design Patterns?
- Singleton pattern: When you need to ensure that only one instance of a class is created and provide a global point of access to that instance.
Example: Db connection, configuration settings.
Database connection
App.js
- Factory Method pattern: When you have a complex object creation process and the process may vary based on conditions, encapsulating this logic in a factory method can simplify client code and promote reusability.
Example: A Vehicle Class which has two instances two-wheeler, four-wheeler. So same functionality of both instance written in Vehicle class and making it factory pattern.
Parent Vehicle Class
Child Truck Class
Child Bike class
- Builder Pattern: It is a type of creational pattern which is used when we want to create objects in steps. It is beneficial when we want to add only the functionality that we want to add in that object.
Example: Building a customized computer with varying RAM, CPU, and storage options.
Computer Properties
Computer Builder
App.js
- Adapter Pattern: It is a structural design pattern which is used when you need to make two incompatible interfaces work together.
Example: Converting data from JSON to XML to meet the requirements of an API that only accepts XML , Weather API which give wealther temperature in fahrenheit but we need in Celcius.
Weather API
Adapter class converting response in required format
App.js
- Iterator Pattern: It is a type of behavioural pattern, used when you need to traverse a collection of objects without exposing its underlying representation.
Example: The map, reduce, filter methods in javascript. - Observer Pattern: It is a type of behavioural pattern which is used when you need to notify multiple objects (observers) about changes to the state of another object (subject).
Example: React’s life-cycle methods where components are notified of state changes, Stock platform which notify its all clients when price changes.
Create User class as a observer
Create Stock class as a subject
App.js
Conclusion
Each design pattern addresses a specific problem and provides a structured solution. By understanding when to apply these patterns, developers can design more efficient, scalable, and maintainable systems. Here is the Github link of the code and please correct me if i’m wrong in comments.
