DEV Community: Sami Maachi

Understanding the Bridge Pattern: Decoupling Abstraction and Implementation

Sami Maachi — Thu, 16 Jan 2025 13:34:12 +0000

Understanding the Bridge Pattern: Decoupling Abstraction and Implementation

The Bridge Pattern is a structural design pattern that decouples an abstraction (what you do) from its implementation (how you do it), allowing the two to vary independently. It’s an elegant solution to avoid a accumulation of classes when dealing with multiple dimensions of change in a system.

This article will explore the Bridge Pattern through a relatable scenario, delve into its purpose, and provide a TypeScript implementation to solidify your understanding.

Bridge Pattern Definition
Scenario: Understanding the Problem
Real-Life Projects That Use the Bridge Pattern

1.Bridge Pattern Definition

The Bridge Pattern decouples the abstraction (high-level control) from its implementation (low-level details). This separation enables the abstraction and implementation to evolve independently, reducing the rigidity of tightly coupled code and enhancing flexibility and scalability.

2.Scenario: Understanding the Problem

Imagine a company that manufactures vehicles. Each vehicle can have different types of engines (e.g., petrol, diesel, electric). Without a flexible design, you might end up creating a class for every combination of vehicle type and engine type, leading to a bloated and unmanageable codebase.

For example:

CarWithPetrolEngine
CarWithDieselEngine
TruckWithElectricEngine

The Bridge Pattern addresses this by separating the Vehicle abstraction from the Engine implementation, allowing you to combine them dynamically without creating an excessive number of classes.

Implementation in TypeScript

Here’s how the Bridge Pattern can be implemented in TypeScript:


    // Implementor Interface
    interface Engine {
      start(): string;
    }

    // Concrete Implementors
    class PetrolEngine implements Engine {
      start(): string {
        return "Starting petrol engine";
      }
    }

    class DieselEngine implements Engine {
      start(): string {
        return "Starting diesel engine";
      }
    }

    class ElectricEngine implements Engine {
      start(): string {
        return "Starting electric engine";
      }
    }

    // Abstraction
    abstract class Vehicle {
      protected engine: Engine;

      constructor(engine: Engine) {
        this.engine = engine;
      }

      abstract operate(): string;
    }

    // Refined Abstraction
    class Car extends Vehicle {
      operate(): string {
        return `Car operating: ${this.engine.start()}`;
      }
    }

    class Truck extends Vehicle {
      operate(): string {
        return `Truck operating: ${this.engine.start()}`;
      }
    }

    // Client Code
    const petrolCar = new Car(new PetrolEngine());
    console.log(petrolCar.operate()); 

    const electricTruck = new Truck(new ElectricEngine());
    console.log(electricTruck.operate());

    Output:
    Car operating: Starting petrol engine
    Truck operating: Starting electric engine

3.Real-Life Projects That Use the Bridge Pattern

Graphics Rendering Systems: Separating shapes (e.g., circle, rectangle) from rendering logic (e.g., OpenGL, DirectX) for flexibility.
Device Control Systems: Abstracting devices (e.g., remotes) from the objects they control (e.g., TVs, projectors).

Conclusion

By using the Bridge Pattern, you can simplify code management, reduce duplication, and create systems that are flexible enough to adapt to change.

In the next article of our Learn Design Patterns series, we’ll explore the Composite Pattern Stay tuned!

Learn Design Patterns: Understanding the Adapter Pattern for Compatibility

Sami Maachi — Sat, 28 Dec 2024 11:10:02 +0000

Learn Design Patterns: Understanding the Adapter Pattern for Compatibility

The Adapter Pattern is a structural design pattern that allows objects with incompatible interfaces to work together seamlessly. It acts as a bridge, enabling communication between components that otherwise couldn’t interact.

In this article, we’ll delve into the Adapter Pattern, using a common and relatable example of sockets and plugs. You’ll learn its definition, purpose, real-world applications, and how to implement it in TypeScript.

Adapter Pattern Definition
Scenario: Understanding the Problem
Real-Life Projects That Use the Adapter Pattern

1.Adapter Pattern Definition

