System Design (LLD)Structural Patterns

Bridge Pattern

LevelIntermediate

Duration60 mins

TopicStructural Patterns

4 / 4

Use Cases and Examples

Bridge Pattern in the Real World

Understanding the Bridge Pattern's structure is essential, but recognizing where to apply it is equally important. The pattern appears throughout production software—from graphics libraries to messaging systems, from persistence layers to remote communication.

This page explores concrete, production-quality examples that demonstrate when and how to leverage the Bridge Pattern effectively.

What You Will Learn

By the end of this page, you will see Bridge Pattern applied to UI rendering systems, device control frameworks, messaging platforms, persistence layers, and report generation. Each example demonstrates the pattern's core benefit: independent evolution of abstraction and implementation hierarchies.

Use Case 1: Graphics and Rendering Systems

Graphics systems exemplify the Bridge Pattern perfectly. You have multiple shape abstractions (circle, rectangle, polygon) that need to render on multiple platforms (OpenGL, DirectX, Vulkan, software renderer). Without Bridge, you'd need M × N shape-platform combinations.

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// IMPLEMENTOR: Platform-specific rendering primitives
interface GraphicsAPI {
    drawLine(x1: number, y1: number, x2: number, y2: number, color: string): void;
    drawArc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, color: string): void;
    fillPolygon(points: [number, number][], color: string): void;
    setLineWidth(width: number): void;
}
 
// CONCRETE IMPLEMENTORS
class OpenGLRenderer implements GraphicsAPI {
    drawLine(x1: number, y1: number, x2: number, y2: number, color: string): void {
        console.log(`[OpenGL] glBegin(GL_LINES); glVertex2f(${x1}, ${y1}); glVertex2f(${x2}, ${y2});`);
    }
    drawArc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, color: string): void {
        console.log(`[OpenGL] Drawing arc with tessellation at (${cx}, ${cy})`);
    }
    fillPolygon(points: [number, number][], color: string): void {
        console.log(`[OpenGL] glBegin(GL_POLYGON); ... ${points.length} vertices`);
    }
    setLineWidth(width: number): void {
        console.log(`[OpenGL] glLineWidth(${width})`);
    }
}
 
class CanvasRenderer implements GraphicsAPI {
    private ctx: string = "CanvasRenderingContext2D";
    
    drawLine(x1: number, y1: number, x2: number, y2: number, color: string): void {
        console.log(`[Canvas] ctx.moveTo(${x1}, ${y1}); ctx.lineTo(${x2}, ${y2}); ctx.stroke();`);
    }
    drawArc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, color: string): void {
        console.log(`[Canvas] ctx.arc(${cx}, ${cy}, ${radius}, ${startAngle}, ${endAngle})`);
    }
    fillPolygon(points: [number, number][], color: string): void {
        console.log(`[Canvas] ctx.beginPath(); ... ctx.fill()`);
    }
    setLineWidth(width: number): void {
        console.log(`[Canvas] ctx.lineWidth = ${width}`);
    }
}
 
// ABSTRACTION: Shape base class
abstract class Shape {
    protected renderer: GraphicsAPI;
    protected color: string;
    protected lineWidth: number = 1;
    
    constructor(renderer: GraphicsAPI, color: string) {
        this.renderer = renderer;
        this.color = color;
    }
    
    abstract draw(): void;
    abstract getArea(): number;
}
 
// REFINED ABSTRACTIONS
class Circle extends Shape {
    constructor(
        renderer: GraphicsAPI, color: string,
        private cx: number, private cy: number, private radius: number
    ) {
        super(renderer, color);
    }
    
    draw(): void {
        this.renderer.setLineWidth(this.lineWidth);
        this.renderer.drawArc(this.cx, this.cy, this.radius, 0, Math.PI * 2, this.color);
    }
    
    getArea(): number { return Math.PI * this.radius ** 2; }
}
 
class Rectangle extends Shape {
    constructor(
        renderer: GraphicsAPI, color: string,
        private x: number, private y: number,
        private width: number, private height: number
    ) {
        super(renderer, color);
    }
    
