С началом активного импортозамещения несколько лет назад сложно было поверить, что это может быть красиво, качественно и современно.
Западные системы создавались и развивались на протяжении многих лет, а российское программное обеспечение создавалось с нуля, без такого большого опыта (но, с другой стороны, без наследия).
Меня зовут Андрей Комаров, я фронтенд-разработчик в Консалтинговой группе компаний «КОРУС».
Наша команда уже несколько лет успешно внедряет систему отчетности для одного из крупнейших транспортных холдингов нашей страны на базе российского программного обеспечения LuxMS. В этой статье я расскажу вам об опыте нашего проекта.
Немного предыстории
Наш проект — это система отчетности с ежедневным обновлением данных, созданная на основе импортозамещающей технологии LuхMS BI. Система предназначена для разных групп пользователей, но ориентирована на высшее руководство заказчика.Географически он охватывает почти всю Россию.
Полностью готовая и работающая экосистема LuхMS BI позволила нам провести полный цикл разработки системы отчетности: от извлечения данных до их отображения в различных формах визуализации.
В отличие от аналогов, российская платформа позволила быстро настроить визуальную часть под требования конкретного заказчика: это достигается за счет фронтенд-разработки в существующих визуальных сущностях BI-платформы – «дешах» (группах визуализаций).
.
Наследие разработки: дублирование, громоздкий импорт, устаревший API.
Конечно, сейчас мы стремимся использовать только передовые технологии – но так было не всегда.Изначально визуальная часть делалась на jQuery с использованием фреймов в одном пакете, что порождало довольно много проблем.
Дубликаты файлов, отсутствие «чистого» кода, большой размер файла для импорта, устаревший API и так далее.
В целом было ясно, что jQuery не подходит для сложных пользовательских интерфейсов.
Мы начали обсуждать рефакторинг.
Что для нас было важно:
- Скорость работы.
Мы уделили внимание загрузке данных в приложение и времени отклика системы.
- Повторное использование компонентов.
Это сокращает время разработки.
- Огромное сообщество.
Это означает, что есть кто-то, к кому вы можете обратиться, чтобы решить проблему.
- Инструменты браузера, позволяющие выявлять ошибки и ошибки.
- Легкий старт. Благодаря огромному количеству структурированной информации изучить React легко.
Он полностью соответствовал всем нашим критериям.
React: быстрее, удобнее, мощнее
Для начала мы определили общие части нашего SPA. Мы записали общие компоненты в отдельную среду верхнего уровня, которую впоследствии повторно использовали.Мы постарались разбить каждую визуализацию на множество мелких частей.
Например, инкремент, строка, столбец — это отдельные компоненты, имеющие ряд внутренних настроек.
При старом подходе это было невозможно, так как код становился нечитаемым.
Стоит отметить, что в нашем проекте мы используем хуки, а не классовый подход. Использовать функциональные компоненты проще, чем использовать компонент на основе классов.
Нет необходимости создавать экземпляр класса и вызывать render() — просто вызовите нужную функцию.
Хуки также упрощают работу с методами жизненного цикла компонентов.
При их использовании в компонентах на основе классов приходится работать отдельно с методами компонентDidMount(), компонентDidUpdate(), компонентWillUnmount(), а при использовании хуков можно просто использовать useEffect. В свою очередь, это позволило еще больше упростить код и оптимизировать SPA. 
Мы также представили Recharts как наиболее подходящую библиотеку для создания классических диаграмм.
Одним из основных преимуществ этой библиотеки является возможность записи собственных компонентов в существующие компоненты высокого порядка.
Это позволило настроить визуализацию, которую предлагает Recharts, именно так, как того требует заказчик.
Полный обзор проекта и рефакторинг того стоили.
В целом использование React позволило нам отойти от концепции фреймов на одной странице.
Скорость работы BI-приложения также увеличилась за счет Virtual DOM, который позволяет странице моментально получать ответы от сервера и отображать обновления.
Повторно используя компоненты, мы смогли значительно сократить время разработки новых форм визуализации.
А нисходящий поток данных значительно упрощал отладку ошибок.
Мы также добавили TypeScript для статической типизации и React-Redux для разделения логики и представления.
Мы не побоялись провести масштабную проверку всего проекта и потратить время на рефакторинг.
Хотя в этой статье речь идет исключительно о фронтенд-части, мы также уделили внимание и бэкенду: переосмыслили недостатки, выявили особенности текущей реализации и отталкивались от потребностей проекта.
Конечно, нам пришлось изучить некоторые инструменты — например Redux-Saga, где у нас не было опыта и знаний.
Благодаря масштабному рефакторингу мы сделали наш SPA отзывчивым и простым, и время определенно стоило затраченных усилий.
На текущем этапе разработки мы имеем гораздо более удобный и современный продукт. Главный совет: не бойтесь рефакторить.
Это болезненный, но определенно стоящий опыт. Теги: #Анализ и проектирование систем #аналитика #Тестирование ИТ-систем #Визуализация данных #наука о данных #анализ данных #импортозамещение #анализ данных #бизнес-аналитика
