Skip to content

🍰 Architectural design methodology for Frontend projects

License

Notifications You must be signed in to change notification settings

Prains/documentation

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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!

About

🍰 Architectural design methodology for Frontend projects

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • MDX 64.9%
  • TypeScript 16.2%
  • JavaScript 14.5%
  • SCSS 4.4%