    draw(): void {
        const points: [number, number][] = [
            [this.x, this.y],
            [this.x + this.width, this.y],
            [this.x + this.width, this.y + this.height],
            [this.x, this.y + this.height]
        ];
        this.renderer.fillPolygon(points, this.color);
    }
    
    getArea(): number { return this.width * this.height; }
}
 
// Usage: Any shape × Any renderer
const opengl = new OpenGLRenderer();
const canvas = new CanvasRenderer();
 
const circleGL = new Circle(opengl, "red", 100, 100, 50);
const circleCanvas = new Circle(canvas, "blue", 100, 100, 50);
 
circleGL.draw();     // Uses OpenGL
circleCanvas.draw(); // Uses Canvas

Use Case 2: Device Control Systems

Smart home systems control many device types (TV, lights, thermostat) through multiple control interfaces (basic remote, advanced remote, voice control). Bridge separates device capabilities from control complexity.

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// IMPLEMENTOR: Device capabilities interface
interface Device {
    getName(): string;
    isEnabled(): boolean;
    enable(): void;
    disable(): void;
    getStatus(): Record<string, any>;
}
 
// CONCRETE IMPLEMENTORS: Different devices
class SmartTV implements Device {
    private on = false;
    private volume = 50;
    private channel = 1;
    
    getName(): string { return "Smart TV"; }
    isEnabled(): boolean { return this.on; }
    enable(): void { this.on = true; console.log("TV: Powering on..."); }
    disable(): void { this.on = false; console.log("TV: Powering off..."); }
    getStatus(): Record<string, any> {
        return { on: this.on, volume: this.volume, channel: this.channel };
    }
    
    setVolume(v: number): void { this.volume = Math.max(0, Math.min(100, v)); }
    setChannel(c: number): void { this.channel = c; }
}
 
class SmartLight implements Device {
    private on = false;
    private brightness = 100;
    private color = "#FFFFFF";
    
    getName(): string { return "Smart Light"; }
    isEnabled(): boolean { return this.on; }
    enable(): void { this.on = true; console.log("Light: Turning on..."); }
    disable(): void { this.on = false; console.log("Light: Turning off..."); }
    getStatus(): Record<string, any> {
        return { on: this.on, brightness: this.brightness, color: this.color };
    }
    
    setBrightness(b: number): void { this.brightness = Math.max(0, Math.min(100, b)); }
    setColor(c: string): void { this.color = c; }
}
 
// ABSTRACTION: Remote control base
abstract class RemoteControl {
    protected device: Device;
    
    constructor(device: Device) {
        this.device = device;
    }
    
    togglePower(): void {
        if (this.device.isEnabled()) {
            this.device.disable();
        } else {
            this.device.enable();
        }
    }
    
    abstract showStatus(): void;
}
 
// REFINED ABSTRACTIONS: Different control complexity levels
class BasicRemote extends RemoteControl {
    showStatus(): void {
        console.log(`[${this.device.getName()}] Power: ${this.device.isEnabled() ? 'ON' : 'OFF'}`);
    }
}
 
class AdvancedRemote extends RemoteControl {
    showStatus(): void {
        const status = this.device.getStatus();
        console.log(`[${this.device.getName()}] Detailed Status:`);
        Object.entries(status).forEach(([k, v]) => console.log(`  ${k}: ${v}`));
    }
    
    mute(): void {
        if (this.device instanceof SmartTV) {
            (this.device as SmartTV).setVolume(0);
            console.log("TV muted");
        }
    }
}
 
// Usage
const tv = new SmartTV();
const light = new SmartLight();
 
const basicTVRemote = new BasicRemote(tv);
const advancedLightRemote = new AdvancedRemote(light);
 
basicTVRemote.togglePower();
basicTVRemote.showStatus();
 
advancedLightRemote.togglePower();
advancedLightRemote.showStatus();

Use Case 3: Enterprise Messaging Systems

