Опубликовано автор в категориях Верстальщику.

Об основанном на стайл-гайде компонентном подходе в разработке фронтенда

Вступление

Данная серия статей, которая будет состоять из 3-4 частей основана на конспекте моего доклада, который я готовил для KharkivCSS #2, но как раз перед конференцией я заболел и не смог поехать в Харьков. Но не пропадать же добру! По-тому, я решил опубликовать в своем блоге серию статей по конспекту и слайдам доклада. Первая часть — своего рода введение и знакомство с понятием современного стайл-гайда для фронтенда. Итак начнем.

Сегодня фронтенд развивается стремительно. У нас есть множество инструментов для того, чтобы писать код быстро, чтобы писать код правильно, но не стоит забывать о том, что писать код нужно еще и красиво. Есть красота скрытая, которая подразумевает написание читаемого и стандартизованного кода. И здесь нам на помощь приходят линтеры, стандарты и компонентный подход. Но также фронтенд может иметь и красоту, которая видна всем. Именно в этом нам поможет стайл-гайд.

Зачем нужно, чтобы все было по фэн-шуй?

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

Помимо этого, применение ориентированного на стайл-гайд компонентного подхода дает ряд коммерческих преимуществ.

  • Позволяет отделить фронтенд и бэкенд и вести разработку параллельно
  • Позволяет предоставить клиенту живые макеты до бэкенд имплементации
  • Пишем модульный (компонентный), легко поддерживаемый и расширяемый фронтенд

Что такое стайл-гайд для фронтенд?

Давайте определимся с тем, что же такое стайл-гайд для фронта. Начнем с классического определения.

Фронтенд стайл-гайд представляет собой модульную коллекцию всех элементов пользовательского интерфейса вашего продукта вместе с фрагментами кода для разработчиков, чтобы скопировать и вставить в случае необходимости имплементации этих элементов. Он включает в себя общие компоненты пользовательского интерфейса, такие как кнопки, элементы ввода форм, меню навигации, модальные оверлеи иконки и прочее.

(Источник: https://www.nngroup.com/articles/front-end-style-guides)

Фронтенд стайл-гайд — это результат объединения работы UX-дизайнеров и разработчиков, который включает визуальные компоненты разработанные дизайнерами и реализованные разработчиками в виде удобной платформы для использования их в проекте.

Ключевые элементы стайл-гайд

Как правило, фронтенд-стайл гайд характеризуется рядом ключевых особенностей, которые в совокупности и определяют его содержание. Если вы не знаете с чего начать, то начните с плана, в котором будут следующие пункты:

  1. Содержание, которое предоставляет легкую навигацию по компонентам
  2. Позаботьтесь об отзывчивой разметке (сетке), которая позволит красиво разместить элементы (это может, скорее даже должна быть та же сетка, что вы используете в проекте)
  3. Цветовая палитра (в соответствующем формате, HEX для Web, UIColor для iOS app, и т.д.)
  4. Типографские стили (такие как, H1-H6 заголовки, текст для параграфов, заглавия картинок т.д.), которые должны включать название шрифта, размер, начертание, высоту строки, межсимвольный интервал, и примеры использования данных элементов

Это база, а далее, для каждого специфического элемента пользовательского интерфейса вы должны предоставить следующую информацию:

  1. Описание подходящего контекста использования: когда нужно использовать данный компонент, а не любой иной сходный с ним?
  2. Примеры кода
  3. Спецификацию для имплементации, включая информацию о позиционировании
  4. За и против для использования этого элемента (опционально).

Также существует список основных UI компонентов, которые должны быть включены в стайл-гайд. Этот список не является догмой, но может стать хорошей отправной точкой чтобы начать:

  1. Кнопки
  2. Группы кнопок
  3. Хлебные крошки
  4. Карточки
  5. Таблицы
  6. Диалоги
  7. Сетки списков контента, меди и фото
  8. Вертикальные списки
  9. Меню
  10. Элементы выбора даты и времени
  11. Прогресс-бары и индикаторы загрузки
  12. Чекбоксы
  13. Радио-кнопки
  14. Выпадающие меню
  15. Слайдеры
  16. Переключатели состояний
  17. Поля выборов числовых расстояний
  18. Другие поля форм (включая варианты с индикацией максимального количества символов и индикаторы обязательных полей)
  19. Табы
  20. Тулбары
  21. Тултипы
  22. Модальные окна
  23. Иконки
  24. Анимации…

Фронтенд стайл-гайд ≠ бренд-бук

Нужно отметить, что фронтенд стайл-гайд — это не то же самое что и бренд-бук. Несмотря на то, что в бренд-буке может встречаться описание типографики, цветов и прочих элементов, которые могут быть использованы как части пользовательского интерфейса, главным отличием фронтенд стайл-гайда есть то, что это набор живых, динамических элементов интерфейса. И вот… Мы подошли к ключевому слову «живой».

Живой стайл-гайд

Ранее мы рассмотрели определение и основные особенности стайл-гайда для фронтенд. Однако существует еще и понятие живой стайл-гайд. Кстати, авторы, которые дают определение стайл-гайду, не соглашаются с некоторыми позициями живого стайл-гайда.

Что такое живой стайл-гайд

Итак, с чем же они не согласны? В первую очередь они не хотят считать стайл-гайд для фронтенд чем то более нежели набором основных UI элементов, в то время как концепция живого стайл-гайда идет дальше. Здесь мы можем иметь не только наборы основных компонентов, но также можем иметь шаблоны других компонентов сайта, вплоть до наборов страниц. То есть мы уже говорим не о библиотеке отдельных компонентов, а о библиотеке шаблонов (паттернов) для вашего проекта. Основы данного понятия определены в этой статье.

Ключевой момент

Самой главной особенностью живого стайл-гайда является то, что он использует общий с проектом набор стилей, обновление стилей происходит динамически в двух направлениях. Здесь стоит отметить, что несмотря на то, что это считается преимуществом, вы также можете контролировать процесс синхронизации. Не обязательно иметь полную синхронизацию стилей.

Наличие библиотеки готовых шаблонов, а не только набора элементов UI элементов, позволяет даже проектировать на уровне стайл-гайда. Вы можете собрать шаблоны определенных страниц, которые будут жить в вашем стайл-гайде.

Наличие готовых шаблонов страниц позволяет иметь примеры страниц стилизованные под заказчика. То есть вы можете на уровне разработки фронтенда показывать примеры страниц заказчику, без непосредственной реализации на уровне бэкенда.

Об инструментах, которые помогут вам в этом, мы поговорим в следующей части статьи.

Оставить комментарий

  • (не будет показан)