Лайвкодинг

Лайвкодинг проверяет, как вы думаете вслух, декомпозируете задачу и доводите кусок интерфейса до рабочего состояния за ограниченное время. Идеальный код с первой попытки здесь не цель. Цель — понятный ход решения, рабочие краевые случаи и код, который можно обсудить.

На middle чаще дают небольшую UI-задачу или функцию с DOM. На senior к этому добавляют проектирование: состояние, типы, границы компонента, что вынести, что оставить внутри.

Какие бывают форматы

• Функция или алгоритм в редакторе. Массив, строки, промисы, debounce, группировка. Обычно 25–40 минут.
• Вёрстка и поведение в браузере. Список, модалка, табы, инпут с подсказками, «подгрузить ещё».
• Компонент на Vue. Форма, фильтруемый список, виджет с состоянием. Уточните в начале, нужен Options API или Composition API.
• Правка их репозитория. Клон, установка, изменение существующего компонента, иногда с тестами.
• Домашка с разбором. Код пишете заранее, на созвоне защищаете решения.

В начале спросите, можно ли смотреть синтаксис, нужен ли TypeScript, есть ли тесты и что считать готовым результатом.

Что тренировать

JavaScript. map / filter / reduce, обновление объектов без лишних мутаций, замыкания, this в колбэках, промисы и async/await, отмена гонки запросов, debounce и throttle.

Браузер. Обновление DOM, делегирование событий, формы, fetch и ошибки, localStorage, клавиатура для одного виджета.

CSS. Flex и Grid на карточке и списке, hover / focus / disabled, адаптив. На лайвкодинге ценят предсказуемую вёрстку.

TypeScript. Пропсы компонента, union статуса запроса (idle | loading | success | error), дженерик списка, сужение после проверки. Аннотируйте границы, а не каждую строку.

Vue. ref и computed, watch только там, где он нужен, пропсы и emit, стабильный :key, форма через v-model, вынос логики в composable, если задача разрастается. Частый отдельный кейс — написать useFetch или useLocalStorage и не потерять реактивность, если аргумент пришёл как ref или геттер (toValue). Если спросят отличие от Vue 2, достаточно коротко: реактивность на Proxy, несколько корневых узлов, v-model на modelValue, Pinia вместо Vuex.

Как готовиться

1. Держите один шаблон: Vite + Vue 3 + TypeScript, плюс пустой HTML для задач на чистом JS.
2. Ставьте таймер на 35–45 минут. Условие читаете один раз, потом пишете. После — 10 минут на разбор пропущенных кейсов.
3. Пройдите банк задач повторно, пока решение не становится спокойным:
   • debounce поиска с отменой предыдущего запроса;
   • список с фильтром, сортировкой и пустым состоянием;
   • табы или аккордеон с клавиатуры;
   • форма с валидацией и блокировкой кнопки на время запроса;
   • пагинация или «подгрузить ещё»;
   • модалка с фокусом внутри и закрытием по Escape;
   • группировка массива объектов;
   • небольшой store на reactive или корзина на Pinia.
4. Решайте вслух: данные, разметка, состояния ошибки. Тишина на собеседовании читается как застревание.
5. Раз в неделю разбирайте чужой короткий компонент: лишний пересчёт, мутация пропа, гонка fetch, неправильный key.

Пишите в той среде, где будет собеседование. Если это CoderPad, CodeSandbox или их редактор, один раз прогоните там задачу целиком: файл, запуск, консоль.

Как вести сессию

Повторите условие своими словами и назовите два-три краевых случая: пустой список, ошибка сети, двойной клик. Согласуйте объём: сначала рабочий список и фильтр, виртуализацию — если останется время.

Начните с данных и типов, затем разметка, затем загрузка. Называйте компромисс вслух. Если застряли, сузьте задачу: захардкодьте ответ сети, допишите UI, потом верните fetch. В конце сами пройдите пустое состояние, одну запись, ошибку и повторный сабмит.

Senior-сигнал — границы. Вы сами говорите, что останется в компоненте, что уйдёт в composable, где нужен тип-дискриминант и какой кейс сознательно не делаете в эти 40 минут.

Чего ожидают по уровню

Middle. Рабочий результат, понятные имена, пустое состояние и ошибка, отсутствие случайных мутаций и бесконечных циклов в watch. Синтаксис Vue 3 и базовый TypeScript без подсказки на каждой строке.

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

За день до

Шаблон запускается с чистого старта. Три задачи из банка пройдены на таймере, одна из них на Vue. Debounce, разбор промиса и маленькая форма пишутся без старого файла рядом. Известно, где в их среде консоль. Наушники, зарядка и тихий фон готовы заранее: сессия часто ломается на быту так же, как на алгоритме.

Задача

Нужен поиск: запрос уходит через 300 мс после последнего ввода, предыдущий ответ не должен затереть более новый. Набросайте порядок шагов, не полный компонент.