Новый пост Y_LAB Actual | Лайвкодинг по стекам: зачем он нужен и почему везде работает по-разному #️⃣ Лайвкодинг во frontend: что реально проверяют Frontend — это не «один тип задач». В рамках этого направления на лайвкодинге могут проверить сразу несколько слоёв: • Алгоритмическое мышление • Понимание JavaScript-механик • Работу с асинхронностью • Архитектуру интерфейса • Работу с данными ➡️ Поэтому frontend-лайвкодинг почти всегда комбинированный: часть задач прикладные (UI), часть — на понимание того, как язык работает под капотом. 🔵 Где используется — Технические собеседования — Митапы — Образовательные форматы Обычно формат зависит от уровня: ➖ Junior: больше базовой логики и JS, Middle: UI + механики, Senior: архитектура + оптимизация. 🫥🫥🫥🫥🫥🫥 📎 Прикладной UI-кейс ⏬ Типовая задача: Сделать компонент списка товаров с: • Загрузкой данных с API • Поиском • Фильтрацией • Состояниями loading и error Что здесь проверяют: • Декомпозицию интерфейса • Управление состоянием • Работу с асинхронностью • Обработку ошибок • Структурность кода • Умение объяснять решения Как правильно подходить: Проговорить структуру компонентов ⏩Определить все состояния ⏩Реализовать базовый сценарий (получить → показать) ⏩Добавить фильтрацию ⏩И только потом думать об оптимизации Где чаще всего «сыпятся»: • Всё в одном компоненте • Хаос в state • Игнорирование error • Преждевременная оптимизация • Молчание во время решения 🫥🫥🫥🫥🫥🫥 📎 Задачи на понимание механик JavaScript Frontend-лайвкодинг почти всегда включает блок на понимание того, как работает сам язык. Примеры live-задач: • Реализовать debounce • Написать полифил для Promise.all • Объяснить и продемонстрировать порядок выполнения кода с setTimeout, Promise, async/await (event loop) • Исправить баг, связанный с потерей контекста this • Оптимизировать компонент с лишними ререндерaми Что здесь проверяют: • Понимание event loop • Различие microtask / macrotask • Работу замыканий • Поведение промисов • Понимание контекста this • Способность рассуждать, а не просто вспоминать Где чаще всего возникают сложности: • Путают порядок выполнения асинхронного кода • Не могут объяснить, почему промисы выполняются раньше setTimeout • Знают синтаксис, но не понимают механизм • Оптимизируют компонент, не разобравшись в причине ререндеров 🫠 Ключевая сложность frontend-лайвкодинга Главная сложность frontend-лайвкодинга в том, что приходится держать в голове сразу несколько уровней: архитектуру интерфейса, управление состоянием, внутренние механики языка и при этом ещё последовательно проговаривать ход своих мыслей. Это формат, в котором очень быстро становится понятно, есть ли у человека глубина понимания или только поверхностное знание API. 🗒️ Как готовиться • Писать UI-компоненты с нуля без шаблонов • Реализовывать базовые JS-механизмы вручную • Разбирать event loop на конкретных примерах • Практиковать задачи на оптимизацию • Тренировать объяснение решений вслух 🫥🫥🫥🫥🫥🫥 Frontend-лайвкодинг — это не просто «сделать работающий интерфейс», это проверка архитектурного мышления, понимания JavaScript и способности структурно объяснять свои решения. ⬇️⬇️⬇️ В следующем посте разберём backend: там акцент смещается с интерфейса на бизнес-логику и проектирование API, и правила игры уже другие. #Y_LAB_University #Y_LAB_Actual