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

Рет қаралды 21,884

Күн бұрын

Пікірлер: 93

@reactify-it 11 ай бұрын

Писать с нуля, учитывая особенности архитектуры, легче чем переписывать. FSD развивает правильно мышление сущностями, заставляет более тщательно продумывать компоненты. В дальнейшем мы отрефакторим код и сформируем правильный подход.   Обычно на уровне фич у меня есть еще подпапки для каждой отдельной фичи к конкретной сущности: features -news -search --ui --model -filter --ui --model -add -delete Обсудить t.me/reactify_IT

@AlexanderBogdanov-dw6cw 9 ай бұрын

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

@reactify-it 9 ай бұрын

Спасибо!

@ЧынараРысалиева-в7м 11 ай бұрын

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

@reactify-it 11 ай бұрын

Спасибо!

@nk_77777 7 ай бұрын

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

@ddflruc 7 ай бұрын

Мои соболезнования...

@nk_77777 6 ай бұрын

@@xxxxxxxeeeeeeeeee Таков путь)

@livechat1608 11 ай бұрын

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

@reactify-it 11 ай бұрын

через неделю выйдут еще 2 видео, там тоже порефакторим)

@undefin_ed9611 7 ай бұрын

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

@igorsenichev3779 11 ай бұрын

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

@reactify-it 11 ай бұрын

Спасибо! Будет с Firebase Auth, Если в тг канале проголосуют)

@thanlaodev 10 ай бұрын

а не будет проще реализовать авторизацию со сменой почты, активацией аккаунта, восстановлением пароля@@reactify-it на postgresql? Firebase же забанен щас немного

@xlok1e-it 11 ай бұрын

Все по полочкам раскидал, хорош)

@reactify-it 11 ай бұрын

Спасибо!

@conservativ724 10 ай бұрын

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

@reactify-it 10 ай бұрын

можно скачать себе ветку, которая до этих изменений и повторить по видео Работать с ветками очень важно уметь, без этого на работу даже не нужно соваться

@semyonsubochev4284 5 ай бұрын

спасибо это было потно)))

@ЧынараРысалиева-в7м 11 ай бұрын

Хотелось бы видео с next.js

@reactify-it 11 ай бұрын

Будет в будущем!

@sierafa1nt 8 ай бұрын

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

@BorisEdigarian 7 ай бұрын

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

@ginhop1057 11 ай бұрын

вот он! Мужчина красавец

@reactify-it 10 ай бұрын

Спасибо!

@khaled-jj2mj 11 ай бұрын

Отлично!!!

@reactify-it 10 ай бұрын

Спасибо!

@flavkaa2017 9 ай бұрын

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

@timura.6658 9 ай бұрын

какая?

@ДаниилМамаенко-п5и 10 ай бұрын

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

@reactify-it 10 ай бұрын

можно модальное окно виджет, который принимает чилдрен виджет(контент)

@ДаниилМамаенко-п5и 10 ай бұрын

@@reactify-it спасибо))

@ПавелСвенин-ъ4в 3 ай бұрын

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

@reactify-it 3 ай бұрын

слотами или челдреннами надо перекидывать

@krecer2024 11 ай бұрын

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

@reactify-it 11 ай бұрын

это shared, туда можно вкладывать любые слайсы, плюс мне так удобнее. но я в видео сказал ,что можно их положить в utils имхо

@krecer2024 11 ай бұрын

@@reactify-itв shared нет никаких слайсов, он состоит из сегментов это же относится и к слою app )

@РусланКуянец 11 ай бұрын

@@krecer2024 оговорка

@krecer2024 11 ай бұрын

@@reactify-it Горизонтальное разделение кода приведет к увеличению связности между модулями и снижению зацепленности. Это создаст антипаттерн high coupling и low cohesion что негативно скажется на архитектуре и поддержке кода. Целью должны быть low coupling и high cohesion это важнейшие паттерны в любой архитектуре из GRASP. По сути ты предлогаешь создать свалку в папках, таких как hooks, hocs, utils, helpers и т.д., вместо того, чтобы держать их рядом с модулями, к которым они логически относятся. Чтобы лучше понять различие между вертикальным и горизонтальным разделением кода, а также их влияние на архитектуру программного обеспечения, рекомендуется изучить материалы по этой теме

@РусланКуянец 11 ай бұрын

⁠@@krecer2024а debounce в сущность user или post определить?

@oleksandrvk7592 8 ай бұрын

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

@reactify-it 8 ай бұрын

Path aliases

@tretyakweb1754 11 ай бұрын

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

@krecer2024 11 ай бұрын

да ты прав ошибка явна видна на 42:30

@reactify-it 11 ай бұрын

да, просчет, исправлю когда рефакторинг будет

@reactify-it 11 ай бұрын

@@krecer2024 критикуешь - предлагай. Куда бы ты вынес категории? в Shared? И устроил бы свалку компонент? Давай поговорим о решении. Невозможно. или очень сложно придерживаться архитектуры на 100%. В данном случае у новости есть категория, категория это тоже отдельная сущность. Каким образом сделать так чтобы не было кроссимпорта?

@tretyakweb1754 11 ай бұрын

@@reactify-it по хорошему тебе нужно было определить dto для news & category на уровне /shared/api/types.ts. 🙃 и тогда ты на уровне сущностей просто бы импортировал их из слоя ниже shared/api/types.ts это то что ты получит от сервера по этому эти типы должны лежать в /shared/api/types.ts: export type CategoryDto = {} export type NewsDto = {} и уже на уровне entities ты бы смог обращаться к этим types, таким образом решена проблема кроссимпортов. 🤗🤗🤗

