Composite Pattern

This is a very common pattern used in UI libraries, however, the actual implementation is often abstracted to us as developers. After understanding this pattern, you will start seeing places it exists and recognizing how software is written.

What is it?

This pattern describes a tree-like structure with "composites" and "leaves". A composite is a grouping of leaves. This pattern is used to describe items where containers of items have the same interface or when you want to describe part-whole hierarchies of objects. The hard part of this pattern isn't the implementation, or theoretical understanding; but finding a use-case for it.

This pattern requires a few classes to implement: a Component, Leaf, and Composite.

• A Component is the base-class that Leaf and Composite inherit from.
• A Leaf represents the end objects in the hierarchy, these will be attached to Composites
• A Composite has leafs or other composites to build out the hierarchy

There is much more nuance that goes on with this pattern however, some of those nuances are outlined below

• You can have static leafs that can be appended to the tree in multiple places
• Often one has to traverse the tree to get information from the parent. With a large tree this can get expensive, so caching is an important topic
• Leaves can be multiple types, one could draw a line, another could draw a rectangle

// Not really needed in JS, but useful for strict typed languages. This is basically the interface the child classes will adhere to
class Component {
    constructor() {
    }

    doSomething() {}

    add(item) {
    }

    remove(toRemove) {
    }
}

class Composite extends Component {
    constructor() {
        super();
        this.children = [];
    }

    doSomething() {
        this.children.forEach(child => child.doSomething());
    }

    add(item) {
        this.children.push(item);
    }

    remove(toRemove) {
        this.children = this.children.filter(child => child !== toRemove);
    }
}

class Leaf extends Component {
    constructor(value) {
        this.value = value;
        super();
    }

    doSomething() {
        console.log(this.value)
    }
}

const root = new Composite();
root.add(new Leaf('foo'))
root.add(new Leaf('bar'))
root.add(new Leaf('baz'))

const branch = new Composite();
branch.add(new Leaf('hello'))
branch.add(new Leaf('world'))

root.add(branch);
root.doSomething();

In the example above, you can see how each Composite has the ability to add leaves and other composites to it. Each leaf only does something, but does not have the ability to add more leaves to itself. If you are creative, you can do many interesting things with this pattern.

Where is it used?

The most prominent place this pattern is used is in the DOM. The DOM is a hierarchial system of "nodes" that do things. If you look back into old JS, you can find a "text node" which is a leaf that can be applied to a composite (