The Facade Pattern!

The facade design pattern in object oriented programming can be compared to an architectural facade. The facade of a building is the frontage or face of the building. At the Notre-Dame de Paris Cathedral, the facade of the cathedral, though complex, hides the stunning nave and apse of the building inside. The facade design pattern hides and masks the structural code that resides behind the facade's interface.

Why the facade pattern?

Advantages

Usability of a library can be greatly improved by implementing the facade pattern. It can also help with readability as a lot of the complex functionality can be abstracted away. The facade can be used as a wrapper to make complex collection of APIs into a simple single purposed API.

It can also be used as a starting point to begin a large refactor. The refactor can include building in a facade and the outward facing complex functionality can be removed in lieu of the facade.

Disadvantages

A drawback of the facade pattern is that it is connected to the inner workings of the complex structure. If the complex subsystem requires a refactor, then the facade may also need to be refactored to match the changes of the underlying subsystem, which may add additional overhead for refactors.

TypeScript Implementation

We have several functions that we want to simplify. Although there are only a few functions, imagine if you had many more that you had to manage!

export class FloorCleaning {
    public vacuum(): void {
        console.log('Vacuuming!');
    }

    public sweep(): void {
        console.log('Sweeping!');
    }
}

export class LaundryCleaning {
    public pickUpLaundry(): void {
        console.log('Picking up laundry!');
    }

    public washLaundry(): void {
        console.log('Washing laundry!')
    }

    public foldLaundry(): void {
        console.log('folding laundry!')
    }
}

export class DustCleaning {
    public dustValuables(): void {
        console.log('Dusting valuables!');
    }

    public dustBaseboards(): void {
        console.log('Dusting baseboards!')
    }
}

We have common tasks, so instead of calling the previous functions each time, let's employ the facade to simplify the implementation!

export class CleaningFacade {    
    private floorCleaning: FloorCleaning = new FloorCleaning();
    private laundryCleaning: LaundryCleaning = new LaundryCleaning();
    private dustCleaning: DustCleaning = new DustCleaning();

    public cleanBedroom(): void {
        console.log('*** Starting to clean bedroom ***');
        this.laundryCleaning.pickUpLaundry();
        this.laundryCleaning.washLaundry();
        this.dustCleaning.dustBaseboards();
        this.floorCleaning.vacuum();
        this.laundryCleaning.foldLaundry();
        console.log('*** Ending clean bedroom job ***');
    }

    public cleanLivingRoom(): void {
        console.log('*** Starting to clean living room ***');
        this.laundryCleaning.pickUpLaundry();
        this.dustCleaning.dustValuables();
        this.dustCleaning.dustBaseboards();
        this.floorCleaning.sweep();
        console.log('*** Ending clean living room job ***');
    }
}

Finally, run the demo to see the facade in action! Nice! 😎

function runFacadeDemo() : void {
    var cleaningFacade: CleaningFacade = new CleaningFacade();
    cleaningFacade.cleanBedroom();
    cleaningFacade.cleanLivingRoom();
}

runFacadeDemo();

Check out the full demo here: the Facade. To try it out, simply run the typescript compiler tsc then run node facade.js from the console.

Conclusion

The facade is a great tool in the toolkit for any software developer. If your work is interfacing with different teams and complex systems, then you may want to consider refactoring some of your work to incorporate a facade to make things more simple!