Enterprise messaging involves multiple message types (email, SMS, push, Slack) and multiple providers (AWS, Twilio, Firebase). Bridge enables any message type to use any provider.

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
71
72
73
74
75
76
77
78
79
// IMPLEMENTOR: Message delivery primitives
interface MessageGateway {
    sendPlainText(to: string, text: string): Promise<string>;
    sendRichContent(to: string, html: string, attachments?: string[]): Promise<string>;
    getDeliveryStatus(messageId: string): Promise<'pending' | 'sent' | 'delivered' | 'failed'>;
}
 
// CONCRETE IMPLEMENTORS
class AWSMessagingGateway implements MessageGateway {
    async sendPlainText(to: string, text: string): Promise<string> {
        console.log(`[AWS SES] Plain text to ${to}`);
        return `aws-${Date.now()}`;
    }
    async sendRichContent(to: string, html: string, attachments?: string[]): Promise<string> {
        console.log(`[AWS SES] Rich email with ${attachments?.length || 0} attachments`);
        return `aws-rich-${Date.now()}`;
    }
    async getDeliveryStatus(messageId: string): Promise<'pending' | 'sent' | 'delivered' | 'failed'> {
        return 'delivered';
    }
}
 
class TwilioGateway implements MessageGateway {
    async sendPlainText(to: string, text: string): Promise<string> {
        const truncated = text.length > 160 ? text.slice(0, 157) + '...' : text;
        console.log(`[Twilio] SMS to ${to}: "${truncated}"`);
        return `twilio-${Date.now()}`;
    }
    async sendRichContent(to: string, html: string, attachments?: string[]): Promise<string> {
        // SMS doesn't support rich content
        return this.sendPlainText(to, 'View content online: https://app.example.com');
    }
    async getDeliveryStatus(messageId: string): Promise<'pending' | 'sent' | 'delivered' | 'failed'> {
        return 'sent';
    }
}
 
// ABSTRACTION: Message types
abstract class Message {
    protected gateway: MessageGateway;
    
    constructor(gateway: MessageGateway) {
        this.gateway = gateway;
    }
    
    abstract send(recipient: string): Promise<string>;
}
 
// REFINED ABSTRACTIONS
class WelcomeMessage extends Message {
    constructor(gateway: MessageGateway, private userName: string) {
        super(gateway);
    }
    
    async send(recipient: string): Promise<string> {
        const html = `<h1>Welcome, ${this.userName}!</h1><p>Thanks for joining.</p>`;
        return this.gateway.sendRichContent(recipient, html);
    }
}
 
class AlertMessage extends Message {
    constructor(gateway: MessageGateway, private alertText: string) {
        super(gateway);
    }
    
    async send(recipient: string): Promise<string> {
        return this.gateway.sendPlainText(recipient, `ALERT: ${this.alertText}`);
    }
}
 
// Usage: Any message × Any gateway
const awsGateway = new AWSMessagingGateway();
const twilioGateway = new TwilioGateway();
 
const welcomeEmail = new WelcomeMessage(awsGateway, "Alice");
const alertSMS = new AlertMessage(twilioGateway, "Security breach detected");
 
await welcomeEmail.send("alice@example.com");
await alertSMS.send("+15551234567");

Use Case 4: Database Abstraction Layers

ORMs and data access layers use Bridge to separate domain models from database implementations. This allows the same repository logic to work with MySQL, PostgreSQL, or MongoDB.

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
// IMPLEMENTOR: Database operations interface
interface DatabaseDriver {
    query<T>(sql: string, params: any[]): Promise<T[]>;
    execute(sql: string, params: any[]): Promise<{ affectedRows: number }>;
    beginTransaction(): Promise<void>;
    commit(): Promise<void>;
    rollback(): Promise<void>;
}
 
// CONCRETE IMPLEMENTORS
class PostgresDriver implements DatabaseDriver {
    async query<T>(sql: string, params: any[]): Promise<T[]> {
        console.log(`[Postgres] ${sql}`);
        return [];
    }
    async execute(sql: string, params: any[]): Promise<{ affectedRows: number }> {
        console.log(`[Postgres] ${sql}`);
        return { affectedRows: 1 };
    }
    async beginTransaction(): Promise<void> { console.log("[Postgres] BEGIN"); }
    async commit(): Promise<void> { console.log("[Postgres] COMMIT"); }
    async rollback(): Promise<void> { console.log("[Postgres] ROLLBACK"); }
}
 
