Системный Дизайн Во Фронтенде

Системный дизайн во фронтенде

План

  1. Общие требования
  2. Функциональные требования
  3. Архитектура компонентов
  4. Типы данных
  5. Дизайн API
  6. Дизайн хранилища состояния
  7. Оптимизации

Примеры

Дизайн Typeahead виджета

https://www.youtube.com/watch?v=9aOXGE7wAZo&list=WL&index=27

Общие требования

  1. Виджет предоставляет результаты поиска на основе введенного текста
  2. Должен работать с любым типом данные (синхронными или асинхронными)
  3. Кастомизирование вида результатов поиска

Функциональные требования

  1. Ввод текста не должен перегружать сеть
  2. Должен работать на всех размерах девайсов, доступен с клавиатуры
  3. Должен быть производителен
  4. Должен быть конфигурируем:
    • Размер кэша
    • Таймауты
    • Фильтрация результатов
    • Минимальный/Максимальный размер строки поиска
    • Сортировка