Представляем книгу “React. Сборник рецептов“.
Книга посвящена практическому применению фреймворка React. Описано создание простых приложений и приложений со сложным интерфейсом, рассмотрены вопросы маршрутизации в приложениях и управление их состоянием. Даны примеры реализации интерактивного взаимодействия с пользователем, подключения к различным службам бэкенда, таким как REST и GraphQL, описана работа с библиотеками компонентов. Подробно рассматривается безопасность приложений, процесс их тестирования, даны советы по обеспечению доступности. Приводятся практические рекомендации по повышению производительности и созданию прогрессивных веб-приложений.
Фреймворк React поможет вам создать работоспособное приложение всего за несколько минут. Но научиться использовать составляющие React — работа не из легких. Как выполнить валидацию формы? Или реализовать сложное многошаговое действие пользователя, избежав создания запутанного кода? Как протестировать приложение? Приспособить его для многократного использования? Подключить его к бэкенду? Сделать его легким для понимания? Данная книга дает быстрые ответы на эти и другие вопросы.
Многие книги учат, как начать работу с фреймворком React, понять его архитектуру или использовать библиотеки компонентов, но почти нигде не показаны примеры, помогающие решить конкретные задачи. Этот сборник отсортированных по темам и областям применения рецептов содержит примеры кода, которые позволят разработчикам найти решения наиболее распространенных задач при использовании фреймворка React.
Вы научитесь:
• Создавать одностраничные приложения в React, использующие сложный пользовательский интерфейс
• Создавать прогрессивные веб-приложения, которые пользователи могут устанавливать на своем устройстве и работать с ними в автономном режиме
• Интегрировать разрабатываемые приложения со службами бэкенда, такими как REST и GraphQL
• Выполнять автоматическое тестирование для обнаружения проблем с доступностью в разрабатываемом приложении
• Обеспечивать безопасность приложений при помощи цифровых отпечатков и ключей безопасности с применением технологии WebAuthn
• Исправлять ошибки и избегать распространенных проблем с функциональностью и производительностью
Книга проводит читателя через полный жизненный цикл разработки приложений React. Каждый рецепт — это краткий, легко усваиваемый комплекс знаний. Книга обязательна для прочтения всем разработчикам!
Сэм Уорнер, инженер-программист
Дон Гриффитс — автор и преподаватель с более чем 20-летним опытом разработки программного обеспечения для настольных компьютеров и Интернета.
Вместе Дэвид и Дон написали несколько книг, включая Head First Android Development и Head First Kotlin. Также они проводят он-лайн консультации для компании O’Reilly.
Дэвид Гриффитс — автор и преподаватель, занимается разработкой кода в React на профессиональном уровне в течение 5 лет. Создавал приложения для стартапов, магазинов розничной торговли, производителей транспортных средств, национальных спортивных команд и крупных поставщиков программного обеспечения.
Книгу “React. Сборник рецептов” можно купить со скидкой в интернет-магазине издательства “БХВ”.
Введение………………………………………………………………………………………………… 13
Типографские соглашения………………………………………………………………………………………………………… 15
Использование примеров кода…………………………………………………………………………………………………. 15
Возможности онлайнового обучения от компании O’Reilly…………………………………………………… 16
Как связаться с нами………………………………………………………………………………………………………………….. 16
Благодарности…………………………………………………………………………………………………………………………… 17
Глава 1. Создание приложений………………………………………………………………. 19
1.1. Создаем простое приложение……………………………………………………………………………………………. 19
ЗАДАЧА……………………………………………………………………………………………………………………………….. 19
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 19
Обсуждение………………………………………………………………………………………………………………………….. 23
1.2. Создание приложений с обширным информационным наполнением
посредством Gatsby…………………………………………………………………………………………………………….. 24
ЗАДАЧА……………………………………………………………………………………………………………………………….. 24
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 24
Обсуждение………………………………………………………………………………………………………………………….. 27
1.3. Создание универсальных приложений с помощью Razzle……………………………………………… 28
ЗАДАЧА……………………………………………………………………………………………………………………………….. 28
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 28
Обсуждение………………………………………………………………………………………………………………………….. 30
1.4. Создание серверного и клиентского кода посредством Next.js………………………………………. 30
ЗАДАЧА……………………………………………………………………………………………………………………………….. 30
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 31
Обсуждение………………………………………………………………………………………………………………………….. 32
1.5. Создание крошечных приложений посредством Preact………………………………………………….. 33
ЗАДАЧА……………………………………………………………………………………………………………………………….. 33
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 33
Обсуждение………………………………………………………………………………………………………………………….. 36
1.6. Создание библиотек посредством набора инструментов nwb……………………………………….. 37
ЗАДАЧА……………………………………………………………………………………………………………………………….. 37
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 37
Обсуждение………………………………………………………………………………………………………………………….. 39
1.7. Добавление React в код Rails посредством Webpacker……………………………………………………. 39
ЗАДАЧА……………………………………………………………………………………………………………………………….. 39
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 39
Обсуждение………………………………………………………………………………………………………………………….. 41
1.8. Создание пользовательских элементов посредством Preact…………………………………………… 41
ЗАДАЧА……………………………………………………………………………………………………………………………….. 41
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 41
Обсуждение………………………………………………………………………………………………………………………….. 44
1.9. Разработка компонентов посредством Storybook……………………………………………………………. 45
ЗАДАЧА……………………………………………………………………………………………………………………………….. 45
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 45
Обсуждение………………………………………………………………………………………………………………………….. 48
1.10. Тестирование кода в браузере посредством Cypress…………………………………………………….. 48
ЗАДАЧА……………………………………………………………………………………………………………………………….. 48
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 48
Обсуждение………………………………………………………………………………………………………………………….. 49
Глава 2. Маршрутизация……………………………………………………………………….. 51
2.1. Создание интерфейсов, используя реагирующую маршрутизацию………………………………. 51
ЗАДАЧА……………………………………………………………………………………………………………………………….. 51
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 52
Обсуждение………………………………………………………………………………………………………………………….. 58
2.2. Размещение состояния в маршрутах…………………………………………………………………………………. 59
ЗАДАЧА……………………………………………………………………………………………………………………………….. 59
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 60
Обсуждение………………………………………………………………………………………………………………………….. 64
2.3. Модульное тестирование посредством MemoryRouter…………………………………………………… 65
ЗАДАЧА……………………………………………………………………………………………………………………………….. 65
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 66
Обсуждение………………………………………………………………………………………………………………………….. 67
2.4. Подтверждение ухода со страницы посредством компонента Prompt………………………….. 68
ЗАДАЧА……………………………………………………………………………………………………………………………….. 68
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 69
Обсуждение………………………………………………………………………………………………………………………….. 75
2.5. Создание переходов посредством библиотеки React Transition Group………………………….. 75
ЗАДАЧА……………………………………………………………………………………………………………………………….. 75
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 76
Обсуждение………………………………………………………………………………………………………………………….. 81
2.6. Создание защищенных маршрутов…………………………………………………………………………………… 81
ЗАДАЧА……………………………………………………………………………………………………………………………….. 81
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 82
Обсуждение………………………………………………………………………………………………………………………….. 86
Глава 3. Управление состоянием……………………………………………………………. 87
3.1. Управление сложным состоянием посредством преобразователей………………………………. 87
ЗАДАЧА……………………………………………………………………………………………………………………………….. 87
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 88
Обсуждение………………………………………………………………………………………………………………………….. 94
3.2. Создание возможности “Отмена”………………………………………………………………………………………. 95
ЗАДАЧА……………………………………………………………………………………………………………………………….. 95
РЕШЕНИЕ……………………………………………………………………………………………………………………………. 95
Обсуждение……………………………………………………………………………………………………………………….. 101
3.3. Создание форм и проверка действительности их данных…………………………………………….. 102
ЗАДАЧА……………………………………………………………………………………………………………………………… 102
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 102
Обсуждение……………………………………………………………………………………………………………………….. 110
3.4. Часы для измерения времени……………………………………………………………………………………………. 110
ЗАДАЧА……………………………………………………………………………………………………………………………… 110
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 110
Обсуждение……………………………………………………………………………………………………………………….. 113
3.5. Мониторинг состояния сетевого подключения……………………………………………………………… 114
ЗАДАЧА……………………………………………………………………………………………………………………………… 114
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 114
Обсуждение……………………………………………………………………………………………………………………….. 116
3.6. Управление глобальным состоянием посредством библиотеки Redux……………………….. 116
ЗАДАЧА……………………………………………………………………………………………………………………………… 116
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 116
Обсуждение……………………………………………………………………………………………………………………….. 122
3.7. Сохранение состояния при обновлении страниц посредством Redux Persist……………… 123
ЗАДАЧА……………………………………………………………………………………………………………………………… 123
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 124
Обсуждение……………………………………………………………………………………………………………………….. 127
3.8. Вычисление производного состояния посредством Reselect………………………………………… 127
ЗАДАЧА……………………………………………………………………………………………………………………………… 127
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 128
Обсуждение……………………………………………………………………………………………………………………….. 131
Глава 4. Проектирование для обеспечения интерактивности……………….. 133
4.1. Создание центрального обработчика ошибок………………………………………………………………. 133
ЗАДАЧА……………………………………………………………………………………………………………………………… 133
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 134
Обсуждение……………………………………………………………………………………………………………………….. 138
4.2. Создаем интерактивное справочное руководство…………………………………………………………. 139
ЗАДАЧА……………………………………………………………………………………………………………………………… 139
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 139
Обсуждение……………………………………………………………………………………………………………………….. 146
4.3. Сложные взаимодействия посредством преобразователей………………………………………….. 146
ЗАДАЧА……………………………………………………………………………………………………………………………… 146
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 147
Обсуждение……………………………………………………………………………………………………………………….. 153
4.4. Взаимодействие с клавиатурой……………………………………………………………………………………….. 153
ЗАДАЧА……………………………………………………………………………………………………………………………… 153
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 153
Обсуждение……………………………………………………………………………………………………………………….. 156
4.5. Создание насыщенного содержимого посредством редактора Markdown…………………. 156
ЗАДАЧА……………………………………………………………………………………………………………………………… 156
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 156
Обсуждение……………………………………………………………………………………………………………………….. 161
4.6. Анимация посредством классов CSS………………………………………………………………………………. 161
ЗАДАЧА……………………………………………………………………………………………………………………………… 161
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 161
Обсуждение……………………………………………………………………………………………………………………….. 163
4.7. Анимация средствами React…………………………………………………………………………………………….. 163
ЗАДАЧА……………………………………………………………………………………………………………………………… 163
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 164
Обсуждение……………………………………………………………………………………………………………………….. 168
4.8. Анимация информационной графики посредством библиотеки TweenOne………………… 168
ЗАДАЧА……………………………………………………………………………………………………………………………… 168
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 169
Обсуждение……………………………………………………………………………………………………………………….. 175
Глава 5. Подключение к службам………………………………………………………… 176
5.1. Преобразование сетевых вызовов в хуки……………………………………………………………………….. 176
ЗАДАЧА……………………………………………………………………………………………………………………………… 176
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 177
Обсуждение……………………………………………………………………………………………………………………….. 182
5.2. Автоматическое обновление посредством счетчиков состояния…………………………………. 183
ЗАДАЧА……………………………………………………………………………………………………………………………… 183
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 184
Обсуждение……………………………………………………………………………………………………………………….. 191
5.3. Отмена сетевых запросов посредством маркеров…………………………………………………………. 192
ЗАДАЧА……………………………………………………………………………………………………………………………… 192
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 192
Обсуждение……………………………………………………………………………………………………………………….. 195
5.4. Сетевые вызовы посредством Redux………………………………………………………………………………. 195
ЗАДАЧА……………………………………………………………………………………………………………………………… 195
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 196
Обсуждение……………………………………………………………………………………………………………………….. 201
5.5. Подключение к GraphQL………………………………………………………………………………………………….. 202
ЗАДАЧА……………………………………………………………………………………………………………………………… 202
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 202
Обсуждение……………………………………………………………………………………………………………………….. 209
5.6. Уменьшение сетевой нагрузки при помощи очищенных запросов………………………………. 210
ЗАДАЧА……………………………………………………………………………………………………………………………… 210
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 211
Обсуждение……………………………………………………………………………………………………………………….. 213
Глава 6. Библиотеки компонентов……………………………………………………….. 214
6.1. Использование библиотеки Material Design совместно с библиотекой Material-UI……. 215
ЗАДАЧА……………………………………………………………………………………………………………………………… 215
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 215
Обсуждение……………………………………………………………………………………………………………………….. 222
6.2. Простой пользовательский интерфейс посредством React Bootstrap………………………….. 223
ЗАДАЧА……………………………………………………………………………………………………………………………… 223
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 223
Обсуждение……………………………………………………………………………………………………………………….. 227
6.3. Просмотр наборов данных посредством окна React Window………………………………………. 227
ЗАДАЧА……………………………………………………………………………………………………………………………… 227
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 227
Обсуждение……………………………………………………………………………………………………………………….. 230
6.4. Создание реагирующих диалоговых окон посредством библиотеки Material-UI………. 230
ЗАДАЧА……………………………………………………………………………………………………………………………… 230
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 230
Обсуждение……………………………………………………………………………………………………………………….. 232
6.5. Создание консоли администратора посредством React Admin…………………………………… 233
ЗАДАЧА……………………………………………………………………………………………………………………………… 233
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 233
Обсуждение……………………………………………………………………………………………………………………….. 240
6.6. Использование Semantic UI вместо дизайнера………………………………………………………………. 240
ЗАДАЧА……………………………………………………………………………………………………………………………… 240
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 241
Обсуждение……………………………………………………………………………………………………………………….. 246
Глава 7. Безопасность………………………………………………………………………….. 247
7.1. Защищаем запросы, а не маршруты……………………………………………………………………………….. 247
ЗАДАЧА……………………………………………………………………………………………………………………………… 247
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 247
Обсуждение……………………………………………………………………………………………………………………….. 255
7.2. Аутентификация посредством физических ключей……………………………………………………….. 256
ЗАДАЧА……………………………………………………………………………………………………………………………… 256
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 256
Обсуждение……………………………………………………………………………………………………………………….. 266
7.3. Работа с протоколом HTTPS……………………………………………………………………………………………. 267
ЗАДАЧА……………………………………………………………………………………………………………………………… 267
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 267
Обсуждение……………………………………………………………………………………………………………………….. 271
7.4. Аутентификация посредством отпечатка пальца………………………………………………………….. 271
ЗАДАЧА……………………………………………………………………………………………………………………………… 271
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 271
Обсуждение……………………………………………………………………………………………………………………….. 276
7.5. Подтверждение действий, предоставляя учетные данные……………………………………………. 277
ЗАДАЧА……………………………………………………………………………………………………………………………… 277
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 277
Обсуждение……………………………………………………………………………………………………………………….. 283
7.6. Однофакторная аутентификация…………………………………………………………………………………….. 284
ЗАДАЧА……………………………………………………………………………………………………………………………… 284
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 284
Обсуждение……………………………………………………………………………………………………………………….. 288
7.7. Проверка приложения на устройстве Android……………………………………………………………….. 289
ЗАДАЧА……………………………………………………………………………………………………………………………… 289
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 290
Обсуждение……………………………………………………………………………………………………………………….. 291
7.8. Проверка безопасности посредством ESlint…………………………………………………………………… 291
ЗАДАЧА……………………………………………………………………………………………………………………………… 291
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 292
Обсуждение……………………………………………………………………………………………………………………….. 295
7.9. Удобные для браузера формы входа в систему…………………………………………………………….. 296
ЗАДАЧА……………………………………………………………………………………………………………………………… 296
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 296
Обсуждение……………………………………………………………………………………………………………………….. 297
Глава 8. Тестирование………………………………………………………………………….. 299
8.1. Работа с библиотекой React Testing Library…………………………………………………………………… 300
ЗАДАЧА……………………………………………………………………………………………………………………………… 300
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 301
Обсуждение……………………………………………………………………………………………………………………….. 307
8.2. Использование Storybook для тестирования отрисовки……………………………………………….. 308
ЗАДАЧА……………………………………………………………………………………………………………………………… 308
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 308
Обсуждение……………………………………………………………………………………………………………………….. 314
8.3. Тестирование без сервера посредством Cypress……………………………………………………………. 315
ЗАДАЧА……………………………………………………………………………………………………………………………… 315
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 315
Обсуждение……………………………………………………………………………………………………………………….. 322
8.4. Использование Cypress для офлайнового тестирования……………………………………………….. 323
ЗАДАЧА……………………………………………………………………………………………………………………………… 323
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 323
Обсуждение……………………………………………………………………………………………………………………….. 326
8.5. Использование Selenium для тестирования в браузере…………………………………………………. 326
ЗАДАЧА……………………………………………………………………………………………………………………………… 326
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 327
Обсуждение……………………………………………………………………………………………………………………….. 333
8.6. Тестирование внешнего вида на разных браузерах посредством ImageMagick………… 334
ЗАДАЧА……………………………………………………………………………………………………………………………… 334
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 334
Обсуждение……………………………………………………………………………………………………………………….. 341
8.7. Добавление консоли в браузер мобильного устройства………………………………………………. 342
ЗАДАЧА……………………………………………………………………………………………………………………………… 342
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 342
Обсуждение……………………………………………………………………………………………………………………….. 345
8.8. Удаление произвольности из тестов……………………………………………………………………………….. 346
ЗАДАЧА……………………………………………………………………………………………………………………………… 346
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 347
Обсуждение……………………………………………………………………………………………………………………….. 349
8.9. Путешествие во времени…………………………………………………………………………………………………… 350
ЗАДАЧА……………………………………………………………………………………………………………………………… 350
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 350
Обсуждение……………………………………………………………………………………………………………………….. 355
Глава 9. Доступность специальных возможностей……………………………….. 356
9.1. Использование ориентиров……………………………………………………………………………………………… 357
ЗАДАЧА……………………………………………………………………………………………………………………………… 357
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 359
Обсуждение……………………………………………………………………………………………………………………….. 362
9.2. Применение ролей…………………………………………………………………………………………………………….. 362
ЗАДАЧА……………………………………………………………………………………………………………………………… 362
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 363
Обсуждение……………………………………………………………………………………………………………………….. 371
9.3. Проверка доступности посредством ESlint…………………………………………………………………….. 372
ЗАДАЧА……………………………………………………………………………………………………………………………… 372
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 372
Обсуждение……………………………………………………………………………………………………………………….. 378
9.4. Динамический анализ посредством axe DevTools…………………………………………………………. 379
ЗАДАЧА……………………………………………………………………………………………………………………………… 379
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 379
Обсуждение……………………………………………………………………………………………………………………….. 383
9.5. Автоматизация тестирования в браузере посредством Cypress Axe……………………………. 384
ЗАДАЧА……………………………………………………………………………………………………………………………… 384
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 384
Обсуждение……………………………………………………………………………………………………………………….. 387
9.6. Добавление в страницу кнопок пропуска содержимого……………………………………………….. 388
ЗАДАЧА……………………………………………………………………………………………………………………………… 388
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 389
Обсуждение……………………………………………………………………………………………………………………….. 394
9.7. Добавление возможности пропуска областей страницы……………………………………………… 395
ЗАДАЧА……………………………………………………………………………………………………………………………… 395
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 396
Обсуждение……………………………………………………………………………………………………………………….. 404
9.8. Захват области действия в модальных окнах………………………………………………………………… 404
ЗАДАЧА……………………………………………………………………………………………………………………………… 404
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 406
Обсуждение……………………………………………………………………………………………………………………….. 407
9.9. Создание считывателя экрана посредством Speech API………………………………………………. 407
ЗАДАЧА……………………………………………………………………………………………………………………………… 407
РЕШЕНИЕ………………………………………………………………………………………………………………………….. 408
Обсуждение……………………………………………………………………………………………………………………….. 412
Глава 10. Производительность……………………………………………………………… 413
10.1. Браузерные средства настройки производительности……………………………………………….. 414
ЗАДАЧА……………………………………………………………………………………………………………………………. 414
РЕШЕНИЕ………………………………………………………………………………………………………………………… 414
Обсуждение……………………………………………………………………………………………………………………… 421
10.2. Слежение за отрисовкой посредством Profiler…………………………………………………………….. 421
ЗАДАЧА……………………………………………………………………………………………………………………………. 421
РЕШЕНИЕ………………………………………………………………………………………………………………………… 422
Обсуждение……………………………………………………………………………………………………………………… 427
10.3. Создание модульных тестов с Profiler………………………………………………………………………….. 427
ЗАДАЧА……………………………………………………………………………………………………………………………. 427
РЕШЕНИЕ………………………………………………………………………………………………………………………… 427
Обсуждение……………………………………………………………………………………………………………………… 431
10.4. Точное измерение времени…………………………………………………………………………………………….. 432
ЗАДАЧА……………………………………………………………………………………………………………………………. 432
РЕШЕНИЕ………………………………………………………………………………………………………………………… 433
Обсуждение……………………………………………………………………………………………………………………… 434
10.5. Уменьшение размера приложений посредством разделения кода…………………………….. 436
ЗАДАЧА……………………………………………………………………………………………………………………………. 436
РЕШЕНИЕ………………………………………………………………………………………………………………………… 437
Обсуждение……………………………………………………………………………………………………………………… 442
10.6. Объединение сетевых обещаний…………………………………………………………………………………… 443
ЗАДАЧА……………………………………………………………………………………………………………………………. 443
РЕШЕНИЕ………………………………………………………………………………………………………………………… 444
Обсуждение……………………………………………………………………………………………………………………… 446
10.7. Отрисовка на стороне сервера………………………………………………………………………………………. 447
ЗАДАЧА……………………………………………………………………………………………………………………………. 447
РЕШЕНИЕ………………………………………………………………………………………………………………………… 447
Обсуждение……………………………………………………………………………………………………………………… 457
10.8. Использование основных показателей веб-производительности………………………………. 458
ЗАДАЧА……………………………………………………………………………………………………………………………. 458
РЕШЕНИЕ………………………………………………………………………………………………………………………… 459
Обсуждение……………………………………………………………………………………………………………………… 461
Глава 11. Прогрессивные веб-приложения…………………………………………… 462
11.1. Создаем сервис-воркеры посредством Workbox………………………………………………………….. 462
ЗАДАЧА……………………………………………………………………………………………………………………………. 462
РЕШЕНИЕ………………………………………………………………………………………………………………………… 465
Обсуждение……………………………………………………………………………………………………………………… 479
11.2. Создание прогрессивных веб-приложений посредством Create React App………………. 480
ЗАДАЧА……………………………………………………………………………………………………………………………. 480
РЕШЕНИЕ………………………………………………………………………………………………………………………… 480
Обсуждение……………………………………………………………………………………………………………………… 483
11.3. Кеширование сторонних ресурсов……………………………………………………………………………….. 483
ЗАДАЧА……………………………………………………………………………………………………………………………. 483
РЕШЕНИЕ………………………………………………………………………………………………………………………… 483
Обсуждение……………………………………………………………………………………………………………………… 487
11.4. Автоматическая перезагрузка воркеров……………………………………………………………………….. 487
ЗАДАЧА……………………………………………………………………………………………………………………………. 487
РЕШЕНИЕ………………………………………………………………………………………………………………………… 489
Обсуждение……………………………………………………………………………………………………………………… 492
11.5. Добавление извещений…………………………………………………………………………………………………… 492
ЗАДАЧА……………………………………………………………………………………………………………………………. 492
РЕШЕНИЕ………………………………………………………………………………………………………………………… 493
Обсуждение……………………………………………………………………………………………………………………… 499
11.6. Модификации в режиме офлайн посредством фоновой синхронизации…………………… 500
ЗАДАЧА……………………………………………………………………………………………………………………………. 500
РЕШЕНИЕ………………………………………………………………………………………………………………………… 500
Обсуждение……………………………………………………………………………………………………………………… 505
11.7. Добавляем специализированный установочный пользовательский интерфейс………. 506
ЗАДАЧА……………………………………………………………………………………………………………………………. 506
РЕШЕНИЕ………………………………………………………………………………………………………………………… 507
Обсуждение……………………………………………………………………………………………………………………… 510
11.8. Предоставление ответов в режиме офлайн…………………………………………………………………… 511
ЗАДАЧА……………………………………………………………………………………………………………………………. 511
РЕШЕНИЕ………………………………………………………………………………………………………………………… 512
Обсуждение……………………………………………………………………………………………………………………… 515
Предметный указатель…………………………………………………………………………. 517
Об авторах……………………………………………………………………………………………. 525
Об обложке…………………………………………………………………………………………… 526
-
НОВИНКА
React. Сборник рецептов
1375 ₽
1169 ₽
