Codacoda
Back to Academy

coding principles

Separation of Concerns

Separation of Concerns (SoC) is a design principle for breaking a program into distinct sections, each addressing a separate concern. A concern is a set of information or behavior that affects the code of a program — such as presentation, business logic, data access, or error handling. When concerns are mixed (e.g., HTML generation interleaved with database queries), changing one aspect requires understanding and potentially modifying unrelated code. Clean separation makes each section simpler, more reusable, and independently testable.

Use Cases

  • •MVC / MVVM architectures that separate data, presentation, and control flow
  • •Layered backend architectures with controller, service, and repository layers
  • •Separating CSS from HTML structure and JavaScript behavior on the web
  • •Extracting cross-cutting concerns (logging, auth) into middleware rather than mixing them into business logic

Visualization

BEFOREProductPagefetchData()renderHTML()handleClick()SQL queriesinline SQLInline CSSstyle stringsBusiness Logicprice calc
Speed:1x
ProductPage mixes data fetching, HTML rendering, event handling, SQL, CSS, and business logic in a single file.Step 1 / 7

Implementation

Output

Click "Run Code" to see output...