Анхель Сола Орбайсета | Создание фронтенд-фреймворка с нуля [2 книги] (2024, 2025) [PDF, EPUB, MOBI, AZW] [RU, EN]

Об авторе
Анхель Сола Орбайсета — сеньор-разработчик, более 10 лет занимающийся проектированием программных продуктов, от платформенных настольных приложений до бэкенд-сервисов и фронтенд-приложений. Инженер-механик по образованию, но инженер-разработчик по призванию, Анхель — любознательный человек, которому нравится изучать устройство вещей по первоисточнику и обмениваться знаниями с другими. В свободное время он обычно встречается с друзьями, готовит блюда со всего мира или читает книги — чаще всего научно-популярные или антиутопии.

Оглавление

Введение
Благодарности
О.книге
Для кого эта книга
Структура книги
О коде в книге
Форум 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

Оригинал

Build a Frontend Web Framework (From Scratch) by Ángel Sola Orbaiceta

About the book:
Build a Frontend Web Framework (From Scratch) guides you through a simple component-based frontend framework that borrows from React, Svelte, Angular, and other familiar tools. You’ll learn how a modern framework operates by adding features like component state and lifecycle management, a virtual DOM, and reconciliation algorithms to update the HTML efficiently. You’ll appreciate how each critical concept is broken down into easy-to-digest chunks and explained with engaging graphics.
Build a Frontend Web Framework (From Scratch) is a hands-on guide designed to lead you through the creation of your own frontend framework, closely mirroring the tools you routinely use in your professional life. My primary goal is to unveil the inner workings of frameworks, enabling you to harness their power more effectively. But the book isn’t just about education; it’s also about reveling in the journey! Frontend frameworks are intricate pieces of software, and this book was crafted with your learning in mind. Each concept is methodically deconstructed into easily digestible segments, supplemented by diagrams and comprehensive explanations. I aim to equip you with everything you need to construct your own framework.
The first chapter offers a high-level overview of frontend frameworks, providing a foundational understanding without delving into specifics. In the second chapter, you’ll embark on a hands-on journey to create a TODO application using vanilla JavaScript with no framework assistance. If you’ve never built an interactive frontend application without a framework, this exercise will provide insight into the intricacies of connecting the Document Object Model (DOM) and JavaScript code manually. You’ll also appreciate the challenge of modifying the DOM programmatically whenever the application’s state changes. The essence of a framework lies in automating these tasks, which allows you to concentrate on your application’s logic. By mastering the manual process, you’ll gain a deeper appreciation of the indispensable role that a framework plays in your development workflow.

Contents:
Part 1
Are frontend frameworks magic to you?
Vanilla JavaScript—like in the old days
Part 2
Rendering and the virtual DOM
Mounting and destroying the virtual DOM
State management and the application’s lifecycle
Publishing and using your framework’s first version
The reconciliation algorithm: Diffing virtual trees
The reconciliation algorithm: Patching the DOM
Part 3
Stateful components
Component methods
Subcomponents: Communication via props and events
Keyed lists
The component lifecycle hooks and the scheduler
Testing asynchronous components
Appendix