Создали собственную дизайн-систему, а не мучились с неподходящей нам Material UI

— Меня зовут Олег Рогов, я руковожу отделом Frontend-разработки на НЛМК и расскажу вам про мою команду.

Что делает команда?

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

Сколько сейчас человек в команде?

— 70 + человек. В основном это фронтендеры, прикрепленные к функциональным направлениям либо входящие в продуктовые команды. То есть вы выбираете направление, в котором работаете (например, это конкретный участок коксохима), и развиваетесь в нем.

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

Для каких устройств нужны фронты?

— Это в основном широкоформатные экраны, поэтому в первую очередь мы пишем приложение под них. Экран такой, около которого сидит инженер (часто — в защитных очках) и смотрит на него при не самом хорошем освещении.

О реализации чего конкретно идёт речь?

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

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

Есть примеры интерфейсов?

— Наш типичный фронтенд — оператор смотрит на схему техпроцесса:

Таблицы:

Графики:

Мнемосхемы процессов:

Какой стек?

• Внутренний реферер для проектов НЛМК — на React с TypeScript, свой линтер, своя конфигурация сборки.
• Опенсорсовая дизайн-система — с готовыми компонентами (таблицы, графики, календари).
• Легаси-системы — на Vue и Angular.
• Актуальные NPM-библиотеки.

Что с деплоем?

— У нас хорошая процедура деплоя с регрессионными тестами, апрувом дизайнера (что мы сделали то, что он рисовал), апрувом разработчиков и сдачей кода в эксплуатацию с документацией.

Есть дизайн-система или репозиторий?

— Да. Компоненты лежат в дизайн-системе, то есть если вам нужны календарь, таблица, график или вьюха на камеру в цеху, то можно взять готовый компонент из дизайн-системы. Если это не соответствует вашим задачам полностью или если нет нужного компонента, то можно контрибьютить в дизайн-систему. Сама дизайн-система (базовая) — в опенсорсе, кстати.

Как выглядит обычный рабочий день?

— Мы поддерживаем баланс между встречами и самостоятельной работой.