Архитектура фронтенда
Собираем вместе: тест с выбором ответа
Суть Кросс-трековый синтез с выбором ответа: читаем симптом фронтенда, находим слой, которому он реально принадлежит, и выбираем фикс, который не просто маскирует баг.
Высота — путь к senior
НольJuniorMiddleSenior
Ты на senior-высоте — в орбитеКаждый вопрос здесь пересекает два-три юнита. Капстоун проверяет не запоминание одного слоя, а навык: прочитать симптом и назвать самый нижний слой, которому он принадлежит, — именно там живёт устойчивый фикс.
Цель
Убедиться, что вы умеете проследить симптом фронтенда вниз по каскаду — state shape, граф fetch, токены, границы монорепо, splitting, pipeline — и отвергать фиксы, которые оптимизируют слой выше реальной причины.
Викторина
Completed
Дашборд тормозит на каждом нажатии клавиши в поле поиска. Коллега заводит тикет: применить code-splitting и лениво грузить графики. Как читает это senior?
Heads-up Splitting решает, что попадёт в начальный бандл и когда придут чанки; он не меняет, какие подписчики ре-рендерятся. График всё равно ре-рендерится после загрузки своего чанка, потому что причина — где живёт состояние ввода, а не размер бандла.
Heads-up Мемоизация одного компонента может приглушить один симптом, но глобальный store всё равно уведомляет каждого подписчика на каждое нажатие. Вы патчите узел ниже по течению вместо того, чтобы починить state shape, задавший радиус поражения.
Heads-up Скорость сборки не связана с ре-рендерами в рантайме. Это оптимизирует самый дешёвый слой (pipeline), пока причина сидит в самом дорогом (state shape).
Викторина
Completed
Страница товара рисует скелетон, затем гидрируется JS, затем фетчит пользователя, потом корзину, потом рекомендации — каждый ждёт предыдущего. LCP — 4.8 с. Какому слою это принадлежит и в чём фикс?
Heads-up Меньший бандл помогает Time-to-Interactive, но не убирает последовательные round-trip'ы. Даже при мгновенном JS три последовательных client fetch'а всё равно сериализуются; этим LCP владеет waterfall, а не бандл.
Heads-up Спиннер меняет воспринимаемый UX, а не LCP, который измеряет отрисовку самого крупного контента. Причина — последовательный граф fetch на критическом пути, и именно он должен измениться.
Heads-up Нормализация задаёт, как данные хранятся и читаются, а не когда они приходят. Задержка здесь — это последовательные round-trip'ы до того, как данные вообще появились; последующая нормализация ничего не меняет в LCP.
Викторина
Completed
Маркетинг просит ребрендинг: новый брендовый цвет плюс тёмную тему. В кодовой базе брендовый hex захардкожен в ~300 компонентах. Что это вскрывает и в чём структурный фикс?
Heads-up Find-and-replace справляется с одним ребрендингом и оставляет вас ровно настолько же хрупкими к следующему запросу и к тёмной теме, где один и тот же hex значит разное в разных контекстах. Смысл семантического слоя в том, что ссылаются на значение, а не на сырой цвет.
Heads-up Переписывание цветов на этапе сборки всё равно не даёт источника истины о том, что значит цвет; нельзя выразить text-danger против surface-raised. Недостающий артефакт — семантический слой токенов, а не трансформ бандлера.
Heads-up Постраничные оверрайды умножают несогласованность, которую токены призваны убрать, и не дают тёмной теме единого переключателя. Централизованные семантические токены — источник истины; разбросанные оверрайды — это анти-паттерн.
Викторина
Completed
CI занимает 15 минут на однострочное изменение в одном из 12 пакетов, потому что всё импортирует один гигантский shared-пакет. Что бьёт по корневой причине?
Heads-up Более быстрое железо пересобирает весь граф зависимостей быстрее; оно никогда не перестаёт пересобирать то, что не менялось. 15 минут идут от проблемы границ — каждый лист зависит от ствола, — а не от мощности.
Heads-up Tree-shaking урезает отправляемые байты на бандл; он не меняет, какие пакеты CI решит пересобрать. Взрыв времени сборки — это проблема графа зависимостей выше любого шага бандлинга.
Heads-up Route-чанки влияют на то, что браузер скачивает в рантайме, а не на то, что пересобирает CI. Причина в том, что граф зависимостей вынуждает полную пересборку на любое изменение.
Викторина
Completed
Вам дали новый фронтенд на ревью. В каком порядке senior оценивает слои и почему именно так?
Heads-up Чтение по структуре файлов скрывает направление зависимостей. Можно закончить, любуясь чистым деревом папок, и всё равно пропустить, что решение по state shape вызывает тормоза — слои каскадируют по стоимости отказа, а не по тому, где лежат файлы.
Heads-up Pipeline — самый дешёвый слой для починки позже и наименее вероятная причина. Оптимизировать байты, пока state shape сломан, — это полировать машину с заклинившим двигателем: поверхность выглядит быстрее, машина — нет.
Heads-up Порядок — это весь урок. Фикс, применённый выше реальной причины, — это потраченная впустую работа, которая ещё и прячет баг, поэтому ревью в порядке стоимости отказа — это то, что даёт чинить источник, а не симптом.
Викторина
Completed
Тяжёлая библиотека графиков грузится на первой отрисовке каждого маршрута, хотя большинство пользователей никогда не открывают вкладку аналитики, а пользователь скринридера сообщает, что date-picker внутри неё ловит фокус в ловушку. Какой двухслойный фикс верен?
Heads-up Отсрочка загрузки лишь откладывает момент монтирования багового компонента; ловушка фокуса возвращается в тот же миг, когда пользователь открывает вкладку. Доступность и code-splitting — ортогональные слои, каждому нужен свой фикс.
Heads-up Жадная загрузка раздувает начальный бандл для каждого пользователя без пользы и ничего не делает с ловушкой фокуса, которая остаётся багом управления фокусом независимо от момента загрузки компонента.
Heads-up Граница пакета меняет сборку и владение, а не то, что уходит в браузер на первой отрисовке, и не то, как ведёт себя фокус в рантайме. Вам всё равно нужен route-level splitting для бандла и фикс фокуса для a11y.
Итог
Сквозная линия трека — это одно дерево решений. Где живёт состояние, задаёт радиус поражения ре-рендера; граф fetch владеет LCP; токены решают, будет ли ребрендинг сменой значения или охотой по файлам; границы монорепо — это множитель времени сборки; splitting и pipeline — самые дешёвые слои. Каждый вопрос выше — это один и тот же ход: прочитать симптом, спуститься к самому нижнему слою, которому он принадлежит, и отвергнуть любой фикс, оптимизирующий слой выше причины.