Библиотека контролов
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 />
Есть минусы
Библиотека компонентов как единная точка отказа
- неожиданные баги
- релиз-стоппер (позаботьтесь о версионированиии)
На развитие дизайн системы нужно тратить много денег
- фул-тайм разработчики
- фул-тайм дизайнеры
- фул-тайм тестировщики
Но есть и профит
- Качественные компоненты
- которые будут делаться не в продукте
- Быстрое прототипирование интерфейсов
- верстают проектировщики
- верстают аналитики
- Сохраняется стиль компании
- Верстка сводится к позиционированию контролов