Facade Pattern

Posted by

 


The Facade Pattern is a structural design pattern that provides a unified interface for a set of interfaces in a subsystem. This pattern simplifies the use of a complex system by hiding its complexity behind a single access interface. The main goal is to improve code readability and reduce dependencies between components.

🔗 Do you like Techelopment? Check out the site for all the details!


Pattern Family: Structural Patterns

The Facade Pattern belongs to the family of structural design patterns. Structural patterns focus on organizing classes and objects to facilitate software design, improve maintainability, and reduce dependencies between components.


Diagram


How the Facade Pattern Works

To better understand how the Facade pattern works, imagine that we have a complex audio-video system with multiple components, such as a Blu-ray player, a projector, and a surround sound system. To turn on the system and play a movie, you need to:

  1. Turn on the projector

  2. Set the source to the Blu-ray player

  3. Turn on the Blu-ray player

  4. Turn on the audio system

  5. Set the volume

If every action was performed directly by the user interacting with each individual component, the code would be difficult to maintain. With the Facade pattern, we can create a HomeTheaterFacade class that encapsulates these operations and provides a simplified method:

class HomeTheaterFacade {
    constructor(projector, bluRayPlayer, soundSystem) {
        this.projector = projector;
        this.bluRayPlayer = bluRayPlayer;
        this.soundSystem = soundSystem;
    }

    watchMovie() {
        this.projector.on();
        this.projector.setInput(this.bluRayPlayer);
        this.bluRayPlayer.on();
        this.soundSystem.on();
        this.soundSystem.setVolume(10);
    }
}

Now, instead of interacting with each individual component, we can simply call:

homeTheater.watchMovie();


A more concrete example: Online payments

Suppose we need to implement an online payment system. This system involves several operations:

  • Checking the availability of funds

  • Payment Processing

  • Sending the receipt

Without the Facade pattern, application code would have to interact directly with each service, increasing complexity and the risk of errors. Using the Facade pattern, we can create a class that hides implementation details:

class PaymentFacade {
    constructor(bankService, paymentProcessor, receiptService) {
        this.bankService = bankService;
        this.paymentProcessor = paymentProcessor;
        this.receiptService = receiptService;
    }

    processPayment(account, amount) {
        if (this.bankService.verifyFunds(account, amount)) {
            this.paymentProcessor.process(account, amount);
            this.receiptService.sendReceipt(account, amount);
        } else {
            console.log("Fondi insufficienti");
        }
    }
}

Now, to process a payment, the application can simply call:

paymentFacade.processPayment("12345", 100.0);

This approach makes the code cleaner, less error-prone, and easier to maintain.

With the Facade Pattern, we can simplify the interaction with complex systems, improving maintainability and reducing direct dependencies between components. In fact, it is frequently used in frameworks and libraries to provide intuitive and easy-to-use APIs.


Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment