Feature-Sliced Design: Методология разработки фронтенд-приложений

Рет қаралды 6,918

WebStack - Frontend

Күн бұрын

Пікірлер

@pavelivanov3590 4 ай бұрын

Всё не мог понять, как entities с features объединять. Спасибо за наглядный пример!

@webstack-frontend1697 4 ай бұрын

@@pavelivanov3590 спасибо за поддержку!

@nics51 Ай бұрын

единственный ютубер у которого стиль кода и стэк схож со мной ❤

@엘레나-o1q 5 ай бұрын

Thank you for the video! I was looking for a real project with fsd applied and this was very helpful.

@webstack-frontend1697 5 ай бұрын

Thank you for support!

@terraformerstudio7300 6 ай бұрын

Очень подробно и классно рассказал. Продолжай в том же духе :)

@webstack-frontend1697 6 ай бұрын

Спасибо за поддержку!

@k0repan0ff 6 күн бұрын

На 51:10 Вы создаете task-row, который находится в entities и внутри него создаете ссылку в которой прописываете адрес для отображения details. У вас она простая (всего лишь /:id) и вопросов наверно не вызывает, но ведь ссылка на страницу details может быть другой и взята будет из слоя app из routing. Откуда слой entities знает какие ссылки есть в слое app? Вроде как нарушение методологии FSD?

@webstack-frontend1697 5 күн бұрын

Если я правильно понял описанную ситуацию, то мне кажется, что в таком случае ссылки лучше вынести в shared в константы и использовать их как в роутинге, так и в сущностях

@Graphouny77 6 ай бұрын

Имхо, считаю что эта архитектура очень усложняет понимание проекта. Вместо того, чтобы пилить новую доработку, приходится часто думать о том, как декомпозировать компоненты. Очень повышается когнитивная нагрузка. Соответственно скорость написания фич падает. В команде используем модифицированный вариант, пришли к выводу, что в папку features лучше класть только реально переиспользуемые компоненты между разными страницами. А большинство компонентов держать по месту использования в папке страницы pages/[page-name] . Ну, а квери к примеру (для tanstack-query)/сторы или слой апи (rtk-query) можно держать чаще всего в папке entity.

@webstack-frontend1697 6 ай бұрын

Fsd это как скрам. Чаще всего никто не использует его полностью, а берет только то что им удобно

@mrakov 5 ай бұрын

А есть какие-то интересные масштабируемые стратегии переиспользования одного и того же(компонентов, например) и/или случаев, если отличается 1 иконка/кнопка/текст/блок для приложений уровня "Console AWS", "KZbin" и т.д.?

@webstack-frontend1697 5 ай бұрын

@@mrakov ну по идее feature вполне переиспользуемые, карточка с разной иконкой может быть сущностью которая принимает какую то пропсу. Console aws вполне может быть собрана в виджете и переиспользоваться

@gh8499 3 ай бұрын

@@webstack-frontend1697 fsd это кал который вам маркетологи продали

@Akhmed-o7h 3 ай бұрын

Я считаю, что у тебя в разных местах что-то по чучуть отличается, например сегмент UI у тебя либо файл, либо папка. Хотя все должно быть стандартно ( в данном случае для UI - папка), чтобы была расширяемость. И чтобы не поишлось менять структуру проекта я считаю

@ИльяБондаренко-т4е 6 ай бұрын

Круто, от тебя объяснение FSD нужно обязательно посмотреть) Только у тебя описание осталось с прошлого видео про effector, это так, мелочь

@webstack-frontend1697 6 ай бұрын

Ох, прошляпил. Спасибо что заметил, поправлю

@ЮрийМусатов-ь3я 5 ай бұрын

FSD - очень замороченная штука, а сложные вещи не выживают(native redux, saga и т.д.). Через 3 года о FSD никто и не вспомнит - скриньте!

@webstack-frontend1697 5 ай бұрын

Я сам до сих пор на 3х китах сижу. components pages и stores. Но насчет смерти я не согласен. На нем понапишут столько проектов что еще внукам хватит

@aeron_rus Ай бұрын

@@webstack-frontend1697 и вам хватает этого? Почему-то в архитектуре front'a все неявно и не четко) Нет конкретных рамок когда использовать components, pages, store, когда просто модульную архитектуру, а когда уже и на fsd логично замахнуться

@BorisEdigarian 5 ай бұрын