class MySQLDriver implements DatabaseDriver {
    async query<T>(sql: string, params: any[]): Promise<T[]> {
        console.log(`[MySQL] ${sql}`);
        return [];
    }
    async execute(sql: string, params: any[]): Promise<{ affectedRows: number }> {
        console.log(`[MySQL] ${sql}`);
        return { affectedRows: 1 };
    }
    async beginTransaction(): Promise<void> { console.log("[MySQL] START TRANSACTION"); }
    async commit(): Promise<void> { console.log("[MySQL] COMMIT"); }
    async rollback(): Promise<void> { console.log("[MySQL] ROLLBACK"); }
}
 
// ABSTRACTION: Repository base
abstract class Repository<T> {
    protected db: DatabaseDriver;
    protected tableName: string;
    
    constructor(db: DatabaseDriver, tableName: string) {
        this.db = db;
        this.tableName = tableName;
    }
    
    async findById(id: string): Promise<T | null> {
        const results = await this.db.query<T>(
            `SELECT * FROM ${this.tableName} WHERE id = $1`, [id]
        );
        return results[0] || null;
    }
    
    async findAll(): Promise<T[]> {
        return this.db.query<T>(`SELECT * FROM ${this.tableName}`, []);
    }
}
 
// REFINED ABSTRACTIONS: Domain-specific repositories
interface User { id: string; email: string; name: string; }
interface Order { id: string; userId: string; total: number; }
 
class UserRepository extends Repository<User> {
    constructor(db: DatabaseDriver) {
        super(db, 'users');
    }
    
    async findByEmail(email: string): Promise<User | null> {
        const results = await this.db.query<User>(
            'SELECT * FROM users WHERE email = $1', [email]
        );
        return results[0] || null;
    }
}
 
class OrderRepository extends Repository<Order> {
    constructor(db: DatabaseDriver) {
        super(db, 'orders');
    }
    
    async findByUser(userId: string): Promise<Order[]> {
        return this.db.query<Order>(
            'SELECT * FROM orders WHERE user_id = $1', [userId]
        );
    }
}
 
// Usage: Any repository × Any database
const postgres = new PostgresDriver();
const mysql = new MySQLDriver();
 
const usersOnPg = new UserRepository(postgres);
const ordersOnMySQL = new OrderRepository(mysql);
 
await usersOnPg.findByEmail("test@example.com");
await ordersOnMySQL.findByUser("user-123");

When to Apply the Bridge Pattern

Recognizing Bridge opportunities requires understanding problem characteristics that signal the pattern's applicability.

Apply Bridge When

•Two orthogonal dimensions of variation — You have M variations of one concept and N variations of another, and they should combine freely.
•Inheritance would cause explosion — Using inheritance would require M × N classes instead of M + N.
•Runtime switching needed — You need to change implementations at runtime (A/B testing, user preferences, failover).
•Both hierarchies will evolve — You anticipate adding new abstractions AND new implementations over time.
•Implementation details should be hidden — Clients should work with abstractions without knowing implementation specifics.

Avoid Bridge When

•Single dimension of variation — If only one side varies, simple polymorphism or Strategy pattern may suffice.
•Stable, unchanging requirements — If neither dimension will grow, the overhead isn't justified.
•Tight integration is required — Some systems benefit from tight abstraction-implementation binding.
•Wrapping existing interfaces — If you're adapting an existing interface, use Adapter instead.

Summary — Bridge Pattern Mastery

Key Takeaways

•Bridge separates abstraction from implementation — Two independent hierarchies connected through composition.
•Reduces class explosion — M + N classes instead of M × N when faced with two dimensions of variation.
•Enables runtime flexibility — Implementations can be switched at runtime for A/B testing, fallbacks, or user preferences.
•Supports independent evolution — Add new abstractions or implementations without modifying existing code.
•Different from Adapter — Bridge is proactive design; Adapter is reactive integration.
•Common applications — Graphics systems, device control, messaging platforms, persistence layers, report generators.

