Skip to main content
Interface Atlas
Guide

Separation of Concerns

The architectural principle of dividing a system into distinct sections based on their purpose, rather than their file type.

Published

Contents

Definition

The architectural principle of dividing a system into distinct sections based on their purpose, rather than their file type.

Separation of Concerns (SoC) is the practice of ensuring that a single module of code is responsible for only one specific part of the application’s logic.

Why It Matters

When concerns are mixed, applications become fragile. If a single React component fetches data, parses dates, applies business rules (e.g., “is the user an admin?”), and renders the HTML, then a change to the database schema requires rewriting the UI.

The Modern Interpretation

Historically, SoC meant separating HTML, CSS, and JS into different files. In the component era, SoC means separating layers of responsibility:

  • Data Layer: “How do I get the user object from the API?”
  • Domain Layer: “Is this user allowed to view this document?”
  • Presentation Layer: “What color should the error message be?”