Веб-кабинет диспетчера региональной компании грузоперевозок переехал с AngularJS на Angular: заявки, рейсы, водители и статусы работают как раньше, а отчёты, жившие в старом модуле Flex, теперь строит Chart.js. Переезд провёл Евгений Росляков. Сайты и веб-приложения он делает с 2016 года, живёт в Москве, но с заказчиками работает и удалённо. Он самозанятый, заключает договор, а для юридических лиц оформляет закрывающие документы.
Кабинетом компания пользовалась лет десять. Писали его на AngularJS, а поддержка этого фреймворка закончилась. Библиотеки не обновить, любая правка грозила сломать соседний экран, и найти человека, который согласится в этом копаться, становилось всё труднее.
С отчётами было ещё хуже. Они жили в отдельном модуле на Apache Flex: это Flash-приложение, и современные браузеры его не открывают. Чтобы посмотреть загрузку машин за месяц, диспетчеры включали старый компьютер в углу офиса. Держали его только ради одного модуля.
По сути, компании нужно было получить свой кабинет заново: создание сайта с теми же экранами, но на живой технологии. При этом заявки идут каждый день, и «закрыться на ремонт» диспетчерская не могла.
Переписывать всё сразу я не стал. Новый кабинет на Angular поставил рядом со старым, а экраны переезжали по одному: сначала список водителей, потом справочник машин, затем заявки и рейсы. Вход общий, так что диспетчер не замечал границы: пункт меню вёл то на старый экран, то на новый. Каждый перенесённый экран две недели работал параллельно со старым, чтобы сотрудники могли сверить цифры.
Интерфейс собран на Angular Material. Таблицы заявок с сортировкой и постраничной выдачей, фильтры по дате, водителю и статусу, диалоги для смены статуса рейса и назначения машины. Диспетчеры сидят в кабинете по восемь часов, поэтому плотные строки и работа с клавиатуры оказались важнее красоты: Tab ходит по полям, Enter подтверждает диалог.
Отчёты по рейсам — отдельная история. Из исходников модуля Flex я выписал, что он считал: загрузку машин по дням, простои, пробег порожняком, рейсы по водителям. Формулы перенёс в новый код, а графики теперь рисует Chart.js. Их можно сохранить картинкой и приложить к письму бухгалтерии. Тяжёлые расчёты вынес на сервер, чтобы страница не зависала на длинных периодах.
Когда переехал последний маршрут, код на AngularJS отключили. Несколько отчётов, которыми давно никто не пользовался, переносить не стали: диспетчеры сами сказали, что они не нужны.
Диспетчеры теперь работают в одном кабинете и не переключаются между старым и новым. Компьютер в углу офиса выключен: отчёты по рейсам и загрузке машин открываются в любом браузере, в том числе на планшете у руководителя. Картинку с графиком можно отправить бухгалтерии, не делая скриншот с чужого экрана.
Для разработчика изменилось главное: фреймворк живой, обновления выходят, а компоненты одинаковые во всех разделах. Новый экран собирается из знакомых деталей, а не вклеивается в чужой код. Это пригодится дальше: компания думает о мобильной версии для водителей, и теперь на чём её строить, понятно.
Есть и честное ограничение. Цифры в новых отчётах первые недели сверяли со старыми вручную, и это занимало время диспетчеров. Старые данные за прошлые годы остались в базе, но отчёты по ним считаются уже по новым формулам, поэтому в редких случаях разница в округлении видна. Для работы это не критично, но о ней лучше знать заранее.
Если у вас рабочая система застряла на устаревшей технологии, пришлите мне сообщение на freelance.ru: напишите, на чём она сделана и что в ней нельзя останавливать. Отвечу, можно ли переезжать по частям.
