Ответ вслух Senior System design на фронте обновлено

Спроектируй дашборд в реальном времени

Вопрос

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

Попробуйте сами

Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.

Показать ответ и разбор

Коротко

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

Что должно прозвучать в ответе

  • Требования: графики, таблица событий, выбор периода, фильтры, автообновление, экспорт, работа во вкладке часами

  • Оценка: десятки тысяч точек на график, сотни событий в секунду, 10+ виджетов одновременно

  • API: REST для исторического окна, WebSocket или SSE для дельт, агрегация на сервере под разрешение графика

  • Данные: кольцевой буфер точек на виджет, параметры периода и фильтров в URL, кеш окон

  • Компоненты: DashboardLayout, Widget с ленивым монтированием, Chart на canvas, VirtualTable

  • Узкие места: троттлинг перерисовки до кадра, downsampling, Web Worker для агрегаций, пауза в фоновой вкладке, утечки памяти

Что могут спросить следом

  • Почему canvas, а не SVG?
  • Что делать, когда вкладка в фоне?
  • Как не потерять события при переподключении?

Разбор

Требования: десяток графиков и таблица событий, выбор периода и фильтров, автообновление, вкладка открыта часами. Масштаб: на графике десятки тысяч точек, событий сотни в секунду, поэтому рендерить каждое событие сразу нельзя. API: историческое окно беру REST-запросом, причём сервер агрегирует данные под ширину графика, а дальше по WebSocket приходят дельты. Данные: у каждого виджета кольцевой буфер фиксированного размера, чтобы память не росла, период и фильтры в URL, чтобы ссылкой можно было поделиться. Компоненты: сетка виджетов, каждый монтируется лениво, когда виден, графики на canvas, таблица с виртуализацией. Узкие места: входящие события складываю в буфер и перерисовываю не чаще раза в кадр или раз в секунду, прореживание и агрегации считаю в Web Worker, в фоновой вкладке по visibilitychange ставлю обновления на паузу и догружаю пропущенное при возвращении, при переподключении запрашиваю данные с последней метки времени.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.