Bridge Pattern

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

// BEFORE: Inheritance-based approach (what we saw fails)
// 
//              Shape
//     ┌──────────┴──────────┐
//   Circle              Rectangle
//   ┌──┴──┐              ┌──┴──┐
// WinCircle LinCircle  WinRect LinRect
 
// AFTER: Composition-based Bridge Pattern
//
// Abstraction Hierarchy      Implementation Hierarchy
//       Shape         ────────────▶    Renderer (interface)
//     ┌──┴──┐                           ┌──┴──┐
//  Circle Rectangle             WindowsRenderer LinuxRenderer
//
// The arrow represents composition: Shape HAS-A Renderer
// Both hierarchies can grow independently!
 
// Implementation interface (the "Implementor")
interface Renderer {
    renderCircle(centerX: number, centerY: number, radius: number): void;
    renderRectangle(x: number, y: number, width: number, height: number): void;
}
 
// Abstraction base class
abstract class Shape {
    // The BRIDGE: composition instead of inheritance
    protected renderer: Renderer;
    
    constructor(renderer: Renderer) {
        this.renderer = renderer;
    }
    
    abstract draw(): void;
}
 
// Refined Abstractions (shape variants)
class Circle extends Shape {
    constructor(
        private centerX: number,
        private centerY: number,
        private radius: number,
        renderer: Renderer
    ) {
        super(renderer);
    }
    
    draw(): void {
        // Delegates to the implementation
        this.renderer.renderCircle(this.centerX, this.centerY, this.radius);
    }
}
 
class Rectangle extends Shape {
    constructor(
        private x: number,
        private y: number,
        private width: number,
        private height: number,
        renderer: Renderer
    ) {
        super(renderer);
    }
    
    draw(): void {
        this.renderer.renderRectangle(this.x, this.y, this.width, this.height);
    }
}
 
// Concrete Implementations (platform variants)
class WindowsRenderer implements Renderer {
    renderCircle(centerX: number, centerY: number, radius: number): void {
        console.log(`Windows GDI: Drawing circle at (${centerX}, ${centerY}) with radius ${radius}`);
        // Actual Windows GDI calls would go here
    }
    
    renderRectangle(x: number, y: number, width: number, height: number): void {
        console.log(`Windows GDI: Drawing rectangle at (${x}, ${y}) size ${width}x${height}`);
    }
}
 
class LinuxRenderer implements Renderer {
    renderCircle(centerX: number, centerY: number, radius: number): void {
        console.log(`Linux X11: Drawing circle at (${centerX}, ${centerY}) with radius ${radius}`);
        // Actual X11 calls would go here
    }
    
    renderRectangle(x: number, y: number, width: number, height: number): void {
        console.log(`Linux X11: Drawing rectangle at (${x}, ${y}) size ${width}x${height}`);
    }
}
 
// Usage: Any shape can use any renderer
const windowsRenderer = new WindowsRenderer();
const linuxRenderer = new LinuxRenderer();
 
const circleOnWindows = new Circle(100, 100, 50, windowsRenderer);
const circleOnLinux = new Circle(100, 100, 50, linuxRenderer);
const rectangleOnWindows = new Rectangle(0, 0, 200, 100, windowsRenderer);
 
circleOnWindows.draw();   // Uses Windows rendering
circleOnLinux.draw();     // Uses Linux rendering
rectangleOnWindows.draw(); // Uses Windows rendering

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

/**
 * IMPLEMENTOR
 * 
 * Defines the interface for implementation classes.
 * This interface doesn't have to correspond exactly to Abstraction's interface;
 * in fact, they're typically quite different. The Implementor provides
 * primitive operations, and Abstraction defines higher-level operations
 * built from those primitives.
 */
interface Implementor {
    // Primitive operations that concrete implementors must provide
    operationImpl(): string;
}
 
/**
 * ABSTRACTION
 * 
 * Defines the abstraction's interface.
 * Maintains a reference to an Implementor object.
 * Delegates work to the Implementor through the bridge.
 */
abstract class Abstraction {
    protected implementor: Implementor;
    
    constructor(implementor: Implementor) {
        this.implementor = implementor;
    }
    
