Обновляем фронтенд и бэкенд для интернет-магазина

TOPTOP.RU — интернет-магазин женской одежды, команда которого сфокусирована на качественном клиентском сервисе во всех деталях: от планирования съёмок до доставки заказов.

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

Задача

В 2019 году команда TOPTOP.RU подготовила новые макеты для сайта. Он представлял собой монолитное приложение на Ruby on Rails, которое работало медленно. Перезапуск должен был помочь клиентам быстрее находить товары, удобнее работать с каталогом.

От команды разработки требовалось сохранить существующие функции и сделать фронтенд по новым макетам с сохранением части старых страниц. Это значило, что необходимо работать одновременно в двух направлениях:

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

Также команда должна была активно вовлекаться в продуктовые решения, так как клиенту требовалось больше понятной технической информации для принятия решений.

У нас был опыт как поддержки, так и запуска продуктов на Ruby on Rails и разработки бэкенда для SPA, а также мы были готовы вовлекаться в работу над продуктом, как над своим собственным, что понравилось клиенту, и мы приступили к работе.

Решение

За 9 месяцев мы разработали новое SPA на React+TypeScript, а также доработали бэкенд на Ruby on Rails, чтобы новый фронтенд дружил со старым и работа внутренних отделов при этом никак не страдала. После запуска мы продолжили работу над новыми функциями.

Разработка ведётся по гибким методологиям — мы проводим демо, исследуем, оцениваем задачи по трудоёмкости, объясняем потенциальные последствия разных решений, а команда клиента приоритизирует задачи и оценивает результаты. Благодаря открытой коммуникации всегда можно обсудить спорное решение или защитить альтернативный подход.

Разбиваем проект на задачи

Код сайта был слабо документирован, так как предыдущая версия сайта создавалась и поддерживалась разными командами в разное время. Мы погрузились в бизнес-логику приложения, провели реверс-инжиниринг самых проблемных участков и разбили проект на задачи.

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

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

Перерабатываем сложный каталог

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

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

Новый каталог работает быстро, показывая при этом больше товаров одновременно. За счёт использования React удалось реализовать дизайн-идеи, все переходы и пользовательские взаимодействия выглядят плавно и аккуратно.

Запускаем обновлённый сайт

Помимо каталога мы обновили главную, корзину и другие связанные страницы. В январе 2020-го нас ждал релиз сайта.

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

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

Мы быстро откатили все изменения, добавили кэширование там, где его не хватало, добавили процессорной мощности и оперативной памяти на новый сервер и успешно запустили новый сайт.

Сразу после релиза доработали чекаут — в новой версии заказа товара добавилось автоопределение города, быстрый расчёт стоимости доставки.

Ускоряем загрузку картинок

В предыдущей версии сайта страница каталога грузилась долго, что могло приводить к высокому уровню отказов. Это было связано с тем, что сама страница прогружалась быстро, а картинки — долго, сайт «тормозил». Всё потому, что картинки грузились одновременно — по 5–10 картинок для каждого из 24 товаров на странице. Для пользователя это выглядело, как будто он просматривает сайт через медленное интернет-соединение.

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

• сначала грузятся все первые картинки во всех товарах,
• далее загружаются остальные картинки в товаре (которые видно по наведению курсора или по свайпу) по порядку от первого товара к последнему, но только на той части экрана, которую видит пользователь.

Если товар находится вне зоны экрана, который видит пользователь, то для него загрузится только верхняя картинка из «колоды», а остальные — только после скролла к товарам. Для клиентов интернет-магазина это значит более высокую скорость загрузки страницы.

Кроме отложенной загрузки изображений, мы поработали с оптимизацией.

Для начала отрегулировали баланс между размером картинок и их качеством. Это важный параметр для TOPTOP.RU, так как они проводят много крутых фотосессий, следят за тем, чтобы пользователь видел хорошие фотографии товаров. После мы сделали ресайз всех изображений в версиях для 5 типов устройств, сохранив оптимальное качество — загрузка стала гораздо быстрее.

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

