Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ In FSD, a project consists of <mark>layers</mark>, each layer is made up of <mar

![themed--scheme](/img/visual_schema.jpg)

The **layers** are standardized across all projects and vertically arranged. Modules on one layer can only interact with modules from the layers strictly below. There are currently six of them (bottom to top):
The **layers** are standardized across all projects and vertically arranged. Modules on one layer can only interact with modules from the layers strictly below. There are currently seven of them (bottom to top):

1. `shared` — reusable functionality, detached from the specifics of the project/business.
<small>(e.g. UIKit, libs, API)</small>
Expand All @@ -35,7 +35,9 @@ The **layers** are standardized across all projects and vertically arranged. Mod
4. `widgets` — compositional layer to combine entities and features into meaningful blocks.
<small>(e.g. IssuesList, UserProfile)</small>
5. `pages` — compositional layer to construct full pages from entities, features and widgets.
6. `app` — app-wide settings, styles and providers.
6. `processes` (deprecated) — complex inter-page scenarios.
<small>(e.g., authentication)</small>
7. `app` — app-wide settings, styles and providers.


Then there are **slices**, which partition the code by business domain. This makes your codebase easy to navigate by keeping logically related modules close together. Slices cannot use other slices on the same layer, and that helps with high cohesion and low coupling.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,17 @@ On this page, a _module_ refers to an internal module in the application — a f

Every layer carries special semantic meaning to help you determine how much responsibility you should allocate to a module in your code. The names and meanings of layers are standardized across all projects built with Feature-Sliced Design.

There are 6 layers in total, arranged from most responsibility and dependency to least:
There are 7 layers in total, arranged from most responsibility and dependency to least:

<img alt="" src="/img/layers/layers.svg" width="128" height="240" style={{ float: "right", margin: "0 2em" }} />

1. App
2. Pages
3. Widgets
4. Features
5. Entities
6. Shared
2. Processes (deprecated)
3. Pages
4. Widgets
5. Features
6. Entities
7. Shared

You don't have to use every layer in your project — only add them if you think it brings value to your project.

Expand Down Expand Up @@ -154,6 +155,18 @@ This layer is similar to Widgets in its compositional nature, albeit on a larger
<li>Branches in a repository</li>
</ul></td></tr></tbody></table>

### Processes

:::caution

This layer has been deprecated. The current version of the spec recommends avoiding it and moving its contents to `features` and `app` instead.

:::

Escape hatches for multi-page interactions.

This layer is deliberately left undefined. Most applications should not use this layer, and keep router-level and server-level logic on the App layer. Consider using this layer only when the App layer grows large enough to become unmaintainable and needs unloading.

### App

All kinds of app-wide matters, both in the technical sense (e.g., context providers) and in the business sense (e.g., analytics).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ FSD подходит для проектов и команд любого раз
4. `widgets` (виджеты) — композиционный слой для соединения сущностей и фич в самостоятельные блоки
<small>(например, IssuesList, UserProfile)</small>.
5. `pages` (страницы) — композиционный слой для сборки полноценных страниц из сущностей, фич и виджетов.
6. `app` — настройки, стили и провайдеры для всего приложения.
6. `processes` (процессы, устаревший слой) — сложные сценарии, покрывающие несколько страниц.
<small>(например, авторизация)</small>
7. `app` — настройки, стили и провайдеры для всего приложения.

Затем есть **слайсы**, разделяющие код по предметной области. Они группируют логически связанные модули, что облегчает навигацию по кодовой базе. Слайсы не могут использовать другие слайсы на том же слое, что обеспечивает высокий уровень [_связности_][refs-wiki-cohesion] (cohesion) при низком уровне [_зацепления_][refs-wiki-coupling] (coupling).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@ pagination_next: reference/slices-segments

Каждый слой несет в себе особый семантический смысл, помогающий определить, какую ответственность следует возложить на модуль в вашем коде. Названия и значения слоёв стандартизированы для всех проектов, построенных с использованием Feature-Sliced Design.

Всего существует 6 слоёв, расположенных от наибольшей ответственности и зависимости к наименьшей:
Всего существует 7 слоёв, расположенных от наибольшей ответственности и зависимости к наименьшей:

<img alt="" src="/img/layers/layers.svg" width="128" height="240" style={{ float: "right", margin: "0 2em" }} />

1. App (Приложение)
2. Processes (Процессы, устаревший слой)
2. Pages (Страницы)
3. Widgets (Виджеты)
4. Features (Фичи/функции)
Expand Down Expand Up @@ -153,6 +154,18 @@ pagination_next: reference/slices-segments
<li>Ветки в репозитории</li>
</ul></td></tr></tbody></table>

### Processes

:::caution

Этот слой считается устаревшим. Текущая версия спецификации рекомендует избегать его и перемещать его содержимое в `features` и `app`.

:::

Выход из ситуаций, когда требуется сложное многостраничное взаимодействие.

Этот уровень намеренно оставлен не очень определенным. Большинству приложений этот слой не пригодится, логику на уровне роутера и сервера следует оставить на уровне App. Рассмотрите возможность использования этого слоя только тогда, когда слой App вырастет настолько, что станет неподдерживаемым и потребует разгрузки.

### App

Всё, что касается всего приложения, как в техническом смысле (например, провайдеры контекста), так и в бизнес-смысле (например, аналитика).
Expand Down
37 changes: 23 additions & 14 deletions static/img/layers/layers.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified static/img/visual_schema-ru.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified static/img/visual_schema.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.