Abstract Factory Pattern

Introduction to the Abstract Factory Pattern

Welcome back! You’ve already explored the power of the Factory Method Pattern and how it promotes flexibility in your code design. Today, we are moving a step further by diving into the Abstract Factory Pattern . This pattern will help you create families of related objects without specifying their concrete classes.

Understanding the Abstract Factory Pattern

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. This pattern is particularly useful when you need to ensure that a set of related objects is created together, maintaining consistency across your application. To understand this better, let's consider a scenario in which you are developing a graphical user interface (GUI) toolkit. Your toolkit should support multiple operating systems, such as Windows and Mac. Each OS has its own set of UI components, like buttons and checkboxes. Using the Abstract Factory Pattern, you can define interfaces for these components and create their concrete implementations for each OS.

Factory Method vs. Abstract Factory: What’s the Difference?

You might be wondering how the Abstract Factory Pattern differs from the Factory Method Pattern you learned earlier. Here’s a quick comparison to clarify: Factory Method Pattern : Defines an interface for creating a single product, but lets subclasses decide which concrete class to instantiate. It focuses on creating one type of object. Example : A Dialog class that creates a Button using a factory method. Subclasses like WindowsDialog or MacDialog override the method to return a specific Button implementation. Abstract Factory Pattern : Provides an interface for creating families of related or dependent products (not just one), without specifying their concrete classes. It ensures that products created together are compatible. Example : A GUIFactory that can create both Button and Checkbox objects, ensuring that both are from the same family (e.g., both Windows-style or both Mac-style). In summary: Use Factory Method when you need to create one product and let subclasses decide which one. Use Abstract Factory when you need to create families of related products and ensure their compatibility.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

TypeScript

// Abstract Product A
interface Button {
  paint(): void;
}

// Abstract Product B
interface Checkbox {
  paint(): void;
}

// Abstract Product A
interface Button {
  paint(): void;
}

// Abstract Product B
interface Checkbox {
  paint(): void;
}

TypeScript

// Concrete Product A1
class WinButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Windows style.");
  }
}

// Concrete Product A2
class MacButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Mac style.");
  }
}

// Concrete Product B1
class WinCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Windows style.");
  }
}

// Concrete Product B2
class MacCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Mac style.");
  }
}

// Concrete Product A1
class WinButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Windows style.");
  }
}

// Concrete Product A2
class MacButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Mac style.");
  }
}

// Concrete Product B1
class WinCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Windows style.");
  }
}

// Concrete Product B2
class MacCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Mac style.");
  }
}

TypeScript

// Abstract Factory
interface GUIFactory {
  createButton(): Button;
  createCheckbox(): Checkbox;
}

// Abstract Factory
interface GUIFactory {
  createButton(): Button;
  createCheckbox(): Checkbox;
}

TypeScript

// Concrete Factory 1
class WinFactory implements GUIFactory {
  createButton(): Button {
    return new WinButton();
  }

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

// Concrete Factory 2
class MacFactory implements GUIFactory {
  createButton(): Button {
    return new MacButton();
  }

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

// Concrete Factory 1
class WinFactory implements GUIFactory {
  createButton(): Button {
    return new WinButton();
  }

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

// Concrete Factory 2
class MacFactory implements GUIFactory {
  createButton(): Button {
    return new MacButton();
  }

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

TypeScript

// Client code
class Application {
  private button: Button;
  private checkbox: Checkbox;

  constructor(private factory: GUIFactory) {
    this.button = this.factory.createButton();
    this.checkbox = this.factory.createCheckbox();
  }

  paint(): void {
    this.button.paint();
    this.checkbox.paint();
  }
}

let osType: string = "Windows";  // Change to "Mac" to see Mac UI
let factory: GUIFactory | null = null;

if (osType === "Windows") {
  factory = new WinFactory();
} else if (osType === "Mac") {
  factory = new MacFactory();
}

if (factory) {
  const app = new Application(factory);
  app.paint();
  // Output:
  // Rendering a button in a Windows style.
  // Rendering a checkbox in a Windows style.
} else {
  console.log("Unknown OS type.");
}

// Client code
class Application {
  private button: Button;
  private checkbox: Checkbox;

