Abstract Factory Design Pattern

The Abstract Factory Pattern extends the Factory Method Pattern by introducing an abstract factory interface that defines a set of methods for creating related objects. Concrete implementations of these factory interfaces produce objects that belong to the same family but may differ in their concrete types.

class Button {
  render() {
    throw new Error("render method must be implemented.");
  }
}

class HtmlButton extends Button {
  render() {
    console.log("HTML Button rendered.");
  }
}

class ReactButton extends Button {
  render() {
    console.log("React Button rendered.");
  }
}

class Input {
  render() {
    throw new Error("render method must be implemented.");
  }
}

class HtmlInput extends Input {
  render() {
    console.log("HTML Input rendered.");
  }
}

class ReactInput extends Input {
  render() {
    console.log("React Input rendered.");
  }
}

// Abstract Factory
class UIFactory {
  createButton() {
    throw new Error("createButton method must be implemented.");
  }
  createInput() {
    throw new Error("createInput method must be implemented.");
  }
}

We define abstract product classes Button and Input, along with their concrete implementations for HTML and React environments.

UIFactory serves as the abstract factory interface with methods for creating buttons and inputs.

The Abstract Factory Pattern provides a flexible way to create families of related objects while ensuring that their concrete types remain hidden from clients.