FSD архитектура⚙️

Чтобы я сильно не скучала, меня на некоторое время добавили в другой проект, который использует FSD архитектуру.
Я трогала ее совсем немного и давно, а последний год работала с Atomic Design, поэтому сегодня я проникаюсь FSD, разворачиваю проект и погружаюсь в него.
Собственно, расскажу и вам, что это такое.

Feature-Sliced Design (FSD) — это архитектурная методология для проектирования frontend-приложений.
Проще говоря, это свод правил и соглашений по организации кода.
Главная цель методологии — сделать проект понятным и структурированным, особенно когда условия бизнеса постоянно меняются.

Проект на FSD состоит из слоев layers, каждый слой состоит из слайсов slices и каждый слайс состоит из сегментов segments (1, 2 картинка).

Слои:
1. app — настройки, стили и провайдеры для всего приложения (собсна как и везде).
2. processes (уже устарел) — сложные сценарии, покрывающие несколько страниц.
3. pages — страницы из сущностей, фич и виджетов. (обыкновенные страницы как и везде)
4. widgets — слой для соединения сущностей и фич в самостоятельные блоки. (например, IssuesList, UserProfile)
5. features — взаимодействия с пользователем. (например, SendComment, AddToCart, UsersSearch)
6. entities — бизнес-сущности. (например, User, Product, Order)
7. shared — переиспользуемый код, не имеющий отношения к специфике приложения/бизнеса. (например, UIKit, libs, API, короче как и во многих других не FSD проектах)

При этом такая история, что верхний слой может использовать нижние, а наоборот - нет. То есть виджет может использовать фичи, которые используют сущности, фичи могут использовать только сущности, а сущности вообще ничего исползовать не могут. Shared может использовать во всех слоях (3 картинка).

Затем есть слайсы, разделяющие код по предметной области. Разделение на слайсы обеспечивает высокий уровень связности (cohesion) при низком уровне зацепления (coupling).

В свою очередь, каждый слайс состоит из сегментов. Это маленькие модули, главная задача которых — разделить код по техническому назначению.
Самые распространенные сегменты — ui, model (store, actions), api и lib (utils/hooks), но в некоторых случаях api и config вынесены в shared-слой.

Пример построения приложения по FSD.

Я пока не работала достаточно с этим подходом, чтобы написать вам свое мнение, но дока FSD говорит о следующих преимуществах:
- Единообразие
- Контролируемое переиспользование логики
- Устойчивость к изменениям и рефакторингу
- Ориентированность на потребности бизнеса и пользователей

Постаралсь очень кратко, штука на мой взгляд прикольная, но надо привыкнуть, вот пошла привыкать🤓

Друзья, всем привет☀️
За эту неделю пришло много новых читателей, чему я, конечно, очень рада!
Добро пожаловать🤗

Надеюсь, ваши майские прошли более расслабленно, чем мои, потому что я знатно заколебалась😅
Решила я значит углубиться в FSD…
Разбиралась в архитектурных принципах, в dependency inversion, потому что без инверсии там сложно, постаралась понять каждый слой, посмотрела на проблемы FSD и их решения, а так же на реализацию FSD с react-query, redux и next…
Смотрела видосы на ютубе и читала документацию.
С одной стороны, как будто всё стало яснее, с другой - я ваще запуталась😂
Слишком много новой инфы за короткий срок, надо время, чтобы всё устаканилось, а завтра уже начну свою первую таску в новом проекте с FSD.

Обычно в выходные я реально отдыхаю, но здесь захотелось разобраться с методологией, чтобы уже с головой приступить к таскам.
Рада, что погрузилась, не рада, что выходные прошли😅
Но ничего страшного, потому что через 3 недели я ухожу в отпуск и вообще меня ждет потрясающее лето!
О планах расскажу чуть позже☺️
Так что можно и поработать))

Желаю всем классного завершения выходных, а меня ещё ждет один видос и урок английского🙌🏼

Привет из офиса!🌿

Честно, это вынужденная поездка в офис😁
Я вчера прилетела в Москву из Татарстана и обнаружила, что забыла там зарядник, в итоге сдэком он придет только завтра, так что работать сегодня поехала в офис, чтобы зарядить мак))
Плюс документы всякие подписать, увидеться с коллегами и помодничать💅🏽

Лето - это маленькая жизнь👣🌴☀️

Никогда особо не планировала лето, а в этот раз захотелось!
Спланировала и афигела, какое оно у меня будет, просто космическое))

Июнь🌊
Уже первого числа начинается мой двухнедельный отпуск, и я лечу на Маврикий😍
Прикиньте, как круто!
Морские черепахи, киты, жирафы, белый песок, джунгли и серфинг…
Лечу с родителями на 2 недели, спасибо большое папочке за это.
По прилете еду в Питер к подруге пить вино, бродить по ночному городу и разговаривать обо всём на свете…

Июль🏄🏽‍♀️
Он будет не менее классным, потому что я снова беру отпуск и лечу на Камчатку в серф-лагерь💔
Камчатка…
Я мечтала о ней несколько лет и вот наконец могу исполнять свои мечты.
Лечу туда с подругой, будем серфить, подниматься на вулканы, кататься на скейте и знакомиться с такими же любящими жизнь ребятами.
После Камчатки слетаю в Татарстан.

Август☀️
Летим в Абхазию в наш домик у моря, который снимаем каждое лето, чтобы пожить дикарём вдали от всех⛱️
Там буду совмещать работу и отдых, в планах сходить в поход в горы и просто нежиться на солнышке.
Ну а в конце августа мне исполняется 25, так что планирую собрать всех подруг и уехать загород отмечать.

Между поездками завтракать на московских террасах, гулять, видеться с друзьями, заниматься в тренажерке, ездить в офис и работать, естественно))

Ещё зимой я думала, что летом буду в свадебном платье в стенах грибоедовского загса говорить «Да»…
Но как это часто бывает, всё идёт не по плану, и «Да» я скажу Индийскому и Тихому океанам, солнцу, серфингу, приключениям и свободе🌪️
Вот так❤️

Рассказывайте, у кого какие планы на это лето?

В офисе может быть и так☀️

Скажи мне что-нибудь на фронтендерском🤌🏼