Feature-Sliced Design - Лучшая Frontend архитектура

В этом видео мы познакомимся с Feature-Sliced Design архитектурной методологией. Будут мои мысли и рассуждения, будем вместе переписывать проект React Новости учитывая правила этой методологии. Вы поймете логику, как разбивать компоненты, какая должна быть структура папок. Это 15 серия React Новости

Митапы, собеседования, рандомные собеседования, практика в командах и эксклюзивный контент. Вступай в сообщество

Проект React Новости:

Менторство:

Отзывы:

Telegram канал:

Сообщество:

Обучайтесь, общайтесь, растите. Присоединяйтесь к Reactify!

#fsd #архитектура #frontend #redux #rtkquery #reduxtoolkit #typescript #react #Фронтенд #Разработка #Программист #WebDevelopment #JavaScript #ВебРазработка #ОбучениеПрограммированию #IT #айтишник #junior #реакт #практика

[reactify-it]

Писать с нуля, учитывая особенности архитектуры, легче чем переписывать. FSD развивает правильно мышление сущностями, заставляет более тщательно продумывать компоненты. В дальнейшем мы отрефакторим код и сформируем правильный подход. 

Обычно на уровне фич у меня есть еще подпапки для каждой отдельной фичи к конкретной сущности:

features
-news
—search
——ui
——model
—filter
——ui
——model
—add
—delete

[AlexanderBogdanov-dwcw]

Очень крутое видео по FSD, я таких не встречал в ютюб. Огромное спасибо!

[ВикторРуд-вв]

Супер, спасибо дружище! Очень интересно логика мышления по fsd, реально полезное видео!

[ЧынараРысалиева-вм]

Мужик, ты хорош, у тебя чёткие видео, да и декомпозируешь ты perfect.

[livechat]

Спасибо, отличное видео!
Как раз практики рефакторинга архитектуры на ютубе не хватало

[undefin_ed]

Не плохо) Думаю правильно мыслить в том направлении что пока виджет нужен только одному компоненту, например на той же странице - можно его смело оставлять в ui. А в тот момент когда он потребуется в других местах, перемещать его в widgets. Пишу проект на FSD, и столкнулся с проблемой перегрузки виджетами, теперь есть идея как это решить. Спасибо автору за видео!

[nk_]

Нахожусь как раз на проекте по FSD - твой видос дал на старте понять что там вообще происходит)
Спасибо, бро)

[conservativ]

на 13:40 появляется проект взятый не понятно от куда вообще, ссылка на проект React новости ведёт на гитхаб с уже готовым проектом и чтобы попрактиковаться вместе с автором непонятно от куда я должен этот проект скачать

[igorsenichev]

Спасибо за видео. Полезно!
Было бы супер, если бы ты потом смог снять ролик с авторизацией (регистрация пользователя и что самое важное - смена пароля и почты для пользователя с подтверждением). Гадеюсь когда 6ибудь будет жто видео у тебя на канале 😇
С нетерпением буду ждать 5овых видео и желаю развития твоему полезному каналу 👍

[sierafant]

Для виджетов в виджетах есть концепция dependency inversion и слоты

[krecer]

В некоторых местах у тебя код делится на горизонтальное деление,
FSD пытается от такого уйти в пользу вертикального, где все делится по смыслу, а не по принадлежности к виду условно - components - hooks - helpers - utils - interfaces,
в твоем случае shared/interfaces, shared/hooks, shared/hocs это горизонтальный разрез + размазывание кода!!!

[BorisEdigarian]

Мне кажется для сегментов можно обойтись просто добавляя обозначения в имена файлов вместо создания папок с 1 файлом. К примеру news.slice.ts, news.ui.ts, news.model.ts, news.api.ts и корневой файл index.ts

[ДаниилМамаенко-пи]

Добрый день! Интересный ролик, спасибо! Можете поделиться мнением пожалуйста, допустим у нас есть модальное окно, которое содержит список пользователей, как по Вашему нужно декомпозировать данную сущность, вроде здесь получается следующее:
- пользователь (entity)
- список пользователей (widget мб)
- модальное окно (по идее тоже widget, но нельзя, так как список пользователей тоже widget и его нельзя импортировать, хотя оно может использоваться на разных страницах, то правильнее было бы processes, который уже устаревший)

[flavkaa]

Крутое видео) Но хочу подушнить: FSD - не архитектура, а архитектурная методология. И разница приличная в определениях эти двух вещей

[ПавелСвенин-ъв]

Уже на четвертой минуте говоришь что каждый слой делится на слайсы, хотя слой app и слой shared не делится на слайсы, на пятой минуте ты говоришь что кнопка у пользователя это features, а пользователь это entities. Хотя features не должно входить в entities согласно архитектуре

[tretyakweb]

Вообще-то кроссимпорты запрещены в слое entities 🤨

[oleksandrvk]

а почем у меня нету @ в импортах? что я пропустил

[techdanil]

Привет, подскажи где VITE_NEWS_API_KEY взял?

[СергейЦветов-нн]

Поработал с нею, понял, что это дико не удобно.

[ЕкатеринаЗданевич-ых]

Какая кошмарная и противоречивая система!!! И Главное: она вдруг была назначена хорошей. Никого не смущает, что у нас есть папка entities (которая связана с сущностями из нашего бизнес-мира), но при этом каким-то образом в остальных папках тоже будут лежать элементы связанные с сущностями из реального мира. Сначала мы размазываем, по субъективным причинам, всю информацию о том какие задачи должна решать система, а потом дробим всё это на косучки чтобы вообще было: фиг разберешься.