Movatterモバイル変換

feature-sliced/documentationPublic

NotificationsYou must be signed in to change notification settings
Fork212
Star2.1k

🍰 Architectural methodology for frontend projects

feature-sliced.github.io/documentation/

License

MIT license

2.1k stars 212 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 1,853 Commits
.github		.github
.vscode		.vscode
blog		blog
config/docusaurus		config/docusaurus
i18n		i18n
src		src
static		static
.env.sample		.env.sample
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.stylelintignore		.stylelintignore
.stylelintrc.js		.stylelintrc.js
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.ru.md		CODE_OF_CONDUCT.ru.md
CONTRIBUTING.md		CONTRIBUTING.md
DEV.md		DEV.md
LICENSE		LICENSE
README.md		README.md
declaration.d.ts		declaration.d.ts
docusaurus.config.js		docusaurus.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
sandbox.config.json		sandbox.config.json
tsconfig.json		tsconfig.json

Repository files navigation

Feature-Sliced Design (FSD) is an architectural methodology for scaffolding front-end applications. Simply put, it's a compilation of rules and conventions on organizing code. The main purpose of this methodology is to make the project more understandable and structured in the face of ever-changing business requirements.

This methodology is not tied to a particular stack — it can be used for web or native applications.

Advantages

Uniformity
The code is organized by scope of influence (layers), by domain (slices), and by technical purpose (segments).
This creates a standardized architecture that is easy to comprehend for newcomers.
Controlled reuse of logic
Each architectural component has its purpose and predictable dependencies.
This keeps a balance between following theDRY principle and adaptation possibilities.
Stability in face of changes and refactoring
A module on a particular layer cannot use other modules on the same layer, or the layers above.
This enables isolated modifications without unforeseen consequences.
Orientation to business and users needs
When the app is split into business domains, you can navigate the code to discover and deeper understand all the project features.

Show off

To show off that your project uses FSD, you can use the GitHub topicfeature-sliced and one of the following badges:

Code snippet

White:[![Feature-Sliced Design][shields-fsd-white]](https://feature-sliced.github.io/documentation/)[shields-fsd-white]:https://img.shields.io/badge/Feature--Sliced-Design?style=for-the-badge&labelColor=262224&color=F2F2F2&logoWidth=10&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAALFAAACxQGJ1n/vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA/SURBVHgB7dKxCgAgCIThs/d/51JoNQIdDrxvqMXlR4FmFs92KDIX/wI7JSdDN+eHtkxIycnQvMNW8hN/crsDc5QgGX9NvT0AAAAASUVORK5CYII=----Pain (red):[![Feature-Sliced Design][shields-fsd-pain]](https://feature-sliced.github.io/documentation/)[shields-fsd-pain]:https://img.shields.io/badge/Feature--Sliced-Design?style=for-the-badge&labelColor=262224&color=F2F2F2&logoWidth=10&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAALFAAACxQGJ1n/vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABHSURBVHgB7dKxCQAgDETR08ZNHNBBHNBNrBQFuyCCKQK5V6QMfBJAWVij5zLwKbW6d0VYx2TZyXnBKxvEZJnDx2bylf1kdRM6tiAZsruQ/QAAAABJRU5ErkJggg==----Domain (blue):[![Feature-Sliced Design][shields-fsd-domain]](https://feature-sliced.github.io/documentation/)[shields-fsd-domain]:https://img.shields.io/badge/Feature--Sliced-Design?style=for-the-badge&color=F2F2F2&labelColor=262224&logoWidth=10&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAALFAAACxQGJ1n/vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABISURBVHgB7dKxCQAgDETR0w2cws0cys2cwhEUBbsggikCuVekDHwSQFlYo7Q+8KnmtHdFWMdk2cl5wSsbxGSZw8dm8pX9ZHUTMBUgGU2F718AAAAASUVORK5CYII=----Feature (green):[![Feature-Sliced Design][shields-fsd-feature]](https://feature-sliced.github.io/documentation/)[shields-fsd-feature]:https://img.shields.io/badge/Feature--Sliced-Design?style=for-the-badge&labelColor=262224&color=F2F2F2&logoWidth=10&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAALFAAACxQGJ1n/vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABISURBVHgB7dKxCQAgDETR00EcwYEc0IEcwUUUBbsggikCuVekDHwSQFlYo/Y88KmktndFWMdk2cl5wSsbxGSZw8dm8pX9ZHUTdIYgGbPdU2QAAAAASUVORK5CYII=