Патерни
Компонент - одна цеглина. Патерн - стала композиція цеглин, яку продукт повторює на трьох і більше екранах. Токен зняв повтор значення; патерн знімає повтор розкладки.
Це головне питання цієї сторінки, і відповідь на нього не абстрактна. Ось три композиції з цього продукту, і патерн серед них рівно один.
Патерн: ряд із двох дій
«Профіль / Нова сесія» на картці клієнта, «Редагувати / Видалити» на картці адреси, «Оформити Pro / Не зараз» під панеллю тарифу. Однакова композиція, різний зміст, і продукт повторює її на 70 сірих екранах. Беремо патерн: потрібна саме ця стала композиція цілком.Не патерн: підвал шухляди кошика
.cd-foot теж тримає дві дії поруч - але це grid з підказкою, яка лягає під обидві кнопки на власний рядок. Композиція відрізняється порядком, і склеювати її з рядом дій означало б зробити патерн, який нічого не описує точно. Лишається собою, у cart-drawer.css.Не патерн: шапка списку з фільтром і лічильником
.ltool + .mtoolbar + .listing стоять разом на 13 сірих екранах, і поріг вони проходять. Але правило цієї композиції вже лежить в одному місці - у toolbar.css. Патерн переніс би його з одного єдиного джерела в інше і назвав це прогресом. Те саме з рейкою фільтрів, шапкою секції, крихтами і сіткою карток: усі перевірені, усі відхилені з тієї самої причини.Тобто питання не «чи повторюється композиція», а «де зараз лежить її правило». Якщо в одному файлі компонента - патерн не потрібен. Якщо в п'ятнадцяти файлах під п'ятдесятьма трьома іменами, як було з рядом дій, - потрібен.
Не можете назвати три екрани, де композиція вже стоїть - це не патерн. Два входження доводять, що композиція можлива; три - що вона стала. Той самий поріг обережності, що на етапі 08 звучав як «одне вживання ще не роль».
Лічильник іде по wireframes/, а не по design/. У кольорі до етапу 12 стоїть вибірка, а сірий корпус - це весь продукт, 142 екрани з етапу 04. Композиція, яка стоїть на трьох КОЛЬОРОВИХ екранах із п'ятнадцяти, це «майже скрізь у вибірці», а не патерн.
Патерн не заводить власних стилів. Він збирається з наявних компонентів і токенів: у ньому тільки композиційне - сітка, порядок, відступи через примітив. Знадобився новий стиль - це сигнал, що бракує компонента або варіанта, і тоді спершу компонент за п'ятіркою етапу 08, а патерн потім.
Звідки береться композиція, яку виносять
Вона вже десь лежить, бо екрани якось її малюють - найчастіше в css одного з компонентів. Ці правила переїжджають у файл патерна: вирізати звідти, вставити сюди, а не скопіювати. Правило, що лишилось одночасно у двох місцях, це дефект: каскад вирішить його порядком@import, звірка покаже «збіглось», і система тихо носитиме мертвий дубль, який розійдеться з першою ж правкою.index.css, що й продуктОдин - це відповідь, а не провал. Обхід перевірив 937 композицій за повною послідовністю і 1512 за сусідніми парами. На трьох і більше сірих екранах стоять 259, і з них 87 пише скрипт (шапка, підвал, мегаменю, шухляда, діалог міста, таб-бар - усі вже в одній функції), 90 - власна анатомія одного компонента, а 82 - розмітка, яку екрани повторюють руками. Із цих 82 поріг «де лежить правило» пройшла одна.
Вони не патерни, але видимі: інакше наступний раунд шукатиме їх наново. Композиція, що трапилась двічі, нікуди не зникає - вона лишається розміткою і чекає третього входження. Усього таких 51; нижче ті, що найближче до порога.
| Композиція | Що це | На яких двох екранах | Чого бракує |
|---|---|---|---|
.loy-q > .qq .qa | питання і відповідь | content-loyalty · content-loyalty-buyer | третього екрана - і qa-item уже малює те саме під іншим ім'ям |
.pd-block > .pd-tx .pd-img | блок опису: текст і картинка | product · product-coach | третього екрана |
.ci-row > .ci-qty .ci-price | кількість і ціна в рядку кошика | cart · cart-oos | третього екрана |
.cli > .cav .cinfo .cgo-btn | клієнт у списку тренера | coach-home · coach-home-free | третього екрана |
.op-item > .op-thumb .op-in .op-price | товар у підсумку замовлення | order-placed · order-placed-account-end | третього екрана; жоден із чотирьох класів не оголошений компонентом |
.op-fact > .fk .fv | рядок факту «ключ - значення» | order-placed · order-placed-account-end | третього екрана |
.co-sec > .co-sec-h label.co-opt+ | секція оформлення з варіантами вибору | checkout · checkout-loggedin | третього екрана |
.ce-ph > .h .bar .bar | скелет сторінки редагування | coach-client-edit · coach-client-edit-confirm | третього екрана |
Половина кандидатів живе на екранах, які ще сірі - order-placed, content-loyalty, checkout. Розкотка етапу 12 додасть їм кольорових двійників, і тоді третє входження з'явиться саме собою. Дивитись сюди варто на початку 12, а не наприкінці.
Етап 10 адаптує патерн цілим, а не кожен екран окремо: сталу композицію переносить один медіазапит у файлі патерна. Етап 11 анімує їх так само. Етап 12 отримує їх готовими і збирає з них решту продукту одним підключенням. Етап 13 віддає ці сторінки розробнику замість переказу в чаті.
Правила вживання, виведені тим самим проходом, що й патерн, лежать на architecture.html, розділ I, а те, що крок навмисно не полагодив, - у беклозі, список 4.