Facade Pattern

Abhirup Datta - Sep 9 - - Dev Community

Facade pattern is relatively a simple design pattern to understand and heavily used in actual code.
The word "Facade" means "the principal front of a building, that faces on to a street or open space."

What and why Facade Pattern ?
With the Facade pattern you can take a complex subsystem and making it easier to use by implementing a Facade class that provides a single but more reasonable interface.

Example
Consider , you are designing a smart home system where your home can have subsystems like lights, thermostat, security system etc which controls various parts of your house.
Now, if you have to turn on/off these systems when you arrive or leave the house you have to manually do this things.
You can get rid of these manual (and repeated) tasks by the a help of a Facade (or a butler) who will internally call these methods and you will just call a single function of this Facade.

Image 1

Code snippet 1

// Subsystems
class Light {
    turnOn() { console.log("Lights are on"); }
    turnOff() { console.log("Lights are off"); }
}

class Thermostat {
  setTemperature(temp: number) { 
    console.log(`Temperature set to ${temp}°C`); 
  }
}

class SecuritySystem {
    arm() { console.log("Security system armed"); }
    disarm() { console.log("Security system disarmed"); }
}

// Facade
class SmartHomeFacade {
    private light: Light;
    private thermostat: Thermostat;
    private security: SecuritySystem;

    constructor() {
        this.light = new Light();
        this.thermostat = new Thermostat();
        this.security = new SecuritySystem();
    }

    leaveHome() {
        this.light.turnOff();
        this.thermostat.setTemperature(18);
        this.security.arm();
        console.log("Home is set to 'Away' mode");
    }

    arriveHome() {
        this.security.disarm();
        this.light.turnOn();
        this.thermostat.setTemperature(22);
        console.log("Home is set to 'Welcome' mode");
    }
}

function test(){
    //  Client code
    const smartHome = new SmartHomeFacade();
    smartHome.leaveHome();
    console.log("---");
    smartHome.arriveHome();
}
test();

Enter fullscreen mode Exit fullscreen mode

Output
Output

Code for this and other patterns can be found here: https://github.com/abhidatta0/Essential-design-patterns-in-Typescript

Lets explain the code

  1. Light , Thermostat, SecuritySystem : these are three utilities which we are controlling in our house.The code for these is not much relevant to understand for the purpose of this blog.

  2. SmartHomeFacade: this class acts as the Facade between client and the 3 classes above and helps to control them internally. The client only calls the methods of the facade class.

In the test function, we just invoke leaveHome and arriveHome methods of the SmartHomeFacade function and it will take care of the rest!

Note:
Another benefit of using Facade class is it decouples a client from the subsytems. For e.g: if the method name is changed in Light class , we only need to make change in the SmartHomeFacade class .The client code remains as it is!

That’s it 😅

Code for this and other patterns can be found here: https://github.com/abhidatta0/Essential-design-patterns-in-Typescript

. . . . . . . . . . . . . . . . . .
Terabox Video Player