You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/current/reference/layers.mdx
+9-7
Original file line number
Diff line number
Diff line change
@@ -3,14 +3,16 @@ sidebar_position: 1
3
3
pagination_next: reference/slices-segments
4
4
---
5
5
6
+
importuseBaseUrlfrom'@docusaurus/useBaseUrl';
7
+
6
8
# Layers
7
9
8
10
Layers are the first level of organisational hierarchy in Feature-Sliced Design. Their purpose is to separate code based on how much responsibility it needs and how many other modules in the app it depends on. Every layer carries special semantic meaning to help you determine how much responsibility you should allocate to your code.
9
11
10
12
There are **7 layers** in total, arranged from most responsibility and dependency to least:
11
13
12
-
<imgsrc="/img/layers/folders-graphic-light.svg#light-mode-only"width="180"style={{ float: "right", margin: "0 1em" }}alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
13
-
<imgsrc="/img/layers/folders-graphic-dark.svg#dark-mode-only"width="180"style={{ float: "right", margin: "0 1em" }}alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
14
+
<imgsrc={useBaseUrl("/img/layers/folders-graphic-light.svg#light-mode-only")}width="180"style={{ float: "right", margin: "0 1em" }}alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
15
+
<imgsrc={useBaseUrl("/img/layers/folders-graphic-dark.svg#dark-mode-only")}width="180"style={{ float: "right", margin: "0 1em" }}alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
14
16
15
17
1. App
16
18
2. Processes (deprecated)
@@ -32,7 +34,7 @@ Layers are made up of _slices_ — highly cohesive groups of modules. Dependenci
32
34
33
35
For example, the folder `📁 ~/features/aaa` is a slice with the name "aaa". A file inside of it, `~/features/aaa/api/request.ts`, cannot import code from any file in `📁 ~/features/bbb`, but can import code from `📁 ~/entities` and `📁 ~/shared`, as well as any sibling code from `📁 ~/features/aaa`, for example, `~/features/aaa/lib/cache.ts`.
34
36
35
-
Layers App and Shared are **exceptions** to this rule — they are both a layer and a slice at the same time. Slices partition code by business domain, and these two layers are exceptions because Shared does not have business domains, and App combines all business domains.
37
+
Layers App and Shared are **exceptions** to this rule — they are both a layer and a slice at the same time. Slices partition code by business domain, and these two layers are exceptions because Shared does not have business domains, and App combines all business domains.
36
38
37
39
In practice, this means that layers App and Shared are made up of segments, and segments can import each other freely.
38
40
@@ -67,7 +69,7 @@ An entity slice might contain the data storage (`📁 model`), data validation s
67
69
68
70
#### Entity relationships
69
71
70
-
Entities in FSD are slices, and by default, slices cannot know about each other. In real life, however, entities often interact with each other, and sometimes one entity owns or contains other entities. Because of that, the business logic of these interactions is preferably kept in higher layers, like Features or Pages.
72
+
Entities in FSD are slices, and by default, slices cannot know about each other. In real life, however, entities often interact with each other, and sometimes one entity owns or contains other entities. Because of that, the business logic of these interactions is preferably kept in higher layers, like Features or Pages.
71
73
72
74
When one entity's data object contains other data objects, usually it's a good idea to make the connection between the entities explicit and side-step the slice isolation by making a cross-reference API with the `@x` notation. The reason is that connected entities need to be refactored together, so it's best to make the connection impossible to miss.
73
75
@@ -92,7 +94,7 @@ Learn more about the `@x` notation in the [Public API for cross-imports][public-
92
94
93
95
This layer is for the main interactions in your app, things that your users care to do. These interactions often involve business entities, because that's what the app is about.
94
96
95
-
A crucial principle for using the Features layer effectively is: **not everything needs to be a feature**. A good indicator that something needs to be a feature is the fact that it is reused on several pages.
97
+
A crucial principle for using the Features layer effectively is: **not everything needs to be a feature**. A good indicator that something needs to be a feature is the fact that it is reused on several pages.
96
98
97
99
For example, if the app has several editors, and all of them have comments, then comments are a reused feature. Remember that slices are a mechanism for finding code quickly, and if there are too many features, the important ones are drowned out.
98
100
@@ -102,13 +104,13 @@ A feature slice might contain the UI to perform the interaction like a form (`
102
104
103
105
### Widgets
104
106
105
-
The Widgets layer is intended for large self-sufficient blocks of UI. Widgets are most useful when they are reused across multiple pages, or when the page that they belong to has multiple large independent blocks, and this is one of them.
107
+
The Widgets layer is intended for large self-sufficient blocks of UI. Widgets are most useful when they are reused across multiple pages, or when the page that they belong to has multiple large independent blocks, and this is one of them.
106
108
107
109
If a block of UI makes up most of the interesting content on a page, and is never reused, it **should not be a widget**, and instead it should be placed directly inside that page.
108
110
109
111
:::tip
110
112
111
-
If you're using a nested routing system (like the router of [Remix][ext-remix]), it may be helpful to use the Widgets layer in the same way as a flat routing system would use the Pages layer — to create full router blocks, complete with related data fetching, loading states, and error boundaries.
113
+
If you're using a nested routing system (like the router of [Remix][ext-remix]), it may be helpful to use the Widgets layer in the same way as a flat routing system would use the Pages layer — to create full router blocks, complete with related data fetching, loading states, and error boundaries.
112
114
113
115
In the same way, you can store page layouts on this layer.
Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/current/reference/public-api.md
+4-2
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,8 @@
2
2
sidebar_position: 3
3
3
---
4
4
5
+
import useBaseUrl from '@docusaurus/useBaseUrl';
6
+
5
7
# Public API
6
8
7
9
A public API is a _contract_ between a group of modules, like a slice, and the code that uses it. It also acts as a gate, only allowing access to certain objects, and only through that public API.
@@ -68,8 +70,8 @@ Circular import is when two or more files import each other in a circle.
68
70
<!-- TODO: add backgrounds to the images below, check on mobile -->
69
71
70
72
<figure>
71
-
<img src="/img/circular-import-light.svg#light-mode-only" width="60%" alt="Three files importing each other in a circle" />
72
-
<img src="/img/circular-import-dark.svg#dark-mode-only" width="60%" alt="Three files importing each other in a circle" />
73
+
<img src={useBaseUrl("/img/circular-import-light.svg#light-mode-only")} width="60%" alt="Three files importing each other in a circle" />
74
+
<img src={useBaseUrl("/img/circular-import-dark.svg#dark-mode-only")} width="60%" alt="Three files importing each other in a circle" />
73
75
<figcaption>
74
76
Pictured above: three files, `fileA.js`, `fileB.js`, and `fileC.js`, importing each other in a circle.
Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/current/reference/slices-segments.mdx
+4-2
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,8 @@ sidebar_position: 2
4
4
pagination_next: reference/public-api
5
5
---
6
6
7
+
importuseBaseUrlfrom'@docusaurus/useBaseUrl';
8
+
7
9
# Slices and segments
8
10
9
11
## Slices
@@ -19,8 +21,8 @@ The layers Shared and App don't contain slices. That is because Shared should co
19
21
Slices are meant to be independent and highly cohesive groups of code files. The graphic below might help to visualize the tricky concepts of _cohesion_ and _coupling_:
<imgsrc="/img/layers/folders-graphic-light.svg#light-mode-only"width="180"style={{ float: "right", margin: "0 1em" }}alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
13
-
<imgsrc="/img/layers/folders-graphic-dark.svg#dark-mode-only"width="180"style={{ float: "right", margin: "0 1em" }}alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
14
+
<imgsrc={useBaseUrl("/img/layers/folders-graphic-light.svg#light-mode-only")}width="180"style={{ float: "right", margin: "0 1em" }}alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
15
+
<imgsrc={useBaseUrl("/img/layers/folders-graphic-dark.svg#dark-mode-only")}width="180"style={{ float: "right", margin: "0 1em" }}alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
0 commit comments