The Adapter Pattern allows classes with incompatible interfaces to collaborate by introducing an intermediary object, the adapter, which translates one interface into another. This pattern is handy when you want to use a class that doesn’t fit with the interface your application requires.

2.Scenario: Understanding the Problem

Imagine you’ve traveled from the United States to Europe. Your devices have a plug designed for the American socket standard, but European sockets have a different design. Without an adapter, you wouldn’t be able to use your devices.

The adapter acts as a mediator, translating the plug’s interface to be compatible with the socket. Similarly, in software, an adapter bridges the gap between incompatible interfaces, allowing systems to communicate effortlessly.

Implementation in TypeScript

Here’s how the Adapter Pattern can be implemented in TypeScript, inspired by the sockets and plugs analogy:

Step 1: Define the interfaces

    interface IPlug {
      getHeads: number;
      getIsHeadsRounded: boolean;
    }

    interface ISocket {
      getHoles: number;
      getIsHolesRounded: boolean;
      plugIn(plug: IPlug): boolean;
    }

Step 2: Define the socket class (target)

    class EuropeanSocket implements ISocket {
      private holes: number = 2;
      private isHolesRounded: boolean = true;

      public get getHoles(): number {
        return this.holes;
      }

      public get getIsHolesRounded(): boolean {
        return this.isHolesRounded;
      }

      public plugIn(plug: IPlug): boolean {
        if (
          plug.getHeads === this.holes &&
          plug.getIsHeadsRounded === this.isHolesRounded
        )
          console.log("Plug entered with success");
        else console.log("Plug incompatible with the socket");
        return (
          plug.getHeads === this.holes &&
          plug.getIsHeadsRounded === this.isHolesRounded
        );
      }
    }

Step 3: Define the plug class (adaptee)

    class AmericanPlug implements IPlug {
      private heads: number = 2;
      private isHeadsRounded: boolean = false;

      public get getHeads(): number {
        return this.heads;
      }

      public get getIsHeadsRounded(): boolean {
        return this.isHeadsRounded;
      }
    }

Step 4: define the Adapter class

    class SocketAdapter implements IPlug {
      private americanPlug: AmericanPlug;

      constructor(americanPlug: AmericanPlug) {
        this.americanPlug = americanPlug;
      }

      public get getHeads(): number {
        return 2;
      }

      public get getIsHeadsRounded(): boolean {
        return true;
      }
    }

Step 5: Use the adapter in the client code

    const americanPlug = new AmericanPlug();
    const europeanSocket = new EuropeanSocket();
    console.log('Enter the plug without adapter:');
    europeanSocket.plugIn(americanPlug);

    console.log('Enter the plug with the adapter:');
    const adapter = new SocketAdapter(americanPlug);
    europeanSocket.plugIn(adapter);

Output :

Enter the plug without adapter:

Plug incompatible with the socket

Enter the plug with the adapter:

Plug entered with success

3.Real-Life Projects That Use the Adapter Pattern

Third-Party Integration: Connecting third-party APIs with an application that uses a different format.
Legacy Code Integration: Allowing new systems to work seamlessly with legacy codebases.
Cross-Platform Compatibility: Enabling systems designed for one platform to operate on another with minimal changes.

The Adapter Pattern exemplifies how software design can borrow concepts from real-life problems, offering elegant solutions for compatibility challenges. Let us know in the comments how you’ve used this pattern in your projects!

In the next article of our Learn Design Patterns series, we’ll explore the Bridge Pattern Stay tuned!

Learn Design Patterns: Mastering the Singleton Design Pattern

Sami Maachi — Tue, 24 Dec 2024 20:34:53 +0000

Learn Design Patterns: Mastering the Singleton Design Pattern

The Singleton Pattern is one of the simplest and most commonly used design patterns in software development. Despite its simplicity, the Singleton Pattern can be incredibly powerful when used appropriately.

In this article, we will explore the Singleton Pattern, understand the problems it solves, and examine its implementation using TypeScript.

Singleton Pattern Definition
Scenario: Understanding the Problem
Real-Life Projects That Use the Singleton Pattern

1. Singleton Pattern Definition

The Singleton Pattern ensures a class can only have one instance and provides a global entry point to that instance. By centralizing object creation, it helps manage shared resources effectively and enforces consistent behavior across the system.

