Size: a a a

Atomic Design for React

2020 August 09

c⁣

createStore<🦉>... in Atomic Design for React
Все эти страницы имеют общий layout расположения основных блоков
Отличается только середина и Sidebar
источник

c⁣

createStore<🦉>... in Atomic Design for React
В итоге, я могу переписать CardsCommonTemplate один раз и layout всех страниц поменяется.
Я так же могу добавить мобильную разметку
источник

c⁣

createStore<🦉>... in Atomic Design for React
Я не описываю общую разметку по несколько раз в разных страницах, и не вкладываю все эти страницы в ещё один компонент
источник

MK

Maxim Kolesnikov in Atomic Design for React
createStore<🦉> ⁣
CardCreatePage использует CardsCommonTemplate
А можешь дать ссылку на темплейт?
источник

c⁣

createStore<🦉>... in Atomic Design for React
источник

c⁣

createStore<🦉>... in Atomic Design for React
Он построен поверх других шаблонов
менее детальных
источник

c⁣

createStore<🦉>... in Atomic Design for React
источник

c⁣

createStore<🦉>... in Atomic Design for React
Но обычно хватает 2-3 шаблонов

1. общий, выравнивает контент по центру и занимается регулировкой ширины контента на мобилках
источник

c⁣

createStore<🦉>... in Atomic Design for React
2. формирует расположение блоков внутри этого отцентрированного контейнера. Например, сайдбар справа, но на мобилке он сверху.
Этот шаблон сделан отдельно от первого, чтобы можно было вставить любую другую разметку, например, без сайдбара, или отдельный с breadcrumbs
источник

c⁣

createStore<🦉>... in Atomic Design for React
3. обычно складывает два-три других шаблона, чтобы иметь один простой. Полезно, когда несколько страниц используют одну разметку, которая формируется из пачки шаблонов. И чтобы не дублировать использование шаблонов, иногда полезно создать дополнительный конкретный шаблон. Как в примерах выше CardsCommonTemplate — шаблон для страниц связанных с карточками. Так же может быть UsersCommonTemplate — для страниц пользовател(я|ей)
источник

MK

Maxim Kolesnikov in Atomic Design for React
Вроде примерно понял. Буду пробовать. Спасибо!
источник
2020 August 10

FT

Frontend Priest Tony in Atomic Design for React
Maxim Kolesnikov
Эта кнопка — атом?
Абстрактная кнопка - атом
Абстрактная кнопка, в которой есть несколько слотов (например, prefix и postfix для иконок) - молекула
Конкретная кнопка с конкретным содержанием - организм или часть организма

ЭТА кнопка - скорее всего, третий кейс
источник

c⁣

createStore<🦉>... in Atomic Design for React
Frontend Priest Tony
Абстрактная кнопка - атом
Абстрактная кнопка, в которой есть несколько слотов (например, prefix и postfix для иконок) - молекула
Конкретная кнопка с конкретным содержанием - организм или часть организма

ЭТА кнопка - скорее всего, третий кейс
я обычно делаю кнопку со слотами сразу атомом
источник

c⁣

createStore<🦉>... in Atomic Design for React
тогда вся остальная сложность не растет
источник

MK

Maxim Kolesnikov in Atomic Design for React
Ну вот у меня это кнопка со слотами.
источник

FT

Frontend Priest Tony in Atomic Design for React
createStore<🦉> ⁣
я обычно делаю кнопку со слотами сразу атомом
Имхо жирновато, по мне атом проще воспринимать как дом-ноду, но ничего против не имею
источник

c⁣

createStore<🦉>... in Atomic Design for React
Frontend Priest Tony
Имхо жирновато, по мне атом проще воспринимать как дом-ноду, но ничего против не имею
я так делаю ради простоты, компоненты получаются простыми, но при этом не требует дополнительных компонентов для полноценной работы.
Всё таки мы пишем компоненты ради абстракции над дом-нодой
источник

АХ

Амир Хан in Atomic Design for React
createStore<🦉> ⁣
тогда вся остальная сложность не растет
+, т.е. не только минимальная единица(тег), но и минимальная смысловая что ли единица - атом
источник

c⁣

createStore<🦉>... in Atomic Design for React
Амир Хан
+, т.е. не только минимальная единица(тег), но и минимальная смысловая что ли единица - атом
Да
источник

S

Sm•ok 😈✔️ in Atomic Design for React
Тоже не делаю кнопку молекулой
источник