Основополагающая книга по паттернам архитектуры и проектирования приложений на языке JavaScript. Рассмотрены порождающие, поведенческие, структурные паттерны, модули, примеси, наблюдатели и медиаторы, применяемые в веб-разработке, архитектурные подходы MVC, MVP и MVVM, островная архитектура веб-приложений, серверные паттерны, в частности паттерны рендеринга, а также специфические темы и паттерны, важные при работе в React — де-факто главном фреймворке для клиентской веб-разработки на JavaScript.
Для веб-разработчиков
Руководство для разработчиков JavaScript и React
Желаете писать красивый, хорошо структурированный и удобный в поддержке код JavaScript, применяя все современные паттерны проектирования? Хотите, чтобы код получался чистым, эффективным и легко управлялся? Держите руку на пульсе непрерывно обновляющихся лучших практик? В таком случае вам идеально подойдёт обновлённое второе издание данной книги.
В ней подробно разобрано, как применять в JavaScript и React современные паттерны проектирования, а также модули, примеси, наблюдатели и медиаторы. Вы узнаете о паттернах, действующих на стороне сервера, в частности о способах рендеринга, изучите островную архитектуру. Также подробно исследованы известные архитектурные паттерны (MVC, MVP и MVVM) с точки зрения разработчика современных веб-приложений.
Кроме того, вы исследуете современный синтаксис JavaScript, а также специфические паттерны React — в частности хуки, компоненты высшего порядка (HOC) и многие другие, что поможет успевать за вечно изменчивым миром веб-разработки.
В этой книге:
- Архитектурные паттерны для структурирования компонентов и приложений
- Более 20 паттернов проектирования, применимых в JavaScript и React, которые полезны разработчику независимо от его опыта
- Различные категории классических паттернов проектирования, в том числе порождающие, структурные и поведенческие
- Важнейшие приемы повышения производительности, в том числе динамический импорт и разделение кода
- Паттерны рендеринга, в том числе рендеринг на стороне сервера, гидратация, островная архитектура и многие другие приёмы
Книгу “Изучаем паттерны проектирования JavaScript: руководство для разработчиков JavaScript и React, 2-е издание“ можно купить со скидкой в интернет-магазине издательства “БХВ“.
Предисловие…………………………………………………………………………………………… 13
Структура книги………………………………………………………………………………………………………………………… 14
Условные обозначения, используемые в этой книге………………………………………………………………. 15
Использование примеров кода…………………………………………………………………………………………………. 16
Онлайн-обучение O’Reilly…………………………………………………………………………………………………………. 16
Как с нами связаться………………………………………………………………………………………………………………….. 17
Благодарности…………………………………………………………………………………………………………………………… 17
Глава 1. Введение в паттерны проектирования……………………………………… 19
История создания паттернов проектирования………………………………………………………………………… 20
Что такое паттерн?…………………………………………………………………………………………………………………….. 21
Обычный вариант использования паттернов проектирования……………………………………………… 22
Итог……………………………………………………………………………………………………………………………………………… 23
Глава 2. Тестирование паттернов, протопаттерны и правило трех…………. 24
Что такое протопаттерны?……………………………………………………………………………………………………….. 24
“Паттерные” тесты…………………………………………………………………………………………………………………….. 24
Правило трех……………………………………………………………………………………………………………………………… 26
Итог……………………………………………………………………………………………………………………………………………… 26
Глава 3. Структурирование и написание паттернов………………………………. 27
Структура паттерна проектирования……………………………………………………………………………………… 27
Хорошо написанные паттерны………………………………………………………………………………………………… 28
Написание паттерна………………………………………………………………………………………………………………….. 29
Итог……………………………………………………………………………………………………………………………………………… 30
Глава 4. Антипаттерны………………………………………………………………………….. 31
Что такое антипаттерны?………………………………………………………………………………………………………….. 31
Антипаттерны в JavaScript………………………………………………………………………………………………………… 32
Итог……………………………………………………………………………………………………………………………………………… 33
Глава 5. Современный синтаксис и функции JavaScript………………………… 34
Важность разделения приложений………………………………………………………………………………………….. 34
Модули с импортом и экспортом……………………………………………………………………………………………… 35
Объекты модуля…………………………………………………………………………………………………………………………. 37
Модули, загружаемые из удаленных источников………………………………………………………………….. 37
Статический импорт………………………………………………………………………………………………………………….. 38
Динамический импорт……………………………………………………………………………………………………………….. 38
Импорт при взаимодействии…………………………………………………………………………………………………….. 39
Импорт при видимости………………………………………………………………………………………………………………. 39
Модули для сервера………………………………………………………………………………………………………………….. 39
Преимущества использования модулей…………………………………………………………………………………… 40
Классы с конструкторами, геттерами и сеттерами………………………………………………………………… 41
Классы в JavaScript Frameworks……………………………………………………………………………………………….. 43
Итог……………………………………………………………………………………………………………………………………………… 44
Дополнительные материалы…………………………………………………………………………………………………….. 44
Глава 6. Категории паттернов проектирования……………………………………… 45
Предпосылки создания паттернов проектирования……………………………………………………………….. 45
Порождающие паттерны проектирования………………………………………………………………………………. 46
Структурные паттерны проектирования…………………………………………………………………………………. 46
Поведенческие паттерны проектирования………………………………………………………………………………. 46
Классы паттернов проектирования…………………………………………………………………………………………. 46
Итог……………………………………………………………………………………………………………………………………………… 48
Глава 7. Паттерны проектирования JavaScript………………………………………. 49
Порождающие паттерны…………………………………………………………………………………………………………… 49
Паттерн Конструктор………………………………………………………………………………………………………………… 50
Создание объекта…………………………………………………………………………………………………………………. 50
Базовые паттерны Конструктор…………………………………………………………………………………………. 52
Конструкторы с Прототипами……………………………………………………………………………………………. 53
Паттерны Модуль……………………………………………………………………………………………………………………… 53
Объектные литералы……………………………………………………………………………………………………………. 54
Паттерн Модуль…………………………………………………………………………………………………………………… 55
Приватность………………………………………………………………………………………………………………. 55
История………………………………………………………………………………………………………………………. 56
Примеры…………………………………………………………………………………………………………………….. 56
Варианты паттерна Модуль……………………………………………………………………………………………….. 59
Импорт примесей………………………………………………………………………………………………………. 59
Экспорт………………………………………………………………………………………………………………………. 60
Преимущества паттерна Модуль……………………………………………………………………………………….. 60
Недостатки……………………………………………………………………………………………………………………………. 61
Паттерн Модуль с WeakMap……………………………………………………………………………………………….. 61
Модули с современными библиотеками……………………………………………………………………………. 64
Паттерн Раскрывающийся модуль…………………………………………………………………………………………… 64
Преимущества паттерна Раскрывающийся модуль………………………………………………………….. 66
Недостатки паттерна…………………………………………………………………………………………………………… 66
Паттерн Одиночка……………………………………………………………………………………………………………………… 66
Управление состоянием в React………………………………………………………………………………………….. 70
Паттерн Прототип……………………………………………………………………………………………………………………… 71
Паттерн Фабрика……………………………………………………………………………………………………………………….. 74
Когда использовать паттерн Фабрика……………………………………………………………………………….. 76
Когда не следует применять паттерн Фабрика…………………………………………………………………. 77
Абстрактные фабрики………………………………………………………………………………………………………….. 77
Структурные паттерны……………………………………………………………………………………………………………… 78
Паттерн Фасад…………………………………………………………………………………………………………………………… 78
Паттерн Примесь……………………………………………………………………………………………………………………….. 81
Подклассы………………………………………………………………………………………………………………………………….. 81
Примеси………………………………………………………………………………………………………………………………………. 82
Преимущества и недостатки примесей………………………………………………………………………………. 85
Паттерн Декоратор……………………………………………………………………………………………………………………. 85
Псевдоклассические декораторы…………………………………………………………………………………………….. 89
Интерфейсы…………………………………………………………………………………………………………………………… 89
Абстрактные Декораторы…………………………………………………………………………………………………… 90
Преимущества и недостатки Декоратора………………………………………………………………………….. 93
Приспособленец…………………………………………………………………………………………………………………………. 94
Использование Приспособленцев………………………………………………………………………………………. 95
Приспособленцы и обмен данными……………………………………………………………………………………. 95
Реализация классических приспособленцев……………………………………………………………………… 95
Проявление “реализаций”………………………………………………………………………………………… 96
Преобразование кода для использования паттерна Приспособленец……………………………. 98
Простая Фабрика……………………………………………………………………………………………………………….. 100
Управление внешними состояниями………………………………………………………………………………… 101
Паттерн Приспособленец и DOM……………………………………………………………………………………… 102
Пример: централизованная обработка событий…………………………………………………………….. 103
Поведенческие паттерны………………………………………………………………………………………………………… 104
Паттерн Наблюдатель…………………………………………………………………………………………………………….. 105
Разница между паттернами Наблюдатель и Издатель/Подписчик………………………………. 109
Преимущества паттернов Наблюдатель и Издатель/Подписчик………………………………….. 111
Недостатки паттернов Наблюдатель, Издатель/Подписчик…………………………………………. 111
Реализация Издателя/Подписчика……………………………………………………………………………………. 112
Пример реализации Издателя/Подписчика………………………………………………………….. 112
Использование нашей реализации………………………………………………………………………… 113
Уведомления пользовательского интерфейса (UI)………………………………………………. 114
Разделение приложений с помощью реализации Pub/Sub Бена Алмана…………… 115
Разделение приложения jQuery на основе Ajax…………………………………………………… 117
Паттерн Наблюдатель в экосистеме React…………………………………………………………… 120
Паттерн Посредник………………………………………………………………………………………………………………….. 120
Простой Посредник……………………………………………………………………………………………………………. 122
Сходства и различия………………………………………………………………………………………………………….. 123
События…………………………………………………………………………………………………………………… 123
Сторонние объекты………………………………………………………………………………………………… 123
Выбор паттерна: когда какой использовать………………………………………………………… 124
Использование агрегатора событий………………………………………………………………………………… 124
Использование Посредника………………………………………………………………………………………………. 125
Агрегатор событий (Pub/Sub) и посредник, работающие вместе………………………………….. 125
Медиатор/промежуточное ПО в современном JavaScript………………………………………………. 126
Сравнение паттернов Медиатор и Фасад……………………………………………………………………….. 127
Паттерн Команда…………………………………………………………………………………………………………………….. 127
Итог…………………………………………………………………………………………………………………………………………… 129
Глава 8. Паттерны JavaScript MV*………………………………………………………. 130
MVC………………………………………………………………………………………………………………………………………….. 130
MVC из Smalltalk-80…………………………………………………………………………………………………………… 130
MVC для разработчиков JavaScript……………………………………………………………………………………….. 131
Модели………………………………………………………………………………………………………………………………… 132
Представления……………………………………………………………………………………………………………………. 133
Шаблонизация……………………………………………………………………………………………………………………. 135
Контроллеры………………………………………………………………………………………………………………………. 137
Что дает нам MVC?…………………………………………………………………………………………………………………. 137
MVC из Smalltalk-80 на JavaScript…………………………………………………………………………………………. 138
Кратко о MVC………………………………………………………………………………………………………………………….. 138
MVP…………………………………………………………………………………………………………………………………………… 139
Модели, Представления и Presenter’ы………………………………………………………………………………. 139
MVP или MVC?…………………………………………………………………………………………………………………… 140
MVVM………………………………………………………………………………………………………………………………………. 141
История MVVM………………………………………………………………………………………………………………….. 141
Модель………………………………………………………………………………………………………………………………… 142
Представление……………………………………………………………………………………………………………………. 143
ПредставлениеМодель………………………………………………………………………………………………………. 143
Коротко об элементах Представление и ПредставлениеМодель………………………………….. 144
Сравнение компонента ПредставлениеМодель с Моделью………………………………………….. 144
Плюсы и минусы MVVM…………………………………………………………………………………………………………. 144
Преимущества MVVM……………………………………………………………………………………………………….. 144
Недостатки MVVM……………………………………………………………………………………………………………. 145
MVC, MVP или MVVM?………………………………………………………………………………………………………….. 145
Современные паттерны семейства MV*……………………………………………………………………………….. 146
МV* и React.js…………………………………………………………………………………………………………………….. 146
Итог…………………………………………………………………………………………………………………………………………… 147
Глава 9. Паттерны асинхронного программирования………………………….. 148
Асинхронное программирование…………………………………………………………………………………………… 148
Предпосылки……………………………………………………………………………………………………………………………. 150
Паттерны с использованием промисов………………………………………………………………………………….. 151
Сцепление промисов………………………………………………………………………………………………………….. 152
Обработка ошибок с использованием промисов…………………………………………………………….. 152
Промисы и параллелизм……………………………………………………………………………………………………. 153
Последовательное выполнение промисов……………………………………………………………………….. 153
Мемоизация промисов……………………………………………………………………………………………………….. 153
Конвейер промисов……………………………………………………………………………………………………………. 154
Повторное выполнение промисов…………………………………………………………………………………….. 154
Декоратор для промисов…………………………………………………………………………………………………… 155
Гонка промисов………………………………………………………………………………………………………………….. 155
Паттерны async/await……………………………………………………………………………………………………………… 155
Объединение функций async……………………………………………………………………………………………… 156
Итерация async…………………………………………………………………………………………………………………… 156
Обработка ошибок с использованием async……………………………………………………………………. 157
async и параллелизм………………………………………………………………………………………………………….. 157
Последовательное выполнение async………………………………………………………………………………. 157
Мемоизация async………………………………………………………………………………………………………………. 158
Обработка событий с использованием async………………………………………………………………….. 158
Конвейер async/await…………………………………………………………………………………………………………. 158
Повторное выполнение async……………………………………………………………………………………………. 159
Декоратор для async/await………………………………………………………………………………………………… 159
Еще несколько практических примеров………………………………………………………………………………… 159
Отправка HTTP-запроса……………………………………………………………………………………………………. 160
Чтение файла из файловой системы…………………………………………………………………………………. 160
Запись в файл, находящийся в файловой системе…………………………………………………………… 160
Выполнение нескольких операций async…………………………………………………………………………. 160
Последовательное выполнение нескольких операций async…………………………………………. 161
Кеширование результата операции async……………………………………………………………………….. 161
Обработка событий с помощью async/await…………………………………………………………………… 161
Повторное выполнение операции async при сбое…………………………………………………………… 161
Создание декоратора для async/await……………………………………………………………………………… 162
Итоги…………………………………………………………………………………………………………………………………………. 163
Глава 10. Модульные паттерны разработки в JavaScript……………………… 164
Примечание о загрузчиках скриптов……………………………………………………………………………………… 164
Формат AMD……………………………………………………………………………………………………………………………. 164
Начало работы с Модулями…………………………………………………………………………………………….. 165
Модули AMD с jQuery……………………………………………………………………………………………………….. 169
Регистрация jQuery в качестве async-совместимого модуля……………………………….. 169
Почему AMD лучше всего подходит для написания модульного кода на JavaScript? 170
Что еще почитать об AMD……………………………………………………………………………………… 170
Загрузчики скриптов и фреймворки, поддерживающие AMD…………………………….. 171
Формат AMD: итоги…………………………………………………………………………………………………………… 171
CommonJS………………………………………………………………………………………………………………………………… 171
Начало работы с CommonJS……………………………………………………………………………………………. 172
Потребление нескольких зависимостей…………………………………………………………………………… 173
CommonJS в Node.js…………………………………………………………………………………………………………… 173
Подходит ли CommonJS для работы с браузером?………………………………………………………… 174
Что еще почитать о CommonJS………………………………………………………………………………………… 175
AMD и CommonJS: разные, но равные стандарты………………………………………………………………. 175
UMD: формат подключаемых модулей, совместимый с AMD и CommonJS………………… 175
Использование CommonJS, AMD или глобальных параметров браузера для создания модуля 176
Подключаемые модули jQuery, которые работают во всех средах…………………… 177
Что почитать об UMD и AMD………………………………………………………………………………… 180
Итоги…………………………………………………………………………………………………………………………………………. 180
Глава 11. Паттерны пространства имен……………………………………………….. 181
Главное об организации пространств имен………………………………………………………………………….. 181
Одиночные глобальные переменные……………………………………………………………………………………… 182
Пространство имен с префиксом……………………………………………………………………………………………. 182
Литеральная нотация объекта……………………………………………………………………………………………….. 183
Вложенное пространство имен………………………………………………………………………………………………. 186
Выражения с немедленно вызываемой функцией…………………………………………………………………. 187
Внедрение пространства имен……………………………………………………………………………………………….. 189
Более сложные паттерны для организации пространства имен…………………………………………. 191
Автоматизация вложенного пространства имен…………………………………………………………….. 191
Паттерн объявления зависимостей…………………………………………………………………………………… 193
Глубокое расширение объекта…………………………………………………………………………………………. 194
Рекомендации…………………………………………………………………………………………………………………………… 196
Итоги…………………………………………………………………………………………………………………………………………. 196
Глава 12. Паттерны разработки React.js………………………………………………. 197
React: введение………………………………………………………………………………………………………………………… 197
Используемая терминология…………………………………………………………………………………………….. 198
Основные понятия………………………………………………………………………………………………………………. 198
Компоненты более высокого порядка……………………………………………………………………………………. 200
Объединение……………………………………………………………………………………………………………………….. 203
Преимущества паттерна HOC…………………………………………………………………………………………… 203
Недостатки HOC………………………………………………………………………………………………………………… 203
Рендер-пропсы…………………………………………………………………………………………………………………………. 204
Подъем состояния………………………………………………………………………………………………………………. 206
Дочерние элементы в качестве функции………………………………………………………………………….. 208
Преимущества рендер-пропсов………………………………………………………………………………………… 209
Недостатки рендер-пропсов……………………………………………………………………………………………… 209
Паттерн Хуки……………………………………………………………………………………………………………………………. 209
Компоненты классов………………………………………………………………………………………………………….. 210
Реструктуризация………………………………………………………………………………………………………………. 211
Сложность…………………………………………………………………………………………………………………………… 212
Хуки…………………………………………………………………………………………………………………………………….. 212
Хук useState………………………………………………………………………………………………………………………………. 212
Хук useEffect……………………………………………………………………………………………………………………….. 214
Пользовательские Хуки……………………………………………………………………………………………………… 214
Дополнительные рекомендации по использованию Хуков……………………………………………. 216
Преимущества и недостатки Хуков………………………………………………………………………………….. 217
Сравнение Хуков React с классами………………………………………………………………………………….. 219
Статический импорт………………………………………………………………………………………………………………… 220
Динамический импорт…………………………………………………………………………………………………………….. 221
Загружаемые компоненты…………………………………………………………………………………………………. 222
Импорт при взаимодействии……………………………………………………………………………………………… 224
Импорт при появлении в поле видимости………………………………………………………………………… 224
Расщепление кода……………………………………………………………………………………………………………………. 225
Расщепление кода на основе маршрутов………………………………………………………………………… 225
Расщепление кода на основе бандлов……………………………………………………………………………… 226
Паттерн PRPL…………………………………………………………………………………………………………………………… 227
Определение приоритетов загрузки……………………………………………………………………………………….. 230
Предварительная загрузка в одностраничных приложениях………………………………………… 231
Хитрость: предварительная загрузка + async………………………………………………………………….. 232
Предварительная загрузка в Chrome 95+………………………………………………………………………… 232
Виртуализация списков…………………………………………………………………………………………………………… 232
Как работает организация окон/виртуализация?…………………………………………………………… 233
Списки…………………………………………………………………………………………………………………………………. 233
Сетка……………………………………………………………………………………………………………………………………. 235
Улучшения в веб-платформе…………………………………………………………………………………………….. 236
Выводы……………………………………………………………………………………………………………………………………… 236
Итоги…………………………………………………………………………………………………………………………………………. 236
Глава 13. Паттерны рендеринга…………………………………………………………… 237
Паттерны рендеринга — это важно……………………………………………………………………………………….. 238
Рендеринг на стороне клиента (CSR)…………………………………………………………………………………….. 240
Рендеринг на стороне сервера (SSR)……………………………………………………………………………………… 240
Статический рендеринг…………………………………………………………………………………………………………… 241
Инкрементная статическая регенерация (ISR)………………………………………………………………… 243
ISR по требованию…………………………………………………………………………………………………………….. 243
Статический рендеринг: заключение……………………………………………………………………………….. 244
Потоковый SSR………………………………………………………………………………………………………………………… 244
Пограничный SSR……………………………………………………………………………………………………………………. 245
Гибридный рендеринг……………………………………………………………………………………………………………… 246
Постепенная гидратация…………………………………………………………………………………………………………. 246
“Островная” архитектура……………………………………………………………………………………………………….. 247
Реализация островов………………………………………………………………………………………………………….. 248
Преимущества и недостатки островной архитектуры……………………………………………………. 249
React Server Components…………………………………………………………………………………………………………. 250
Гибридный рендеринг с RSC и Маршрутизатор приложений Next.js…………………………… 251
Итоги…………………………………………………………………………………………………………………………………………. 251
Глава 14. Структура приложения для React.js………………………………………. 254
Введение…………………………………………………………………………………………………………………………………… 254
Группировка по модулям, функциям или маршрутам……………………………………………………. 254
Группировка по типу файла……………………………………………………………………………………………… 255
Гибридная группировка на основе домена и общих компонентов……………………………….. 256
Структура приложения для современных функций React…………………………………………………… 257
Redux…………………………………………………………………………………………………………………………………… 258
Контейнеры………………………………………………………………………………………………………………………… 258
Хуки…………………………………………………………………………………………………………………………………….. 258
Стилизованные компоненты……………………………………………………………………………………………… 259
Другие рекомендации……………………………………………………………………………………………………………… 259
Структура для приложений Next.js………………………………………………………………………………………… 261
Итог…………………………………………………………………………………………………………………………………………… 262
Глава 15. Выводы………………………………………………………………………………… 263
Предметный указатель…………………………………………………………………………. 265
Об авторе……………………………………………………………………………………………… 269
Об изображении на обложке………………………………………………………………… 270
Эдди Османи – ведущий инженер компании Google, руководитель разработчиков браузера Chrome.