Module Complete

You have mastered the Bridge Pattern! You understand the problem it solves (abstraction-implementation coupling), its elegant solution (separate hierarchies with composition bridge), how it differs from Adapter, and when to apply it in real-world systems. This pattern is a cornerstone of flexible, maintainable software architecture.

4 / 4

Loading learning content...

System Design (LLD)Structural Patterns

Bridge Pattern

LevelIntermediate

Duration60 mins

TopicStructural Patterns

4 / 4

Use Cases and Examples

Bridge Pattern in the Real World

This page explores concrete, production-quality examples that demonstrate when and how to leverage the Bridge Pattern effectively.

What You Will Learn

Use Case 1: Graphics and Rendering Systems

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// IMPLEMENTOR: Platform-specific rendering primitives
interface GraphicsAPI {
    drawLine(x1: number, y1: number, x2: number, y2: number, color: string): void;
    drawArc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, color: string): void;
    fillPolygon(points: [number, number][], color: string): void;
    setLineWidth(width: number): void;
}
 
// CONCRETE IMPLEMENTORS
class OpenGLRenderer implements GraphicsAPI {
    drawLine(x1: number, y1: number, x2: number, y2: number, color: string): void {
        console.log(`[OpenGL] glBegin(GL_LINES); glVertex2f(${x1}, ${y1}); glVertex2f(${x2}, ${y2});`);
    }
    drawArc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, color: string): void {
        console.log(`[OpenGL] Drawing arc with tessellation at (${cx}, ${cy})`);
    }
    fillPolygon(points: [number, number][], color: string): void {
        console.log(`[OpenGL] glBegin(GL_POLYGON); ... ${points.length} vertices`);
    }
    setLineWidth(width: number): void {
        console.log(`[OpenGL] glLineWidth(${width})`);
    }
}
 
class CanvasRenderer implements GraphicsAPI {
    private ctx: string = "CanvasRenderingContext2D";
    
    drawLine(x1: number, y1: number, x2: number, y2: number, color: string): void {
        console.log(`[Canvas] ctx.moveTo(${x1}, ${y1}); ctx.lineTo(${x2}, ${y2}); ctx.stroke();`);
    }
    drawArc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, color: string): void {
        console.log(`[Canvas] ctx.arc(${cx}, ${cy}, ${radius}, ${startAngle}, ${endAngle})`);
    }
    fillPolygon(points: [number, number][], color: string): void {
        console.log(`[Canvas] ctx.beginPath(); ... ctx.fill()`);
    }
    setLineWidth(width: number): void {
        console.log(`[Canvas] ctx.lineWidth = ${width}`);
    }
}
 
// ABSTRACTION: Shape base class
abstract class Shape {
    protected renderer: GraphicsAPI;
    protected color: string;
    protected lineWidth: number = 1;
    
    constructor(renderer: GraphicsAPI, color: string) {
        this.renderer = renderer;
        this.color = color;
    }
    
    abstract draw(): void;
    abstract getArea(): number;
}
 
// REFINED ABSTRACTIONS
class Circle extends Shape {
    constructor(
        renderer: GraphicsAPI, color: string,
        private cx: number, private cy: number, private radius: number
    ) {
        super(renderer, color);
    }
    
    draw(): void {
        this.renderer.setLineWidth(this.lineWidth);
        this.renderer.drawArc(this.cx, this.cy, this.radius, 0, Math.PI * 2, this.color);
    }
    
    getArea(): number { return Math.PI * this.radius ** 2; }
}
 
class Rectangle extends Shape {
    constructor(
        renderer: GraphicsAPI, color: string,
        private x: number, private y: number,
        private width: number, private height: number
    ) {
        super(renderer, color);
    }
    
