~2~ Обзор проекта
~p~ Онлайн-платформа объединяет поиск туров и отелей, подбор авиабилетов, дополнительные услуги и оплату поездок. В составе команды заказчика занимаемся доработкой продукта, чтобы обновить его интерфейс и техническую основу, сохранив работу действующего сервиса.
~2~ Задача
~p~ Платформа состояла из нескольких связанных проектов. Одинаковые элементы в них выглядели и работали по-разному, а их доработка требовала повторных изменений в разных частях приложения. Монолитная архитектура фронтенда усложняла развитие: изменения одного компонента могли затронуть другие.
~p~ При этом полностью переписать приложение было нельзя — пользователи продолжали искать поездки и оформлять бронирования. Требовалось обновить интерфейсы и архитектуру постепенно, не прерывая работу сервиса.
~p~ Онлайн-платформа объединяет поиск туров и отелей, подбор авиабилетов, дополнительные услуги и оплату поездок. В составе команды заказчика занимаемся доработкой продукта, чтобы обновить его интерфейс и техническую основу, сохранив работу действующего сервиса.
~2~ Задача
~p~ Платформа состояла из нескольких связанных проектов. Одинаковые элементы в них выглядели и работали по-разному, а их доработка требовала повторных изменений в разных частях приложения. Монолитная архитектура фронтенда усложняла развитие: изменения одного компонента могли затронуть другие.
~p~ При этом полностью переписать приложение было нельзя — пользователи продолжали искать поездки и оформлять бронирования. Требовалось обновить интерфейсы и архитектуру постепенно, не прерывая работу сервиса.
~2~ Решение и реализация
~p~ Единая система интерфейсов
~p~ Команда разработала UI-kit и систему дизайн-токенов с общими правилами оформления. Повторяющиеся элементы — навигацию, поиск, кнопки и карточки — объединили в переиспользуемые компоненты. На их основе переработали главную страницу, поисковую строку и карту отелей, добавив фильтры, просмотр карточек и избранное.
~p~ Модульная архитектура фронтенда
~p~ Общую логику разделили на независимые модули с определёнными зонами ответственности. Это уменьшило взаимное влияние компонентов и упростило доработку отдельных функций.
~p~ Постепенная миграция на новый стек
~p~ Новые и переработанные части платформы перевели на Vue 3 и Nuxt 3, сохранив работу существующих компонентов на Vue 2. Архитектуру адаптировали для совместной работы двух версий приложения, поэтому переход не потребовал останавливать бронирования.
~p~ Оптимизация производительности
~p~ Команда ускорила загрузку страниц и работу поисковой выдачи, а также внедрила SEO-разметку для корректной индексации страниц платформы.
~p~ Единая система интерфейсов
~p~ Команда разработала UI-kit и систему дизайн-токенов с общими правилами оформления. Повторяющиеся элементы — навигацию, поиск, кнопки и карточки — объединили в переиспользуемые компоненты. На их основе переработали главную страницу, поисковую строку и карту отелей, добавив фильтры, просмотр карточек и избранное.
~p~ Модульная архитектура фронтенда
~p~ Общую логику разделили на независимые модули с определёнными зонами ответственности. Это уменьшило взаимное влияние компонентов и упростило доработку отдельных функций.
~p~ Постепенная миграция на новый стек
~p~ Новые и переработанные части платформы перевели на Vue 3 и Nuxt 3, сохранив работу существующих компонентов на Vue 2. Архитектуру адаптировали для совместной работы двух версий приложения, поэтому переход не потребовал останавливать бронирования.
~p~ Оптимизация производительности
~p~ Команда ускорила загрузку страниц и работу поисковой выдачи, а также внедрила SEO-разметку для корректной индексации страниц платформы.
~2~ Результат
~p~ Конверсия ключевых сценариев бронирования выросла на 50% — с 0,2% до 0,3% после переработки главной страницы, поиска и корзины.
~p~ Среднее время загрузки страниц сократилось на 20–30%, поисковая выдача стала быстрее на 20–30%, показатели Lighthouse выросли на 15–25 баллов.
~p~ Заказчик получил обновлённую платформу, которую можно развивать без остановки продаж. Переиспользуемые компоненты сократили повторную работу над интерфейсами, а модульная архитектура упростила дальнейшее развитие продукта.
~p~ Конверсия ключевых сценариев бронирования выросла на 50% — с 0,2% до 0,3% после переработки главной страницы, поиска и корзины.
~p~ Среднее время загрузки страниц сократилось на 20–30%, поисковая выдача стала быстрее на 20–30%, показатели Lighthouse выросли на 15–25 баллов.
~p~ Заказчик получил обновлённую платформу, которую можно развивать без остановки продаж. Переиспользуемые компоненты сократили повторную работу над интерфейсами, а модульная архитектура упростила дальнейшее развитие продукта.
Хотите реализовать похожий проект? Расскажите о своей задаче, и мы обсудим возможное решение