@reactify-it 11 ай бұрын

@@tretyakweb1754 спасибо! хороший совет

@techdanil8020 7 ай бұрын

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

@reactify-it 7 ай бұрын

приавет, первая серия React Новости, у меня на канале

@СергейЦветов-н4н 9 ай бұрын

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

@ddflruc 7 ай бұрын

Ура! Еще один думающий подписчик! Респект тебе, чувак))

@ЕкатеринаЗданевич-ы2х 10 ай бұрын

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

@АлексейСтупников-д4у 7 ай бұрын

в определенной степени вы правы. как говорил Евгений Паромов, искусственное разделение кода на entities и features нарушает принцип low coupling/high cohesion. он предлагает большую часть кода, которая напрямую связанна с бизнес-ценностью, помещать в features

@ddflruc 7 ай бұрын

Я уж думал все совсем отупели, пока не увидел ваш коммент)) Я согласен с тем, что FSD - полная дичь, которая показывают всю свою противоречивость только на практике. Кто не пробовал FSD на практике, тот не поймет проблемы, увы.

@doc-jp2bf 6 ай бұрын

Я только одного не понимаю почему в больших конторах стали проьалкивать эту поделку. Система правда деьильная. Такое большое количество слоев нужно чтобы было что куда сунуть. Но реальная жизнь выходит порой за жто число. И начниается ой это фича? Ой это виджет? И 90 процентов обсуждений вокруг этого говна такие что же это? Те система которая взяла на себя ответственность решить воппос что и куда ваш код, сделало это максимально трудным и запутнным. И это доказывают форумы

@ddflruc 6 ай бұрын

@@doc-jp2bf Согласен, 100%! Архитектурная методология FSD дебильна с точки зрения реальной практической разработки, но в теории и в вакууме выглядит прекрасно)))))

@-NiKoLaY 6 ай бұрын

@@ddflrucА можете рассказать, как/где именно вы пробовали эту архитектуру на практике? Какой это был проект, может даже код где то есть посмотреть?

@ddflruc 7 ай бұрын

СКОЛЬКО МОЖНО ДЕАЛТЬ ВИД, ЧТО FSD - ЭТО НОРМАЛЬНО??? Неужели не очевидно, что это противоречивый и переусложненный ад, включающий размазывание кода и абстракций? Автор канала это показывает в данном видео почти полтора часа!!! Но при этом говорит, что FSD - это ок, продолжая при этом "жевать кактус", обсуждая с подписчиками, где у него теперь кривые кросс-импорты, где новая сложность возникла, специфическая для FSD в простейшем абсолютно frontend-приложении. АВТОР КАНАЛА, признайся вот честно, ты в своей ежедневной работе используешь FSD или нет? И почему? Хотя бы себе ответь на этот вопрос...

@doc-jp2bf 6 ай бұрын

Так и есть. Дело моды

@doc-jp2bf 6 ай бұрын

@NikVolkov 6 ай бұрын

Было познавательно. Только произношение английский слов по ушам скребёт :-)

@reactify-it 6 ай бұрын

у меня привычка коверкать слова, особенно английские)

@NikVolkov 6 ай бұрын

@@reactify-it да, профессионализм в этом чувствуется. сказал бы, что затмеваешь индусов )

@СтройКонсалт 10 ай бұрын

Непрекращающиеся круговые движения мышью прям напрягают. Как слова-паразиты в речи, только это - в видео. Избавиться бы.

@reactify-it 10 ай бұрын

Избавлюсь!

@_ilunchik_2244 11 ай бұрын

Так это же по сути чистая архитектура для фронтенда

@reactify-it 10 ай бұрын

да!

@ddflruc 7 ай бұрын

Только лишь в теории, которая никак не связана с практикой.

@YZ-yb4jb 6 ай бұрын

Ну раскидывать сущность user по 4 слоям это уже чушь, просто бред. Говно архитектурка то.

@popuguytheparrot_ 11 ай бұрын

У тебя в названии ошибка. Худшая

@reactify-it 11 ай бұрын

кому как

@livechat1608 11 ай бұрын

ёжик что ли

@gladiatorrussia 9 ай бұрын

какая же сложная гадость, ну ведь можно же все проще делать

@reactify-it 9 ай бұрын

надо привыкнуть, потом без него не сможешь жить

@ddflruc 7 ай бұрын

@@reactify-it Может лучше привыкнуть к чему-то ориентированному на решение реальных проблем? Например, к критическому мышлению? Ну неужели не очевидно, что FSD хорош только в теории и для создания красивых презентаций и докладов о нем? А на практике - это переусложненный растущий псевдо-упорядоченный и во всем противоречивый АД на фронте. Что скажешь?

@reactify-it 7 ай бұрын

@@ddflruc предложи что использовать

@ddflruc 7 ай бұрын

@@reactify-it Любую кастомную вариацию модульной архитектуры, удобную конкретном команде или группе команд в рамках компании. Разве это неочевидно? Ну что реально сложного разложить компоненты, утилиты, state management, прочие общие зависимости именно так удобно и логично, как хотела бы конкретная команда? Я видел и писал с нуля большие проекты на React/Redux/TypeScript, Vue 3/Pinia/, Vue2/Vuex и никогда не видел проблем с пониманием у разработчиков любого уровня файловой структуры и архитектуры любого по сложности frontend-проекта. А какой у вас опыт с этим? Почему решили обозревать FSD как некую серебряную пулю, достойную внимания?