    draw(): void {
        const points: [number, number][] = [
            [this.x, this.y],
            [this.x + this.width, this.y],
            [this.x + this.width, this.y + this.height],
            [this.x, this.y + this.height]
        ];
        this.renderer.fillPolygon(points, this.color);
    }
    
    getArea(): number { return this.width * this.height; }
}
 
// Usage: Any shape × Any renderer
const opengl = new OpenGLRenderer();
const canvas = new CanvasRenderer();
 
const circleGL = new Circle(opengl, "red", 100, 100, 50);
const circleCanvas = new Circle(canvas, "blue", 100, 100, 50);
 
circleGL.draw();     // Uses OpenGL
circleCanvas.draw(); // Uses Canvas

Use Case 2: Device Control Systems

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// IMPLEMENTOR: Device capabilities interface
interface Device {
    getName(): string;
    isEnabled(): boolean;
    enable(): void;
    disable(): void;
    getStatus(): Record<string, any>;
}
 
// CONCRETE IMPLEMENTORS: Different devices
class SmartTV implements Device {
    private on = false;
    private volume = 50;
    private channel = 1;
    
    getName(): string { return "Smart TV"; }
    isEnabled(): boolean { return this.on; }
    enable(): void { this.on = true; console.log("TV: Powering on..."); }
    disable(): void { this.on = false; console.log("TV: Powering off..."); }
    getStatus(): Record<string, any> {
        return { on: this.on, volume: this.volume, channel: this.channel };
    }
    
    setVolume(v: number): void { this.volume = Math.max(0, Math.min(100, v)); }
    setChannel(c: number): void { this.channel = c; }
}
 
class SmartLight implements Device {
    private on = false;
    private brightness = 100;
    private color = "#FFFFFF";
    
    getName(): string { return "Smart Light"; }
    isEnabled(): boolean { return this.on; }
    enable(): void { this.on = true; console.log("Light: Turning on..."); }
    disable(): void { this.on = false; console.log("Light: Turning off..."); }
    getStatus(): Record<string, any> {
        return { on: this.on, brightness: this.brightness, color: this.color };
    }
    
    setBrightness(b: number): void { this.brightness = Math.max(0, Math.min(100, b)); }
    setColor(c: string): void { this.color = c; }
}
 
// ABSTRACTION: Remote control base
abstract class RemoteControl {
    protected device: Device;
    
    constructor(device: Device) {
        this.device = device;
    }
    
    togglePower(): void {
        if (this.device.isEnabled()) {
            this.device.disable();
        } else {
            this.device.enable();
        }
    }
    
    abstract showStatus(): void;
}
 
// REFINED ABSTRACTIONS: Different control complexity levels
class BasicRemote extends RemoteControl {
    showStatus(): void {
        console.log(`[${this.device.getName()}] Power: ${this.device.isEnabled() ? 'ON' : 'OFF'}`);
    }
}
 
class AdvancedRemote extends RemoteControl {
    showStatus(): void {
        const status = this.device.getStatus();
        console.log(`[${this.device.getName()}] Detailed Status:`);
        Object.entries(status).forEach(([k, v]) => console.log(`  ${k}: ${v}`));
    }
    
    mute(): void {
        if (this.device instanceof SmartTV) {
            (this.device as SmartTV).setVolume(0);
            console.log("TV muted");
        }
    }
}
 
// Usage
const tv = new SmartTV();
const light = new SmartLight();
 
const basicTVRemote = new BasicRemote(tv);
const advancedLightRemote = new AdvancedRemote(light);
 
basicTVRemote.togglePower();
basicTVRemote.showStatus();
 
advancedLightRemote.togglePower();
advancedLightRemote.showStatus();

Use Case 3: Enterprise Messaging Systems

Enterprise messaging involves multiple message types (email, SMS, push, Slack) and multiple providers (AWS, Twilio, Firebase). Bridge enables any message type to use any provider.

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
71
72
73
74
75
76
77
78
79
// IMPLEMENTOR: Message delivery primitives
interface MessageGateway {
    sendPlainText(to: string, text: string): Promise<string>;
    sendRichContent(to: string, html: string, attachments?: string[]): Promise<string>;
    getDeliveryStatus(messageId: string): Promise<'pending' | 'sent' | 'delivered' | 'failed'>;
}
 