Key Characteristics of the Singleton Pattern

Single Instance: Ensures only one instance of the class is created.
Global Access Point: Provides a unified way to access a single instance throughout the application.
Lazy Initialization: The instance is created only when it’s needed, optimizing resource usage.
Thread Safety (if applicable): In multithreaded environments, ensures that the singleton instance is safely shared across threads.

2. Scenario: Understanding the Problem

Imagine you’re building a logging system for a complex application. Logs need to be written to a file or console, and it’s crucial to ensure only one logger instance manages these logs to avoid conflicts or redundancy. Without a Singleton, multiple logger instances could lead to scattered logs, inconsistent behavior, and resource wastage.

By implementing the Singleton Pattern, you guarantee that all parts of your application share the same logger instance, ensuring consistency and centralized control.

Implementation in TypeScript

    class Logger {
      private static instance: Logger;
      private logs: string[] = [];

      private constructor() {}

      public static getInstance(): Logger {
        if (!Logger.instance) {
          Logger.instance = new Logger();
        }
        return Logger.instance;
      }

      public log(message: string): void {
        this.logs.push(message);
        console.log(`Logged: ${message}`);
      }

      public showLogs(): void {
        console.log(this.logs);
      }
    }

    // Client code
    const logger1 = Logger.getInstance();
    logger1.log("First log entry");
    const logger2 = Logger.getInstance();
    logger2.log("Second log entry");
    console.log("Are both instances the same?", logger1 === logger2); // true
    logger1.showLogs();

Explanation:

Private Constructor: Prevents the direct creation of objects using the new keyword.
Static Instance: Stores the single instance of the class.
Lazy Initialization: The instance is created only when it getInstance is called for the first time.

3. Real-Life Projects That Use the Singleton Pattern

Configuration Management: Applications often use a Singleton to manage global configuration settings.
Logging Systems: Loggers are a classic use case for Singletons, providing a centralized mechanism for writing logs.
Database Connections: Singletons manage database connections to avoid overhead from creating multiple connections.
Cache Management: Caching systems use Singletons to ensure a single source of truth for frequently accessed data.

Conclusion

The Singleton Pattern is a simple yet powerful design pattern that provides a controlled way to manage shared resources and enforce consistent behavior. While it’s crucial to avoid overusing it inappropriately, the Singleton Pattern can be an invaluable tool when applied to scenarios like configuration management, logging, and caching.

In the next article of our Learn Design Patterns series, we’ll explore the Structural Design Patterns by stating with the Adapter Pattern Stay tuned!

Learn Design Patterns: Unlocking the Power of the Prototype Design Pattern

Sami Maachi — Fri, 20 Dec 2024 23:08:10 +0000

Design patterns are crucial in writing clean, efficient, and maintainable software. Today, we’re exploring the Prototyping Design Pattern, a creational pattern that simplifies the process of creating new objects by cloning existing ones.

This article will explore the fundamentals of the Prototype Pattern, its use cases, and its practical applications.

Prototype Pattern Definition
Scenario: Understanding the Problem
Real-Life Projects That Use the Prototype Pattern

Prototype Pattern Definition

The Prototype Design Pattern is a creational pattern that allows you to create new objects by copying or cloning existing objects rather than instantiating them directly.

This pattern is useful when:

Object creation is costly/resource-intensive.
Object configurations are complex, and setting them up repeatedly is inefficient.
The goal is to maintain consistent object structures while allowing slight variations.

TLDR, the Prototype Pattern helps you create objects quickly and efficiently by reusing an existing instance as a template.

Scenario: Understanding the Problem

Imagine you’re managing a game where every character has unique attributes and abilities, like speed, strength, and weapons.

Now, you want to introduce a feature that allows players to clone their characters with slight variations, like different armor or enhanced abilities, without needing to recreate the entire character from scratch.

Without the Prototype Pattern, you might have to write repetitive code for creating new instances and manually copying all the properties, leading to unnecessary complexity and potential errors.

With the Prototype Pattern, you can simply clone an existing character and tweak only the required attributes, ensuring a seamless and efficient process.

This pattern allows you to:

Avoid redundant initialization code.
Ensure the consistency of complex objects.
Customize new instances effortlessly.