    // High-level operation that uses the implementor's primitives
    operation(): string {
        // The BRIDGE in action: delegating to the implementor
        return `Abstraction: Base operation with:
${this.implementor.operationImpl()}`;
    }
}
 
/**
 * REFINED ABSTRACTION
 * 
 * Extends the Abstraction to add additional behavior
 * or refine the abstraction in some way. There can be
 * multiple refined abstractions, forming an inheritance
 * hierarchy on the abstraction side.
 */
class RefinedAbstraction extends Abstraction {
    operation(): string {
        // Can add behavior before delegating...
        const prefix = "RefinedAbstraction: Extended operation with:
";
        
        // ...still uses the implementor through the bridge...
        const implResult = this.implementor.operationImpl();
        
        // ...and can add behavior after
        return prefix + implResult;
    }
    
    // Can also add entirely new operations
    additionalOperation(): string {
        return "RefinedAbstraction: Additional behavior unique to this refinement";
    }
}
 
/**
 * CONCRETE IMPLEMENTOR A
 * 
 * Implements the Implementor interface for a specific
 * platform, algorithm, or variant.
 */
class ConcreteImplementorA implements Implementor {
    operationImpl(): string {
        return "ConcreteImplementorA: Result using strategy/platform A";
    }
}
 
/**
 * CONCRETE IMPLEMENTOR B
 * 
 * Another implementation with different characteristics.
 * Can be selected at runtime or configured externally.
 */
class ConcreteImplementorB implements Implementor {
    operationImpl(): string {
        return "ConcreteImplementorB: Result using strategy/platform B";
    }
}
 
// Client code: works with any combination
function clientCode(abstraction: Abstraction): void {
    console.log(abstraction.operation());
}
 
// Runtime composition: Abstraction A with Implementor A
const implA = new ConcreteImplementorA();
const abstractionWithA = new RefinedAbstraction(implA);
clientCode(abstractionWithA);
 
// Runtime composition: Same Abstraction with different Implementor
const implB = new ConcreteImplementorB();
const abstractionWithB = new RefinedAbstraction(implB);
clientCode(abstractionWithB);

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

// The Bridge is this reference:
abstract class Shape {
    //        ┌─────── THE BRIDGE ───────┐
    //        ▼                          │
    protected renderer: Renderer;  // <──┘
    
    constructor(renderer: Renderer) {
        this.renderer = renderer;
    }
}
 
// Why is this a "bridge"?
// 
// 1. It CONNECTS two hierarchies that would otherwise be unrelated
//    - Shapes don't know about Windows/Linux directly
//    - Renderers don't know about Circles/Rectangles directly
//    - They connect ONLY through this reference
//
// 2. It can be CROSSED in either direction
//    - Start with a Shape → get its Renderer → perform rendering
//    - Some patterns: Start with Renderer → render any Shape passed in
//
// 3. It can be RECONFIGURED
//    - Same Shape, different Renderer (change bridge target)
//    - Different Shape, same Renderer (change bridge source)
//
// 4. It's a STABLE crossing point
//    - The Renderer interface is the contract
//    - As long as the contract holds, both sides can evolve
 
// The bridge enables true independence:
interface Renderer {
    renderCircle(cx: number, cy: number, r: number): void;
    renderRectangle(x: number, y: number, w: number, h: number): void;
}
 
// Shape hierarchy can grow without touching Renderer
class Triangle extends Shape {
    constructor(private vertices: [number, number][], renderer: Renderer) {
        super(renderer);
    }
    
    draw(): void {
        // Uses renderer primitives, but adds Triangle-specific logic
        // (Renderer might not have renderTriangle, so we compose from primitives)
        // This keeps Renderer interface stable
    }
}
 
// Renderer hierarchy can grow without touching Shape
class WebGLRenderer implements Renderer {
    renderCircle(cx: number, cy: number, r: number): void {
        // WebGL-specific implementation
        console.log(`WebGL: Circle shader at (${cx},${cy}) radius ${r}`);
    }
    
    renderRectangle(x: number, y: number, w: number, h: number): void {
        // WebGL-specific implementation  
        console.log(`WebGL: Rectangle mesh at (${x},${y}) size ${w}x${h}`);
    }
}
 
