Desegmentation

Это содержимое пока не доступно на вашем языке.

Desegmentation (also known as horizontal slicing or packaging by layer) is a code organization pattern where files are grouped by their technical roles rather than by the business domains they serve. This means code with similar technical functions is stored in the same place, regardless of the business logic it handles.

This approach is popular in meta-frameworks like Next and Nuxt due to its simplicity, as it’s easy to get started and enables features like auto-imports and file-based routing:

Директорияapp
- Директорияcomponents
  - DeliveryCard.jsx
  - DeliveryChoice.jsx
  - RegionSelect.jsx
  - UserAvatar.jsx
- Директорияactions
  - delivery.js
  - region.js
  - user.js
- Директорияcomposables
  - delivery.js
  - region.js
  - user.js
- Директорияconstants
  - delivery.js
  - region.js
  - user.js
- Директорияutils
  - delivery.js
  - region.js
  - user.js
- Директорияstores
  - Директорияdelivery
    getters.js
    actions.js

This pattern also occurs in FSD codebases, in the form of generic folders:

Директорияfeatures
- Директорияdelivery
  - Директорияui
    components ⚠️
Директорияentities
- Директорияrecommendations
  - utils ⚠️

Files can also be a source of desegmentation. Files like types.ts can aggregate multiple domains, complicating navigation and future refactoring, especially in layers like pages or widgets:

Директорияpages
- Директорияdelivery
  - index.ts
  - Директорияui
    DeliveryCard.tsx
    DeliveryChoice.tsx
    UserAvatar.tsx
  - Директорияmodel
    types.ts ⚠️
    utils.ts ⚠️
  - Директорияapi
    endpoints.ts ⚠️

// ❌ Bad: Mixed business domains in generic file
export interface DeliveryOption {
  id: string;
  name: string;
  price: number;
}

export interface UserInfo {
  id: string;
  name: string;
  avatar: string;
}

// ❌ Bad: Mixed business domains in generic file
export function formatDeliveryPrice(price: number) {
  return `$${price.toFixed(2)}`;
}

export function getUserInitials(name: string) {
  return name.split(' ').map(n => n[0]).join('');
}

// ❌ Bad: Mixed business domains in generic file
export async function fetchDeliveryOptions() { /* ... */ }
export async function fetchUserInfo() { /* ... */ }

The Problem

While this structure is easy to start with, it can lead to scalability issues in larger projects:

Low Cohesion: Modifying a single feature often requires editing files in multiple large folders, such as pages, components, and stores.
Tight Coupling: Components can have unexpected dependencies, leading to complex and tangled dependency chains.
Difficult Refactoring: It requires additional effort to manually extract code related to a specific domain.

Solution

Group all code that relates to a specific domain in one place.

Avoid generic folder names such as types, components, utils, as well as generic file names like types.ts, utils.ts, or helpers.ts. Instead, use names that directly reflect the domain they represent.

Avoid generic file names like types.ts if possible, especially in slices with multiple domains:

Директорияpages
- Директорияdelivery
  - index.tsx
  - Директорияui
    DeliveryPage.tsx
    DeliveryCard.tsx
    DeliveryChoice.tsx
    UserInfo.tsx
  - Директорияmodel
    delivery.ts
    user.ts

Desegmentation

The Problem

Solution

See Also