Хоттабыч
Местный
Что меняется в мышлении после курса:
Курс даёт архитектурное мышление, которое повышает твою ценность как инженера в эпоху ИИ.
Когда инструменты меняются всё быстрее, именно архитектурное мышление остаётся стабильной основой профессионального роста.
Этот курс — про навыки, которые не устаревают.
Метод обучения:
Курс построен вокруг одного приложения на React, которое последовательно эволюционирует от версии к версии.
Для каждой итерации создаётся Excalidraw-доска, на которой разбираются архитектурные принципы и решения.
После этого решения немедленно внедряются в код.
Такой формат позволяет изучать архитектуру через практику — наблюдая, как изменения структуры влияют на развитие и масштабирование системы.
Темы, которые проходим в процессе:
Архитектурный фундамент:
MVC / MVVM и применимость во Frontend
SOLID, Dependency Injection, Inversion of Control, Service Locator
Model-first подход
Принцип наименьших привелегий
Паттерны: Builder, Observer, Facade, Gateway, Publisher-Subscriber
Что такое Domain и Bounded Context
Low coupling/High cohesion
Практика на React:
Как правильно адаптировать фундаментальные знания под React
Пишем на разных техологиях: Reactuse, Zustand, Preact/signals, Effector, Reatom и др. Делаем упор на то, как меняется архитектура в целом, а не какой API мы используем
Структура папок и построение слоев приложения
Что такое инфраструктурный код на React
Обработка ошибок в React-приложении
Гайд на State-Management
Паттерны для композиции компонентов: renderProp, slot, HOC
Как масштабировать Frontend-архитектуру при росте сложности
Зачем писать бизнес-логику вне UI на самом деле
Inversion of Control на практике (Inversify, needle-di)
Микрофронтенды
Production-задачи:
Ролевая модель и доступы
Аутентификация и авторизация
Feature flags
Правильная работа с формами
Интернационализация
Подробно
Модуль 1. Фундаментальные знания
Самый важный блок курса. Это фундамент, на котором строится архитектура любого приложения независимо от стека, фреймворка и методологии. Цель модуля - перестать слепо повторять чужие правила и начать мыслить системно: понимать, почему код устроен именно так, а не иначе.
1.1. Solid в контексте React
Solid разбирается не как набор абстрактных правил, а как ориентиры для проектирования React-кода. Смотрим, где нарушение принципов действительно бьет по скорости разработки и поддержке, а где усложнение не оправдано.
S - single responsibility principle: разделение ответственности между хуком, view-компонентом и контейнером
O - open/closed principle: расширяемые компоненты через композицию и slot-подход вместо флагов-пропсов
L - liskov substitution principle: подстановка типов и работа с нативными html-атрибутами через ComponentProps
I - interface segregation principle: прозрачные пропсы и влияние интерфейсов на читаемость кода в команде
D - dependency inversion principle: отвязка компонентов от backend, localStorage, IndexedDB, Supabase, Firebase и конкретного state management
1.2. Mv*-паттерны: mvc / mvp / mvvm
Этот блок дает понимание, откуда вообще берется разделение на слои и роли. После него React, Vue и Angular перестают восприниматься как принципиально разные миры и собираются в единую архитектурную картину.
Mvc и mvp: теория, презентация и разбор реализации на практическом проекте
Mvvm: теория, excalidraw-схема и реализация на практическом проекте
Роли и связи между слоями: view, model, presenter, viewmodel
Data-binding через proxy: как реактивность работает под капотом
1.3. Сборка фундамента под React
Флагманское видео модуля, где все идеи соединяются в работающую архитектуру на React. Здесь теория перестает быть теорией и собирается в цельную систему, пригодную для реального проекта.
Dip и dependency injection на практике
Composition root
Архитектурные роли во frontend
Инфраструктурный код
Di через props и React.Context
Основы тестируемости архитектуры
Репозиторий с кодом, excalidraw-доска, разбор render props и обзор структуры папок
После модуля ты:
Проектируешь компоненты, которые переживают смену стейт-менеджера и
Скачать:
📥 Скрытое содержимое! Войдите или Зарегистрируйтесь