Implementation of the Prototype Design Pattern in TypeScript

Here’s a step-by-step implementation of the Prototype Design Pattern in TypeScript. We’ll use a game character example to illustrate how cloning works and why it’s beneficial.

Step 1:Define the Prototype Interface

The prototype interface will have a clone method to create copies of objects.

    interface Prototype {
      clone(): this;
    }

Step 2: Create the Concrete Prototype

This class implements the Prototype interface and define how the object will be cloned.

    class GameCharacter implements Prototype {
      name: string;
      health: number;
      armor: string;
      weapons: string[];

    constructor(name: string, health: number, armor: string, weapons: string[]) {
        this.name = name;
        this.health = health;
        this.armor = armor;
        this.weapons = weapons;
      }
      // Implementing the clone method
      clone(): this {
        const clone = Object.create(this);
        clone.weapons = [...this.weapons]; // Deep copy of the array
        return clone;
      }

      displayCharacter(): void {
        console.log(
          `Character: ${this.name}, Health: ${this.health}, Armor: ${this.armor}, Weapons: ${this.weapons.join(", ")}`
        );
      }
    }

Step 3: Client Code Example

The client creates an initial object and uses the clone method to create new instances with slight modifications.

    // Create the original character
    const warrior = new GameCharacter("Warrior", 100, "Steel Armor", ["Sword", "Shield"]);
    warrior.displayCharacter();
    // Clone the character and customize
    const archer = warrior.clone();
    archer.name = "Archer";
    archer.health = 80;
    archer.armor = "Leather Armor";
    archer.weapons.push("Bow");
    archer.displayCharacter();
    // Clone again for another variation
    const samurai = warrior.clone();
    samurai.name = "Samurai";
    samurai.weapons = ["Katana"];
    samurai.displayCharacter();

Real-Life Projects That Use the Prototype Pattern

The Prototype Pattern is commonly used in various domains where object creation needs to be efficient and flexible. Some examples include:

Game Development
Used to duplicate characters, weapons, or environments with minor variations.
Example: A “boss enemy” cloned with different attack patterns or colors.
Graphic Design Software
Tools like Photoshop use this pattern to duplicate elements (e.g., shapes, layers) for reuse or modification.
Document Management Systems
Creating document templates that can be cloned and customized for specific needs.
Database Records
Cloning data objects to create slightly modified versions without affecting the original records.

Conclusion

The Prototype Pattern is a valuable tool in scenarios where creating objects from scratch is inefficient or repetitive. By cloning existing instances, you gain speed, flexibility, and consistency in object creation.

In the next article of our Learn Design Patterns series, we’ll explore the Singleton Pattern Stay tuned!

Learn Design Patterns: Understanding the Builder Pattern

Sami Maachi — Fri, 20 Dec 2024 22:23:22 +0000

When creating objects with many optional or interdependent parts, maintaining clarity and flexibility in the construction process can become a challenge. The Builder Pattern addresses this by allowing step-by-step object creation, ensuring flexibility and scalability in your code.

In this article, we’ll explore the Builder Pattern with a practical gaming scenario, explaining the problem it solves, and illustrating how it works through a real-world implementation using TypeScript.

Builder Pattern Definition
Problems Solved with Builder Pattern
Real-Life Projects That Use the Builder Pattern

1.Builder Pattern Definition

The Builder Pattern is a creational design pattern that decouples the construction of a complex object from its representation.

Rather than using a class constructor overloaded with numerous parameters, which can make the code difficult to read and maintain, the Builder Pattern provides a way to construct objects step by step. This approach simplifies managing optional or interdependent components, resulting in more readable and maintainable code.

Problems Solved with Builder Pattern

Imagine you are designing a game where players can create customizable characters. Each character can have the following attributes:

Helmet
Torso armor
Arm covers
Pants
Primary weapon
Secondary weapon
Melee weapon

Now, consider the challenges:

Complex Object Construction
Some characters require full equipment (e.g., sniper characters), while others may start with only basic armor. Managing these configurations with traditional constructors becomes overwhelming.
Flexibility in Customization
Players need to create characters step by step, with the freedom to skip or modify parts of the configuration.
Readability and Maintainability
Directly initializing these objects using constructors or long parameter lists is not only error-prone but also hard to maintain as new features are added.

