Skip to content

Facade Design Pattern

Video Lecture

Section Video Links
Facade Pattern Facade Facade Pattern 
Facade Use Case Facade Use Case Facade Use Case 

Overview

Sometimes you have a system that becomes quite complex over time as more features are added or modified. It may be useful to provide a simplified API over it. This is the Facade pattern.

The Facade pattern essentially is an alternative, reduced or simplified interface to a set of other interfaces, abstractions and implementations within a system that may be full of complexity and/or tightly coupled.

It can also be considered as a higher-level interface that shields the consumer from the unnecessary low-level complications of integrating into many subsystems.

Facade UML Diagram

Facade Design Pattern

Source Code

./src/facade/facade-concept.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// The Facade pattern concept

class SubSystemClassA {
    // A hypothetically complicated class
    method(): string {
        return 'A'
    }
}

class SubSystemClassB {
    // A hypothetically complicated class
    method(value: string): string {
        return value
    }
}

class SubSystemClassC {
    // A hypothetically complicated class
    method(value: { C: number[] }): { C: number[] } {
        return value
    }
}

class Facade {
    // A simplified facade offering the services of subsystems
    subSystemClassA(): string {
        // Uses the subsystems method
        return new SubSystemClassA().method()
    }

    subSystemClassB(value: string): string {
        // Uses the subsystems method
        return new SubSystemClassB().method(value)
    }

    subSystemClassC(value: { C: number[] }): { C: number[] } {
        // Uses the subsystems method
        return new SubSystemClassC().method(value)
    }
}

// The Client
// Calling potentially complicated subsystems directly
console.log(new SubSystemClassA().method())
console.log(new SubSystemClassB().method('B'))
console.log(new SubSystemClassC().method({ C: [1, 2, 3] }))

// or using the simplified facade instead
const FACADE = new Facade()
console.log(FACADE.subSystemClassA())
console.log(FACADE.subSystemClassB('B'))
console.log(FACADE.subSystemClassC({ C: [1, 2, 3] }))

Output

node ./dist/facade/facade-concept.js
A
B
{ C: [ 1, 2, 3 ] }
A
B
{ C: [ 1, 2, 3 ] }

SBCODE Editor

<>

Facade Use Case

This is an example of a game engine API. The facade layer is creating one streamlined interface consisting of several methods from several larger API backend systems.

The client could connect directly to each subsystem's API and implement its authentication protocols, specific methods, etc. While it is possible, it would be quite a lot of consideration for each of the development teams, so the facade API unifies the common methods that becomes much less overwhelming for each new client developer to integrate into.

Example UML Diagram

Facade Example UML Diagram

Source Code

./src/facade/client.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// The Facade Example Use Case

import GameAPI from './game-api'

function sleep(ms: number) {
    return new Promise((resolve) => setTimeout(resolve, ms))
}

async function facadeExample() {
    const gameAPI = new GameAPI()

    const user = { user_name: 'sean' }
    const userId = gameAPI.registerUser(user)

    await sleep(500)

    gameAPI.submitEntry(userId, 5)

    await sleep(500)

    console.log()
    console.log('---- GameState Snapshot ----')
    console.log(gameAPI.gameState())

    await sleep(1000)

    const HISTORY = gameAPI.getHistory()

    console.log()
    console.log('---- Reports History ----')
    Object.keys(HISTORY).forEach((key) => {
        console.log(`${key} : ${HISTORY[key][0]} : ${HISTORY[key][1]}`)
    })

    await sleep(1000)

    console.log()
    console.log('---- User Balance ----')
    console.log(user.user_name + ' : ' + gameAPI.getBalance(userId))

    await sleep(1000)

    console.log()
    console.log('---- GameState Snapshot ----')
    console.log(gameAPI.gameState())
}
facadeExample()

./src/facade/game-api.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// The Game API facade

