Procurement Platform Interface Modernization

Модернізація інтерфейсу платформи закупівель з JSF на React

Платформа HRS eRFP, також відома як платформа HRS для закупівель або сорсингу — це комплексне рішення, розроблене HRS Group для оптимізації процесів корпоративних закупівель готельних послуг.

Hospitality

Cloud

UI/UX Design

Стартова

Наші клієнти

Procurement Platform Interface Modernization

Стартова

Наші клієнти

Procurement Platform Interface Modernization

Профіль клієнта

Ця платформа забезпечує ефективну взаємодію між корпоративними клієнтами та постачальниками готельних послуг, спрощуючи такі завдання, як подання пропозицій, управління переговорами та вибір відповідного житла.

Основні виклики

Клієнтський додаток було побудовано за допомогою застарілого фреймворку JSF, що призвело до:

• Обмежена гнучкість у дизайні UI/UX

• Проблем з продуктивністю

• Обмежена гнучкість у дизайні UI/UX

• Проблем з продуктивністю

• Обмежена гнучкість у дизайні UI/UX

• Проблем з продуктивністю

• Низька зручність підтримки

• Складність впровадження сучасних функцій

• Низька зручність підтримки

• Складність впровадження сучасних функцій

Проблеми з продуктивністю

Проблеми відображення рендеру даних:

• Інтерфейс показував велику сітку з кількома стовпцями та складними даними

• Кожен рядок містив численні дата-поінти, обчислення та іконки

Проблеми відображення рендеру даних:

• Інтерфейс показував велику сітку з кількома стовпцями та складними даними

• Кожен рядок містив численні дата-поінти, обчислення та іконки

Проблеми відображення рендеру даних:

• Інтерфейс показував велику сітку з кількома стовпцями та складними даними

• Кожен рядок містив численні дата-поінти, обчислення та іконки

UI/UX та обмеження

Інформаційне перевантаження

• Безліч метрик, відсотків і значень, скупчених в одинарних рядках

• Дрібні, важкі для читання іконки та цифри

• Складна система спливаючих підказок, яка перекриває важливу інформацію

Погана ієрархія інформації

• Усі точки даних відображаються з однаковою візуальною вагою

• Критично важливі бізнес-метрики змішуються з другорядною інформацією

• Важко швидко сканувати та знаходити важливу інформацію

• Індикатори стану (зелені/червоні крапки) дрібні, і їх легко пропустити

Інформаційне перевантаження

• Безліч метрик, відсотків і значень, скупчених в одинарних рядках

• Дрібні, важкі для читання іконки та цифри

• Складна система спливаючих підказок, яка перекриває важливу інформацію

Погана ієрархія інформації

• Усі точки даних відображаються з однаковою візуальною вагою

• Критично важливі бізнес-метрики змішуються з другорядною інформацією

• Важко швидко сканувати та знаходити важливу інформацію

• Індикатори стану (зелені/червоні крапки) дрібні, і їх легко пропустити

Інформаційне перевантаження

• Безліч метрик, відсотків і значень, скупчених в одинарних рядках

• Дрібні, важкі для читання іконки та цифри

• Складна система спливаючих підказок, яка перекриває важливу інформацію

Погана ієрархія інформації

• Усі точки даних відображаються з однаковою візуальною вагою

• Критично важливі бізнес-метрики змішуються з другорядною інформацією

• Важко швидко сканувати та знаходити важливу інформацію

• Індикатори стану (зелені/червоні крапки) дрібні, і їх легко пропустити

Технічні обмеження

Вплив монолітної архітектури

• Кожне оновлення даних, вимагало повного оновлення рядка або таблиці

• Синхронізація між різними точками даних була млявою

• Зміни у фільтрах або сортуванні викликали б важкі запити до сервера в США

Проблеми з керуванням станом

• Складний стан із багатьма взаємозалежними значеннями

• Багато обчислюваних полів, які потребували постійного оновлення

• Проблеми з синхронізацією між різними розділами таблиць

Продуктивність браузера

• Важка маніпуляція з DOM з багатьма елементами

• Складні обчислення CSS для макета та стилізації

• Ресурсомісткий рендеринг великих таблиць даних

• Погана обробка оновлень у реальному часі

Вплив монолітної архітектури

• Кожне оновлення даних, вимагало повного оновлення рядка або таблиці

• Синхронізація між різними точками даних була млявою

• Зміни у фільтрах або сортуванні викликали б важкі запити до сервера в США

Проблеми з керуванням станом

• Складний стан із багатьма взаємозалежними значеннями

• Багато обчислюваних полів, які потребували постійного оновлення

• Проблеми з синхронізацією між різними розділами таблиць

Продуктивність браузера

