It's #FrontendFriday - Facade-Pattern

What is the facade pattern?

Facades do not only exist on buildings but also in software development, but what exactly is the difference? Let's first take a look at the definition of a building façade:

A façade therefore beautifies the building. The facade pattern does roughly the same thing in software development.
Here it is used to form an interface to "hide" the mostly complex code parts and only return what is important for the user (in this sense we are talking about developers) who want to use the software in their code. The facade pattern beautifies the code, so to speak, and makes it clearer, as it only releases the values and functions that are actually needed.

The façade reveals the functions that are important for the sub-systems without showing the entire code.

When should the facade pattern be used?

As with any pattern: use with care and caution!

It always makes sense when code is to be used from another program or developer. The pattern also makes sense when refactoring. To get an overview and see exactly which function and which attribute is being used.

Code-Example

What does the facade pattern look like in Javascript? Here is an example:

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

Mortgage.prototype = {

    applyFor: function (amount) {
        // access multiple subsystems...
        var 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";
    }
}

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

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

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

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

    console.log(result);
}

Code Example²

The facade in the example is the Mortgage function. The Bank, Credit and Background functions contain complex logic that is used by Mortgage. However, a user only uses the facade and does not have to worry about what the complex functions do. The facade takes care of this for them and only expects a name and the amount for the applyFor function.

Relevance in JavaScript

JavaScript can become very complex. To reduce the complexity, it makes sense to use the facade pattern.

 

Learn more about Java programming