import Reports from './reports'
import Wallets from './wallets'
import Users from './users'
import GameEngine, { GameState } from './game-engine'

export default class GameAPI {
    #wallets: Wallets
    #reports: Reports
    #users: Users
    #gameEngine: GameEngine

    constructor() {
        this.#wallets = new Wallets()
        this.#reports = new Reports()
        this.#users = new Users()
        this.#gameEngine = new GameEngine()
    }

    getBalance(userId: string): number {
        // Get a players balance
        return this.#wallets.getBalance(userId)
    }

    gameState(): GameState {
        // Get the current game state
        return this.#gameEngine.getGameState()
    }

    getHistory(): { [id: string]: [number, string] } {
        // get the game history
        return this.#reports.getHistory()
    }

    changePwd(userId: string, password: string): boolean {
        // change users password
        return this.#users.changePwd(userId, password)
    }

    submitEntry(userId: string, entry: number): boolean {
        // submit a bet
        return this.#gameEngine.submitEntry(userId, entry)
    }

    registerUser(value: { [id: string]: string }): string {
        // register a new user and returns the new id
        return this.#users.registerUser(value)
    }
}

./src/facade/users.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// A Singleton Dictionary of Users

import Reports from './reports'
import Wallets from './wallets'

export default class Users {
    static instance: Users
    #users: { [id: string]: { [id: string]: string } } = {}
    #reports = new Reports()
    #wallets = new Wallets()

    constructor() {
        if (Users.instance) {
            return Users.instance
        }
        Users.instance = this
    }

    registerUser(newUser: { [id: string]: string }): string {
        // register a user
        if (!(newUser['user_name'] in this.#users)) {
            // generate really complicated unique user_id.
            // Using the existing user_name as the id for simplicity
            const userId = newUser['user_name']
            this.#users[userId] = newUser
            this.#reports.logEvent(`new user '${userId}' created`)
            // create a wallet for the new user
            this.#wallets.createWallet(userId)
            // give the user a sign up bonus
            this.#reports.logEvent(
                `Give new user '${userId}' sign up bonus of 10`
            )
            this.#wallets.adjustBalance(userId, 10)
            return userId
        }
        return ''
    }

    editUser(userId: string, user: { [id: string]: string }): boolean {
        // do nothing. Not implemented yet
        console.log(userId)
        console.log(user)
        return false
    }

    changePwd(userId: string, password: string): boolean {
        // do nothing. Not implemented yet
        console.log(userId)
        console.log(password)
        return false
    }
}

./src/facade/wallets.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// A Singleton Dictionary of User Wallets

import Reports from './reports'

export default class Wallets {
    static instance: Wallets
    #wallets: { [id: string]: number } = {}
    #reports = new Reports()

    constructor() {
        if (Wallets.instance) {
            return Wallets.instance
        }
        Wallets.instance = this
    }

    createWallet(userId: string): boolean {
        // A method to initialize a users wallet
        if (!(userId in this.#wallets)) {
            this.#wallets[userId] = 0
            this.#reports.logEvent(
                `wallet for '${userId}' created and set to 0`
            )
            return true
        }
        return false
    }

    getBalance(userId: string): number {
        // A method to check a users balance
        this.#reports.logEvent(
            `Balance check for '${userId}' = ${this.#wallets[userId]}`
        )
        return this.#wallets[userId]
    }

    adjustBalance(userId: string, amount: number): number {
        // A method to adjust a user balance up or down
        this.#wallets[userId] = this.#wallets[userId] + amount
        this.#reports.logEvent(
            `Balance adjustment for '${userId}'. New balance = ${
                this.#wallets[userId]
            }`
        )
        return this.#wallets[userId]
    }
}

./src/facade/reports.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// A Singleton Dictionary of Reported Events

export default class Reports {
    static instance: Reports
    #reports: { [id: string]: [number, string] } = {}
    #rowId = 0

    constructor() {
        if (Reports.instance) {
            return Reports.instance
        }
        Reports.instance = this
    }