// CONCRETE IMPLEMENTORS
class AWSMessagingGateway implements MessageGateway {
    async sendPlainText(to: string, text: string): Promise<string> {
        console.log(`[AWS SES] Plain text to ${to}`);
        return `aws-${Date.now()}`;
    }
    async sendRichContent(to: string, html: string, attachments?: string[]): Promise<string> {
        console.log(`[AWS SES] Rich email with ${attachments?.length || 0} attachments`);
        return `aws-rich-${Date.now()}`;
    }
    async getDeliveryStatus(messageId: string): Promise<'pending' | 'sent' | 'delivered' | 'failed'> {
        return 'delivered';
    }
}
 
class TwilioGateway implements MessageGateway {
    async sendPlainText(to: string, text: string): Promise<string> {
        const truncated = text.length > 160 ? text.slice(0, 157) + '...' : text;
        console.log(`[Twilio] SMS to ${to}: "${truncated}"`);
        return `twilio-${Date.now()}`;
    }
    async sendRichContent(to: string, html: string, attachments?: string[]): Promise<string> {
        // SMS doesn't support rich content
        return this.sendPlainText(to, 'View content online: https://app.example.com');
    }
    async getDeliveryStatus(messageId: string): Promise<'pending' | 'sent' | 'delivered' | 'failed'> {
        return 'sent';
    }
}
 
// ABSTRACTION: Message types
abstract class Message {
    protected gateway: MessageGateway;
    
    constructor(gateway: MessageGateway) {
        this.gateway = gateway;
    }
    
    abstract send(recipient: string): Promise<string>;
}
 
// REFINED ABSTRACTIONS
class WelcomeMessage extends Message {
    constructor(gateway: MessageGateway, private userName: string) {
        super(gateway);
    }
    
    async send(recipient: string): Promise<string> {
        const html = `<h1>Welcome, ${this.userName}!</h1><p>Thanks for joining.</p>`;
        return this.gateway.sendRichContent(recipient, html);
    }
}
 
class AlertMessage extends Message {
    constructor(gateway: MessageGateway, private alertText: string) {
        super(gateway);
    }
    
    async send(recipient: string): Promise<string> {
        return this.gateway.sendPlainText(recipient, `ALERT: ${this.alertText}`);
    }
}
 
// Usage: Any message × Any gateway
const awsGateway = new AWSMessagingGateway();
const twilioGateway = new TwilioGateway();
 
const welcomeEmail = new WelcomeMessage(awsGateway, "Alice");
const alertSMS = new AlertMessage(twilioGateway, "Security breach detected");
 
await welcomeEmail.send("alice@example.com");
await alertSMS.send("+15551234567");

Use Case 4: Database Abstraction Layers

ORMs and data access layers use Bridge to separate domain models from database implementations. This allows the same repository logic to work with MySQL, PostgreSQL, or MongoDB.

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
// IMPLEMENTOR: Database operations interface
interface DatabaseDriver {
    query<T>(sql: string, params: any[]): Promise<T[]>;
    execute(sql: string, params: any[]): Promise<{ affectedRows: number }>;
    beginTransaction(): Promise<void>;
    commit(): Promise<void>;
    rollback(): Promise<void>;
}
 
// CONCRETE IMPLEMENTORS
class PostgresDriver implements DatabaseDriver {
    async query<T>(sql: string, params: any[]): Promise<T[]> {
        console.log(`[Postgres] ${sql}`);
        return [];
    }
    async execute(sql: string, params: any[]): Promise<{ affectedRows: number }> {
        console.log(`[Postgres] ${sql}`);
        return { affectedRows: 1 };
    }
    async beginTransaction(): Promise<void> { console.log("[Postgres] BEGIN"); }
    async commit(): Promise<void> { console.log("[Postgres] COMMIT"); }
    async rollback(): Promise<void> { console.log("[Postgres] ROLLBACK"); }
}
 