Implementation

Key Components

Step 1: Character Class
Represents the complex object being built, containing attributes like armor and weapons.

    interface ICharacter {
      helmet: string | null;
      torsoArmor: string | null;
      armsCover: string | null;
      pants: string | null;
      primaryWeapon: string | null;
      secondaryWeapon: string | null;
      meleeWeapon: string | null;
    }

    class Character implements ICharacter {
      helmet: string | null = null;
      torsoArmor: string | null = null;
      armsCover: string | null = null;
      pants: string | null = null;
      primaryWeapon: string | null = null;
      secondaryWeapon: string | null = null;
      meleeWeapon: string | null = null;

      constructor() {}
    }

Step 2:ICharacterBuilder Interface
Defines the methods required to build each part of the character.

    interface ICharacterBuilder {
      addHelmet(helmet: string): this;
      addTorsoArmor(armor: string): this;
      addArmsCover(armsCover: string): this;
      addPants(pants: string): this;
      addPrimaryWeapon(weapon: string): this;
      addSecondaryWeapon(weapon: string): this;
      addMeleeWeapon(weapon: string): this;
      getCharacter(): Character;
    }

Step 3: CharacterBuilder Class
Implements the builder interface and provides methods for constructing each part of the character.

    class CharacterBuilder implements ICharacterBuilder {
      private character: Character;

      constructor() {
        this.reset();
      }

      reset() {
        this.character = new Character();
      }

      addHelmet(helmet: string): this {
        this.character.helmet = helmet;
        return this;
      }

      addTorsoArmor(armor: string): this {
        this.character.torsoArmor = armor;
        return this;
      }

      addArmsCover(armsCover: string): this {
        this.character.armsCover = armsCover;
        return this;
      }

      addPants(pants: string): this {
        this.character.pants = pants;
        return this;
      }

      addPrimaryWeapon(weapon: string): this {
        this.character.primaryWeapon = weapon;
        return this;
      }

      addSecondaryWeapon(weapon: string): this {
        this.character.secondaryWeapon = weapon;
        return this;
      }

      addMeleeWeapon(weapon: string): this {
        this.character.meleeWeapon = weapon;
        return this;
      }

      getCharacter(): Character {
        const result = this.character;
        this.reset();
        return result;
      }
    }

Step 4: Director Class
Orchestrates the building process by defining configurations for different character types.

    class Director {
      private characterBuilder: CharacterBuilder;

      setCharacterBuilder(characterBuilder: CharacterBuilder) {
        this.characterBuilder = characterBuilder;
      }

      buildStarterCharacter() {
        this.characterBuilder
          .addHelmet("starter")
          .addTorsoArmor("starter")
          .addArmsCover("starter")
          .addPants("starter");
      }

      buildSniperCharacter() {
        this.characterBuilder
          .addHelmet("ghillie head cover")
          .addTorsoArmor("ghillie torso cover")
          .addArmsCover("ghillie arms cover")
          .addPants("ghillie pants")
          .addPrimaryWeapon("Bolt sniper rifle")
          .addSecondaryWeapon("pistol")
          .addMeleeWeapon("knife");
      }
    }

Step 5: Client Code
Demonstrates how the Builder Pattern is used to create different character configurations.

    const director = new Director();
    const builder = new CharacterBuilder();
    director.setCharacterBuilder(builder);
    director.buildStarterCharacter();
    console.log(builder.getCharacter());

    director.buildSniperCharacter();
    console.log(builder.getCharacter());

Problems Solved with Builder Pattern

Simplifies Complex Object Creation
By delegating the construction logic to a builder class, the client code becomes cleaner and more manageable.
Improves Flexibility
Clients can build objects step by step, adding only the parts they need.
Promotes Scalability
Adding new attributes or configurations (e.g., a wizard character) doesn’t disrupt existing code.
Supports Readability
The clear, incremental construction process is easier to understand and maintain.

3.Real-Life Projects That Use the Builder Pattern