    getHistory(): { [id: string]: [number, string] } {
        return this.#reports
    }

    logEvent(event: string): boolean {
        this.#reports[this.#rowId] = [Date.now(), event]
        this.#rowId = this.#rowId + 1
        return true
    }
}

./src/facade/game-engine.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// The Game Engine

import Reports from './reports'
import Wallets from './wallets'

export type GameState = {
    clock: number
    gameOpen: boolean
    entries: [string, number][]
}

export default class GameEngine {
    static instance: GameEngine
    #startTime = 0
    #clock = 0
    #entries: [string, number][] = []
    #gameOpen = true
    #reports = new Reports()
    #wallets = new Wallets()

    constructor() {
        if (GameEngine.instance) {
            return GameEngine.instance
        }
        this.#startTime = Math.floor(Date.now() / 1000)
        this.#clock = 60
        GameEngine.instance = this
    }

    getGameState(): GameState {
        // Get a snapshot of the current game state
        const now = Math.floor(Date.now() / 1000)
        let timeRemaining = this.#startTime - now + this.#clock
        console.log('getGameState ' + timeRemaining)
        if (timeRemaining < 0) {
            timeRemaining = 0
        }
        this.#gameOpen = false
        return {
            clock: timeRemaining,
            gameOpen: this.#gameOpen,
            entries: this.#entries,
        } as GameState
    }

    submitEntry(userId: string, entry: number): boolean {
        // Submit a new entry for the user in this game
        const now = Math.floor(Date.now() / 1000)
        const time_remaining = this.#startTime - now + this.#clock
        if (time_remaining > 0) {
            if (this.#wallets.getBalance(userId) > 1) {
                if (this.#wallets.adjustBalance(userId, -1)) {
                    this.#entries.push([userId, entry])
                    this.#reports.logEvent(
                        `New entry '${entry}' submitted by '${userId}'`
                    )
                    return true
                }
                this.#reports.logEvent(
                    `Problem adjusting balance for '${userId}'`
                )
                return false
            }
            this.#reports.logEvent(`User Balance for '${userId}' to low`)
            return false
        }
        this.#reports.logEvent('Game Closed')
        return false
    }
}

Output

node ./dist/facade/client.js

---- GameState Snapshot ----
getGameState 59
{ clock: 59, gameOpen: false, entries: [ [ 'sean', 5 ] ] }

---- Reports History ----
0 : 1619260983800 : new user 'sean' created
1 : 1619260983800 : wallet for 'sean' created and set to 0
2 : 1619260983800 : Give new user 'sean' sign up bonus of 10
3 : 1619260983800 : Balance adjustment for 'sean'. New balance = 10
4 : 1619260984312 : Balance check for 'sean' = 10
5 : 1619260984312 : Balance adjustment for 'sean'. New balance = 9
6 : 1619260984312 : New entry '5' submitted by 'sean'

---- User Balance ----
sean : 9

---- GameState Snapshot ----
getGameState 56
{ clock: 56, gameOpen: false, entries: [ [ 'sean', 5 ] ] }

SBCODE Editor

<>

Summary

  • Use when you want to provide a simple interface to a complex subsystem.
  • You want to layer your subsystems into an abstraction that is easier to understand.
  • Abstract Factory and Facade can be considered very similar. An Abstract Factory is about creating in interface over several creational classes of similar objects, whereas the Facade is more like an API layer over many creational, structural and/or behavioral patterns.
  • The Mediator is similar to the Facade in the way that it abstracts existing classes. The Facade is not intended to modify, load balance or apply any extra logic. A subsystem does not need to consider that existence of the facade, it would still work without it.
  • A Facade is a minimal interface that could also be implemented as a Singleton.
  • A Facade is an optional layer that does not alter the subsystem. The subsystem does not need to know about the Facade, and could even be used by many other facades created for different audiences.