Skip to main content

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.