Создание фронтенд-фреймворка с нуля

Введение
Благодарности
О книге
Для кого эта книга
Структура книги
О коде в книге
Форум LiveBook
Онлайн-ресурсы
Об авторе
Иллюстрация на обложке
От издательства
Часть 1 Без фреймворка
Глава 1. Магические фронтенд-фреймворки
1.1. Для чего писать свой фронтенд-фреймворк
1.2. Фреймворк, который мы создадим
1.2.1. Функциональность
1.2.2. План реализации
1.3. Общий обзор работы фронтенд-фреймворка
1.3.1. Сторона разработчика
1.3.2. SPA на стороне браузера
1.3.3. SSR-приложение со стороны браузера и сервера
Итоги
Глава 2. Ванильный JavaScript — как в старые добрые времена
2.1. Постановка задачи: приложение «Список задач»
2.2. Написание приложения
2.2.1. Создание проекта
2.2.2. HTML-разметка
2.2.3. Код JavaScript
Итоги
Часть 2 Простейший фреймворк
Глава 3. Рендеринг и виртуальный DOM
3.1. Разделение обязанностей: манипуляции с DOM и логика приложения
3.2. Виртуальная модель DOM
3.3. Подготовка
3.4. Типы узлов
3.5. Узлы элементов
3.5.1. Условный рендеринг: удаление значений null
3.5.2. Отображение строк на текстовые узлы
3.6. Текстовые узлы
3.7. Узлы фрагментов
3.7.1. Реализация узлов фрагментов
3.7.2. Тестирование функций виртуального DOM
3.8. Компоненты: ключевой элемент фронтенд-фреймворков
3.8.1. Что такое компонент?
3.8.2. Виртуальный DOM как функция состояния
3.8.3. Составление представлений: компоненты как дочерние элементы
Итоги
Глава 4. Монтирование и уничтожение виртуального DOM
4.1. Монтирование виртуального DOM
4.1.1. Монтирование виртуальных узлов в DOM
4.1.2. Монтирование текстовых узлов
4.1.3. Монтирование узлов фрагментов
4.1.4. Монтирование узлов элементов
4.1.5. Добавление обработчика событий
4.1.6. Назначение атрибутов
4.1.7. Пример использования mountDOM()
4.2. Уничтожение DOM
4.2.1. Уничтожение текстового узла
4.2.2. Уничтожение элемента
4.2.3. Уничтожение фрагмента
Итоги
Глава 5. Управление состоянием и жизненный цикл приложения
5.1. Менеджер состояния
5.1.1. От событий JavaScript к командам предметной области приложения
5.1.2. Функции-редьюсеры
5.1.3. Диспетчер
5.1.4. Результат
5.2. Интеграция менеджера состояния во фреймворк
5.2.1. Экземпляр приложения
5.2.2. Рендерер экземпляра приложения
5.2.3. Менеджер состояния экземпляра приложения
5.2.4. Отправка команд компонентами
5.2.5. Демонтирование приложения
5.2.6. Результат
Итоги
Глава 6. Публикация и использование первой версии фреймворка
6.1. Сборка и публикация фреймворка
6.2. Короткий пример
6.3. Рефакторинг приложения «Список задач»
6.3.1. Определение состояния
6.3.2. Определение функций-редьюсеров
6.3.3. Определение представления
Итоги
Глава 7. Алгоритм согласования: поиск расхождений в виртуальных деревьях
7.1. Три ключевые функции алгоритма согласования
7.2. Сравнение двух виртуальных DOM
7.2.1. Поиск различий
7.2.2. Применение изменений
7.3. Изменения в рендеринге
7.4. Поиск различий между объектами
7.5. Поиск различий в массивах
7.6. Сравнение массивов как последовательность операций
7.6.1. Определение операций, которые могут использоваться
7.6.2. Поиск последовательности операций: алгоритм
7.6.3. Ручная реализация примера
7.6.4. Реализация алгоритма
Итоги
Глава 8. Алгоритм согласования: обновление DOM
8.1. Монтирование DOM по индексу
8.1.1. Функция insert()
8.1.2. Текстовые узлы
8.1.3. Узлы элементов
8.1.4. Узлы фрагментов
8.2. Обновление DOM
8.2.1. Алгоритм согласования
8.2.2. Равенство виртуальных узлов
8.2.3. Изменение поддерева
8.2.4. Обновление текстовых узлов
8.2.5. Обновление узлов элементов
8.2.6. Обновление дочерних узлов
8.3. Публикация новой версии фреймворка
8.4. Приложение «Список задач»
8.4.1. Анализ изменений в дереве DOM
8.4.2. Инструмент paint-flashing (только в Chrome)
Итоги
Часть 3 Улучшение фреймворка
Глава 9. Компоненты с состоянием
9.1. Анатомия компонента с состоянием
9.1.1. Свойства компонента с состоянием
9.1.2. Методы компонента с состоянием
9.2. Компоненты как классы
9.3. Компоненты с состоянием
9.3.1. Обновление состояния и DOM
9.3.2. Результат
9.3.3. Смещение компонента
9.3.4. Обновление DOM с использованием смещения компонента
Итоги
Глава 10. Методы компонента
10.1. Методы компонентов
10.2. Связывание обработчиков событий с компонентом
10.3. Монтирование DOM с компонентом-хостом
10.4. Обновление DOM компонентом-хостом
Итоги
Глава 11. Подкомпоненты: взаимодействие через свойства и события
11.1. Добавление компонентов как нового типа виртуального узла DOM
11.1.1. Обновление метода получения элементов
11.1.2. Монтирование виртуальных узлов компонентов
11.1.3. Уничтожение виртуальных узлов компонентов
11.1.4. Обновление виртуальных узлов компонента
11.1.5. Оптимизация рендеринга (опционально)
11.2. События
11.2.1. Сохранение обработчиков событий в компоненте
11.2.2. Извлечение свойств и событий для компонента
11.2.3. Подключение обработчиков событий
11.2.4. Генерирование событий
Итоги
Глава 12. Cписки с ключами
12.1. Атрибут key
12.1.1. Равенство узлов компонентов
12.1.2. Использование атрибута key
12.1.3. Удаление атрибута key из объекта props
12.2. Расширение решения для узлов элементов
12.3. Использование атрибута key
12.3.1. Ошибка № 1: использование индекса в качестве ключа
12.3.2. Ошибка № 2: использование одного ключа для разных элементов
12.4. Экземпляр приложения
12.5. Публикация фреймворка
Итоги
Глава 13. Хуки жизненного цикла и планировщик
13.1. Жизненный цикл компонента
13.2. Реализация хуков жизненного цикла onMounted() и onUnmounted()
13.2.1. Асинхронность хуков
13.2.2. Контекст выполнения хуков
13.2.3. Асинхронность и контекст выполнения
13.3. Планировщик
13.3.1. Простое (и не совсем работающее) решение
13.3.2. Задачи, микрозадачи и цикл событий
13.3.3. Итерация цикла событий
13.3.4. Основные принципы работы планировщика
13.3.5. Реализация планировщика
13.3.6. Планирование выполнения хуков жизненного цикла
13.4. Публикация 4-й версии фреймворка
Итоги
Глава 14. Тестирование асинхронных компонентов
14.1. Тестирование компонентов с асинхронным поведением: nextTick()
14.1.1. Тестирование компонента с асинхронным хуком onMounted()
14.1.2. Основные принципы функции nextTick()
14.1.3. Реализация функции nextTick()
14.2. Публикация версии 4.1 фреймворка
14.3. Что дальше?
Итоги
Приложение А. Настройка проекта
П.1. Где найти исходный код
П.1.1. Извлечение кода каждой главы
П.1.2. Замечания о коде
П.1.3. Сообщения о проблемах в коде
П.1.4. Самостоятельное исправление ошибки
П.2. Решения к упражнениям
П.3. Дополнительный материал
П.4. Об используемых технологиях
П.4.1. Менеджер пакетов: npm
П.4.2. Бандлер: Rollup
П.4.3. Статический анализатор: ESLint
П.4.4. (Дополнительно) Тестирование: Vitest
П.4.5. Язык: JavaScript
П.5. Чтение документации
П.6. Структура проекта
П.7. Выбор имени для фреймворка
П.8. Вариант A: использование командной строки
П.9. Вариант Б: создание проекта с нуля
П.9.1. Каталог examples
П.9.2. Создание runtime-пакета
П.10. Публикация фреймворка в npm
П.10.1. Создание учетной записи npm
П.10.2. Вход в npm
П.10.3. Публикация фреймворка
П.11. Импорт фреймворка через CDN

Мы используем фронтенд-фреймворки каждый день, но вряд ли действительно понимаем, что происходит там, под капотом. Создание своего фреймворка — отличный способ узнать, как он работает с DOM, генерирует представления страниц, передает данные между компонентами и взаимодействует с операционной системой. Шаг за шагом мы будем создавать собственный фреймворк на JavaScript и опубликуем его как npm-пакет.

Пора разобраться, как работает современный фреймворк, научиться управлять состоянием компонентов и их жизненным циклом, работать с виртуальным DOM и использовать алгоритмы согласования для эффективного обновления HTML. Все ключевые концепции изложены простым языком и сопровождаются схемами. Многие концепции заимствованы из React, Svelte, Angular и других известных инструментов