Game Development:
Building customizable characters, levels, or items incrementally.
UI Builders:
Constructing dynamic user interfaces where optional components are added based on user input.
Document Generators:
Creating structured documents like PDFs or reports with optional sections.
Query Builders:
Incrementally building SQL queries or API requests.

The Builder Pattern is a versatile tool for managing complex object creation, offering flexibility and scalability while keeping your code maintainable and readable. With the provided implementation, you can now start applying this pattern to your projects!

In the next article of our Learn Design Patterns series, we’ll explore the Prototype Pattern, which is used to create new objects by cloning an existing object, known as a prototype. Stay tuned, and keep learning!

Learn Design Patterns: Understanding the Abstract Factory Pattern

Sami Maachi — Fri, 20 Dec 2024 22:02:56 +0000

Design patterns are essential for building scalable and maintainable software. One creational design pattern, the Abstract Factory Pattern ,stands out as a way to manage families of related objects without being tightly coupled to their concrete implementations.

This article will explore the Abstract Factory Pattern, understand its significance through a real-world scenario, and demonstrate its implementation using TypeScript.

Abstract Factory Definition
Scenario: Understanding the Problem
Real-Life Projects That Use the Abstract Factory

1.Abstract Factory Definition

The Abstract Factory Pattern is a creational design pattern that provides an interface for creating families of related or dependent objects without specifying their concrete classes.

Instead of relying on direct instantiation, this pattern abstracts the object creation process, ensuring that all objects created belong to a specific family.

2.Scenario: Understanding the Problem

Imagine we are building a cross-platform UI toolkit. the toolkit must support multiple platforms — Windows, macOS, and Linux.

Each platform has its own UI components, such as buttons, checkboxes, and dropdown menus. For example:

Windows has a WindowsButton, WindowsCheckbox, and WindowsDropdown.
macOS has a MacButton, MacCheckbox, and MacDropdown.
Linux has a LinuxButton, LinuxCheckbox, and LinuxDropdown.

The Challenges

Managing Families of Related Objects
When switching between platforms, we need to ensure that all components belong to the same platform family. You don’t want of mix different UI components like WindowsButton with MacCheckbox.
Extensibility for New Platforms
Adding support for a new platform, such as Android, should be straightforward without breaking existing code.
Decoupling Object Creation from Client Code
The client code (your UI rendering logic) shouldn’t be tied to specific classes like WindowsButton or MacCheckbox.

What Do We Want Instead?

We need a solution that:

Centralizes Object Creation: Ensures components are created consistently for each platform.
Supports Families of Objects: All UI components for a specific platform (e.g., buttons, checkboxes) should be grouped logically.
Simplifies Adding New Platforms: Adding support for Android or other platforms should require minimal changes to the codebase.

This is where the Abstract Factory Pattern excels.

Let’s implement the Abstract Factory Pattern for our cross-platform UI toolkit.

Step 1: Define Abstract Product Interfaces

    interface Button {
      render(): void;
    }

    interface Checkbox {
      render(): void;
    }

Step 2: Implement Concrete Products

    class WindowsButton implements Button {
      render(): void {
        console.log("Rendering Windows Button");
      }
    }

    class MacButton implements Button {
      render(): void {
        console.log("Rendering Mac Button");
      }
    }

    class WindowsCheckbox implements Checkbox {
      render(): void {
        console.log("Rendering Windows Checkbox");
      }
    }

    class MacCheckbox implements Checkbox {
      render(): void {
        console.log("Rendering Mac Checkbox");
      }
    }

Step 3: Define Abstract Factory

    interface UIFactory {
      createButton(): Button;
      createCheckbox(): Checkbox;
    }

Step 4: Implement Concrete Factories

    class WindowsFactory implements UIFactory {
      createButton(): Button {
        return new WindowsButton();
      }

    createCheckbox(): Checkbox {
        return new WindowsCheckbox();
      }
    }

    class MacFactory implements UIFactory {
      createButton(): Button {
        return new MacButton();
      }
      createCheckbox(): Checkbox {
        return new MacCheckbox();
      }
    }

Step 5: Client Code

    function renderUI(factory: UIFactory): void {
      const button = factory.createButton();
      const checkbox = factory.createCheckbox();
      button.render();
      checkbox.render();
    }

