Учебник Slim.js

Введение в Slim.js
- Что такое Slim.js и зачем он нужен
- Философия библиотеки и её место в экосистеме
- Сравнение с другими фреймворками
- Установка и начальная настройка
- Первый компонент на Slim.js
- Структура проекта
Основы работы с компонентами
- Создание базового компонента
- Регистрация компонентов
- Жизненный цикл компонента
- Методы slimCreated, slimConnected, slimDisconnected
- Метод slimBeforeRender и его применение
- Метод slimAfterRender
Шаблоны и разметка
- Синтаксис шаблонов в Slim.js
- Интерполяция данных
- Условный рендеринг
- Циклы и итерация по массивам
- Привязка атрибутов
- Работа с классами и стилями
- HTML-разметка внутри компонентов
Реактивность и состояние
- Концепция реактивности в Slim.js
- Свойства компонента и их отслеживание
- Геттеры и сеттеры
- Автоматическое обновление представления
- Управление внутренним состоянием
- Оптимизация перерисовок
Свойства и атрибуты
- Определение свойств компонента
- Типизация свойств
- Значения по умолчанию
- Обязательные свойства
- Передача данных от родителя к потомку
- Двусторонняя привязка данных
- Работа с булевыми атрибутами
- Преобразование типов
События
- Обработка DOM-событий
- Делегирование событий
- Создание пользовательских событий
- Передача событий от потомка к родителю
- Модификаторы событий
- Отмена и предотвращение событий
- Работа с event.detail
Методы компонента
- Определение методов
- Контекст this в методах
- Вызов методов из шаблона
- Приватные и публичные методы
- Асинхронные методы
- Debounce и throttle в методах
Директивы
- Встроенные директивы Slim.js
- Директива s:if
- Директива s:unless
- Директива s:foreach
- Директива bind
- Создание собственных директив
- Параметры директив
Слоты и композиция
- Концепция слотов
- Именованные слоты
- Слот по умолчанию
- Доступ к содержимому слотов
- Fallback-контент для слотов
- Вложенные компоненты
Работа с формами
- Привязка данных к полям ввода
- Обработка отправки формы
- Валидация данных
- Работа с checkbox и radio
- Select и множественный выбор
- Динамические формы
- Сброс и предзаполнение форм
Стилизация компонентов
- Встраивание стилей в компонент
- Scoped стили
- Динамические стили
- CSS-переменные в компонентах
- Темизация
- Интеграция с CSS-препроцессорами
- CSS-модули
Взаимодействие между компонентами
- Передача данных через props
- Эмиссия событий
- Паттерн provider/consumer
- Общее состояние между компонентами
- Ref-ссылки на дочерние компоненты
- Обращение к родительскому компоненту
Управление состоянием
- Локальное состояние компонента
- Глобальное состояние приложения
- Создание store
- Подписка на изменения
- Middleware и плагины для состояния
- Интеграция с Redux
- Интеграция с MobX
Асинхронность и работа с API
- Загрузка данных при монтировании
- Обработка состояний загрузки
- Отображение ошибок
- Fetch API в компонентах
- Axios и другие HTTP-клиенты
- Retry и обработка сетевых ошибок
- Кэширование запросов
Роутинг
- Концепция маршрутизации в SPA
- Интеграция сторонних роутеров
- Определение маршрутов
- Параметры маршрутов
- Query-параметры
- Программная навигация
- Guards и middleware
- Вложенные маршруты
- Ленивая загрузка компонентов
Оптимизация производительности
- Профилирование компонентов
- Минимизация перерисовок
- Виртуализация списков
- Debounce и throttle
- Мемоизация вычислений
- Ленивая загрузка ресурсов
- Web Workers в Slim.js
Тестирование
- Настройка тестового окружения
- Юнит-тестирование компонентов
- Тестирование рендера
- Тестирование событий
- Тестирование асинхронной логики
- Моки и стабы
- Интеграционное тестирование
- E2E-тестирование
Расширенные паттерны
- Higher-Order Components
- Render Props
- Миксины
- Композиция функций
- Декораторы для компонентов
- Фабрики компонентов
- Динамическое создание компонентов
TypeScript и Slim.js
- Настройка TypeScript
- Типизация компонентов
- Интерфейсы для props
- Типы для событий
- Дженерики в компонентах
- Строгая типизация шаблонов
- Декларации типов для сторонних библиотек
Инструменты разработки
- Настройка сборщиков
- Webpack и Slim.js
- Rollup конфигурация
- Vite для разработки
- Hot Module Replacement
- Source Maps
- Минификация и оптимизация бандла
- Анализ размера сборки
Интеграция с экосистемой
- Использование npm-пакетов
- Web Components и Slim.js
- Интеграция с React
- Интеграция с Vue
- Работа с Shadow DOM
- Custom Elements
- Micro-frontends
Доступность
- ARIA-атрибуты в шаблонах
- Семантическая разметка
- Управление фокусом
- Клавиатурная навигация
- Screen reader поддержка
- Тестирование доступности
- Паттерны WAI-ARIA
Интернационализация
- Подходы к i18n в Slim.js
- Интеграция i18n-библиотек
- Переключение языков
- Форматирование дат и чисел
- Плюрализация
- RTL-поддержка
- Ленивая загрузка переводов
Безопасность
- XSS и защита от инъекций
- Санитизация пользовательского ввода
- Content Security Policy
- Безопасная работа с innerHTML
- CSRF-защита
- Валидация на клиенте и сервере
Развертывание и production
- Подготовка к деплою
- Оптимизация для production
- Code splitting
- Tree shaking
- Кэширование ресурсов
- CDN и статика
- Мониторинг ошибок в production
- Версионирование приложения
Миграция и апгрейд
- Обновление версий Slim.js
- Breaking changes между версиями
- Миграция с других фреймворков
- Постепенное внедрение Slim.js
- Совместимость с legacy-кодом
- Рефакторинг существующих компонентов
Отладка и диагностика
- Инструменты браузера для отладки
- Логирование в компонентах
- Отслеживание жизненного цикла
- Инспектирование состояния
- Performance API
- Memory leaks и их выявление
- Debugging асинхронного кода
Лучшие практики
- Структура файлов и папок
- Соглашения об именовании
- Разделение логики и представления
- Переиспользование кода
- Документирование компонентов
- Code review guidelines
- Антипаттерны и как их избегать