Logo

Frontend Blog

Про Frontend разработку
Telegram
YouTube
Boosty

Feature Sliced Design - краткие мысли

03 января, 2024

fsd

Слои приложения

  • App
  • Pages
  • Widgets
  • Features
  • Entities
  • Shared

3 слоя из 6 есть в любом Frontend приложении на React: App, Pages и Shared.

Entities, Features, Widgets служат для того, что бы разбить компоненты.

Entities (сущности) — бизнес-сущности. (например, User, Product, Order). Например скелет карточки.
Features - действия, может быть с версткой и без. Например: AddToCard, SendComment.
Widgets - берётся Entity список карточек, в его renderProp передается Entity карточка. В слоты карточки передаются нужные Фичи и другие Entities.
Pages составляются из готовых виджетов.

Подходит для больших проектов, вроде соц. сетей, где есть потребность гибкого конструктора. Например, карточка контента в соц. сети. Её могут быть 1000 вариантов, с разными кнопками, картинками, текстом, контентом. И тут оправдана система слотов, которые могут заполняться. В большинстве проектов у средней карточки может быть 1-2-3 состояния, которые решаются флажками.