Задачи по картинкам были важны не только для пользовательского взаимодействия, но и для SEO. Поисковые системы оценивают скорость загрузки сайта с разных устройств, поэтому наша работа поможет TOPTOP.RU получить высокие позиции в выдаче.

Интеграции в интернет-магазине

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

CRM. Ранее клиент работал с RetailCRM — в ней собиралась вся информация по клиентам, из неё уходили оповещения о заказах. Сейчас в связи с оптимизацией происходит переход на 1С. В TOPTOP.RU уже работает складская система 1С, так что это позволит объединить CRM со складом для ускорения работы.

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

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

Это их уникальный виджет, мы встраиваем его на сайт как нативный элемент. К сожалению, эта галерея товаров проблемно встраивается в React-приложения, в ней плохо работает драггинг и свайп. Тем не менее нам удалось встроить виджет, не нарушив дизайн сайта.

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

Кроме этого, мы подключили все аналитические интеграции, которые работали до этого: Google Analytics, Yandex. Metrika, Facebook Pixel и т. д. Отдельное внимание уделили разметке Open Graph для шеринга товаров в соцсети.

Отбиваем DDOS-атаку

Через 4 месяца, в разгар работы над новыми функциями, мы получили сообщение от команды TOPTOP.RU: «Кажется, нас взломали».

Мошенники устроили DDOS-атаку, чтобы сайт упал и продажи остановились, а за восстановление работоспособности потребовали несколько сотен тысяч рублей.

Чтобы отбить атаку и ничего не платить мошенникам, мы сделали несколько вещей:

• сменили ip-адрес машины, на которой размещался сайт, и спрятали dns-записи,
• перенесли управление данными в Cloudflare,
• проксировали трафик,
• включили «максимальный» режим обороны от Cloudflare на ближайшие 24 часа после атаки (отбили 62 угрозы),
• включили JS-challenge для подозрительных ip.

Кроме технических способов защиты, большую роль сыграл спокойный подход руководства TOPTOP.RU. Им удалось сохранить рациональный подход и выдержать психологическое давление.

Авторизация по номеру телефона.

Ближайшая наша задача — переключение авторизации с e-mail на вход по номеру телефона. Во-первых, это сделает сервис индивидуальнее. Клиенты готовы общаться ближе, задают вопросы в мессенджерах и соцсетях. Имея номер телефона, мы можем сразу отправить информацию о заказе или персональные предложения с помощью смс или в мессенджеры.

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

В-третьих, это безопаснее. Сейчас есть тенденция на отказ от пароля как ключа доступа. Например, с парой «e-mail — пароль», злоумышленники могут воспользоваться платёжными средствами жертвы. А с номером телефона можно будет отказаться от пароля, ведь подобрать его бывает очень легко, а выкрасть — ещё легче. А подобрать код, который только что пришёл человеку в смс, сложнее, особенно без физического доступа к телефону. И дороже по времени и средствам взлома.

Результаты

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

В планах — переработка личного кабинета покупателя и переезд последних страниц из монолитного приложения, чтобы прийти к изначально желаемой схеме «SPA на React + Ruby на бэкенде».

Для нас самих этот проект стал возможностью посмотреть на наш менеджмент разработки. Часто со стороны клиента не бывает технического специалиста и нас привлекают в качестве консультантов. У TOPTOP.RU есть технический директор, отвечающий за внутренние сервисы, но наша экспертиза помогла им в принятии решения по развитию сайта, где-то удалось отвоевать рефакторинг старого кода интернет-магазина на Ruby. А это значит, что нам удалось избежать каких-то технических проблем в будущем.

Если вы ищете команду, которая готова заняться рефакторингом legacy на проекте или работать над вашим e-commerce продуктом так же, как над своим — заполните форму внизу и мы свяжемся с вами так быстро, как сможем.