Step 6: Using the Factories

    console.log("Rendering Windows UI:");
    renderUI(new WindowsFactory());

    console.log("\nRendering Mac UI:");
    renderUI(new MacFactory());

Output:

Rendering Windows UI:

Rendering Windows Button

Rendering Windows Checkbox

Rendering Mac UI::

Rendering Mac Button

Rendering Mac Checkbox

3.Real-Life Projects That Use the Abstract Factory

Cross-Platform Frameworks
Frameworks like Qt or Flutter use the Abstract Factory Pattern to render UI components across platforms like Windows, macOS, and Linux.
Database Connection Managers
Abstract factories can create database connections for different databases (e.g., MySQL, PostgreSQL, MongoDB), ensuring that related components like query builders and transactions work consistently.
Theming Systems
The Abstract Factory Pattern is used to create UI components for specific themes (e.g., light mode, dark mode).

Conclusion

The Abstract Factory Pattern is a versatile design pattern that simplifies managing families of related objects while promoting scalability and maintainability. It’s particularly useful in scenarios involving cross-platform development, theming, or any situation where object families must remain consistent.

In the next article of our Learn Design Patterns series, we’ll explore the Builder Pattern, which focuses on constructing complex objects step by step. Stay tuned, and keep learning!

Learn Design Patterns: Understanding the Factory Method Pattern

Sami Maachi — Fri, 20 Dec 2024 20:05:17 +0000

What do “ design patterns” mean?

Design patterns are essential tools in a developer’s arsenal. They provide reusable solutions to common problems in software design. it’s like a blueprint or a template that you can adapt to solve specific problems in your code. Today, we’ll go through the Factory Method Pattern, a creational pattern that helps manage object creation in an efficient and flexible way.

In this article, we’ll break down the Factory Method Pattern, understand the problems it solves, and see how it’s used in real-world projects. By the end, you’ll have a solid understanding of how to implement it in TypeScript.

Factory Method Definition
Scenario: Understanding the Problem
Real-Life Projects That Use the Factory Method

Factory Method Definition

The Factory Method is a creational design pattern that defines an interface for creating objects but allows subclasses or specific implementations to decide which object to instantiate.

Instead of instantiating objects directly in your code (e.g., using the new keyword), the Factory Method delegates the object creation responsibility to a factory method.

Key Characteristics:

Encapsulation of Object Creation: Clients only know the interface, not the concrete implementation.
Flexibility: You can introduce new object types without modifying the existing codebase.

Scenario: Understanding the Problem

Imagine you’re working on a notification system for a messaging app. Your app needs to send notifications through different channels like Email, SMS, and Push Notifications.

At first, it’s tempting to create objects for these notification types directly wherever needed:

const emailNotification = new EmailNotification();
emailNotification.send("Welcome to our platform!");

const smsNotification = new SMSNotification();
smsNotification.send("Your order has been shipped!");

This approach works fine — until it doesn’t.

What Happens When the Requirements Change?

It becomes error-prone and time-consuming, especially as the number of notification types increases.
Complex object initialization, suppose certain notification types require additional configurations (e.g., API keys for SMS, custom headers for Push Notifications). Adding these configurations everywhere you create the objects leads to repetitive code and potential bugs.
Code duplication and tight coupling, your client code becomes tightly coupled with the concrete implementations (EmailNotification, SMSNotification, etc.), making it harder to change or test.

What Do We Want Instead?

We need a solution where:

Object creation is centralized and reusable: The code to initialize each notification type should live in one place.
New notification types can be added easily: Adding for example a WhatsAppNotification type or any future type should not require changes to the existing client code.
Client code is decoupled from implementations: The client should rely on an interface, not specific classes.

This is where the Factory Method Pattern shines. It addresses these challenges by encapsulating object creation and delegating the responsibility to a centralized factory while respecting the single responsibility principle.

Now, with this problem in mind, let’s see how the Factory Method Pattern solves it effectively.

Step 1: Define the Product Interface

interface Notification {
  send(message: string): void;
}

Step 2: Implement Concrete Products

class EmailNotification implements Notification {
  send(message: string): void {
    console.log(`Email sent with message: ${message}`);
  }
}