// Neither hierarchy changed when the other grew!
const triangle = new Triangle([[0,0], [50,100], [100,0]], new WebGLRenderer());

┌─────────────────────────────────────────────────────────────────────────────┐
│                           BRIDGE PATTERN STRUCTURE                          │
└─────────────────────────────────────────────────────────────────────────────┘
 
         ABSTRACTION HIERARCHY                    IMPLEMENTATION HIERARCHY
         ──────────────────────                   ─────────────────────────
 
    ┌─────────────────────────┐              ┌─────────────────────────┐
    │      <<abstract>>       │              │     <<interface>>       │
    │      Abstraction        │              │      Implementor        │
    ├─────────────────────────┤              ├─────────────────────────┤
    │ - implementor: Impl     │─────────────▶│                         │
    ├─────────────────────────┤    bridge    ├─────────────────────────┤
    │ + operation()           │              │ + operationImpl()       │
    └────────────┬────────────┘              └────────────┬────────────┘
                 │                                        │
                 │ extends                                │ implements
                 │                                        │
    ┌────────────┴────────────┐              ┌────────────┴────────────┐
    │                         │              │                         │
    ▼                         ▼              ▼                         ▼
┌─────────────┐       ┌─────────────┐   ┌─────────────┐       ┌─────────────┐
│ RefinedAbst │       │ RefinedAbst │   │ ConcreteImpl│       │ ConcreteImpl│
│ ractionA    │       │ ractionB    │   │ ementorA    │       │ ementorB    │
├─────────────┤       ├─────────────┤   ├─────────────┤       ├─────────────┤
│             │       │             │   │             │       │             │
├─────────────┤       ├─────────────┤   ├─────────────┤       ├─────────────┤
│ +operation()│       │ +operation()│   │+operationIm │       │+operationIm │
│ +extraOp()  │       │ +anotherOp()│   │ pl()        │       │ pl()        │
└─────────────┘       └─────────────┘   └─────────────┘       └─────────────┘
 
 
                          COLLABORATION EXAMPLE
 
   Client                     Abstraction                  Implementor
     │                            │                            │
     │  operation()               │                            │
     │───────────────────────────▶│                            │
     │                            │  operationImpl()           │
     │                            │───────────────────────────▶│
     │                            │                            │
     │                            │  ┌──────────────────────┐  │
     │                            │  │ Implementation does  │  │
     │                            │  │ low-level work       │  │
     │                            │  └──────────────────────┘  │
     │                            │                            │
     │                            │◀───────────────────────────│
     │                            │                            │
     │                            │  ┌──────────────────────┐  │
     │                            │  │ Abstraction adds     │  │
     │                            │  │ high-level behavior  │  │
     │                            │  └──────────────────────┘  │
     │                            │                            │
     │◀───────────────────────────│                            │
     │                            │                            │

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336

// ═══════════════════════════════════════════════════════════════════════════
// IMPLEMENTOR: Defines the interface for message delivery platforms
// ═══════════════════════════════════════════════════════════════════════════
 
interface MessageSender {
    // Primitive operations that all platforms must support
    sendText(recipient: string, text: string): Promise<SendResult>;
    sendRichContent(recipient: string, content: RichContent): Promise<SendResult>;
    supportsRichContent(): boolean;
    getDeliveryStatus(messageId: string): Promise<DeliveryStatus>;
}
 
interface SendResult {
    success: boolean;
    messageId: string;
    timestamp: Date;
    error?: string;
}
 
interface RichContent {
    html?: string;
    attachments?: Attachment[];
    buttons?: ActionButton[];
}
 
interface Attachment {
    type: 'image' | 'document' | 'video';
    url: string;
    name: string;
}
 
interface ActionButton {
    label: string;
    url: string;
}
 
type DeliveryStatus = 'pending' | 'sent' | 'delivered' | 'failed' | 'read';
 
// ═══════════════════════════════════════════════════════════════════════════
// CONCRETE IMPLEMENTORS: Platform-specific message delivery
// ═══════════════════════════════════════════════════════════════════════════
 