  constructor(private factory: GUIFactory) {
    this.button = this.factory.createButton();
    this.checkbox = this.factory.createCheckbox();
  }

  paint(): void {
    this.button.paint();
    this.checkbox.paint();
  }
}

let osType: string = "Windows";  // Change to "Mac" to see Mac UI
let factory: GUIFactory | null = null;

if (osType === "Windows") {
  factory = new WinFactory();
} else if (osType === "Mac") {
  factory = new MacFactory();
}

if (factory) {
  const app = new Application(factory);
  app.paint();
  // Output:
  // Rendering a button in a Windows style.
  // Rendering a checkbox in a Windows style.
} else {
  console.log("Unknown OS type.");
}

TypeScript

// Abstract Product A
interface Button {
  paint(): void;
}

// Concrete Product A1
class WinButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Windows style.");
  }
}

// Concrete Product A2
class MacButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Mac style.");
  }
}

// Abstract Product B
interface Checkbox {
  paint(): void;
}

// Concrete Product B1
class WinCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Windows style.");
  }
}

// Concrete Product B2
class MacCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Mac style.");
  }
}

// Abstract Factory
interface GUIFactory {
  createButton(): Button;
  createCheckbox(): Checkbox;
}

// Concrete Factory 1
class WinFactory implements GUIFactory {
  createButton(): Button {
    return new WinButton();
  }

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

// Concrete Factory 2
class MacFactory implements GUIFactory {
  createButton(): Button {
    return new MacButton();
  }

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

// Client code
class Application {
  private button: Button;
  private checkbox: Checkbox;

  constructor(private factory: GUIFactory) {
    this.button = this.factory.createButton();
    this.checkbox = this.factory.createCheckbox();
  }

  paint(): void {
    this.button.paint();
    this.checkbox.paint();
  }
}

let osType: string = "Windows";  // Change to "Mac" to see Mac UI
let factory: GUIFactory | null = null;

if (osType === "Windows") {
  factory = new WinFactory();
} else if (osType === "Mac") {
  factory = new MacFactory();
}

if (factory) {
  const app = new Application(factory);
  app.paint();
  // Output:
  // Rendering a button in a Windows style.
  // Rendering a checkbox in a Windows style.
} else {
  console.log("Unknown OS type.");
}

// Abstract Product A
interface Button {
  paint(): void;
}

// Concrete Product A1
class WinButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Windows style.");
  }
}

// Concrete Product A2
class MacButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Mac style.");
  }
}

// Abstract Product B
interface Checkbox {
  paint(): void;
}

// Concrete Product B1
class WinCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Windows style.");
  }
}

// Concrete Product B2
class MacCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Mac style.");
  }
}

// Abstract Factory
interface GUIFactory {
  createButton(): Button;
  createCheckbox(): Checkbox;
}

// Concrete Factory 1
class WinFactory implements GUIFactory {
  createButton(): Button {
    return new WinButton();
  }

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

// Concrete Factory 2
class MacFactory implements GUIFactory {
  createButton(): Button {
    return new MacButton();
  }

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

// Client code
class Application {
  private button: Button;
  private checkbox: Checkbox;

  constructor(private factory: GUIFactory) {
    this.button = this.factory.createButton();
    this.checkbox = this.factory.createCheckbox();
  }

  paint(): void {
    this.button.paint();
    this.checkbox.paint();
  }
}

let osType: string = "Windows";  // Change to "Mac" to see Mac UI
let factory: GUIFactory | null = null;

if (osType === "Windows") {
  factory = new WinFactory();
} else if (osType === "Mac") {
  factory = new MacFactory();
}

if (factory) {
  const app = new Application(factory);
  app.paint();
  // Output:
  // Rendering a button in a Windows style.
  // Rendering a checkbox in a Windows style.
} else {
  console.log("Unknown OS type.");
}

TypeScript

// Abstract Product A
interface Button {
  paint(): void;
}

// Abstract Product B
interface Checkbox {
  paint(): void;
}

TypeScript

// Concrete Product A1
class WinButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Windows style.");
  }
}

