Skip to content

Latest commit

 

History

History
182 lines (141 loc) · 28 KB

README.md

File metadata and controls

182 lines (141 loc) · 28 KB

DiscordTelegramWebsiteFeature-Sliced Design, an architectural methodology for frontend projectsFeature-Sliced Design, an architectural methodology for frontend projects

All 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 Feature-Sliced Design Feature-Sliced Design Feature-Sliced Design

Code snippet
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 or Telegram and share your experience or ask questions
  • 📝 Suggest improvements to the documentation through PRs

discord          tg          twitter         youtube

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Sergey Sova
Sergey Sova

📝 📖 💡 🤔 📆 💬 🚇 🔬 📋 📢 🚧
Ilya Azin
Ilya Azin

📖 💡 🤔 📆 💬 👀 🚇 📓 🎨 📢 🚧
Rin 🦊🪐😈 Akaia
Rin 🦊🪐😈 Akaia

📖 🖋 🤔 💬 🌍 📢 🚧 🔬
Alexander Khoroshikh
Alexander Khoroshikh

📖 🤔 💬 👀 🔧 🛡️ 📢 🚧
Bear Raytracer
Bear Raytracer

📖 💡 🤔 💬 👀 🌍 🎨 🚇 🚧
spotsccc
spotsccc

📖 💡 🤔 💬 👀 🚧
Ilya
Ilya

📖 🤔 📢 🚧
Viktor Pasynok
Viktor Pasynok

📖 🤔 📆 📢
Oleh
Oleh

📖 🤔
Niyaz
Niyaz

💡 📓
Evgeniy Podgaetskiy
Evgeniy Podgaetskiy

🤔
Viacheslav Zinovev
Viacheslav Zinovev

🎨 📓 👀
Alexandr
Alexandr

🤔 📓 👀
Oleg Isonen
Oleg Isonen

🤔 🔬 📓
Evgeniy
Evgeniy

💻 🔌 🔧
Lev Chelyadinov
Lev Chelyadinov

📖 🖋 🤔 🎨
And
And

🚇 📖 💻
sarmong
sarmong

📖 🌍
Julie Obolenskaya
Julie Obolenskaya

🌍
Roman Tikhiy
Roman Tikhiy

📓 📖
Igor Kamyshev
Igor Kamyshev

🐛 📖
Roman
Roman

📓 📖
Sergey Vakhramov
Sergey Vakhramov

🎨
Mark Omarov
Mark Omarov

📖
Дмитрий
Дмитрий

💼 📓
Mihir Shah
Mihir Shah

🎨
Gleb
Gleb

📖
Roma Karvacky
Roma Karvacky

💡
Aleksandr Osipov
Aleksandr Osipov

📓
Maxim
Maxim

📓
Anton Kosykh
Anton Kosykh

📓
Vladislav Samatov
Vladislav Samatov

📓
Oleg Kusov
Oleg Kusov

📝 📓
Andrey Savelev
Andrey Savelev

📓
Nickolay Ilchenko
Nickolay Ilchenko

📓 📋
Eugene Ledenev
Eugene Ledenev

🔣
Vladislav Romanov
Vladislav Romanov

🔣
Ainur
Ainur

📖
Elisey Martynov
Elisey Martynov

💡
Olga Pasynok
Olga Pasynok

📋
Max Kokosha
Max Kokosha

💡
Зухриддин Камильжанов
Зухриддин Камильжанов

🌍 📣 📖

This project follows the all-contributors specification. Contributions of any kind welcome!