React-TypeScript Design Pattern 2 - Creational Design Patterns - Builder

Design Pattern - Builder

One useful technique for managing the production of complicated things is the Builder Design Pattern. It distinguishes between the process of creating an object and its final appearance. This comes in handy when you wish to generate instances of an object with various combinations of its numerous available options. It is simpler to oversee and comprehend the building procedure when you work with a builder, particularly if there are many choice components.

The pattern enables the development of many representations of the same object with different configurations by assigning the construction task to a distinct builder class. This is especially helpful for things that have many construction options to accommodate various use cases or scenarios. Additionally, because the Builder pattern provides a clear division between the object's real structure and building logic, it enhances the readability and maintainability of code.

Envision assembling an art piece where every component may possess distinct hues and forms. If you don't have a builder, you could wind up with a disorganized method of assembling the art piece. However, the builder allows you to arrange the art piece-making processes in a tidy manner, which makes it simpler to construct art pieces with different hues and forms. In this sense, the Builder Design Pattern aids in maintaining clarity and adaptability when working with objects that have multiple possible configurations.

import React from 'react';

// Product: Art Piece
class ArtPiece {
  color: string | null = null;
  shape: string | null = null;

  describe(): string {
    return `Piece with color ${this.color} and shape ${this.shape}`;
  }
}

// Builder: Abstract interface for creating art pieces
abstract class ArtBuilder {
  protected artPiece: ArtPiece;

  constructor() {
    this.artPiece = new ArtPiece();
  }

  abstract buildColor(): void;
  abstract buildShape(): void;

  getArtPiece(): ArtPiece {
    return this.artPiece;
  }
}

// Concrete Builder: Implements the Builder interface to create a specific art piece
class BlueSquareArtBuilder extends ArtBuilder {
  buildColor(): void {
    this.artPiece.color = 'blue';
  }

  buildShape(): void {
    this.artPiece.shape = 'square';
  }
}

// Director: Manages the construction process using a builder
class ArtDirector {
  private builder: ArtBuilder;

  constructor(builder: ArtBuilder) {
    this.builder = builder;
  }

  constructArtPiece(): void {
    this.builder.buildColor();
    this.builder.buildShape();
  }

  getArtPiece(): ArtPiece {
    return this.builder.getArtPiece();
  }
}

// React Component using the Builder pattern
function ArtComponent() {
  const blueSquareBuilder = new BlueSquareArtBuilder();
  const director = new ArtDirector(blueSquareBuilder);

  director.constructArtPiece();
  const blueSquarePiece = director.getArtPiece();

  return (
    <div>
      <h1>Art Piece Details</h1>
      <p>{blueSquarePiece.describe()}</p>
    </div>
  );
}

export default ArtComponent;

The product ArtPiece is a representation of an art piece with characteristics such as color and shape. The abstract builder class ArtBuilder defines the interface for making art components.

A concrete builder called BlueSquareArtBuilder uses the ArtBuilder interface to produce a particular kind of art piece called a blue square. Like the last example of the Builder design, ArtDirector uses a builder to manage the construction process. The ArtComponent React component creates and displays information on a blue square art piece using the Builder pattern. You can make more concrete builders (like RedCircleArtBuilder ) to build different colored and shaped art parts.