Skip to content

Bridge Design Pattern

Video Lecture

Section Video Links
Bridge Pattern Bridge Bridge Pattern  
Bridge Use Case Bridge Use Case Bridge Use Case  

Overview

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.

Terminology

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.

Bridge UML Diagram

Bridge Pattern UML Diagram

Source Code

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.

./src/bridge/bridge-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
53
54
55
56
57
58
// Bridge Pattern Concept Sample Code

interface IAbstraction {
    method(value: string[]): void
}

class RefinedAbstractionA implements IAbstraction {
    #implementer: IImplementer

    constructor(implementer: IImplementer) {
        this.#implementer = implementer
    }

    method(value: string[]) {
        this.#implementer.method(value)
    }
}

class RefinedAbstractionB implements IAbstraction {
    #implementer: IImplementer

    constructor(implementer: IImplementer) {
        this.#implementer = implementer
    }

    method(value: string[]) {
        this.#implementer.method(value)
    }
}

interface IImplementer {
    method(value: string[]): void
}

class ConcreteImplementerA implements IImplementer {
    method(value: string[]) {
        console.log(value)
    }
}

class ConcreteImplementerB implements IImplementer {
    method(value: string[]) {
        value.forEach((v) => console.log(v))
    }
}

// The Client
const VALUES = ['a', 'b', 'c']

const REFINED_ABSTRACTION_A = new RefinedAbstractionA(
    new ConcreteImplementerA()
)
REFINED_ABSTRACTION_A.method(VALUES)

const REFINED_ABSTRACTION_B = new RefinedAbstractionB(
    new ConcreteImplementerB()
)
REFINED_ABSTRACTION_B.method(VALUES)

Output

node ./dist/bridge/bridge-concept.js
[ 'a', 'b', 'c' ]
a
b
c

Bridge Use Case

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.

Example UML Diagram

Bridge Pattern in Context

Source Code

./src/bridge/client.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Bridge Pattern Concept Sample Code

import CircleImplementer from './circle-implementer'
import SquareImplementer from './square-implementer'
import Circle from './circle'
import Square from './square'

const CIRCLE = new Circle(new CircleImplementer())
CIRCLE.draw()

const SQUARE = new Square(new SquareImplementer())
SQUARE.draw()

./src/bridge/circle-implementer.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import IShapeImplementor from './ishape-implementer'

export default class CircleImplementer implements IShapeImplementor {
    drawImplementation(): void {
        console.log('    ******')
        console.log('  **      **')
        console.log(' *          *')
        console.log('*            *')
        console.log('*            *')
        console.log(' *          *')
        console.log('  **      **')
        console.log('    ******')
    }
}

./src/bridge/square-implementer.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import IShapeImplementer from './ishape-implementer'

export default class SquareImplementer implements IShapeImplementer {
    drawImplementation(): void {
        console.log('**************')
        console.log('*            *')
        console.log('*            *')
        console.log('*            *')
        console.log('*            *')
        console.log('*            *')
        console.log('*            *')
        console.log('**************')
    }
}

./src/bridge/circle.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// A Circle Abstraction

import IShape from './ishape'
import IShapeImplementor from './ishape-implementer'

export default class Circle implements IShape {
    #implementer: IShapeImplementor

    constructor(implementer: IShapeImplementor) {
        this.#implementer = implementer
    }

    draw(): void {
        this.#implementer.drawImplementation()
    }
}

./src/bridge/square.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// A Square Abstraction

import IShape from './ishape'
import IShapeImplementor from './ishape-implementer'

export default class Square implements IShape {
    #implementer: IShapeImplementor

    constructor(implementer: IShapeImplementor) {
        this.#implementer = implementer
    }

    draw(): void {
        this.#implementer.drawImplementation()
    }
}

./src/bridge/ishape-implementer.ts

1
2
3
4
5
// The Shape Implementor Interface

export default interface IShapeImplementor {
    drawImplementation(): void
}

./src/bridge/ishape.ts

1
2
3
4
5
// The Shape Abstraction Interface

export default interface IShape {
    draw(): void
}

Output

node ./dist/bridge/client.js
    ******
  **      **
 *          *
*            *
*            *
 *          *
  **      **
    ******
**************
*            *
*            *
*            *
*            *
*            *
*            *
**************

Summary

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.