В этой статье я в общих чертах описываю свой первый самостоятельный коммерческий проект. От того почему он потребовался до того что с ним сейчас. Это первая статья из серии, посвященной каталогу продукции.
Предыстория
Предыдущая версия приложения для отрисовки каталога была создана на React. Приложение в целом работало хорошо, но очень плохо индексировалось поисковыми системами, так как в ответ на любой get запрос робота отдавало примерно одно и то же.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="root"></div>
</body>
</html>
Основным инициатором новой версии приложения был наш SEO-ник, несколько месяцев бивший тревогу по поводу падения посещаемости сайта, большей частью которого является каталог.
Еще один минус приложения на React заключался в его архитектуре. Приложение работало одновременно на 4 сайтах и для каждого сайта разработчик создавал отдельные шаблоны, внутри которых приходилось писать бизнес логику. Таким образом любое изменение, например в структуре ответа от API, создавало необходимость лезть в несколько похожих друг на друга, но немного разных компонентов и править каждый в отдельности. Что отнимало необоснованно много времени.
Проектирование и архитектура
В процессе проектирования и разработки основной упор был поставлен на нескольких вещах:
- SSR везде. Для того, что бы вернуть и приумножить позиции сайта в поисковых системах нужно было в ответ на каждый get запрос робота возвращать html наполненный контентом. Отдельным небольшим, но важным пунктом, была необходимость корректно отдавать статус 404 на несуществующих страницах.
- Максимальное быстродействие сервиса. Это требования я в целом поставил бы во главу угла любого современного приложения. Что бы пользоваться приложением было комфортно оно должно максимально быстро отвечать на каждый пользовательский запрос.
- Гибкость и масштабируемость. В компании есть несколько брендов под которыми производится продукция. Бренды имеют слегка разную айдентику, отличаются фирменные цвета и логотипы. API, отдающий информацию о каталоге, принимает настройки в headers в зависимости от которых возвращает информацию для конкретного каталога. Кроме того информацию необходимо отдавать на разных языках.
Глядя на опыт коллег в разработке API и на предыдущую реализацию каталога, я решил действовать схожим образом и разрабатывать одно приложение, которое в зависимости от получаемых настроек отображало бы разный контент. У этого подхода есть плюсы и минусы.
Плюсы:
- Любое изменение, которое я накатываю на приложение распространяется сразу на все версии каталога. Практически нет необходимости отдельно поддерживать конкретные версии каталога.
- Везде, где это возможно, в приложении идентичная верстка. Разница в отображении шаблонов достигается путем использования css модификаторов в именах классов и использовании css переменных с цветами и абстрактными названиями для них.
Минусы:
- В процессе разработки необходимо держать в голове, что у приложения множество вариантов отрисовки контента.
- Время от времени возникают сложности, связанные с тем, что на ранних этапах проектирования приложения учесть все факторы невозможно. Так, в процессе внедрения азербайджанского языка мы выяснили что выбранный шрифт не поддерживает начертание на азербайджанском.
Архитектура приложения близка к Feature-Sliced Design. Встречаются и элементы Atomic design. Например кастомный компонент Picture о котором обязательно будет отдельная статья.
Технологический стек приложения.
Приложение написано на NEXT 13.4.19. Я стараюсь не раздувать зависимости и решать тривиальные задачи нативными методами. Из глобального есть:
- i18next который отвечает за языки внутри интерфейса,
- axios используется для доступа общения с бекендом. Хотя сейчас я бы не стал использовать его.
- swiper используется для отображения слайдеров. Я планирую написать отдельную статью о swiper и о том как мы с бекендером делали условно бесконечный слайдер с совместно применяемыми изделиями.
- В devDependencies установлен gulp для того, что бы собирать svg спрайт.
Есть еще несколько небольших пакетов, js-cookie для работы с куки на фронте, qrcode.react для генерации QR-кодов со ссылками на карточки товаров, classnames для удобной установки классов в верстке.
Промежуточные результаты:
Приложение в продакшене уже почти два года. В данный момент поддерживает 4 шаблона отображения и 4 языка. Посещаемость всех сайтов с приложением превышает 700 тыс. визитов в месяц. Посещаемость из поисковых систем приросла в среднем двукратно. Я продолжаю поддерживать приложение и внедряю новые фичи время от времени. На прошлой неделе сделал загрузку товаров в листинге по скроллу, о чем тоже обязательно напишу отдельный пост.