Пятнадцать лет строю и масштабирую распределённые системы — застал переход индустрии от bare-metal серверов и монолитов к cloud-native, Kubernetes и GitOps. Берусь за то, что команды откладывают: технический долг, выкладка релизов с нуля и удержание систем в рабочем состоянии.
Шесть переходов, которые сегодня продают готовыми решениями. Я проходил их, когда готовых решений не существовало.
99acres
Портал недвижимости, Индия — поиск по каталогу · 2021 · Фронтенд-разработчик, модуль каталога
Ситуация
Портал такого размера смотрят в основном с телефона и часто на связи, которая тяжёлой страницы не выдержит, — а фильтры и есть то, чем реально пользуются.
Что сделано
Сделал поиск по карте, фильтры каталога и карточку объекта за ними, а потом добился, чтобы они выдерживали такой объём: длинные списки отрисовываются только на видимом экране, фильтры ждут, пока вы закончите вводить, и смена фильтра обновляет список, а не перестраивает страницу.
Что построено
GEO-поиск: район, радиус и запросы по границам карты
Многокритериальные фильтры по каталогу объектов
Карточка объекта, которая из них открывается
Отрисовка выдачи, рассчитанная на устройства со слабым каналом
В цифрах
Отклик фильтров на каталоге: 1.5-2.0 с → <200 мс — Многотысячный каталог, с телефона
Длинные списки: виртуализация, дебаунсинг фильтров — Скролл не фризит на слабом устройстве
Что изменилось
Отклик фильтров — с 1.5-2.0 секунд до менее 200 мс на каталоге в тысячи объектов, и скролл остаётся плавным на слабом телефоне, а не только на ноутбуке разработчика.
В чём была сложность
Виртуализация длинных списков и дебаунсинг фильтров: каталог на тысячи объектов нельзя рендерить целиком, а фильтр, дёргающий выдачу на каждое нажатие, съедает и сеть, и батарею.
Фильтры — то, чем на портале реально пользуются, и они комбинируются: каждый новый критерий умножает число состояний, в которых интерфейс обязан остаться связным.
Аудитория смотрит с телефонов на каналах, которые тяжёлой страницы не выдержат, поэтому бюджет задавало самое медленное реальное устройство, а не ноутбук разработчика.
Чем подтверждается
Работа по договору с заказчиком. Исходный код и внутренние замеры остаются у него, и цифра выше — его, а не публичный бенчмарк.