class MySQLDriver implements DatabaseDriver {
    async query<T>(sql: string, params: any[]): Promise<T[]> {
        console.log(`[MySQL] ${sql}`);
        return [];
    }
    async execute(sql: string, params: any[]): Promise<{ affectedRows: number }> {
        console.log(`[MySQL] ${sql}`);
        return { affectedRows: 1 };
    }
    async beginTransaction(): Promise<void> { console.log("[MySQL] START TRANSACTION"); }
    async commit(): Promise<void> { console.log("[MySQL] COMMIT"); }
    async rollback(): Promise<void> { console.log("[MySQL] ROLLBACK"); }
}
 
// ABSTRACTION: Repository base
abstract class Repository<T> {
    protected db: DatabaseDriver;
    protected tableName: string;
    
    constructor(db: DatabaseDriver, tableName: string) {
        this.db = db;
        this.tableName = tableName;
    }
    
    async findById(id: string): Promise<T | null> {
        const results = await this.db.query<T>(
            `SELECT * FROM ${this.tableName} WHERE id = $1`, [id]
        );
        return results[0] || null;
    }
    
    async findAll(): Promise<T[]> {
        return this.db.query<T>(`SELECT * FROM ${this.tableName}`, []);
    }
}
 
// REFINED ABSTRACTIONS: Domain-specific repositories
interface User { id: string; email: string; name: string; }
interface Order { id: string; userId: string; total: number; }
 
class UserRepository extends Repository<User> {
    constructor(db: DatabaseDriver) {
        super(db, 'users');
    }
    
    async findByEmail(email: string): Promise<User | null> {
        const results = await this.db.query<User>(
            'SELECT * FROM users WHERE email = $1', [email]
        );
        return results[0] || null;
    }
}
 
class OrderRepository extends Repository<Order> {
    constructor(db: DatabaseDriver) {
        super(db, 'orders');
    }
    
    async findByUser(userId: string): Promise<Order[]> {
        return this.db.query<Order>(
            'SELECT * FROM orders WHERE user_id = $1', [userId]
        );
    }
}
 
// Usage: Any repository × Any database
const postgres = new PostgresDriver();
const mysql = new MySQLDriver();
 
const usersOnPg = new UserRepository(postgres);
const ordersOnMySQL = new OrderRepository(mysql);
 
await usersOnPg.findByEmail("test@example.com");
await ordersOnMySQL.findByUser("user-123");

When to Apply the Bridge Pattern

Recognizing Bridge opportunities requires understanding problem characteristics that signal the pattern's applicability.

Apply Bridge When

•Two orthogonal dimensions of variation — You have M variations of one concept and N variations of another, and they should combine freely.
•Inheritance would cause explosion — Using inheritance would require M × N classes instead of M + N.
•Runtime switching needed — You need to change implementations at runtime (A/B testing, user preferences, failover).
•Both hierarchies will evolve — You anticipate adding new abstractions AND new implementations over time.
•Implementation details should be hidden — Clients should work with abstractions without knowing implementation specifics.

Avoid Bridge When

•Single dimension of variation — If only one side varies, simple polymorphism or Strategy pattern may suffice.
•Stable, unchanging requirements — If neither dimension will grow, the overhead isn't justified.
•Tight integration is required — Some systems benefit from tight abstraction-implementation binding.
•Wrapping existing interfaces — If you're adapting an existing interface, use Adapter instead.

Summary — Bridge Pattern Mastery

Key Takeaways

•Bridge separates abstraction from implementation — Two independent hierarchies connected through composition.
•Reduces class explosion — M + N classes instead of M × N when faced with two dimensions of variation.
•Enables runtime flexibility — Implementations can be switched at runtime for A/B testing, fallbacks, or user preferences.
•Supports independent evolution — Add new abstractions or implementations without modifying existing code.
•Different from Adapter — Bridge is proactive design; Adapter is reactive integration.
•Common applications — Graphics systems, device control, messaging platforms, persistence layers, report generators.

Module Complete

4 / 4