// Concrete Product A2
class MacButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Mac style.");
  }
}

// Concrete Product B1
class WinCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Windows style.");
  }
}

// Concrete Product B2
class MacCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Mac style.");
  }
}

TypeScript

// Abstract Factory
interface GUIFactory {
  createButton(): Button;
  createCheckbox(): Checkbox;
}

TypeScript

// Concrete Factory 1
class WinFactory implements GUIFactory {
  createButton(): Button {
    return new WinButton();
  }

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

// Concrete Factory 2
class MacFactory implements GUIFactory {
  createButton(): Button {
    return new MacButton();
  }

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

TypeScript

// Client code
class Application {
  private button: Button;
  private checkbox: Checkbox;

  constructor(private factory: GUIFactory) {
    this.button = this.factory.createButton();
    this.checkbox = this.factory.createCheckbox();
  }

  paint(): void {
    this.button.paint();
    this.checkbox.paint();
  }
}

let osType: string = "Windows";  // Change to "Mac" to see Mac UI
let factory: GUIFactory | null = null;

if (osType === "Windows") {
  factory = new WinFactory();
} else if (osType === "Mac") {
  factory = new MacFactory();
}

if (factory) {
  const app = new Application(factory);
  app.paint();
  // Output:
  // Rendering a button in a Windows style.
  // Rendering a checkbox in a Windows style.
} else {
  console.log("Unknown OS type.");
}

TypeScript

// Abstract Product A
interface Button {
  paint(): void;
}

// Concrete Product A1
class WinButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Windows style.");
  }
}

// Concrete Product A2
class MacButton implements Button {
  paint(): void {
    console.log("Rendering a button in a Mac style.");
  }
}

// Abstract Product B
interface Checkbox {
  paint(): void;
}

// Concrete Product B1
class WinCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Windows style.");
  }
}

// Concrete Product B2
class MacCheckbox implements Checkbox {
  paint(): void {
    console.log("Rendering a checkbox in a Mac style.");
  }
}

// Abstract Factory
interface GUIFactory {
  createButton(): Button;
  createCheckbox(): Checkbox;
}

// Concrete Factory 1
class WinFactory implements GUIFactory {
  createButton(): Button {
    return new WinButton();
  }

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

// Concrete Factory 2
class MacFactory implements GUIFactory {
  createButton(): Button {
    return new MacButton();
  }

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

// Client code
class Application {
  private button: Button;
  private checkbox: Checkbox;

  constructor(private factory: GUIFactory) {
    this.button = this.factory.createButton();
    this.checkbox = this.factory.createCheckbox();
  }

  paint(): void {
    this.button.paint();
    this.checkbox.paint();
  }
}

let osType: string = "Windows";  // Change to "Mac" to see Mac UI
let factory: GUIFactory | null = null;

if (osType === "Windows") {
  factory = new WinFactory();
} else if (osType === "Mac") {
  factory = new MacFactory();
}

if (factory) {
  const app = new Application(factory);
  app.paint();
  // Output:
  // Rendering a button in a Windows style.
  // Rendering a checkbox in a Windows style.
} else {
  console.log("Unknown OS type.");
}

Introduction to the Abstract Factory Pattern

Understanding the Abstract Factory Pattern

Factory Method vs. Abstract Factory: What’s the Difference?

Join the 1M+ learners on CodeSignal

Why Use Interfaces (and Not Abstract Classes) Here?

Defining Abstract Product Interfaces

Creating Concrete Product Implementations

Defining the Abstract Factory Interface

Creating Concrete Factory Implementations

Implementing the Client Code

Code Overview

Summary