Техпрогон
ВойтиНачать бесплатно
Проектирование Middle Мобильный system design спрашивают часто обновлено

Мобильный system design: лента новостей с картинками и видео

Вопрос

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

Коротко

Требования: лента читается и офлайн из кеша, лайки работают оптимистично, время до первого контента меньше секунды из кеша. Оценка: страница 20 постов, до 3 картинок; превью 100 КБ дают 6 МБ на страницу, оригиналы недопустимы.

Что должно быть в решении

  1. 1
    Требования: функции (лента, лайк, комментарии), офлайн-чтение, платформы, цели по времени до контента и плавности
  2. 2
    Оценка: размер страницы, картинки и видео на страницу, трафик и объём кеша
  3. 3
    API: курсорная пагинация, размеры картинок под устройство, батч-эндпоинт счётчиков, оптимистичные лайки
  4. 4
    Данные: локальная база постов как источник правды, ограниченное число страниц в кеше, дисковый кеш медиа
  5. 5
    Компоненты: репозиторий ленты, загрузчик картинок с prefetch, видеоплеер с автоплеем видимого, outbox для лайков
  6. 6
    Узкие места: память на картинки, плавность скролла, дубли на стыке страниц, обновление ленты без прыжков

Что спросит интервьюер

  • Как показать новые посты, не сдвигая текущее место чтения?
  • Как ограничить расход трафика на видео?
  • Как сделать лайк офлайн и что при конфликте?

Разбор

Требования: лента читается и офлайн из кеша, лайки работают оптимистично, время до первого контента меньше секунды из кеша. Оценка: страница 20 постов, до 3 картинок; превью ~100 КБ дают 6 МБ на страницу, оригиналы недопустимы.

API: GET /feed?cursor=...&limit=20 возвращает посты с URL медиа в нескольких размерах и nextCursor; лайк POST /posts/{id}/like с ключом идемпотентности.

Клиент: локальная база хранит последние N страниц, UI подписан на неё. Репозиторий при открытии показывает кеш и запрашивает свежую первую страницу. Новые посты не вставляются сверху автоматически: показываем плашку «Новые посты». Пагинация с prefetch за 1-2 экрана, дедупликация по id.

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

Лайки: локально сразу, операция в outbox, синхронизатор отправляет; сервер возвращает актуальный счётчик.

Узкие места: память (downsampling, лимиты кеша), плавность (стабильные ключи, без работы на главном потоке), дубли (дедупликация).

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

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

Потренироваться бесплатно

Предыдущий вопрос

Мобильный system design: каталог и корзина маркетплейса

Следующий вопрос

Мобильный system design: загрузка фото и видео

Урок по теме

Мобильный system design: как вести секцию

Ещё по теме «Мобильный system design»

Все вопросы модуля