class SMSNotification implements Notification {
  send(message: string): void {
    console.log(`SMS sent with message: ${message}`);
  }
}

class PushNotification implements Notification {
  send(message: string): void {
    console.log(`Push notification sent with message: ${message}`);
  }
}

Step 3: Define the Creator Class

abstract class NotificationFactory {
  abstract createNotification(): Notification;

  sendNotification(message: string): void {
    const notification = this.createNotification();
    notification.send(message);
  }
}

Step 4: Implement Concrete Factories

class EmailNotificationFactory extends NotificationFactory {
  createNotification(): Notification {
    return new EmailNotification();
  }
}

class SMSNotificationFactory extends NotificationFactory {
  createNotification(): Notification {
    return new SMSNotification();
  }
}

class PushNotificationFactory extends NotificationFactory {
  createNotification(): Notification {
    return new PushNotification();
  }
}

Step 5: Client Code

const factories: NotificationFactory[] = [
  new EmailNotificationFactory(),
  new SMSNotificationFactory(),
  new PushNotificationFactory(),
];

factories.forEach(factory => {
  factory.sendNotification("Hello, World!");
});

Output:

Email sent with message: Hello, World!

SMS sent with message: Hello, World!

Push notification sent with message: Hello, World!

Real-Life Projects That Use the Factory Method

Game Development
In games, the Factory Method is often used to create enemies, weapons, or levels dynamically based on difficulty or player state.
Frameworks:

Angular: Dependency Injection in Angular can be considered a real-world use of the Factory Method. Factories are used to provide instances of services dynamically.
React Context: Factories are sometimes used to manage state or create context providers dynamically.

Conclusion

The Factory Method is a simple yet powerful design pattern that can make your codebase more flexible, scalable, and easier to maintain.

In the next article, we’ll explore another creational pattern: Abstract Factory. Stay tuned, and stay curious !

DEV Community: Sami Maachi

Understanding the Bridge Pattern: Decoupling Abstraction and Implementation

Understanding the Bridge Pattern: Decoupling Abstraction and Implementation

Table of Contents

1.Bridge Pattern Definition

2.Scenario: Understanding the Problem

Implementation in TypeScript

3.Real-Life Projects That Use the Bridge Pattern

Conclusion

Learn Design Patterns: Understanding the Adapter Pattern for Compatibility

Learn Design Patterns: Understanding the Adapter Pattern for Compatibility

Table of Contents

1.Adapter Pattern Definition

2.Scenario: Understanding the Problem

Implementation in TypeScript

3.Real-Life Projects That Use the Adapter Pattern

Learn Design Patterns: Mastering the Singleton Design Pattern

Learn Design Patterns: Mastering the Singleton Design Pattern

Table of Contents

1. Singleton Pattern Definition

Key Characteristics of the Singleton Pattern

2. Scenario: Understanding the Problem

Implementation in TypeScript

3. Real-Life Projects That Use the Singleton Pattern

Conclusion

Learn Design Patterns: Unlocking the Power of the Prototype Design Pattern

Table of Contents

Prototype Pattern Definition

Scenario: Understanding the Problem

Implementation of the Prototype Design Pattern in TypeScript

Step 1:Define the Prototype Interface

Step 2: Create the Concrete Prototype

Step 3: Client Code Example

Real-Life Projects That Use the Prototype Pattern

Conclusion

Learn Design Patterns: Understanding the Builder Pattern

Table of Contents

1.Builder Pattern Definition

Problems Solved with Builder Pattern

Implementation

Key Components

Problems Solved with Builder Pattern

3.Real-Life Projects That Use the Builder Pattern

Learn Design Patterns: Understanding the Abstract Factory Pattern

Table of Contents

1.Abstract Factory Definition

2.Scenario: Understanding the Problem

The Challenges

What Do We Want Instead?

3.Real-Life Projects That Use the Abstract Factory

Conclusion

Learn Design Patterns: Understanding the Factory Method Pattern

What do “ design patterns” mean?

Table of Contents

Factory Method Definition

Key Characteristics:

Scenario: Understanding the Problem

What Happens When the Requirements Change?

What Do We Want Instead?

Real-Life Projects That Use the Factory Method

Conclusion