Pivot grid без сторонних библиотек: кэш, производительность и связанные гриды

Значимый прорыв формирует отрасль ИИ: alex_29 3 минуты назад Pivot grid без сторонних библиотек: кэш, производительность и связанные гриды Простой 7 мин 5 Веб-разработка * Визуализация данных * JavaScript * Базы данных * Клиентская оптимизация * Кейс Расскажу, как и почему я в какой-то момент решил написать собственный pivot grid — без сторонних библиотек, на чистом JavaScript и DOM. И что из этого получилось: от первой версии с обычным GROUP BY до кэширования больших выборок и цепочки связанных гридов. Почему вообще свой pivot gridЯ давно работаю с BI-инструментами, и мне всегда хотелось получить более удобную сводную таблицу.

В готовых решениях вроде бы всё есть, но при реальной работе постоянно что-то мешает: где-то таблица ведёт себя не так, как хотелось бы, где-то не хватает нужного поведения, где-то на больших объёмах данных всё начинает заметно тормозить. В какой-то момент я решил попробовать сделать свой вариант. Первая версия: GROUP BY и построение таблицы Первую версию я сделал максимально прямолинейной.

Технические детали

Пользователь выбирает измерения, на сервер уходит запрос с GROUP BY по выбранным измерениям, сервер возвращает результат, а на клиенте по этим данным строится таблица. Сложность началась на интерфейсе. Нужно было сделать сводную таблицу, в которой можно сворачивать и разворачивать и строки, и колонки.

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

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

Отраслевые последствия

Где помог ClaudeПервые версии кода я писал сам. Потом стал привлекать к работе языковую модель. Лучше всего с написанием кода справился Claude.

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

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

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.