Separation of Concerns

Problem

Business logic, UI markup, styles, and data fetching are intertwined in single files, making it impossible to change one without risking breaks in others. Developers must understand the entire codebase to make simple changes, and reusing logic or styling across different contexts requires extensive refactoring.

Solution

Divide code into distinct sections that each handle a specific responsibility. This reduces coupling and makes it easier to understand, test, and modify individual pieces.

Example

This demonstrates separating code into distinct layers for data fetching, business logic, and presentation, making each concern independent and easier to maintain, test, and reuse.

// Data layer - handles API communication
const fetchUser = (id) => fetch(`/api/users/${id}`).then(r => r.json());

// Business logic - contains domain rules
const validateUser = (user) => user.age >= 18;

// Presentation layer - handles UI rendering
function UserCard({ user }) {
  return <div>{user.name}</div>;
}

Benefits

• Makes code easier to understand by organizing it into logical sections.
• Enables independent testing of logic, presentation, and data layers.
• Facilitates code reuse across different contexts.
• Reduces risk of unintended side effects when making changes.

Tradeoffs

• Can lead to over-engineering if taken to extremes with too many layers.
• May require more files and boilerplate to maintain separation.
• Can make simple features feel overly complex with multiple files.
• Requires discipline and clear boundaries to maintain over time.