Библиотека контролов

Kontur UI Kit

Who am I?

  • Ведущий инженер-программист в Контуре
  • Руковожу группой фронтэндеров в команде Отдела Инфраструктурной Разработки
  • Люблю React
  • В восторге от FP

Контур

  • 35 продуктов и сервисов
  • 750 человек в отделе разработки
  • более 50 фронтэндеров

Несколько лет назад

В компании появилось много продуктов

И вместе с этим несколько проблем

  • Разные элементы интерфейса в разных продуктах
  • Разный юзер-экспириенс в разных продуктах

Кросс-продуктовые истории

Что это?

  • Пользователи используют несколько продуктов

Проблемы

Шапка продуктов

Крупные проекты

  • Несколько команд разрабатывают продукт

Что это?

  • Похожие, но не во всем, контролы
  • Примерно похожий юзер-экспириенс

Проблемы

Интерес разработчика

  • Развитие своего продукта
  • «Своя» библиотека контролов продукта
  • Нет доверия другим командам
  • Код не шарится между командами

К чему это приводит?

Что это?

UI/UX-специалисты тоже видят проблему

КЕД — комитет единого дизайна

Кэп, что ты

здесь забыл?

Задачи КЕДов

  • Обсуждение общих проблем
  • Разработка решений
  • Стандартизация решения

Тем временем в разработке...

React
Компонент
Модуль

Первые внедрения react в продукт

  • Переиспользуемые компоненты
  • Рождение библиотеки контролов
  • Button, Input, Checkbox, SearchBox

Вернемся к КЕДу

Контур.Гайды

Путь развития контролов — соответствие Контур.Гайдам

Как заставить продукт соответствовать гайдам?

  • Самодостаточные компоненты
    • логика и поведение контролов зашиты внутри контрола

 

  • Сложно изменить стили компоненты
    • никто не должен изменять внешний вид контрола

«А как изменить высоту инпута?»

Никак

Первая реакция разработчиков

  • Непонятно как добавлять фичи
  • Неконтроллируемые обновления
  • Своё надёжнее

DatePicker

Спустя некоторое время

  • Все используют библиотеку контролов

  • Она написана на реакте

  • Итог: реакт и библиотека контролов

Выбор технологий для нового проекта

Библиотека контролов

Цели библиотеки

  • разработчики не должны верстать

Цели библиотеки

  • разработчики не должны верстать

  • одинаковые элементы интерфейсов в продуктах

  • одинаковый юзер-экспириенс в продуктах

Минутка собеседования

«Как изменить цвет вот этой кнопки?»

Junior

Легко!

Senior

Никак

Конец собеседования

CSS-модули

  • уникальные класснеймы
  • генерируются на каждый новый релиз

Помогаем джунам

Меньше пропсов в компоненте

  • меньше возможности что-то сделать не так

Помогаем джунам

Добавление новых компонент

  • По требованию КЕДа

 

  • По запросам команд
    • обязательно дальнейшее согласование с КЕДом

Происходит

Релизный цикл

  • пришел
  • выпил кофе
  • покодил
  • поел
  • протестил
  • выпил кофе
  • зарелизил
  • ушел

Тестирование

  • Unit tests: Jest + Enzyme
    • только API компонент
  • Screenshots: Gemini
    • в IE11, Firefix, Chrome

Gemini

Travis CI

Технологии в проекте

  • Упростить разработку извне

Главная цель

Что имеем

  • React
  • Flow
  • TypeScript
  • Jest
  • Storybook
  • Styleguidist

Утилитарные компоненты

  • <RenderContainer /> и <RenderLayer/>
  • <HideBodyVerticalScroll />
  • <ZIndex />
  • <InputLikeText />

Есть минусы

Библиотека компонентов как единная точка отказа

  • неожиданные баги
  • релиз-стоппер (позаботьтесь о версионированиии)

На развитие дизайн системы нужно тратить много денег

  • фул-тайм разработчики
  • фул-тайм дизайнеры
  • фул-тайм тестировщики

Но есть и профит

  • Качественные компоненты
    • которые будут делаться не в продукте

 

  • Быстрое прототипирование интерфейсов
    • верстают проектировщики
    • верстают аналитики

 

  • Сохраняется стиль компании

 

  • Верстка сводится к позиционированию контролов

Где посмотреть на библиотеку?

Спасибо за внимание!

Библиотека контролов

By t1mmaas

Библиотека контролов

  • 247
Loading comments...

More from t1mmaas