# Клеман Михайлеску о секретах успешного фронтенд-интервью в Google

Источник: https://www.youtube.com/watch?v=ai1zmNO5Z3E
Канал: Clément Mihailescu
Опубликовано: 13.04.2022

---

## Техническое интервью: Как устроена фронтенд-разработка в Google [[JUMP:0:00]]

Клеман Михайлеску, создатель образовательных платформ AlgoExpert и FrontEnd Expert, провел серию имитаций собеседований, чтобы показать, как выглядят реальные технические испытания для фронтенд-инженеров в компаниях уровня Google или Meta. В этом видео Клеман пригласил в качестве кандидата Коннора — разработчика, который сам участвует в создании материалов для платформы FrontEnd Expert. Основной темой стало практическое задание на построение динамического интерфейса с обработкой данных из нескольких API.

### 🛠 Задача: Воссоздание интерактивного списка вопросов
[[JUMP:1:30]]

Кандидату было предложено воссоздать функциональность страницы с вопросами для подготовки к интервью. Задача требовала работы с «чистым» JavaScript (Vanilla JS), без использования популярных фреймворков.

* **Работа с API**: Необходимо было совершить GET-запрос к базовому URL, получить список вопросов (объекты с полями `category`, `name`, `id`) и сгруппировать их по категориям.
* **Трансформация данных**: Данные от API поступали «плоским» списком, поэтому для удобства рендеринга Коннор преобразовал их в объект, где ключами выступали категории, а значениями — массивы вопросов.
* **Рендеринг DOM**: С помощью метода `document.createElement` кандидат создавал структуру из вложенных элементов: `div` (wrapper), заголовки `h2` для категорий и `div` с заголовками `h3` для самих вопросов.

### 🔄 Масштабирование: Интеграция пользовательских данных
[[JUMP:18:32]]

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

* **Асинхронность**: Для получения статусов требовался второй API-вызов. Клеман отметил, что важно эффективно обрабатывать такие запросы, чтобы не ждать их последовательно.
* **Promise.all**: Коннор использовал конструкцию `Promise.all` для параллельного выполнения двух запросов к API, что значительно оптимизировало скорость загрузки данных.
* **Статистика**: Кандидат добавил функционал отображения прогресса в заголовке категории (например, «3/8»), реализовав счетчик правильно выполненных заданий в процессе итерации по объекту с данными.
* **Обработка состояний**: Для статусов (зеленый, красный, желтый кружки) использовалась замена классов CSS, а для вопросов без попыток решения автоматически присваивался класс «unattempted».

### 💡 Архитектурные размышления и оптимизация
[[JUMP:37:30]]

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

* **Data Structure**: Оба собеседника сошлись во мнении, что логичнее объединять данные о вопросах и статусах их прохождения на этапе трансформации, чтобы не использовать вторичные объекты для поиска.
* **Компоненты**: Для улучшения читаемости кода стоило бы разбить функцию `createCategory` на более мелкие функции, такие как `createQuestion`.
* **Группировка**: Обсуждая возможность переключения отображения (группировка по категориям против случайного порядка), кандидаты предложили два подхода:
    1.  Полная перегенерация HTML при клике на переключатель.
    2.  Создание двух наборов DOM-узлов заранее и использование `display: none` для скрытия неактивного состояния, что более эффективно при частых переключениях.

По мнению Клемана, Коннор продемонстрировал мастерство владения современным синтаксисом JavaScript (async/await, optional chaining, nullish coalescing) и понимание того, как минимизировать лишние сетевые запросы, что является признаком сильного специалиста уровня «strong hire».