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

...Refer to Book or Videos for extra content.

Terminology

...Refer to Book or Videos for extra content.

Bridge UML Diagram

Bridge Pattern UML Diagram

Source Code

...Refer to Book or Videos for extra content.

./src/bridge/bridge-concept.ts

// 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

...Refer to Book or Videos for extra content.

Example UML Diagram

Bridge Pattern in Context

Source Code

./src/bridge/client.ts

// 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

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

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

// 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

// 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

// The Shape Implementor Interface

export default interface IShapeImplementor {
    drawImplementation(): void
}

./src/bridge/ishape.ts

// The Shape Abstraction Interface

export default interface IShape {
    draw(): void
}

Output

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

Summary

...Refer to Book or Videos for extra content.