Size: a a a

Atomic Design && Feature Slices

2021 February 23

IR

Ingrid Raines in Atomic Design && Feature Slices
2^(82 589 933) − 1
Всем привет. Как-то я совсем запутался с feature slices. Например мне нужно сделать страницу с выводом статей. Блок карточку со статьей я помещаю в папку UI, а в папке Pages импортирую этот блок, передаю данные и заполняю ими страницу? Или в цепочке должна быть еще папка Features?
Можно поподробнее описать кейс? Не совсем понятно что с остальной частью архитектуры
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
@sovasergey feat-name/components instead of feat-name/ui войдёт в официальную спеку?
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
Ingrid Raines
Я бы предпочла второе чтобы был задел на reusability, так как требования могут измениться
@JavaScriptizerEvgeniy в общем моё мнение таково
источник

E

Evgenii in Atomic Design && Feature Slices
Ingrid Raines
@JavaScriptizerEvgeniy в общем моё мнение таково
я вас услышал, сеньк
источник

2

2^(82 589 933) − 1 in Atomic Design && Feature Slices
Ingrid Raines
Можно поподробнее описать кейс? Не совсем понятно что с остальной частью архитектуры
удобно будет если я пришлю репозиторий?
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
2^(82 589 933) − 1
удобно будет если я пришлю репозиторий?
Yep
источник

2

2^(82 589 933) − 1 in Atomic Design && Feature Slices
https://github.com/edlay17/react-wordpress/
в ui лежат шаблоны для страниц, в pages прокидываются данные в эти шаблонные компоненты. Как мне задействовать папку features пока не понял, может есть какой-то простой пример?
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
2^(82 589 933) − 1
https://github.com/edlay17/react-wordpress/
в ui лежат шаблоны для страниц, в pages прокидываются данные в эти шаблонные компоненты. Как мне задействовать папку features пока не понял, может есть какой-то простой пример?
Сейчас распишу поподробнее по коду в целом
источник

АБ

Александр Бакиматов... in Atomic Design && Feature Slices
Ingrid Raines
И кстати param-case only
почему? точнее почему only )
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
2^(82 589 933) − 1
https://github.com/edlay17/react-wordpress/
в ui лежат шаблоны для страниц, в pages прокидываются данные в эти шаблонные компоненты. Как мне задействовать папку features пока не понял, может есть какой-то простой пример?
1. postCard и loadingPostCard это организмы
2. Всё кроме header в организмах по идее нужно поместить в ui/templates
3. Каждый компонент должен лежать в своём подкаталоге ( for example, logo/index.js ), для того чтобы можно было добавить к каждому компоненту выделенный файл со стилями / документацией / тестами
4. Нэйминг каталогов и файлов строго в param-case ( aka kebab-case )
5. Структура fs в pages должна соответствовать структуре роутинга
6. Каталог features реально необходим, фичи это основополагающая абстракция концепции. Так что в первую очередь стоит разбивать приложение на фичи, а уже потом думать о страницах, которые из этих фич строятся. В данном кейсе будет как минимум фича posts ( насчёт нэйминга можно ещё подумать ), где как минимум будут подкаталоги components и model. В model нужно положить всё что связано со стэйтом — редьюсер, экшны, сайд-эффекты, etc, в components же будут компоненты, которые собираются из чистых компонентов из ui и подключенной логики стора. Так что каталога redux по идее имхо не должно быть, где производить создание стора — вопрос открытый, но для начала можно делать это хотя бы прямо в index.js приложения
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
Дополняйте/дискутируйте, если у кого что есть сказать, не претендую на идеальность
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
Александр Бакиматов
почему? точнее почему only )
Это часть спецификации. Или вопрос в том, почему это часть спецификации? 🤔
источник

2

2^(82 589 933) − 1 in Atomic Design && Feature Slices
Ingrid Raines
1. postCard и loadingPostCard это организмы
2. Всё кроме header в организмах по идее нужно поместить в ui/templates
3. Каждый компонент должен лежать в своём подкаталоге ( for example, logo/index.js ), для того чтобы можно было добавить к каждому компоненту выделенный файл со стилями / документацией / тестами
4. Нэйминг каталогов и файлов строго в param-case ( aka kebab-case )
5. Структура fs в pages должна соответствовать структуре роутинга
6. Каталог features реально необходим, фичи это основополагающая абстракция концепции. Так что в первую очередь стоит разбивать приложение на фичи, а уже потом думать о страницах, которые из этих фич строятся. В данном кейсе будет как минимум фича posts ( насчёт нэйминга можно ещё подумать ), где как минимум будут подкаталоги components и model. В model нужно положить всё что связано со стэйтом — редьюсер, экшны, сайд-эффекты, etc, в components же будут компоненты, которые собираются из чистых компонентов из ui и подключенной логики стора. Так что каталога redux по идее имхо не должно быть, где производить создание стора — вопрос открытый, но для начала можно делать это хотя бы прямо в index.js приложения
спасибо огромное!!
источник

АБ

Александр Бакиматов... in Atomic Design && Feature Slices
Ingrid Raines
Это часть спецификации. Или вопрос в том, почему это часть спецификации? 🤔
насколько я помню насчет кейса - Серега из личных соображений топил за kebab-case (не отрицаю что доводы его аргументированны и в целом я сам согласен что такой кейс самый удобный), но практически это не влияет на подход. просто прозвучало это так будто без этого все работать перестает))
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
Александр Бакиматов
насколько я помню насчет кейса - Серега из личных соображений топил за kebab-case (не отрицаю что доводы его аргументированны и в целом я сам согласен что такой кейс самый удобный), но практически это не влияет на подход. просто прозвучало это так будто без этого все работать перестает))
Не перестанет, но спека есть спека
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
Раз уж ей следовать, то полностью
источник
2021 February 24

BA

Bogdan Aleksandrovic... in Atomic Design && Feature Slices
Ingrid Raines
Это часть спецификации. Или вопрос в том, почему это часть спецификации? 🤔
Какой спецификации
источник

IR

Ingrid Raines in Atomic Design && Feature Slices
Bogdan Aleksandrovich
Какой спецификации
Feature Slices
источник

AI

Arthur Irgashev in Atomic Design && Feature Slices
Ingrid Raines
Feature Slices
А где она ? Каким консорциумом утверждена ?)
источник

DZ

Dmitry Zherebko in Atomic Design && Feature Slices
Arthur Irgashev
А где она ? Каким консорциумом утверждена ?)
Консорциум холиварщиков в чате
источник