class EmailSender implements MessageSender {
    constructor(
        private smtpHost: string,
        private smtpPort: number,
        private credentials: { user: string; pass: string }
    ) {}
    
    async sendText(recipient: string, text: string): Promise<SendResult> {
        console.log(`[Email] Sending plain text to ${recipient} via ${this.smtpHost}`);
        // Actual SMTP implementation would go here
        return {
            success: true,
            messageId: `email-${Date.now()}`,
            timestamp: new Date()
        };
    }
    
    async sendRichContent(recipient: string, content: RichContent): Promise<SendResult> {
        console.log(`[Email] Sending rich HTML email to ${recipient}`);
        if (content.html) {
            console.log(`  HTML content: ${content.html.substring(0, 50)}...`);
        }
        if (content.attachments) {
            content.attachments.forEach(att => {
                console.log(`  Attachment: ${att.name} (${att.type})`);
            });
        }
        return {
            success: true,
            messageId: `email-rich-${Date.now()}`,
            timestamp: new Date()
        };
    }
    
    supportsRichContent(): boolean {
        return true; // Email supports HTML, attachments, etc.
    }
    
    async getDeliveryStatus(messageId: string): Promise<DeliveryStatus> {
        // Email delivery is typically fire-and-forget
        return 'sent';
    }
}
 
class SmsSender implements MessageSender {
    constructor(
        private twilioAccountSid: string,
        private twilioAuthToken: string,
        private fromNumber: string
    ) {}
    
    async sendText(recipient: string, text: string): Promise<SendResult> {
        // SMS has length limits
        const truncatedText = text.length > 160 ? text.substring(0, 157) + '...' : text;
        console.log(`[SMS] Sending to ${recipient}: "${truncatedText}"`);
        return {
            success: true,
            messageId: `sms-${Date.now()}`,
            timestamp: new Date()
        };
    }
    
    async sendRichContent(recipient: string, content: RichContent): Promise<SendResult> {
        // SMS doesn't support rich content - fall back to plain text
        console.log(`[SMS] Rich content not supported, sending link instead`);
        const fallbackText = 'View content at: https://app.example.com/view';
        return this.sendText(recipient, fallbackText);
    }
    
    supportsRichContent(): boolean {
        return false; // SMS is text-only
    }
    
    async getDeliveryStatus(messageId: string): Promise<DeliveryStatus> {
        // Twilio provides delivery receipts
        return 'delivered';
    }
}
 
class PushNotificationSender implements MessageSender {
    constructor(
        private firebaseProjectId: string,
        private serverKey: string
    ) {}
    
    async sendText(recipient: string, text: string): Promise<SendResult> {
        console.log(`[Push] Sending notification to device ${recipient}`);
        return {
            success: true,
            messageId: `push-${Date.now()}`,
            timestamp: new Date()
        };
    }
    
    async sendRichContent(recipient: string, content: RichContent): Promise<SendResult> {
        console.log(`[Push] Sending rich notification with ${content.buttons?.length || 0} actions`);
        return {
            success: true,
            messageId: `push-rich-${Date.now()}`,
            timestamp: new Date()
        };
    }
    
    supportsRichContent(): boolean {
        return true; // Push supports images, action buttons
    }
    
    async getDeliveryStatus(messageId: string): Promise<DeliveryStatus> {
        return 'delivered';
    }
}
 
// ═══════════════════════════════════════════════════════════════════════════
// ABSTRACTION: Defines high-level notification operations
// ═══════════════════════════════════════════════════════════════════════════
 
abstract class Notification {
    // THE BRIDGE
    protected sender: MessageSender;
    protected recipient: string;
    
    constructor(recipient: string, sender: MessageSender) {
        this.recipient = recipient;
        this.sender = sender;
    }
    
    // Template for sending - subclasses define content
    async send(): Promise<SendResult> {
        const content = this.buildContent();
        
        // Abstraction decides how to use implementor based on capabilities
        if (this.requiresRichContent() && this.sender.supportsRichContent()) {
            return this.sender.sendRichContent(this.recipient, content);
        } else {
            const plainText = this.getPlainTextFallback();
            return this.sender.sendText(this.recipient, plainText);
        }
    }
    
