Почему SPA важен для e-commerce

SPA-архитектура всё чаще используется в e-commerce-проектах, где важна скорость работы каталога и сценариев покупки. В отличие от классических сайтов, где страницы формируются на сервере и перезагружаются при каждом переходе, SPA-витрина загружает интерфейс один раз и дальше обновляет только данные.

Ускоряется работа каталога и фильтров

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

Можно строить сложные пользовательские сценарии

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

Снижается время реакции интерфейса

Благодаря тому, что большая часть логики перенесена на клиентскую сторону, пользовательский опыт становится более бесшовным, элементы интерфейса быстрее реагируют на действия пользователя. Это напрямую влияет на ключевые метрики e-com — глубину просмотра, время на сайте и конверсию в заказ.

SPA-архитектура дает преимущества в поддержке и развитии крупных проектов  разработчикам. Фронтенд и бэкенд разрабатываются как отдельные приложения с индивидуальным покрытием тестами. 

Это создает новые возможности:

• более гибко развивать интерфейсы интернет-магазина;
• использовать одну серверную логику для сайта, мобильных приложений и других витрин;
• эффективнее выстроить процессы разработки и развития программной системы.

Компонентная SPA-архитектура

За основу SPA мы взяли компонентную базу фронтенда платформы Headless Evolution. Компоненты Headless Evolution позволяют реализовать кастомный дизайн, в них уже реализована логика E-commerce приложения и поддерживается API, описанный в Swagger. Уже описанный протокол API стал отправной точкой для взаимодействия команд бэкенда и фронтенда.

Особенности SPA-приложения Headless Evolution

Headless Evolution Web Starter Kit — готовое SPA-приложение с модульной архитектурой, закрывающее пользовательские сценарии в e-commerce.

Технический стек

• React.JS
• Redux
• Sass;
• сетка на CSS Grid
• аутентификация с использованием JWT-токенов

В приложении содержатся готовая бизнес-логика и слой интеграции с бэкендом через REST API. Оптимизирована производительность: кэширование данных с использованием service worker, минимальное количество сторонних библиотек и сервисов, предзагрузка критических данных.

SEO-оптимизации фронтенда послужат серверный рендеринг на базе next.js, минимальный размер DOM-документа и прочие улучшения.

Параллельная разработка frontend и backend

Работа велась совместно с командой бэкенда Simple Wine.

Работа велась совместно с командой бэкенда Simple Wine. На старте проекта наши дизайнеры подготовили UI-kit, заодно систематизировав дизайн сайта. На базе UI-kit разработчики подготовили компонентную систему интерфейса.

Фронтенд и методы бэкенда разрабатывались параллельно. В качестве отправной точки протокола взаимодействия использовался универсальный API Headless Evolution. По запросу аналитиков бэкенда платформы выполнялась доработка протокола, и вслед за этим модифицировались компоненты фронтенда.

SPA сайт внедрялся без изменений UX/UI.  Замена сайта осуществлялась частями с тщательным тестированием позитивных и негативных сценариев. Дополнительно проводились нагрузочные тесты.

Переход на Headless E-commerce архитектуру

Команда Simple Wine получила возможность развивать интернет-магазин в современной SPA и Headless архитектуре.

Совместно с командой заказчика мы перенесли фронтенд интернет-магазина на SPA-архитектуру, изменив архитектурный подход к разработке сайта. Клиент получил возможность развивать интернет-магазин в Headless E-commerce архитектуре. В настоящий момент команда Simple Wine продолжает развитие электронной коммерции на обновленной платформе собственными силами.