Масштабное обновление интернет-магазина «Аквилон»

«Аквилон» — интернет-супермаркет строительных материалов, один из крупных игроков на рынке Казахстана.

Проблемы

Фреймворк Nuxt 2 начал устаревать

Веб-технологии постоянно развиваются: выходят новые версии библиотек, которые удобней для программистов и работают быстрее и стабильней.

Наш любимый фронтенд-фреймворк для интернет-магазинов — Nuxt на основе Vue. И когда мы только начинали разработку интернет-магазина «Аквилон», оптимальным решением было делать проект на второй версии — Nuxt 2.

Однако, разработчики Nuxt не сидят на месте, а постоянно совершенствуют свои продукты. Со временем вышла новая версия — Nuxt 3 (а потом ещё и четвёртая, но к этому мы ещё вернёмся).

Мы конечно сразу стали пробовать обновлённую версию на своих новых проектах и убедились, в том, что она ускоряет разработку и повышает производительность сайтов.

Увы, обновление большого сложного интернет-магазина это не то, что можно сделать за вечер. Поэтому, как и принято в таких случаях, мы долгое время оставались на старой версии Nuxt 2. К тому же, обновление версий означает также смену архитектуры Vue.js с Options API на Composition API.

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

Накопление технического долга

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

Также, иногда в команде меняются разработчики. И один разработчик пишет код определённым образом, другой — чуть иначе. И в итоге код проекта проекта начинает терять нужную консистентность.

В результате на проекте копится всё больше legacy-кода — это код, который нуждается в переписывании.

Нехватка строгой архитектуры на фронтенде

В добавок отметим, что только недавно появились и стали стандартом определенные архитектурные практики во фронтенде. В частности, это FSD — Feature-Sliced Design.

FSD это подход, при котором код фронтенда группируется по смыслу (фичи, сущности, виджеты, страницы). И в результате получаются изолированные части приложения, с которыми удобно работать.

Мы стали успешно применять FSD на своих новых проектах, и конечно же хотели внедрить FSD также на «Аквилоне».

Решение — переписать фронтенд

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

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

Особенности процесса

Команда и процессы

Такой проект нуждается в большой команде:

• Старший дизайнер — главные страницы, концепция, анализ данных.
• Младший дизайнер — адаптивные макеты, вторичные функции.
• Ведущий фронтенд-разработчик — архитектор, сложные задачи.
• 2 мидл-разработчика — работа над основной массой задач.
• Бэкенд-тимлид — API, обновление Symfony, автотесты.
• QA-специалист — чеклисты, тестирование, интеграционные тесты.
• Менеджер — координация, сроки, общение с клиентом.

Сразу улучшали и упрощали сайт

В процессе переработки кода мы решили сразу улучшать страницы сайта по многим моментам. Чтобы не было так, что мы несём в новый код старую неактуальную функциональность.

В процессе такого улучшения мы опирались на конкретные ориентиры:

• SEO-требования — чтобы поисковики хорошо индексировали сайт.
• Лучшие e-commerce практики — что сейчас работает в отрасли.
• Данные о поведении пользователей — на основе метрик, которые мы собирали с момента запуска сайта.

Особенно важно для нас было оптимизировать UI/UX ключевого пользовательского сценария. В интернет-магазине это, конечно же, путь пользователя от страницы товара в корзину и далее в оформление заказа.

В процессе мы смело избавлялись от ненужного. Например, раньше бонусную карту нужно было активировать вручную. Это был лишний шаг, от которого мы избавились и сделали автоматическую активацию.

Удобное тестирование

Помогал и отлаженный DevOps-процесс: у каждого специалиста из команды проекта была своя тестовая площадка на сервере. Поэтому можно было в любой момент протестировать собственные задачи или посмотреть задачи коллег. И всё это в среде, максимально близкой к продакшену.

Рефакторинг запросов

Один из аспектов улучшения кода — рефакторинг запросов. В любом активно развивающемся проекте со временем копятся неоптимальные решения, которые потом в сумме замедляют работу сайта. В случае с запросами потребовались следующие улучшения:

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

Неожиданный апгрейд до Nuxt 4

В разгар работы вышла новая версия фреймворка — Nuxt 4. Мы стали думать, стоит ли рискнуть и сразу обновиться до неё. Ведь свежая версия пока не обкатана, поэтому может принести новые баги или несовместимости для каких-то модулей.

В итоге мы решились на обновление до Nuxt 4, и как оказалось — не зря. Обновление прошло гладко, и последняя версия принесла еще больше улучшений.

FSD немного замедлил нас в начале

Введение любой строгой архитектуры на проекте, в том числе FSD, поначалу замедляет разработку. Потому что приходится думать: «А к какому слою относится этот компонент? Куда его лучше положить? Как организовать зависимости?» и т. д. Однако, это нормальная часть процесса, и всё это окупается в дальнейшем.

Результат

В итоге все работы по переписыванию проекта заняли у нас 10 месяцев: с января по ноябрь 2025 года.

Преимущества от перехода с Nuxt 2 на Nuxt 4:

• Повышение производительности и как следствие, ускорение работы сайта.
• Повышенная безопасность и получение всех последних обновлений.
• Улучшенный DX (Developer Experience) — т. е. эффективность работы программистов.

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

• Улучшение производительности сайта.
• Уменьшено время выполнения задач.
• Избавились от технического долга на проекте.

Преимущества от перехода на FSD:

• Понятная структура кода. Новому разработчику проще вникнуть в проект.
• Задачи выполняются быстрее и с меньшим количеством ошибок.

Технологии, которые используются на проекте:

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

В итоге можно сделать вывод, что обновление проекта стоило того и прошло успешно. Выросла как скорость работы сайта, так и эффективность разработки задач. Теперь интернет-магазин «Аквилон» готов к дальнейшему развитию и новым вершинам.

Оценить обновлённую версию можно по ссылке: