Skip to content

Commit f83ede3

Browse files
Mayur KadamMayur Kadam
Mayur Kadam
authored and
Mayur Kadam
committed
Added Facade design pattern
1 parent 8bf686d commit f83ede3

File tree

7 files changed

+195
-1
lines changed

7 files changed

+195
-1
lines changed

‎05 - Low Level Design/03 - TypeScript Design Pattern/Structural Design Patterns/Facade/Dashboard.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export class Dashboard {
2+
turnOn(): void {
3+
console.log("Dashboard lights ON.");
4+
}
5+
6+
turnOff(): void {
7+
console.log("Dashboard lights OFF.");
8+
}
9+
}

‎05 - Low Level Design/03 - TypeScript Design Pattern/Structural Design Patterns/Facade/Engine.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export class Engine {
2+
start(): void {
3+
console.log("Engine started...");
4+
}
5+
6+
stop(): void {
7+
console.log("Engine stopped.");
8+
}
9+
}

‎05 - Low Level Design/03 - TypeScript Design Pattern/Structural Design Patterns/Facade/FuelPump.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export class FuelPump {
2+
pump(): void {
3+
console.log("Fuel is being pumped...");
4+
}
5+
}

‎05 - Low Level Design/03 - TypeScript Design Pattern/Structural Design Patterns/Facade/README.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# 🚗 Facade Design Pattern – Vehicle Starting System
2+
3+
The **Facade Design Pattern** is a structural design pattern that provides a simplified interface to a larger body of code, such as a complex subsystem. In this example, the pattern is used to simplify the vehicle starting process by hiding the internal complexities of components like `Engine`, `FuelPump`, and `Dashboard`.
4+
5+
---
6+
7+
## 📁 Folder Structure
8+
9+
```
10+
/VehicleSystem
11+
│── index.ts # Entry point to start and stop the vehicle
12+
│── Engine.ts # Subsystem class representing engine operations
13+
│── FuelPump.ts # Subsystem class responsible for fuel delivery
14+
│── Dashboard.ts # Subsystem class handling dashboard lights
15+
│── VehicleFacade.ts # Facade class unifying all operations
16+
```
17+
18+
---
19+
20+
## 🧩 Subsystem Classes
21+
22+
### `Engine.ts`
23+
```ts
24+
export class Engine {
25+
start(): void {
26+
console.log("Engine started...");
27+
}
28+
29+
stop(): void {
30+
console.log("Engine stopped.");
31+
}
32+
}
33+
```
34+
35+
### `FuelPump.ts`
36+
```ts
37+
export class FuelPump {
38+
pump(): void {
39+
console.log("Fuel is being pumped...");
40+
}
41+
}
42+
```
43+
44+
### `Dashboard.ts`
45+
```ts
46+
export class Dashboard {
47+
turnOn(): void {
48+
console.log("Dashboard lights ON.");
49+
}
50+
51+
turnOff(): void {
52+
console.log("Dashboard lights OFF.");
53+
}
54+
}
55+
```
56+
57+
---
58+
59+
## 🎯 Facade Class
60+
61+
### `VehicleFacade.ts`
62+
```ts
63+
import { Engine } from "./Engine";
64+
import { FuelPump } from "./FuelPump";
65+
import { Dashboard } from "./Dashboard";
66+
67+
export class VehicleFacade {
68+
private engine: Engine;
69+
private fuelPump: FuelPump;
70+
private dashboard: Dashboard;
71+
72+
constructor() {
73+
this.engine = new Engine();
74+
this.fuelPump = new FuelPump();
75+
this.dashboard = new Dashboard();
76+
}
77+
78+
startVehicle(): void {
79+
console.log("Starting vehicle...");
80+
this.dashboard.turnOn();
81+
this.fuelPump.pump();
82+
this.engine.start();
83+
console.log("Vehicle started ✅");
84+
}
85+
86+
stopVehicle(): void {
87+
console.log("Stopping vehicle...");
88+
this.engine.stop();
89+
this.dashboard.turnOff();
90+
console.log("Vehicle stopped ❌");
91+
}
92+
}
93+
```
94+
95+
---
96+
97+
## 🚀 Entry Point
98+
99+
### `index.ts`
100+
```ts
101+
import { VehicleFacade } from "./VehicleFacade";
102+
103+
const vehicle = new VehicleFacade();
104+
vehicle.startVehicle();
105+
106+
console.log("\n--- Some time later ---\n");
107+
108+
vehicle.stopVehicle();
109+
```
110+
111+
---
112+
113+
## 🤔 Why Use the Facade Pattern?
114+
115+
Imagine needing to start a vehicle manually by interacting with each internal system (engine, fuel, lights, etc.) individually—this would be tedious and error-prone. Instead, the **Facade Pattern** offers a simplified API (`startVehicle()` / `stopVehicle()`) to manage all of that with a single call.
116+
117+
---
118+
119+
## ✅ Benefits
120+
121+
- 🔒 **Encapsulates Complexity**: Hides subsystem complexity from the client.
122+
- 🔄 **Loose Coupling**: Reduces dependencies between client and subsystem classes.
123+
- 🩼 **Cleaner Code**: Simplifies code for maintainability and scalability.
124+
- 🚀 **Improved Usability**: Offers a straightforward interface for complex operations.
125+
126+
---
127+
128+
## 🧐 Pattern Type
129+
130+
**Structural Pattern** – focuses on how classes and objects are composed to form larger structures.
131+
132+
---
133+