    abstract buildContent(): RichContent;
    abstract getPlainTextFallback(): string;
    abstract requiresRichContent(): boolean;
}
 
// ═══════════════════════════════════════════════════════════════════════════
// REFINED ABSTRACTIONS: Specific notification types
// ═══════════════════════════════════════════════════════════════════════════
 
class WelcomeNotification extends Notification {
    constructor(
        recipient: string,
        sender: MessageSender,
        private userName: string
    ) {
        super(recipient, sender);
    }
    
    buildContent(): RichContent {
        return {
            html: `
                <h1>Welcome, ${this.userName}!</h1>
                <p>We're thrilled to have you join our platform.</p>
                <p>Get started by exploring our features.</p>
            `,
            buttons: [
                { label: 'Get Started', url: 'https://app.example.com/onboarding' },
                { label: 'Learn More', url: 'https://app.example.com/docs' }
            ]
        };
    }
    
    getPlainTextFallback(): string {
        return `Welcome, ${this.userName}! Get started at https://app.example.com/onboarding`;
    }
    
    requiresRichContent(): boolean {
        return true; // We prefer rich welcome emails
    }
}
 
class OrderConfirmationNotification extends Notification {
    constructor(
        recipient: string,
        sender: MessageSender,
        private orderId: string,
        private total: number,
        private items: { name: string; quantity: number }[]
    ) {
        super(recipient, sender);
    }
    
    buildContent(): RichContent {
        const itemList = this.items
            .map(item => `<li>${item.name} (x${item.quantity})</li>`)
            .join('');
        
        return {
            html: `
                <h1>Order Confirmed! #${this.orderId}</h1>
                <h2>Order Total: $${this.total.toFixed(2)}</h2>
                <ul>${itemList}</ul>
            `,
            buttons: [
                { label: 'Track Order', url: `https://app.example.com/orders/${this.orderId}` }
            ]
        };
    }
    
    getPlainTextFallback(): string {
        return `Order #${this.orderId} confirmed! Total: $${this.total.toFixed(2)}. Track at: https://app.example.com/orders/${this.orderId}`;
    }
    
    requiresRichContent(): boolean {
        return true;
    }
}
 
class SecurityAlertNotification extends Notification {
    constructor(
        recipient: string,
        sender: MessageSender,
        private alertType: string,
        private ipAddress: string,
        private location: string
    ) {
        super(recipient, sender);
    }
    
    buildContent(): RichContent {
        return {
            html: `
                <h1>⚠️ Security Alert</h1>
                <p><strong>Type:</strong> ${this.alertType}</p>
                <p><strong>IP:</strong> ${this.ipAddress}</p>
                <p><strong>Location:</strong> ${this.location}</p>
                <p>If this wasn't you, please secure your account immediately.</p>
            `,
            buttons: [
                { label: 'Secure Account', url: 'https://app.example.com/security' },
                { label: 'This Was Me', url: 'https://app.example.com/security/dismiss' }
            ]
        };
    }
    
    getPlainTextFallback(): string {
        return `SECURITY ALERT: ${this.alertType} from ${this.ipAddress} (${this.location}). If this wasn't you, visit: https://app.example.com/security`;
    }
    
    requiresRichContent(): boolean {
        return false; // Security alerts should work on any platform
    }
}
 
// ═══════════════════════════════════════════════════════════════════════════
// USAGE: Any notification type × Any sender platform
// ═══════════════════════════════════════════════════════════════════════════
 
async function demonstrateBridge(): Promise<void> {
    // Create senders (Concrete Implementors)
    const emailSender = new EmailSender('smtp.example.com', 587, { user: 'api', pass: 'key' });
    const smsSender = new SmsSender('AC123', 'token', '+15551234567');
    const pushSender = new PushNotificationSender('my-project', 'server-key');
    
    // Same notification type, different senders
    const welcomeViaEmail = new WelcomeNotification('user@example.com', emailSender, 'Alice');
    const welcomeViaSms = new WelcomeNotification('+15559876543', smsSender, 'Alice');
    const welcomeViaPush = new WelcomeNotification('device-token-123', pushSender, 'Alice');
    
    // Same sender, different notification types
    const orderViaEmail = new OrderConfirmationNotification(
        'user@example.com',
        emailSender,
        'ORD-001',
        99.99,
        [{ name: 'Widget', quantity: 2 }]
    );
    
    const securityViaSms = new SecurityAlertNotification(
        '+15559876543',
        smsSender,
        'New Login',
        '192.168.1.1',
        'New York, USA'
    );
    
    // All combinations work!
    await welcomeViaEmail.send();
    await welcomeViaSms.send();  // Falls back to plain text
    await welcomeViaPush.send();
    await orderViaEmail.send();
    await securityViaSms.send();
}
 
