Frontend System Design UML
Class Diagram Fundamentals
Class Representation
+------------------------+
| ClassName | // + public, - private, # protected
+------------------------+
| - privateProperty |
| + publicProperty |
| # protectedProperty |
+------------------------+
| + method() |
| - privateMethod() |
| + method(param: type) |
+------------------------+
JavaScript Class Example
class UserManager {
- users: User[]
- authService: AuthService
+ constructor(authService: AuthService)
+ getUser(id: string): User
+ updateUser(user: User): void
# validateUser(user: User): boolean
}
Relationships
1. Association
- Basic relationship between classes
- Represented by a simple line
UserComponent ─────── UserService
JavaScript Example:
class UserComponent {
constructor(userService) {
this.userService = userService; // Association
}
}
2. Aggregation (Has-A)
- Weaker whole-part relationship
- Empty diamond at the whole end
ShoppingCart ◇───── Product
JavaScript Example:
class ShoppingCart {
constructor() {
this.products = []; // Aggregation
}
addProduct(product) {
this.products.push(product);
}
}
3. Composition (Strong Has-A)
- Stronger whole-part relationship
- Filled diamond at the whole end
Form ♦───── FormField
JavaScript Example:
class Form {
constructor() {
this.fields = [
new FormField('email'),
new FormField('password')
]; // Composition
}
}
4. Inheritance
- Is-A relationship
- Represented by an arrow with empty triangle
Component ▲───── Button
JavaScript Example:
class Button extends Component {
constructor() {
super();
}
}
Common Frontend Patterns
1. Observer Pattern
+----------------+ +---------------+
| Observable | ◇──── | Observer |
+----------------+ +---------------+
| + subscribers | | + update() |
| + subscribe() | +---------------+
| + notify() |
+----------------+
JavaScript Example:
class Store {
private subscribers: Observer[]
public subscribe(observer: Observer)
public notifyAll()
}
2. Component Pattern
+------------------+
| Component |
+------------------+
| + render() |
| + setState() |
| - state |
+------------------+
▲
|
+------------------+
| ChildComponent |
+------------------+
3. Service Pattern
+-----------------+ +------------------+
| Component |──────| Service |
+-----------------+ +------------------+
| - service | | + fetchData() |
| + getData() | | + processData() |
+-----------------+ +------------------+
System Design Examples
1. Authentication System
+---------------+ +----------------+ +-------------+
| AuthService |─────| UserComponent |─────| StateStore |
+---------------+ +----------------+ +-------------+
| + login() | | - authService | | + state |
| + logout() | | + render() | | + setState()|
+---------------+ +----------------+ +-------------+
2. Form Management
+-------------+ +--------------+ +----------------+
| Form |♦────| FormControl |─────| ValidationRule |
+-------------+ +--------------+ +----------------+
| + controls | | + validate() | | + validate() |
| + submit() | | + value | | + message |
+-------------+ +--------------+ +----------------+
Best Practices for Interviews
-
Start with Core Components
- Begin with main classes/components
- Add relationships progressively
-
Show State Management
- Demonstrate data flow
- Include state containers
-
Include Error Handling
- Show error states
- Include error boundaries
-
Demonstrate Scalability
- Show how system can grow
- Include extension points
-
Consider Performance
- Cache management
- Lazy loading relationships