Шпаргалка по собеседованию веб-разработчика

Что такое системный дизайн?

Проектирование системы - это процесс проектирования элементов системы, таких как архитектура, модули и компоненты, различные интерфейсы этих компонентов и данные, которые проходят через эту систему.

Целью процесса проектирования системы является предоставление достаточно подробных данных и информации о системе и ее системных элементах, чтобы обеспечить реализацию, совместимую с архитектурными объектами, как определено в моделях и представлениях архитектуры системы.

Элементы системы

  • Архитектура - это концептуальная модель, которая определяет структуру, поведение и другие представления системы. Мы можем использовать блок-схемы для представления и иллюстрации архитектуры.
  • Модули - это компоненты, которые выполняют одну конкретную задачу в системе. Комбинация модулей составляет систему.
  • Компоненты - предоставляет определенную функцию или группу связанных функций. Они состоят из модулей.
  • Интерфейсы - это общая граница, через которую компоненты системы обмениваются информацией и взаимодействуют.
  • Данные - это управление информацией и потоком данных.

Основные задачи, выполняемые в процессе проектирования системы

Давайте перечислим основные задачи, связанные с данной проблемой проектирования системы. Эти задачи применимы для разработки продукта или функции с точки зрения внешнего интерфейса.

1) Понять, что это такое

Во-первых, нам нужно понять проблему. Мы должны убедиться, что интервьюер хочет знать, и проверить с ним, правильно ли мы понимаем постановку проблемы.

  • Что предполагается создать?
  • Мы говорим об одном и том же сервисе?

2) Выберите подходящий объем

Поняв проблему, нам нужно решить, какой будет объем. Что ж, мы не можем разработать идеальную систему, потому что будет ограниченное время, то есть от 45 минут до 1 часа. Поэтому нам нужно выбрать те части, в которых мы более уверены. Не делайте того, что у вас не получается.

  • Объем не может быть идеальной услугой, но основные части должны понравиться интервьюеру в течение 45 минут.
  • Составьте список TODO и NOT-TODO (уточните у интервьюера). НЕ-ЗАДАНИЯ также должны быть перечислены внизу, чтобы показать, что мы знаем о том, что нельзя делать, но из-за нехватки времени мы не сможем этого сделать.

Основные этапы проектирования системы:

  1. Какова основная цель функции? - В принципе, чего вы хотите добиться.
  2. Какова нефункциональная цель этой функции?
  3. Что такое поток данных (API) / поток пользователя - список всех API, то есть какие API нам нужны, и общий поток пользователей, где пользователь щелкнет и что произойдет.
  4. Что такое MVP (минимально жизнеспособный продукт) - список основных функций, таких как Core API, основные взаимодействия и основные интерфейсы.
  5. В каком состоянии находится компонент пользовательского интерфейса?
  6. Как бы вы разделили их на части и собрали вместе (UI / логика) - Разделите состояние и логику и синхронизируйте пользовательский интерфейс с состоянием
  7. Какова основная спецификация (на основе MVP) - какие проблемы нам нужно решить, каковы крайние случаи и в чем сложность.

Основные этапы разработки продукта:

  1. Какова цель веб-службы или веб-приложения?
  2. Какая связь с нативными приложениями? Если у вас уже есть приложение, является ли веб-приложение просто копией? Или это литровая версия (версия приложения MVP)? Если нет нативных приложений, то создавать с помощью PWA или с помощью гибридных технологий?
  3. Какая целевая платформа. Мобильное, настольное или устанавливаемое приложение?
  4. В основном все ориентировано на мобильные устройства. Нужен ли нам дизайн для настольного компьютера?
  5. SEO вызывает беспокойство? Да, мы поддерживаем рендеринг на стороне сервера (SSR), в противном случае одностраничное приложение (SPA) достаточно хорошо.
  6. Каков объем услуги и сколько человек в команде.
  7. Что такое MVP - список основных функций, таких как Core API, основные взаимодействия и основные интерфейсы.
  8. Что является ярким моментом в обслуживании, а также в опыте разработчика (DX) - разработчик также может внести большой вклад в улучшение.
  9. Какая будущая дорожная карта? - Список TODO и NOT-TODO

