Учебник Preact

Введение в Preact
- История создания и эволюция фреймворка
- Философия и принципы проектирования
- Сравнительный анализ с React и другими фреймворками
- Экосистема и позиционирование в мире JavaScript
- Области применения и целевая аудитория
Теоретические основы
- Виртуальный DOM и алгоритмы рендеринга
- Функциональное и объектно-ориентированное программирование в контексте Preact
- Теория состояния и управление данными
- Концепции реактивного программирования
- Иммутабельность и чистые функции
Установка и настройка окружения
- Системные требования и предварительная подготовка
- Методы установки через npm и yarn
- Настройка сборщиков: Webpack, Vite, Rollup
- Конфигурация TypeScript для Preact проектов
- Настройка линтеров и форматеров кода
- Интеграция с системами контроля версий
Основы синтаксиса и JSX
- JSX как расширение JavaScript
- Транспиляция JSX и Babel конфигурация
- Элементы и их свойства
- Выражения в JSX
- Условный рендеринг
- Списки и ключи элементов
- Фрагменты и порталы
Компоненты в Preact
- Концепция компонентов и их классификация
- Функциональные компоненты
- Классовые компоненты
- Компоненты высшего порядка (HOC)
- Render Props паттерн
- Композиция против наследования
- Компонентная архитектура приложений
Пропсы и передача данных
- Определение и использование пропсов
- Типизация пропсов в TypeScript
- Значения по умолчанию
- Валидация пропсов
- Деструктуризация пропсов
- Паттерны передачи данных между компонентами
- Children и слоты
Состояние компонентов
- Локальное состояние в классовых компонентах
- Хук useState для функциональных компонентов
- Инициализация и обновление состояния
- Асинхронное обновление состояния
- Батчинг обновлений
- Оптимизация перерендеринга
Жизненный цикл компонентов
- Фазы жизненного цикла
- Методы жизненного цикла в классовых компонентах
- componentDidMount и componentDidUpdate
- componentWillUnmount и очистка ресурсов
- Обработка ошибок: componentDidCatch
- Эквиваленты в функциональных компонентах через хуки
Система хуков
- useState для управления состоянием
- useEffect для побочных эффектов
- useContext для работы с контекстом
- useRef для доступа к DOM элементам
- useMemo и useCallback для оптимизации
- useReducer для сложной логики состояния
- Создание пользовательских хуков
Управление событиями
- Синтетические события в Preact
- Обработчики событий
- Предотвращение всплытия и действий по умолчанию
- События клавиатуры и мыши
- События форм и валидация
- Делегирование событий
Работа с формами
- Контролируемые и неконтролируемые компоненты
- Обработка ввода пользователя
- Валидация форм
- Работа с различными типами input элементов
- Загрузка файлов
- Библиотеки для работы с формами
- Доступность форм
Контекст и глобальное состояние
- Context API в Preact
- Создание и использование контекста
- Провайдеры и потребители контекста
- Множественные контексты
- Паттерны управления глобальным состоянием
Маршрутизация
- Концепции клиентской маршрутизации
- Preact Router
- Декларативная маршрутизация
- Динамические маршруты и параметры
- Программная навигация
- Lazy loading маршрутов
- Защищенные маршруты и авторизация
Стилизация компонентов
- Подходы к стилизации в Preact
- CSS модули
- Styled Components
- CSS-in-JS решения
- Препроцессоры: Sass, Less, Stylus
- Utility-first фреймворки: Tailwind CSS
- Адаптивный дизайн и медиазапросы
Работа с API и асинхронными операциями
- Fetch API и HTTP запросы
- Обработка промисов в компонентах
- Async/await в хуках
- Управление состоянием загрузки
- Обработка ошибок сети
- Отмена запросов и cleanup
- Библиотеки для работы с API
Управление состоянием в больших приложениях
- Проблемы управления состоянием
- Паттерн Flux и его реализации
- Redux с Preact
- Zustand и легковесные решения
- MobX и реактивное программирование
- Архитектурные подходы к организации состояния
Тестирование Preact приложений
- Философия тестирования UI компонентов
- Unit тестирование с Jest
- Testing Library для Preact
- Тестирование хуков
- Snapshot тестирование
- Integration тестирование
- End-to-End тестирование с Cypress
Производительность и оптимизация
- Профилирование Preact приложений
- Мемоизация компонентов
- Lazy loading и code splitting
- Виртуализация списков
- Оптимизация рендеринга
- Bundle анализ и оптимизация размера
- Web Workers и многопоточность
Серверный рендеринг (SSR)
- Концепции серверного рендеринга
- Preact/render-to-string
- Гидрация на клиенте
- SEO оптимизация
- Статическая генерация сайтов
Прогрессивные веб-приложения (PWA)
- Принципы PWA
- Service Workers в контексте Preact
- Кеширование стратегии
- Offline функциональность
- Web App Manifest
- Push уведомления
- Установка PWA на устройства
Мобильная разработка
- Адаптация под мобильные устройства
- Touch события и жесты
- Производительность на мобильных
- Нативные возможности через Web APIs
- Cordova и Capacitor интеграция
- Мобильные UI паттерны
Доступность (A11y)
- Принципы веб-доступности
- Семантическая разметка в JSX
- ARIA атрибуты и роли
- Навигация с клавиатуры
- Поддержка скринридеров
- Цветовая доступность и контрастность
- Тестирование доступности
Интернационализация (i18n)
- Подходы к многоязычности в SPA
- Библиотеки для интернационализации
- Управление переводами
- Форматирование дат и чисел
- Направление письма (RTL/LTR)
- Динамическая загрузка языков
Безопасность
- Основы безопасности клиентских приложений
- XSS атаки и защита
- CSRF и токены безопасности
- Валидация на клиенте и сервере
- Безопасное хранение данных
- Content Security Policy
- Аутентификация и авторизация
DevTools и отладка
- Preact DevTools
- Browser DevTools для React приложений
- Отладка производительности
- Source maps и debugging
- Логирование и мониторинг
- Error boundaries и отслеживание ошибок
Сборка и развертывание
- Production сборка
- Минификация и сжатие
- Хеширование файлов и кеширование
- CDN и статические ресурсы
- CI/CD пайплайны
- Мониторинг в продакшене
- Rollback стратегии
Микрофронтенды
- Архитектура микрофронтендов
- Module Federation с Preact
- Независимые развертывания
- Разделение кода между командами
- Коммуникация между микроприложениями
- Общие библиотеки и зависимости
Интеграция с другими технологиями
- Preact с TypeScript
- Интеграция с backend фреймворками
- GraphQL клиенты
- WebSockets и real-time коммуникация
- Интеграция с CMS системами
Миграция и совместимость
- Миграция с React на Preact
- Preact/compat для совместимости
- Постепенная миграция legacy кода
- Интеграция в существующие проекты
- Совместимость с React экосистемой
Продвинутые паттерны
- Render Props и Function as Children
- Compound Components
- State Machines
- Observer паттерн
- Dependency Injection
- Медиаторы и Event Bus
Будущее Preact
- Roadmap развития фреймворка
- Экспериментальные возможности
- Влияние на экосистему JavaScript
- Конкуренция с другими фреймворками
- Перспективы развития веб-технологий