• Важка маніпуляція з DOM з багатьма елементами

• Складні обчислення CSS для макета та стилізації

• Ресурсомісткий рендеринг великих таблиць даних

• Погана обробка оновлень у реальному часі

Вплив монолітної архітектури

• Кожне оновлення даних, вимагало повного оновлення рядка або таблиці

• Синхронізація між різними точками даних була млявою

• Зміни у фільтрах або сортуванні викликали б важкі запити до сервера в США

Проблеми з керуванням станом

• Складний стан із багатьма взаємозалежними значеннями

• Багато обчислюваних полів, які потребували постійного оновлення

• Проблеми з синхронізацією між різними розділами таблиць

Продуктивність браузера

• Важка маніпуляція з DOM з багатьма елементами

• Складні обчислення CSS для макета та стилізації

• Ресурсомісткий рендеринг великих таблиць даних

• Погана обробка оновлень у реальному часі

Рішення для модернізації фронтенду

Основний технологічний стек було мігровано з JSF на React 17 (згодом оновлено до React 18), а також інтегровано Redux для керування станом, Redux-Saga для обробки побічних ефектів та Next.js для можливостей серверного рендерингу. Покращення архітектури:

Покращення архітектури:

• Розроблено бібліотеку компонентів багаторазового використання

• Впроваджено мікрофронтенд-архітектуру для поступової міграції

• Створено систему прапорців функцій для контрольованого розгортання

• Оптимізація продуктивності

• Впроваджено розділення коду

• Додано ліниве завантаження для покращення початкового завантаження сторінок

Покращення архітектури:

• Розроблено бібліотеку компонентів багаторазового використання

• Впроваджено мікрофронтенд-архітектуру для поступової міграції

• Створено систему прапорців функцій для контрольованого розгортання

• Оптимізація продуктивності

• Впроваджено розділення коду

• Додано ліниве завантаження для покращення початкового завантаження сторінок

• Використано React.memo для запамʼятовування компонентів

• Застосовано useMemo для оптимізації обчислень

• Оптимізовано первинний рендеринг даних: досягнуто часу завантаження ~80 мс на рядок

• Покращено SEO

• Впроваджено серверний рендеринг для критично важливих сторінок

• Впроваджено динамічні метатеги

• Інтегровані структуровані дані

• Використано React.memo для запамʼятовування компонентів

• Застосовано useMemo для оптимізації обчислень

• Оптимізовано первинний рендеринг даних: досягнуто часу завантаження ~80 мс на рядок

• Покращено SEO

• Впроваджено серверний рендеринг для критично важливих сторінок

• Впроваджено динамічні метатеги

• Інтегровані структуровані дані

Деталі технічної реалізації

Управління станами

Рішення включало централізоване сховище Redux із використанням проміжного програмного забезпечення Saga для складних операцій та оптимізованими оновленнями стану для забезпечення високої продуктивності.

Архітектура компонентів

Фронтенд-архітектура базувалася на принципах атомарного дизайну, використовуючи спільну бібліотеку компонентів і модульну систему стилізації.

Завантаження оптимізацій

Продуктивність була оптимізована за допомогою динамічного імпорту, розділення коду на основі маршрутів та стратегій попереднього завантаження ресурсів.

Вимірювані результати

Оновлення платформи забезпечило суттєве покращення як продуктивності, так і ефективності розробки. Ці результати демонструють значний вплив наших стратегічних інвестицій у технології.

Покращення продуктивності

• Зменшення часу початкового завантаження сторінки на 50%

• Успішна обробка збільшеного на 300% обсягу даних

• Оптимізована продуктивність рендерингу (80 мс на рядок)

Ефективність розробки

• На 40% швидший вихід на ринок (time-to-market) для нових функцій

• Скорочення часу інтеграції функцій на 50%

• Покращена зручність супроводу коду завдяки повторному використанню компонентів

Ці зусилля з модернізації дозволили успішно трансформувати інтерфейс користувача, зберігши при цьому стабільність системи та покращивши загальні показники продуктивності.

Покращення продуктивності

• Зменшення часу початкового завантаження сторінки на 50%

• Успішна обробка збільшеного на 300% обсягу даних

• Оптимізована продуктивність рендерингу (80 мс на рядок)

Ефективність розробки

• На 40% швидший вихід на ринок (time-to-market) для нових функцій

• Скорочення часу інтеграції функцій на 50%

• Покращена зручність супроводу коду завдяки повторному використанню компонентів

Покращення продуктивності

• Зменшення часу початкового завантаження сторінки на 50%

• Успішна обробка збільшеного на 300% обсягу даних

• Оптимізована продуктивність рендерингу (80 мс на рядок)