Facade Design Pattern

Structural: Facade Pattern

---

Could you please explain the facade design pattern?

View Answer:

Interview Response: The Façade design pattern creates an interface that protects clients from complex functionality in one or more sub-systems. It's a simple pattern that may appear insignificant, but it's powerful and advantageous. We commonly find it in systems based on a multi-layer architecture.

Code Example #1:

let orderNumber = 0;

// Facade
class PlaceFoodOrder {
  placeOrder(orderDetails) {
    const orderId = PlaceFoodOrder.generateId();
    let chef;
    if (orderDetails.foodType === 'Main Course') {
      chef = new MainCourseChef();
    } else if (orderDetails.foodType == 'Dessert') {
      chef = new DessertChef();
    }
    return chef.addFoodOrder({ orderId, orderDetails });
  }

  static generateId() {
    return ++orderNumber;
  }
}

// Sub Systems
class FoodOrders {
  constructor() {
    this.orders = [];
  }

  addFoodOrder(order) {
    this.orders.push(order);
    return this.conveyOrder(order);
  }

  timetoMakeOrder() {}
  conveyOrder(order) {}
}

class MainCourseChef extends FoodOrders {
  constructor() {
    super();
    this.assigned = true;
    return this;
  }

  timetoMakeOrder() {
    return Math.floor(Math.random() * 50) + 10;
  }

  conveyOrder({ orderId, orderDetails }) {
    const time = this.timetoMakeOrder();
    console.log(
      `Order number ${orderId}: ${orderDetails.foodDetails} will be served in ${time} minutes.`
    );
  }
}

class DessertChef extends FoodOrders {
  constructor() {
    super();
    this.assigned = true;
    return this;
  }

  timetoMakeOrder() {
    return Math.floor(Math.random() * 30) + 10;
  }

  conveyOrder({ orderId, orderDetails }) {
    const time = this.timetoMakeOrder();
    console.log(
      `Order number ${orderId}: ${orderDetails.foodDetails} will be served in ${time} minutes.`
    );
  }
}

const customer = new PlaceFoodOrder();

const order1 = customer.placeOrder({
  foodType: 'Main Course',
  foodDetails: 'Pasta with Shrimps',
});

const order2 = customer.placeOrder({
  foodType: 'Dessert',
  foodDetails: 'Molten Lava Cake',
});

/*

output:

Order number 1: Pasta with Shrimps will be served in 40 minutes.
Order number 2: Molten Lava Cake will be served in 34 minutes.

*/

Code Example #2:

The objects participating in this pattern are:

Façade -- Example code: Mortgage

• knows which sub-systems are responsible for a request
• Client requests are routed to the appropriate sub-system objects.

Sub Systems -- Example code: Bank, Credit, Background

• carries out and implements specialized sub-system functionality
• have no knowledge of or connection to the façade

let Mortgage = function (name) {
  this.name = name;
};

Mortgage.prototype = {
  applyFor: function (amount) {
    // access multiple subsystems...
    let result = 'approved';
    if (!new Bank().verify(this.name, amount)) {
      result = 'denied';
    } else if (!new Credit().get(this.name)) {
      result = 'denied';
    } else if (!new Background().check(this.name)) {
      result = 'denied';
    }
    return this.name + ' has been ' + result + ' for a ' + amount + ' mortgage';
  },
};

let Bank = function () {
  this.verify = function (name, amount) {
    // complex logic ...
    return true;
  };
};

let Credit = function () {
  this.get = function (name) {
    // complex logic ...
    return true;
  };
};

let Background = function () {
  this.check = function (name) {
    // complex logic ...
    return true;
  };
};

function run() {
  let mortgage = new Mortgage('Joan Templeton');
  let result = mortgage.applyFor('$100,000');

  console.log(result);
}

run();

/*

OUTPUT:

Joan Templeton has been approved for a $100,000 mortgage

*/

---

The Facade pattern belongs to which pattern family?

View Answer:

Interview Response: The Facade pattern is a type of structural design pattern.

---

When should you employ the Façade Pattern?

View Answer:

Interview Response: The facade pattern makes it easier for a client to interact with a system. As a result, it gets used when an application's underlying code is large and complex, and the client does not need to see it.

It gets used in communicating with methods in a library without understanding what is happening behind the scenes. JavaScript libraries, such as jQuery, are an example.

---

Can you elaborate on the Façade Pattern's object participants?

View Answer:

Interview Response: There are two types of objects represented in the Façade Pattern. They consist of the Façade and the Sub Systems (There can be multiple sub-system objects in this pattern).

• Facade – The Façade understands which sub-systems are in charge of a request and routes client requests to the appropriate sub-system objects.
• Sub Systems – A sub-system implements and executes specialized sub-system activities, but it has no cohesive knowledge or connection to the Façade itself.

---

What are some of the benefits of using the Facade pattern?

View Answer:

Interview Response: You can isolate your code from the complexity of a sub-system.

---

What are some of the disadvantages of employing the Facade pattern?

View Answer:

Interview Response: A façade can be a god object tightly linked to all classes in an app.

---