Pattern - Composite

The Compositor pattern is a software design pattern that was first described in the book "Design Patterns: Elements of Reusable Object-Oriented Software" written by Erich Gamma, Richard Helm , Ralph Johnson and John Vlissides, better known as the "Gang of Four" (GoF).

The Composer pattern is a software design pattern that enables the creation of hierarchical object structures and provides an interface for working with those structures uniformly, regardless of the type of object they contain. It lets you create objects that make up other objects, forming a nested structure of objects.

The main idea of the Compositor pattern is to allow objects to be grouped into hierarchical structures, like a tree, where each node is a composite object of other objects. Each object has a common interface, allowing objects to be treated similarly regardless of their position in the hierarchy. This allows building complex structures using simple, easy-to-understand objects, making the code easier to maintain and extend.

Common examples of using the composer pattern include creating documents with text, images, and tables, creating graphical user interfaces with nested panels, and creating complex file structures with folders and files.

The Composer pattern can be used in many situations to solve common design problems, some examples include:

• Creating documents with text, images, and tables: The Composer pattern can be used to create objects that represent different types of document elements, such as text, images, and tables, and allow these objects to be grouped into hierarchical structures to form a document complete.
• Creating graphical user interfaces (GUIs) with nested panels: The Compositor pattern can be used to create objects that represent different types of graphical user interface components, such as buttons, text boxes, and panels, and allow these objects to be grouped into hierarchical structures to form a complete graphical user interface.
• Creating complex file structures with folders and files: The Composer pattern can be used to create objects that represent different types of file structure elements, such as folders and files, and allow these objects to be grouped into hierarchical structures to form a complete file structure.
• Creation of complex object structures, such as trees, graphs, linked lists and object lists.
• Creation of game systems, where objects are grouped in hierarchies to form scenarios and game elements.
• Creation of 3D rendering systems, where objects are grouped in hierarchies to form 3D models and scenarios.
• Creation of simulation systems, where objects are grouped in hierarchies to form systems and sub-systems.
• Creation of artificial intelligence systems, where objects are grouped into hierarchies to form agents and sub-agents.

Below is a simple code example using the Composer pattern.

class FileSystemItem {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }

  getSize() {
    return 0;
  }
}

class File extends FileSystemItem {
  constructor(name, size) {
    super(name);
    this.size = size;
  }

  getSize() {
    return this.size;
  }
}

class Directory extends FileSystemItem {
  constructor(name) {
    super(name);
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  removeItem(item) {
    this.items = this.items.filter(i => i !== item);
  }

  getSize() {
    return this.items.reduce((size, item) => size + item.getSize(), 0);
  }
}

const home = new Directory('Home');
const documents = new Directory('Documents');
const resume = new File('resume.pdf', 1024);
const budget = new File('budget.xlsx', 2048);

documents.addItem(resume);
documents.addItem(budget);
home.addItem(documents);

console.log(home.getName()); // "Home"
console.log(home.getSize()); // 3072
        

The FileSystemItem class is the base class with a common interface for all file structure elements. It has a name and a getName() method that returns that name, and a getSize() method that returns 0 (because it's a base class and doesn't know the size of the item).

The File class extends FileSystemItem and has an additional "size" property. It also overrides the getSize() method to return the file size.

The Directory class also extends FileSystemItem and has an "items" property which is an array of file structure elements. It has addItem(item) and removeItem(item) methods for adding and removing elements, respectively. It also has a getSize() method that returns the total size of all its child elements using the reduce method.

Next, we create an instance of the Directory class called home and another one called documents. Then we create File instances called resume and budget. We add these files to the documents folder, and finally we add the documents folder to the home folder.

Finally, we print the name of the home folder and the total size of its elements.

Simple, right?

The Composer pattern is useful when we need to work with composite object structures, where an object can contain other objects and these objects can be both simple and composite. It allows you to work with these structures uniformly, regardless of whether your elements are simple or composite.

Examples of common uses of the Composer pattern include:

• File and folder structures, where folders can contain files and other folders, and it is necessary to calculate the total size of all elements.
• Document structures, where documents can contain other documents, such as paragraphs, images and tables, and it is necessary to traverse the structure to print the document.
• Menu structures, where menus can contain other menus and menu items, and you must traverse the structure to display the menu.
• UI component frameworks, where components can contain other components such as buttons and checkboxes, and you need to traverse the framework to track events.

Conclusion

The Composer pattern is a design pattern that allows you to work with uniformly composed object structures, regardless of whether their elements are simple or composite. It allows the creation of hierarchical structures, where objects can contain other objects, and these objects can be both simple and composite.

Hope this helps, until next time.