‎05 - Low Level Design/03 - TypeScript Design Pattern/Structural Design Patterns/Facade/VehicleFacade.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Engine } from "./Engine";
2+
import { FuelPump } from "./FuelPump";
3+
import { Dashboard } from "./Dashboard";
4+
5+
export class VehicleFacade {
6+
private engine: Engine;
7+
private fuelPump: FuelPump;
8+
private dashboard: Dashboard;
9+
10+
constructor() {
11+
this.engine = new Engine();
12+
this.fuelPump = new FuelPump();
13+
this.dashboard = new Dashboard();
14+
}
15+
16+
startVehicle(): void {
17+
console.log("Starting vehicle...");
18+
this.dashboard.turnOn();
19+
this.fuelPump.pump();
20+
this.engine.start();
21+
console.log("Vehicle started ✅");
22+
}
23+
24+
stopVehicle(): void {
25+
console.log("Stopping vehicle...");
26+
this.engine.stop();
27+
this.dashboard.turnOff();
28+
console.log("Vehicle stopped ❌");
29+
}
30+
}

‎05 - Low Level Design/03 - TypeScript Design Pattern/Structural Design Patterns/Facade/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { VehicleFacade } from "./VehicleFacade";
2+
3+
const vehicle = new VehicleFacade();
4+
vehicle.startVehicle();
5+
6+
console.log("\n--- Some time later ---\n");
7+
8+
vehicle.stopVehicle();

‎readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,5 +167,5 @@ Understand system design principles and implement design patterns.
167167
| [Factory Method (Vehicle System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Creational%20Design%20Patterns/Factory%20Method/Vehicle%20System/README.md) | [Proxy Pattern (Secure Bank Account)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Structural%20Design%20Patterns/Proxy/Secure%20Bank%20Account/README.md) | [Null Object Pattern (Vehicle System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Behavioral%20Design%20Patterns/Null%20Object%20Pattern/Vehicle%20System/README.md) |
168168
| [Abstract Factory (Vehicle System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Creational%20Design%20Patterns/Abstract%20Factory/Vehicle%20System/README.md) | [Decorator Pattern (Vehicle System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Structural%20Design%20Patterns/Decorator/Vehicle%20System/README.md) | [Chain of Responsibility (Logging System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Behavioral%20Design%20Patterns/Chain%20of%20Responsibility/%20Logging%20System/README.md) |
169169
| [Builder Pattern (Vehicle System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Creational%20Design%20Patterns/Builder/Vehicle%20System/README.md) | [Adapter Pattern (Vehicle Charging System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Structural%20Design%20Patterns/Adapter/Vehicle%20Charging%20System/README.md) | [Strategy Pattern (Vehicle System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Behavioral%20Design%20Patterns/Strategy%20Pattern/Vehicle%20System/Vehicle%20System%20With%20Strategy%20Pattern/README.md) |
170-
| | [Composite Pattern (File System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Structural%20Design%20Patterns/Composite/File%20System/README.md) | [Observer Pattern (Traffic Signal)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Behavioral%20Design%20Patterns/Observer%20Pattern/Traffic%20Signal/README.md) |
170+
| [Facade Pattern (Vehicle System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Structural%20Design%20Patterns/Facade/README.md) | [Composite Pattern (File System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Structural%20Design%20Patterns/Composite/File%20System/README.md) | [Observer Pattern (Traffic Signal)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Behavioral%20Design%20Patterns/Observer%20Pattern/Traffic%20Signal/README.md) |
171171
| | | [State Pattern (Traffic Light System)](./05%20-%20Low%20Level%20Design/03%20-%20TypeScript%20Design%20Pattern/Behavioral%20Design%20Patterns/State/Traffic%20Light%20System/README.md) |

0 commit comments

Comments
 (0)