Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/feature-sliced/documentation

🍰 Architectural methodology for frontend projects
https://github.com/feature-sliced/documentation

architecture domain-driven feature-sliced frontend frontend-architecture hacktoberfest methodology principles separation-of-concerns vertical-slices

Last synced: about 1 month ago
JSON representation

🍰 Architectural methodology for frontend projects

Host: GitHub
URL: https://github.com/feature-sliced/documentation
Owner: feature-sliced
License: mit
Created: 2021-01-10T19:37:29.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2024-09-24T18:10:04.000Z (about 2 months ago)
Last Synced: 2024-09-26T23:41:41.503Z (about 1 month ago)
Topics: architecture, domain-driven, feature-sliced, frontend, frontend-architecture, hacktoberfest, methodology, principles, separation-of-concerns, vertical-slices
Language: MDX
Homepage: https://feature-sliced.design
Size: 175 MB
Stars: 1,499
Watchers: 18
Forks: 159
Open Issues: 118
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        

[![All Contributors](https://img.shields.io/badge/all_contributors-42-orange.svg?style=flat-square)](#contributors-)

**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 the **DRY** 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 topic `feature-sliced` and one of the following badges:

[![Feature-Sliced Design][shields-fsd-white]](https://feature-sliced.design/) [![Feature-Sliced Design][shields-fsd-pain]](https://feature-sliced.design/) [![Feature-Sliced Design][shields-fsd-domain]](https://feature-sliced.design/) [![Feature-Sliced Design][shields-fsd-feature]](https://feature-sliced.design/)

[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=

[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==

[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=

[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=

Code snippet

```markdown

White: 

[![Feature-Sliced Design][shields-fsd-white]](https://feature-sliced.design/)

[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.design/)

[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.design/)

[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.design/)

[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=

```

## How can I help?

- 🍰 Use the methodology in your projects and spread the word

- ⭐ Star us on GitHub

- 💬 Join our [Discord](https://discord.gg/S8MzWTUsmp) or [Telegram](https://t.me/feature_sliced) and share your experience or ask questions

- 📝 Suggest improvements to the documentation through PRs



[![discord](static/img/social/discord.png)](https://discord.gg/S8MzWTUsmp "Discord")

        

[![tg](static/img/social/tg.png)](https://t.me/feature_sliced "Telegram chat")

        

[![twitter](static/img/social/twitter.png)](https://twitter.com/feature_sliced "Twitter")

        [![youtube](static/img/social/youtube.png)](https://www.youtube.com/c/FeatureSlicedDesign "YouTube")



## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
_{Sergey Sova}
📝 📖 💡 🤔 📆 💬 🚇 🔬 📋 ✅ 📢 🚧

      
_{Ilya Azin}
📖 💡 🤔 📆 💬 👀 🚇 📓 🎨 ✅ 📢 🚧

      
_{Rin 🦊🪐😈 Akaia}
📖 🖋 🤔 💬 🌍 📢 🚧 🔬

      
_{Alexander Khoroshikh}
📖 🤔 💬 👀 🔧 🛡️ 📢 ✅ 🚧

      
_{Bear Raytracer}
📖 💡 🤔 💬 👀 🌍 🎨 🚇 🚧

    

    

      
_spotsccc
📖 💡 🤔 💬 👀 🚧

      
_Ilya
📖 🤔 📢 🚧

      
_{Viktor Pasynok}
📖 🤔 📆 📢

      
_Oleh
📖 🤔 ✅

      
_Niyaz
💡 📓

    

    

      
_{Evgeniy Podgaetskiy}
🤔

      
_{Viacheslav Zinovev}
🎨 📓 👀

      
_Alexandr
🤔 📓 👀

      
_{Oleg Isonen}
🤔 🔬 📓

      
_Evgeniy
💻 🔌 🔧

    

    

      
_{Lev Chelyadinov}
📖 🖋 🤔 🎨

      
_And
🚇 📖 💻

      
_sarmong
📖 🌍

      
_{Julie Obolenskaya}
🌍

      
_{Roman Tikhiy}
📓 📖

    

    

      
_{Igor Kamyshev}
🐛 📖

      
_Roman
📓 📖

      
_{Sergey Vakhramov}
🎨

      
_{Mark Omarov}
📖

      
_{Дмитрий}
💼 📓

    

    

      
_{Mihir Shah}
🎨

      
_Gleb
📖

      
_{Roma Karvacky}
💡

      
_{Aleksandr Osipov}
📓

      
_Maxim
📓

    

    

      
_{Anton Kosykh}
📓

      
_{Vladislav Samatov}
📓

      
_{Oleg Kusov}
📝 📓

      
_{Andrey Savelev}
📓

      
_{Nickolay Ilchenko}
📓 📋

    

    

      
_{Eugene Ledenev}
🔣

      
_{Vladislav Romanov}
🔣

      
_Ainur
📖

      
_{Elisey Martynov}
💡

      
_{Olga Pasynok}
📋

    

    

      
_{Max Kokosha}
💡

      
_{Зухриддин Камильжанов}
🌍 📣 📖

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!