3) Предположения на фоне

  • Предположим, количество активных пользователей за день (DAU) / количество активных пользователей за месяц (MAU) службы.
  • Предположим, сколько взаимодействий происходит за день.
  • Предположим, 300 КБ приемлемо (производительность)
  • Предположим, средний ответ API составляет 100 мс. так далее

4) Большое изображение

Для проектирования системы может не потребоваться рисование схемы, но для продукта это необходимо.

  • Нарисуйте схему или составьте список.
  • Поток данных / поток взаимодействия с пользователем (уточните у интервьюера)

5) Ключевые проблемы и узкие места

Теперь нам нужно решить две конкретные задачи. В основном речь идет о настройке производительности:
1. Плавность
2. Скорость

Плавность: основная цель - избежать рывков.

  1. Мгновенный возврат (стек страниц / глобальное состояние / кеширование API)
  2. Мгновенный переход вперед (Скелет / Индикатор загрузки / Над сгибом)
  3. Мгновенный ответ на взаимодействие (доступность - A11y, пассивный слушатель, поддержка рекомендаций по дизайну)
  4. Сделайте нативной анимацию / переходы / жесты
  5. Сделайте его нативными компонентами пользовательского интерфейса.

Скорость / производительность: я подробно рассмотрел 13 методов ускорения вашего приложения в другой статье - Оптимизация производительности веб-сайта: полное руководство.
Ниже приводится список основных моментов, которые следует учитывать:

  1. предварительная загрузка / предварительная выборка
  2. Разделение кода + загрузка скелета
  3. Кеширование / CDN для статических ресурсов
  4. Service worker (офлайн) для кеширования
  5. Ленивая загрузка
  6. Автоматический пейджер
  7. Бесконечная прокрутка
  8. SSR / поток исходных данных (улучшает первую значимую краску)
  9. Обновление в области просмотра (API. И т. Д.)

Оптимизация изображений:

  1. Компресс
  2. Ленивая загрузка / заполнитель
  3. Прогрессивные изображения (размытые изображения)
  4. Спрайт-изображения
  5. Используйте SVG для масштабирования значков
  6. Кеширование / HTTP2 (кеш браузера, кеш CDN)

Об API:

  1. Для обновления данных в веб-приложениях в реальном времени есть три способа:
  • Long / short Polling (client pull) - для приложения по акциям
  • WebSockets (проталкивание сервера) - для приложения чата.
  • События, отправленные сервером (push-уведомления сервера) - для приложения акций.

2. Backend для FrontEnd (BFF) - агрегирование API
BFF будет делать следующее:

  • Вызов соответствующих API микросервисов и получение необходимых данных.
  • Отформатируйте данные на основе представления внешнего интерфейса
  • Отправьте отформатированные данные во внешний интерфейс

3. GraphQL - предоставляет полное и понятное описание данных в вашем API, дает клиентам возможность запрашивать именно то, что им нужно.

4. Кеширование / HTTP2 - кеширование API получения

6) Компромисс, альтернативы, TODO

  • Ничто не идеально.
  • Попытайтесь перечислить возможные идеи по улучшению
  • И чем вы захотите заняться, если у вас будет больше времени.

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

Модель RAIL от Google

RAIL - это ориентированная на пользователя модель производительности, которая дает структуру для размышлений о производительности.

RAIL - это аббревиатура от Response, Animation, Idle and Load. Модель классифицирует взаимодействия пользователей по этим четырем доменам. У пользователей разные ожидания, когда они касаются, щелкают или прокручивают различные элементы страницы. Таким образом, модель RAIL измеряет каждое взаимодействие пользователя с различными целями, зависящими от контекста.

