Hack Frontend Community

FSD (Feature-Sliced Design) Architecture

Feature-Sliced Design (FSD) is architectural methodology for frontend applications. Simply put, it's set of rules and conventions for code organization. Main goal of methodology is to make project understandable and structured, in conditions of regular business requirement changes.

Core FSD Concepts

  1. Layer Separation (slices)

    • App: application settings, global providers, routing.
    • Pages: application pages with specific UI, routes and containers.
    • Features: individual user features (e.g., "add product to cart", "authentication").
    • Entities: modules describing and containing logic of domain "entities" (User, Product, Order, etc.).
    • Shared: common libraries, utilities, reusable components (buttons, icons, validation functions).

  2. Code Grouping by Features
    Instead of storing all components in one components/ folder, all styles in styles/, etc., FSD suggests storing all code related to functionality (UI components, logic, styles, tests) in one feature. This increases cohesion (integrity) and simplifies finding needed files.

  3. Clear Responsibility Boundaries
    Each layer is responsible for its set of tasks. For example, changes in feature usually don't affect other features, since common tools live in shared/, and global settings — in app/.

FSD Advantages

  1. Scalability
    When new features or business scenarios appear in application, they're added as separate directories and modules, without affecting structure of other parts.

  2. Simplified Maintenance
    If you need to understand specific feature or make edits, developer sees all feature logic — from components to styles — in one place.

  3. Modularity
    Easy to connect or disconnect specific features, move them to another project or make them separate package.

  4. Minimized Team Conflicts
    Developers can work in parallel on different features without interfering with each other.

Structure Example

In these examples:

  • app/ contains global application initialization and configuration.
  • pages/ — separate pages (routes).
  • features/ — set of features (each feature contains everything needed for its work: UI, business logic, etc.).
  • entities/ — description of models (User, Product, etc.) and their behavior.
  • shared/ — reusable components, utilities and configurations.

Application Recommendations

  • Start small: don't need to immediately force all layers if you have small application. Add layers as project grows.
  • Clearly define feature boundaries: feature should solve one specific task (e.g., "user profile management" or "add product to cart").
  • Use naming: if project structure becomes complex, follow unified rules for directory and file naming to avoid confusion.
  • Follow DRY, YAGNI and KISS principles: FSD is just code organization scheme. It doesn't cancel basic principles of writing clean code and thoughtful architecture.

Source

Read more about Feature-Sliced Design here.