Секция system design для фронтендера: устройство платформы,
сеть и проектные кейсы — от модели данных до отказоустойчивости
4 модуля + разбор вопросовMiddle → SeniorИндивидуально с ментором
Для кого этот курс
Фронтендеры с коммерческим опытом, которые метят в senior, в бигтех или в зарубежные компании
Вы уверенно пишете на React и TypeScript, но «спроектируйте групповой чат» ставит в тупик
Сетевой слой ощущается как «магия за fetch», а выбор между polling, SSE и WebSocket превращается в угадайку
Это не «продвинутый React»: ось инструмента — reconciliation, хуки,
перформанс — предмет отдельного курса. Здесь ось инженерного мышления:
как устроен путь от URL до пикселей, где живёт состояние и что увидит
пользователь, когда узел откажет. На входе нужны React, TypeScript
и коммерческий опыт.
Программа
Модуль 1. Браузер и платформа
Процессы браузера и путь запроса от DNS до TLS
Архитектура браузера: процессы, потоки, главный поток
Web Worker, Service Worker и Shared Worker: кто что снимает с main thread
От URL до пикселей: DNS, TCP, TLS, QUIC и Navigation Timing как карта загрузки
TypeScript под капотом: транспиляция, отсутствие типов в рантайме, валидация на границе
Модуль 2. Сеть и серверное состояние
HTTP от 1.1 к 3 и вопрос «где живёт состояние»
Эволюция HTTP: какую боль решала каждая версия, TLS 1.2 против 1.3
Классическая серверная сессия: память инстанса против общего хранилища
Предел сессии: что ломается при горизонтальном масштабировании
JWT и stateless: access и refresh, почему токен нельзя отозвать, когда stateful оправдан
Модуль 3. Базы данных для фронтендера
Карта для тех, кто выбирает, а не администрирует
CAP-теорема, ACID против BASE и как это долетает до фронтенда
Реляционные, документные, key-value, wide-column, графовые базы и поисковые движки
Как обосновать выбор базы на собеседовании
Модуль 4. Проектные кейсы
Полный проход по кейсу: методика и три задачи
Методика дизайн-кейса: сначала требования, C4 и раскрываемые «кубики», калибровка под час интервью
Лента новостей под нагрузкой: денормализация, курсорная пагинация, медиа через CDN
Пиковая продажа билетов: конкурентный доступ и очередь ожидания перед системой
Коллаборативный редактор: формат данных, WYSIWYG и санитайзинг на границе доверия
Вопросы с собеседований
Разбор вопросов по всем темам курса
Вопросы по каждой теме курса с эталонными ответами
Формулировки уровня Middle и Senior
Как устроен курс
Сначала строим идеальную модель темы, потом честно прикладываем её к себе — и размытое «я плаваю в сети» превращается в список пробелов
Подача «от ограничения к решению»: каждая технология вводится как ответ на боль предыдущей
Приём «уронить каждый узел»: что произойдёт при отказе и что увидит пользователь
Экономика как критерий: лишние соединения и лишнее железо отбраковывают решение наравне с техникой
Самодиагностика по трём вопросам к каждой теме: объясню вслух, обосную выбор, знаю цену отказа