1) Ответ: обработка событий менее чем за 50 мсек.

  • Чтобы гарантировать видимый ответ в течение 100 мс, обрабатывайте события ввода пользователя в течение 50 мс. Это относится к большинству входов, таких как нажатие кнопок, переключение элементов управления формы или запуск анимации. Это не относится к перетаскиванию касанием или прокрутке.
  • Хотя это может показаться нелогичным, это не всегда правильный вызов для немедленного ответа на ввод пользователя. Вы можете использовать это окно 100 мс для другой дорогостоящей работы, но будьте осторожны, чтобы не заблокировать пользователя. Если возможно, работайте в фоновом режиме.
  • Для действий, для выполнения которых требуется более 50 мс, всегда предоставляйте обратную связь.

2) Анимация: создание кадра за 10 мс.

  • Воспроизведение каждого кадра анимации за 10 мс или меньше. Технически максимальный бюджет для каждого кадра составляет 16 мс (1000 мс / 60 кадров в секунду ≈ 16 мс), но браузерам требуется около 6 мс для рендеринга каждого кадра, поэтому рекомендуется 10 мс на кадр.
  • Стремитесь к визуальной плавности. Пользователи замечают, что частота кадров меняется.

3) Простой: максимальное время простоя

  • Увеличьте время простоя, чтобы увеличить вероятность того, что страница ответит на ввод пользователя в течение 50 мс.

4) Загрузить: доставляйте контент и становитесь интерактивными менее чем за 5 секунд.

  • Когда страницы загружаются медленно, внимание пользователей отвлекается, и пользователи воспринимают задачу как невыполненную. Сайты, которые загружаются быстро, имеют более длительные средние сеансы, более низкий показатель отказов и более высокую видимость рекламы.

Ключевые показатели для отслеживания каждой посещаемой страницы

  1. DOMContentLoaded - дает вам представление о том, сколько времени потребовалось для загрузки HTML, чтобы страница могла начать отображение содержимого.
  2. Load - когда все ресурсы загружены (ресурсы анализируются и подтверждаются до DOMContentLoaded)
  3. First Contentful Paint (FCP) - событие относится к моменту, когда первый элемент из DOM появляется в браузере пользователя.
  4. First Meaningful Paint (не рекомендуется) - время, необходимое для отображения основного содержания страницы на экране.
  5. Индекс скорости - показывает, насколько быстро содержимое страницы заметно заполняется.
  6. Первый простой ЦП (готов к взаимодействию, не рекомендуется) - отмечает первый раз, когда основной поток страницы становится достаточно тихим, чтобы обрабатывать ввод.
  7. Время до (полного) взаимодействия (TTI) - время, необходимое для того, чтобы страница стала полностью интерактивной.
  8. Задержка первого ввода (FID) - измеряет время с момента первого взаимодействия пользователя со страницей до момента, когда браузер действительно может ответить на это взаимодействие.
  9. Общее время блокировки - измеряет общее время между первой отрисовкой содержимого (FCP) и временем до взаимодействия (TTI), когда основной поток был заблокирован на достаточно долгое время, чтобы предотвратить реакцию на ввод.
  10. Наибольший Contentful Paint (2,5 с) - измеряет, когда становится видимым самый большой элемент содержимого в области просмотра. Его можно использовать, чтобы определить, когда основное содержимое страницы завершило рендеринг на экране.

Facebook: пять основных ценностей

  1. Будьте смелыми - рискуйте, чтобы добиться больших результатов в быстро меняющемся мире.
  2. Сосредоточьтесь на воздействии - направлен на решение «наиболее важных проблем», а не на то, чтобы тратить время на мелкие вопросы.
  3. Будьте открытыми - отражает твердое убеждение, что «информированные люди принимают более правильные решения».
  4. Повышайте социальную ценность - сближая мир.
  5. Двигайтесь быстро - отражает уверенность в том, что лучше двигаться быстро и делать ошибки, чем двигаться медленно и упускать возможности.

Заключение

Мы рассмотрели полный процесс разработки системы для приложения. Кроме того, мы также обсудили способы оценки нашего приложения.

Надеюсь, вы нашли это полезным. Спасибо за чтение.

Больше контента на plainenglish.io