Учебник Stencil

Введение в Stencil
- Что такое Stencil
- История создания и эволюция
- Философия и архитектурные принципы
- Сравнение с другими фреймворками и библиотеками
- Экосистема и инструментарий
- Когда использовать Stencil
- Требования и предварительные знания
Основы веб-компонентов
- Стандарты веб-компонентов
- Custom Elements
- Shadow DOM
- HTML Templates и slots
- Полифилы и поддержка браузерами
- Преимущества и ограничения нативных веб-компонентов
- Веб-компоненты в современной веб-разработке
Установка и настройка окружения
- Системные требования
- Установка Node.js и npm
- Установка Stencil CLI
- Создание нового проекта
- Структура проекта Stencil
- Конфигурационный файл stencil.config.ts
- Настройка TypeScript
- Интеграция с редакторами кода
- Отладочные инструменты
Первый компонент на Stencil
- Анатомия компонента
- Декоратор @Component
- Методы жизненного цикла
- Рендеринг с использованием JSX
- Props и реактивность
- Простейший пример компонента
- Компиляция и тестирование
- Использование компонента в HTML
Декораторы и метаданные
- Концепция декораторов в TypeScript
- @Component и его параметры
- @Prop для входных свойств
- @State для внутреннего состояния
- @Event для пользовательских событий
- @Listen для обработки событий
- @Element для доступа к хост-элементу
- @Method для публичных методов
- @Watch для отслеживания изменений
- Правила и ограничения использования декораторов
Свойства компонентов
- Определение Props
- Типизация свойств
- Значения по умолчанию
- Обязательные и опциональные свойства
- Мутабельность Props
- Рефлексия Props в атрибуты
- Валидация входных данных
- Передача сложных типов данных
- Производительность при работе со свойствами
Управление состоянием
- Внутреннее состояние компонента
- Декоратор @State
- Иммутабельность и реактивность
- Обновление состояния
- Асинхронные операции и состояние
- Паттерны управления состоянием
- Локальное и глобальное состояние
- State management библиотеки
- Интеграция с Redux и MobX
События и взаимодействие
- Система событий в веб-компонентах
- Создание пользовательских событий
- EventEmitter и декоратор @Event
- Всплытие и перехват событий
- Композиция событий
- Обработка DOM событий
- Декоратор @Listen
- Делегирование событий
- Коммуникация между компонентами
Жизненный цикл компонента
- Обзор методов жизненного цикла
- connectedCallback
- disconnectedCallback
- componentWillLoad
- componentDidLoad
- componentWillUpdate
- componentDidUpdate
- componentWillRender
- componentDidRender
- componentShouldUpdate
- Порядок вызова методов
- Асинхронные операции в жизненном цикле
- Оптимизация с помощью жизненного цикла
JSX и рендеринг
- Основы JSX в Stencil
- Синтаксис и особенности
- Выражения в JSX
- Условный рендеринг
- Списки и итерации
- Фрагменты
- Обработка событий в JSX
- Стилизация через JSX
- Отличия от React JSX
- Оптимизация рендеринга
Работа с Virtual DOM
- Концепция Virtual DOM
- Алгоритм сравнения и патчинга
- Производительность Virtual DOM
- Ключи элементов и оптимизация
- Functional components
- Host element
- Реконсиляция компонентов
Стилизация компонентов
- Подходы к стилизации
- Inline стили
- CSS в отдельных файлах
- Shadow DOM и инкапсуляция стилей
- CSS переменные и темизация
- Медиа-запросы
- Псевдоклассы и псевдоэлементы
- CSS модули
- Препроцессоры Sass и Less
- Styled JSX
- CSS-in-JS решения
Shadow DOM и инкапсуляция
- Принципы Shadow DOM
- Shadow root
- Режимы Shadow DOM
- Инкапсуляция стилей
- Slots и композиция контента
- Named slots
- Slot fallback content
- События в Shadow DOM
- Доступность и Shadow DOM
- Ограничения и обходные пути
Slots и проекция контента
- Концепция слотов
- Default slot
- Множественные слоты
- Динамические слоты
- Slot API
- Обработка изменений в слотах
- Композиция компонентов через слоты
- Паттерны проектирования со слотами
Типизация в TypeScript
- TypeScript в Stencil
- Типы для Props
- Типы для State
- Типы для Event
- Дженерики в компонентах
- Интерфейсы и типы
- Union и Intersection типы
- Type guards
- Утилитарные типы
- Строгая типизация JSX
Асинхронность и промисы
- Асинхронные компоненты
- Async/await в методах жизненного цикла
- Загрузка данных
- Race conditions
- Отмена асинхронных операций
- Индикаторы загрузки
- Кэширование данных
Формы и пользовательский ввод
- Controlled и uncontrolled компоненты
- Обработка ввода
- Валидация форм
- Двусторонняя привязка данных
- Кастомные элементы форм
- Form associated custom elements
- Accessibility в формах
- Паттерны работы с формами
Маршрутизация
- Stencil Router
- Установка и настройка
- Определение маршрутов
- Route matching
- Параметры маршрута
- Query параметры
- Программная навигация
- Вложенные маршруты
- Guards и middleware
- Lazy loading маршрутов
- История и браузерная навигация
Ленивая загрузка и code splitting
- Концепция code splitting
- Динамический импорт
- Lazy loading компонентов
- Chunk optimization
- Prefetching и preloading
- Производительность загрузки
- Анализ размера бандлов
- Стратегии разделения кода
Оптимизация производительности
- Измерение производительности
- Memoization и кэширование
- Виртуализация списков
- Debouncing и throttling
- Web Workers
- Оптимизация размера бандла
- Tree shaking
- Профилирование компонентов
- Best practices
Тестирование компонентов
- Философия тестирования
- Unit тестирование
- Stencil Testing Library
- Тестирование рендеринга
- Тестирование событий
- Тестирование асинхронности
- Мокирование зависимостей
- Snapshot тестирование
- Coverage анализ
- E2E тестирование
- Puppeteer и Playwright
- Continuous Integration
Доступность
- Принципы веб-доступности
- ARIA атрибуты и роли
- Семантическая разметка
- Управление фокусом
- Keyboard navigation
- Screen readers
- Тестирование доступности
- WCAG стандарты
- Accessibility в Shadow DOM
- Инструменты аудита
Интернационализация
- Структура переводов
- Динамическая загрузка локалей
- Форматирование дат и чисел
- Pluralization
- Направление текста RTL/LTR
- Locale detection
- Библиотеки для i18n
Работа с API и HTTP
- Fetch API
- XMLHttpRequest
- Обработка ответов
- Управление состоянием загрузки
- Обработка ошибок
- Interceptors
- Кэширование запросов
- GraphQL клиенты
- WebSocket соединения
- Server-Sent Events
Управление зависимостями
- Package.json и dependencies
- Импорт внешних библиотек
- Работа с npm модулями
- Типизация сторонних библиотек
- Версионирование зависимостей
- Обновление пакетов
- Security audit
Сборка и компиляция
- Процесс компиляции Stencil
- Output targets
- dist output
- dist-custom-elements
- dist-custom-elements-bundle
- Конфигурация сборки
- Development и production режимы
- Source maps
- Минификация
- Полифилы и legacy поддержка
Output Targets
- Типы output targets
- Конфигурация для различных целей
- Интеграция с различными фреймворками
- Standalone компоненты
- Hydrate app
- Stats и docs output
- Кастомные output targets
Интеграция с фреймворками
- Использование в vanilla JavaScript
- Интеграция с React
- Интеграция с Angular
- Интеграция с Vue
- Интеграция с Svelte
- Обертки для фреймворков
- Особенности интеграции
- Type definitions для фреймворков
Серверный рендеринг
- Концепция SSR
- Prerendering в Stencil
- Hydration
- Конфигурация prerender
- SEO оптимизация
- Performance метрики
- Статическая генерация сайтов
- Гибридные подходы
Progressive Web Apps
- Концепция PWA
- Service Workers
- Offline functionality
- Кэширование стратегии
- Web App Manifest
- Push уведомления
- Background sync
- Installable applications
Создание дизайн-системы
- Архитектура дизайн-системы
- Атомарный дизайн
- Компонентная библиотека
- Темизация и брендинг
- Design tokens
- Версионирование компонентов
- Документирование компонентов
- Storybook интеграция
- Публикация и распространение
Документирование компонентов
- Автогенерация документации
- JSDoc комментарии
- Markdown документация
- Props documentation
- Events documentation
- Методы и публичный API
- Stencil docs output
Монорепозитории
- Концепция monorepo
- Lerna и Nx
- Workspaces в npm/yarn
- Версионирование в monorepo
- CI/CD для monorepo
- Переиспользование компонентов
Публикация компонентов
- Подготовка к публикации
- Package.json конфигурация
- NPM registry
- Версионирование семантическое
- Changelog
- README и документация
- TypeScript definitions
- Scoped packages
- Private registry
- CDN публикация
Инструменты разработки
- Stencil CLI команды
- Dev server
- Hot module replacement
- Debugging в браузере
- Browser DevTools
- Stencil DevTools расширение
- Linting и форматирование
- ESLint конфигурация
- Prettier настройка
- Git hooks и Husky
Миграция и обновление
- Миграция с других фреймворков
- Обновление версий Stencil
- Breaking changes
- Deprecation warnings
- Коэкзистенция с legacy кодом
- Постепенная миграция
- Стратегии рефакторинга
Архитектурные паттерны
- Component composition
- Container и Presentational компоненты
- Higher-Order Components
- Render props паттерн
- Compound components
- Controlled components
- Provider паттерн
- Dependency injection
- Atomic design в Stencil
Безопасность
- XSS защита
- Санитизация ввода
- Content Security Policy
- CORS настройки
- Безопасность зависимостей
- Аудит уязвимостей
- Best practices безопасности
DevOps и развертывание
- Continuous Deployment
- GitHub Actions
- GitLab CI
- Docker контейнеризация
- Статический хостинг
- CDN конфигурация
- Environment variables
- Rollback стратегии
Мониторинг и аналитика
- Error tracking
- Performance monitoring
- User analytics
- Логирование
- Метрики производительности
- Real User Monitoring
- Synthetic monitoring
- Интеграция с аналитическими платформами
Продвинутые техники
- Функциональные компоненты
- Render функции
- Custom JSX pragma
- Компиляторные оптимизации
- Метапрограммирование
- Расширение функционала Stencil
- Plugins и плагинная архитектура
- Кастомизация компилятора
Web Components стандарты будущего
- Constructable Stylesheets
- CSS Shadow Parts
- Declarative Shadow DOM
- Form-associated custom elements
- Element Internals API
- Upcoming browser features
- Polyfills для новых возможностей
Производительность и оптимизация бандла
- Bundle analysis
- Webpack Bundle Analyzer
- Оптимизация импортов
- Dynamic imports стратегии
- Vendor splitting
- Common chunks
- Compression
- HTTP/2 и HTTP/3 оптимизации
Отладка и траблшутинг
- Типичные проблемы и решения
- Debugging techniques
- Performance bottlenecks
- Memory leaks
- Проблемы с Shadow DOM
- Build errors
- Runtime errors
Сравнительный анализ
- Stencil vs React
- Stencil vs Vue
- Stencil vs Angular
- Stencil vs Lit
- Stencil vs Svelte
- Производительность бенчмарки
- Bundle size сравнение
- Developer experience
- Когда выбрать Stencil