Навигация по такому коду, где 80% файлов имеют имя index будет адом. Я часто использую поиск файла по имени и тут будет сложновато найти что надо, а когда проект станет больше то вообще нереально искать без помощи мышки

@hmell7684 Ай бұрын

А если я хочу стили задавать css модулями, то куда класть эти name.module.css?

@webstack-frontend1697 Ай бұрын

@@hmell7684 в слайсе может быть сегмент ui. Прям в него можно и класть

@hmell7684 19 күн бұрын

@@webstack-frontend1697 Спасибо!

@arturzhitkovich5629 6 ай бұрын

А что за автокомплит кола у тебя в VSCode ? А так все супер. Спасибо большое

@webstack-frontend1697 6 ай бұрын

Спасибо за отзыв! Вот видео про этот автокомплит kzbin.info/www/bejne/bnnQZqydlr6qZq8si=-nSkxrD0pyYlMR5T

@mrakov 5 ай бұрын

Я видимо не очень понял, как связана архитектура построения приложения, разбиение на сущности и взаимодействие различных слоёв с "давайте возьмём название папок, а писать будем как удобно нам, а там как пойдёт", если на первых страница описано, для чего папка "entity", что у неё есть слои, как раз под "api", что в "/shared/ui" не самое хорошее место класть архитектурный слой роутера, помимо простой "UI" компоновки, не говоря уже про "есть у нас todo-list, все элементы называется todo..., интерфейс также, а вот модель назову-ка я task, потому что могу". Попал на видео случайно, возможно это часть плейлиста с более детальным объяснением, но вне контекста информация только путает понимание, если оно было.

@webstack-frontend1697 5 ай бұрын

Видео предназначено для новичков чтоб на базовом уровне объяснить за что отвечает каждый слой и что это всего лишь набор правил из которых любое можно модифицировать пол себя и на любое можно забить)

@mrakov 5 ай бұрын

@@webstack-frontend1697 но ведь прямо вначале мелькает фраза «мы возьмем только структуру папок», что уже вводит в заблуждение. Дело, конечно, каждого как «упрощать материал» для новичков, но, как мне кажется, это как «вот это - катана, для простоты будем называть ее ножом». В чем заключается упрощение путем полного изменения смысла на свой, при чем с частичной мутацией кор идей - мне не очень ясно. Есть отдельные тонкие моменты, где есть проблемы взаимоотношений слоев, которые в 1 время могут быть условно «виджетом» и «фичей» и как этого избегать, вот такие ситуации упомянуть или НЕ упомянуть, чтобы упростить - супер, окей. Но подмена понятий и замена смысла - звучит не как упрощение, как мне показалось. Но Ваш контент - Ваше дело.

@webstack-frontend1697 5 ай бұрын

@@mrakov ну значит это плохое видео ;)

@mrakov 4 ай бұрын

Как раз обсуждение разницы структуры папок и подхода к проектированию kzbin.info/www/bejne/l3WYfqaqZbSiidU

@vit944 6 ай бұрын

Как настроить приватные роуты при такой организации роутинга?

@webstack-frontend1697 6 ай бұрын

Так же как вынесен mainLayout в видео, можно сделать authLayout внутри которого outlet и логика по проверке авторизации. И передать в него дочерние роуты, которые должны проверяться. Положить такой layout лучше в слой app

@vit944 6 ай бұрын

Добрый день. Почему используете win10?

@webstack-frontend1697 6 ай бұрын

Приветствую. Это мой домашний компьютер, на котором всегда стояла винда, для удобства поиграть в игры) На нем удобнее всего записывать ролики

@vit944 6 ай бұрын

@@webstack-frontend1697 я к тому, что есть ли смысл вместо 11 поставить 10-ку?)

@webstack-frontend1697 6 ай бұрын

@@vit944 тут я не подскажу. Я ни разу не трогал 11

@flavkaa2017 6 ай бұрын

Я когда на 11 перешел - это была фатальная ошибка. Оставайтесь на 10-ке пока она не депрекейтед

@vit944 6 ай бұрын

@@flavkaa2017 а почему? можете по подробнее?

@snatvb 6 ай бұрын

зачем ты так сложно создаешь файлы? просто нажимаешь new file и пишешь путь "api/http-cinet/index.ts" и у тебя все создается. через new file можно даж папку создать "folder/" пишешь - косая черта на конце сделает это папкой :) пользуйтесь ))

@webstack-frontend1697 6 ай бұрын

Спасибо за совет!