Про заснованому на стайл-Гайд компонентному підході в розробці фронтенда
вступ
Сьогодні фронтенд розвивається стрімко. У нас є безліч інструментів для того, щоб писати код швидко, щоб писати код правильно, але не варто забувати про те, що писати код потрібно ще й красиво. Є краса прихована, яка передбачає написання читається і стандартизованого коду. І тут нам на допомогу приходять Лінтера, стандарти і компонентний підхід. Але також фронтенд може мати і красу, яку видно всім. Саме в цьому нам допоможе стайл-гайд.
Навіщо потрібно, щоб все було по фен-шуй?
Досить тривалий час ставлення до фронтенду було поверхневим, більш того, не було чіткої диференціації фронтенд розробників. У ті часи ми могли собі дозволити не замислюватися про красивому і структурованому фронті. Однак, маючи сьогодні в своєму арсеналі величезну кількість технологій і відмінну підтримку специфікацій браузерами, ми просто зобов'язані правильно писати код для фронтенда.
Крім цього, застосування орієнтованого на стайл-гайд компонентного підходу дає ряд комерційних переваг.
- Дозволяє відокремити фронтенд і бекенд і вести розробку паралельно
- Дозволяє надати клієнту живі макети до бекенд імплементації
- Пишемо модульний (компонентний), легко підтримуваний і розширюваний фронтенд
Що таке стайл-гайд для фронтенд?
Давайте визначимося з тим, що ж таке стайл-гайд для фронту. Почнемо з класичного визначення.
Фронтенд стайл-гайд являє собою модульну колекцію всіх елементів призначеного для користувача інтерфейсу вашого продукту разом з фрагментами коду для розробників, щоб скопіювати і вставити в разі необхідності імплементації цих елементів. Він включає в себе загальні компоненти користувальницького інтерфейсу, такі як кнопки, елементи введення форм, меню навігації, модальні оверлеї іконки та інше.
Фронтенд стайл-гайд - це результат об'єднання роботи UX-дизайнерів і розробників, який включає візуальні компоненти розроблені дизайнерами і реалізовані розробниками у вигляді зручної платформи для використання їх в проекті.
Ключові елементи стайл-гайд
Це база, а далі, для кожного специфічного елемента користувальницького інтерфейсу ви повинні надати наступну інформацію:
- Опис відповідного контексту використання: коли потрібно використовувати даний компонент, а не будь-який інший подібний з ним?
- приклади коду
- Специфікацію для імплементації, включаючи інформацію про позиціонування
- За і проти для використання цього елемента (опціонально).
Також існує список основних UI компонентів, які повинні бути включені в стайл-гайд. Цей список не є догмою, але може стати гарною відправною точкою щоб почати:
- кнопки
- Групи кнопок
- Хлібні крихти
- картки
- таблиці
- діалоги
- Сітки списків контенту, міді і фото
- вертикальні списки
- Меню
- Елементи вибору дати і часу
- Прогрес-бари та індикатори завантаження
- чекбокси
- Радіо-кнопки
- випадають меню
- слайдери
- перемикачі станів
- Поля виборів числових відстаней
- Інші поля форм (включаючи варіанти з індикацією максимальної кількості символів і індикатори обов'язкових полів)
- Таби
- тулбари
- зринаючі підказки
- модальні вікна
- іконки
- Анімації ...
Фронтенд стайл-гайд ≠ бренд-бук
Потрібно відзначити, що фронтенд стайл-гайд - це не те ж саме що і бренд-бук. Незважаючи на те, що в бренд-буку може зустрічатися опис типографіки, квітів та інших елементів, які можуть бути використані як частини призначеного для користувача інтерфейсу, головною відмінністю фронтенд стайл-гайда є те, що це набір живих, динамічних елементів інтерфейсу. І ось ... Ми підійшли до ключового слова «живий».
Живий стайл-гайд
Що таке живий стайл-гайд
Отже, з чим же вони не згодні? В першу чергу вони не хочуть вважати стайл-гайд для фронтенд ніж те більш ніж набором основних UI елементів, в той час як концепція живого стайл-гайда йде далі. Тут ми можемо мати не тільки набори основних компонентів, але також можемо мати шаблони інших компонентів сайту, аж до наборів сторінок. Тобто ми вже говоримо не про бібліотеку окремих компонентів, а про бібліотеку шаблонів (патернів) для вашого проекту. Основи даного поняття визначено в цій статті.
Ключовий момент
Найголовнішою особливістю живого стайл-гайда є те, що він використовує спільний з проектом набір стилів, оновлення стилів відбувається динамічно в двох напрямках. Тут варто зазначити, що незважаючи на те, що це вважається перевагою, ви також можете контролювати процес синхронізації. Не обов'язково мати повну синхронізацію стилів.
Наявність бібліотеки готових шаблонів, а не тільки набору елементів UI елементів, дозволяє навіть проектувати на рівні стайл-гайда. Ви можете зібрати шаблони певних сторінок, які будуть жити в вашому стайл-Гайд.
Наявність готових шаблонів сторінок дозволяє мати приклади сторінок стилізовані під замовника. Тобто ви можете на рівні розробки фронтенда показувати приклади сторінок замовнику, без безпосередньої реалізації на рівні бекенд.
Про інструментах, які допоможуть вам в цьому, ми поговоримо в наступній частині статті.