demonstrateBridge();

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

// NEW REQUIREMENT: Add password reset notification
// We ONLY add a new Refined Abstraction - no changes to senders!
 
class PasswordResetNotification extends Notification {
    constructor(
        recipient: string,
        sender: MessageSender,
        private resetToken: string,
        private expiryMinutes: number
    ) {
        super(recipient, sender);
    }
    
    buildContent(): RichContent {
        return {
            html: `
                <h1>Password Reset Request</h1>
                <p>Click the button below to reset your password.</p>
                <p>This link expires in ${this.expiryMinutes} minutes.</p>
            `,
            buttons: [
                { 
                    label: 'Reset Password', 
                    url: `https://app.example.com/reset/${this.resetToken}` 
                }
            ]
        };
    }
    
    getPlainTextFallback(): string {
        return `Reset your password: https://app.example.com/reset/${this.resetToken} (expires in ${this.expiryMinutes} min)`;
    }
    
    requiresRichContent(): boolean {
        return false; // Password reset must work on all platforms
    }
}
 
// Immediately works with ALL existing senders:
const resetViaEmail = new PasswordResetNotification('user@example.com', emailSender, 'tok123', 15);
const resetViaSms = new PasswordResetNotification('+15559876543', smsSender, 'tok123', 15);
const resetViaPush = new PasswordResetNotification('device-token', pushSender, 'tok123', 15);
 
// Zero changes to EmailSender, SmsSender, PushNotificationSender!

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

// NEW REQUIREMENT: Add Slack notification support
// We ONLY add a new Concrete Implementor - no changes to notifications!
 
class SlackSender implements MessageSender {
    constructor(
        private webhookUrl: string,
        private defaultChannel: string
    ) {}
    
    async sendText(recipient: string, text: string): Promise<SendResult> {
        console.log(`[Slack] Posting to channel ${recipient}: "${text}"`);
        // POST to Slack webhook
        return {
            success: true,
            messageId: `slack-${Date.now()}`,
            timestamp: new Date()
        };
    }
    
    async sendRichContent(recipient: string, content: RichContent): Promise<SendResult> {
        console.log(`[Slack] Posting rich block kit message to ${recipient}`);
        // Convert RichContent to Slack Block Kit format
        const blocks = this.convertToBlockKit(content);
        return {
            success: true,
            messageId: `slack-rich-${Date.now()}`,
            timestamp: new Date()
        };
    }
    
    private convertToBlockKit(content: RichContent): any[] {
        // Convert our generic format to Slack-specific format
        const blocks: any[] = [];
        if (content.html) {
            blocks.push({ type: 'section', text: { type: 'mrkdwn', text: content.html } });
        }
        if (content.buttons) {
            blocks.push({
                type: 'actions',
                elements: content.buttons.map(btn => ({
                    type: 'button',
                    text: { type: 'plain_text', text: btn.label },
                    url: btn.url
                }))
            });
        }
        return blocks;
    }
    
    supportsRichContent(): boolean {
        return true; // Slack has excellent rich content support
    }
    
    async getDeliveryStatus(messageId: string): Promise<DeliveryStatus> {
        return 'delivered';
    }
}
 
// Immediately works with ALL existing notification types:
const slackSender = new SlackSender('https://hooks.slack.com/abc', '#general');
 
const welcomeViaSlack = new WelcomeNotification('#new-users', slackSender, 'Bob');
const orderViaSlack = new OrderConfirmationNotification('#orders', slackSender, 'ORD-002', 149.99, []);
const securityViaSlack = new SecurityAlertNotification('#security', slackSender, 'Login', '10.0.0.1', 'SF');
const resetViaSlack = new PasswordResetNotification('#support', slackSender, 'tok456', 15);
 
