Façade Pattern

  • Sprouting
  • c.

The façade pattern is a structural design pattern that hides complex logic behind a simplified interface.

Example

Real-world analogy: placing an online order

design-patterns/src/structural/facade.ts at main

Sub-system

All of the complex processes involved when an online order is placed.

const orderProcessing = {
  processPayment() {
    console.log("Processing payment");
  },
  contactSupplier() {
    console.log("Contacting supplier");
  },
  packageProduct() {
    console.log("Packaging product");
  },
  arrangeDelivery() {
    console.log("Arranging delivery");
  },
};

Façade

When placing an online order, the processing of that order is taken care of for you. It’s not important to understand payment processing, supplier relationships, or packaging and delivering the product.

function placeOrder() {
  orderProcessing.processPayment();
  orderProcessing.contactSupplier();
  orderProcessing.packageProduct();
  orderProcessing.arrangeDelivery();
}

Client

Calling the placeOrder function calls in turn all of the necessary functions from the orderProcessing sub-system.

placeOrder();
// Expected output:
// Processing payment
// Contacting supplier
// Packaging
// Delivering

Backlinks