Опубликовано

Представляем книгу React. Сборник рецептов

React. Сборник рецептов

Представляем книгу “React. Сборник рецептов“.

Книга посвящена практическому применению фреймворка React. Описано создание простых приложений и приложений со сложным интерфейсом, рассмотрены вопросы маршрутизации в приложениях и управление их состоянием. Даны примеры реализации интерактивного взаимодействия с пользователем, подключения к различным службам бэкенда, таким как REST и GraphQL, описана работа с библиотеками компонентов. Подробно рассматривается безопасность приложений, процесс их тестирования, даны советы по обеспечению доступности. Приводятся практические рекомендации по повышению производительности и созданию прогрессивных веб-приложений.

Фреймворк React поможет вам создать работоспособное приложение всего за несколько минут. Но научиться использовать составляющие React — работа не из легких. Как выполнить валидацию формы? Или реализовать сложное многошаговое действие пользователя, избежав создания запутанного кода? Как протестировать приложение? Приспособить его для многократного использования? Подключить его к бэкенду? Сделать его легким для понимания? Данная книга дает быстрые ответы на эти и другие вопросы.

Многие книги учат, как начать работу с фреймворком React, понять его архитектуру или использовать библиотеки компонентов, но почти нигде не показаны примеры, помогающие решить конкретные задачи. Этот сборник отсортированных по темам и областям применения рецептов содержит примеры кода, которые позволят разработчикам найти решения наиболее распространенных задач при использовании фреймворка React.

Вы научитесь:

• Создавать одностраничные приложения в React, использующие сложный пользовательский интерфейс
• Создавать прогрессивные веб-приложения, которые пользователи могут устанавливать на своем устройстве и работать с ними в автономном режиме
• Интегрировать разрабатываемые приложения со службами бэкенда, такими как REST и GraphQL
• Выполнять автоматическое тестирование для обнаружения проблем с доступностью в разрабатываемом приложении
• Обеспечивать безопасность приложений при помощи цифровых отпечатков и ключей безопасности с применением технологии WebAuthn
• Исправлять ошибки и избегать распространенных проблем с функциональностью и производительностью

Книга проводит читателя через полный жизненный цикл разработки приложений React. Каждый рецепт — это краткий, легко усваиваемый комплекс знаний. Книга обязательна для прочтения всем разработчикам!
Сэм Уорнер, инженер-программист

Dawn Griffiths

Дон Гриффитс — автор и преподаватель с более чем 20-летним опытом разработки программного обеспечения для настольных компьютеров и Интернета.

Вместе Дэвид и Дон написали несколько книг, включая Head First Android Development и Head First Kotlin. Также они проводят он-лайн консультации для компании O’Reilly.

David Griffiths

Дэвид Гриффитс — автор и преподаватель, занимается разработкой кода в 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

Добавить комментарий