// Zero changes to WelcomeNotification, OrderConfirmation, etc.!

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

// Scenario 1: User Preferences
// User chooses their preferred notification channel
 
interface UserPreferences {
    preferredChannel: 'email' | 'sms' | 'push' | 'slack';
    email?: string;
    phone?: string;
    slackId?: string;
    deviceToken?: string;
}
 
class NotificationService {
    private senders: Map<string, MessageSender>;
    
    constructor() {
        this.senders = new Map();
        this.senders.set('email', new EmailSender('smtp.example.com', 587, { user: '', pass: '' }));
        this.senders.set('sms', new SmsSender('AC123', 'token', '+15551234567'));
        this.senders.set('push', new PushNotificationSender('proj', 'key'));
        this.senders.set('slack', new SlackSender('webhook', '#default'));
    }
    
    async sendWelcome(user: UserPreferences): Promise<void> {
        // RUNTIME selection based on user preference
        const sender = this.senders.get(user.preferredChannel);
        const recipient = this.getRecipientAddress(user);
        
        if (!sender || !recipient) {
            throw new Error('Invalid notification configuration');
        }
        
        const notification = new WelcomeNotification(recipient, sender, 'User');
        await notification.send();
    }
    
    private getRecipientAddress(user: UserPreferences): string | undefined {
        switch (user.preferredChannel) {
            case 'email': return user.email;
            case 'sms': return user.phone;
            case 'push': return user.deviceToken;
            case 'slack': return user.slackId;
        }
    }
}
 
// Scenario 2: Fallback Chain
// Try primary channel, fall back to secondary if it fails
 
class RobustNotificationService {
    private senders: MessageSender[];
    
    constructor(senders: MessageSender[]) {
        this.senders = senders; // Ordered by preference
    }
    
    async send(notification: Notification, recipients: string[]): Promise<SendResult> {
        for (let i = 0; i < this.senders.length; i++) {
            const sender = this.senders[i];
            
            try {
                // Create notification with current sender
                const notificationWithSender = this.withSender(notification, sender, recipients[i]);
                const result = await notificationWithSender.send();
                
                if (result.success) {
                    console.log(`Sent via channel ${i + 1}`);
                    return result;
                }
            } catch (error) {
                console.log(`Channel ${i + 1} failed, trying next...`);
            }
        }
        
        throw new Error('All notification channels failed');
    }
    
    private withSender(notification: Notification, sender: MessageSender, recipient: string): Notification {
        // Clone notification with new sender - implementation depends on notification type
        // This is a simplified example
        return notification;
    }
}
 
// Scenario 3: A/B Testing Implementation Strategies
 
class ABTestingNotificationService {
    private variantA: MessageSender;
    private variantB: MessageSender;
    private variantAPercentage: number;
    
    constructor(variantA: MessageSender, variantB: MessageSender, variantAPercentage: number) {
        this.variantA = variantA;
        this.variantB = variantB;
        this.variantAPercentage = variantAPercentage;
    }
    
    selectSender(userId: string): MessageSender {
        // Deterministic assignment based on user ID
        const hash = this.hashCode(userId);
        const bucket = Math.abs(hash) % 100;
        
        if (bucket < this.variantAPercentage) {
            console.log(`User ${userId} assigned to Variant A`);
            return this.variantA;
        } else {
            console.log(`User ${userId} assigned to Variant B`);
            return this.variantB;
        }
    }
    
    private hashCode(str: string): number {
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
            hash = ((hash << 5) - hash) + str.charCodeAt(i);
            hash |= 0;
        }
        return hash;
    }
}
 
// Usage: 30% of users get new email template (variant B)
const abService = new ABTestingNotificationService(
    new EmailSender('old-template.example.com', 587, { user: '', pass: '' }),
    new EmailSender('new-template.example.com', 587, { user: '', pass: '' }),
    70 // 70% get variant A
);
 
const senderForUser = abService.selectSender('user-123');
const notification = new WelcomeNotification('user@example.com', senderForUser, 'Test');