Одно из наших главных достижений в уходящем году — система мониторинга за используемыми компонентами UI-kit и общими зависимостями. UI-kit — это библиотека компонентов, которые рисуют дизайнеры. Затем они попадают клиенту в браузер. UI-kit работает на React, здесь же собираются интерфейсы. Мы работаем через микрофронты — кусочки, которые в итоге собираются в одну страничку. Каждый из этих кусочков может использовать свою версию UI-kit.

Система следит за всеми микрофронтами, из которых у нас строится интернет-банк. В ней мы видим все использования компонентов UI-kit и общих зависимостей, их версии и частоту использования в сервисах. Эта же система содержит информацию о дате последнего релиза и ссылки на страницы с описаниями сервисов. На них можно найти команду и даже конкретного человека, который отвечает за конкретный микрофронт. Например, на дашборде можно увидеть, что в сервисе ved_export, который выпустил релиз два дня назад, установлена версия 5.1.1, выпущенная ещё в сентябре. За два клика из дашборда мы попадаем на страницу описания сервиса, находим там ответственного фронтенд-разработчика и спрашиваем, почему kit в проекте месячной давности, хотя сервис недавно обновлялся.

В том же дашборде дизайнеры находят для себя информацию об использовании компонентов. Например, стоит задача — изменить в дизайн-системе компонент PageAction. Представим, что хотим удалить иконку. Чтобы это сделать, было бы неплохо собрать кейсы её использования. За два клика в дашборде дизайнер находит микрофронты, в которых используется аксессуар, и ещё за два — людей, с которыми можно это обсудить. Ещё это полезно при удалении устаревших компонентов. Подобные проблемы некоторые решают инструментами вроде связи компонентов в Figma и поиска по всем макетам. У нас они тоже используются, но макеты — это всегда то, «как должно быть», а дашборды — то, «как оно на самом деле». Поэтому править удобнее именно в последних.

Мы пришли к такому решению не сразу. Для маленьких команд с небольшими проектами создание дашборда было бы неоправданно, но Точка сильно выросла к моменту создания UI-kit.

У нас много команд, больше 100 фронтендеров, поэтому учимся следить за проектами и вовремя замечать, когда что-то идёт не так. Для управления пакетами мы используем lerna, документацию ведём в storybook, работаем на React и Typescript. Для стилей используем emotion (css-in-js), тестируем с помощью RTL+jest и testcafe. Testcafe нужен для запуска в реальном браузере, т.к. только он умеет запускать старую версию Safari, которой до сих пор пользуются некоторые клиенты.