WebAssembly в действии

Предисловие....17

Благодарности....19

О книге....21

Для кого эта книга....21

Структура книги....21

О коде....23

Другие онлайн-ресурсы....23

Об авторе....24

Об иллюстрации на обложке....25

От издательства....26

Часть I Первые шаги....27

Глава 1. Знакомство с WebAssembly....28

1.1. Что такое WebAssembly....29

1.1.1. Asm.js, предшественник WebAssembly....29

1.1.2. От asm.js к MVP....30

1.2. Какие проблемы решает WebAssembly....31

1.2.1. Улучшение производительности....31

1.2.2. Более короткое время запуска в сравнении с JavaScript....32

1.2.3. Возможность использовать в браузере другие языки помимо JavaScript....33

1.2.4. Возможность повторного использования кода....33

1.3. Как работает WebAssembly....34

1.3.1. Обзор работы компиляторов....35

1.3.2. Загрузка, компиляция и создание модуля....36

1.4. Структура модуля WebAssembly....38

1.4.1. Преамбула....38

1.4.2. Известные разделы....39

1.4.3. Пользовательские разделы....40

1.5. Текстовый формат WebAssembly....40

1.6. Как обеспечивается безопасность WebAssembly....41

1.7. Какие языки можно использовать для создания модуля WebAssembly....42

1.8. Где можно использовать модуль....43

Резюме....44

Глава 2. Модули WebAssembly изнутри....45

2.1. Известные разделы....47

2.2. Пользовательские разделы....52

Резюме....53

Глава 3. Создание вашего первого модуля WebAssembly....54

3.1. Набор инструментальных средств Emscripten....55

3.2. Модули WebAssembly....56

3.2.1. Когда не стоит использовать модуль WebAssembly....58

3.3. Параметры вывода Emscripten....58

3.4. Компиляция C или C++ с помощью Emscripten и шаблона HTML....60

3.5. Emscripten генерирует связующий код на JavaScript....66

3.5.1. Компиляция кода на C или C++ вместе с JavaScript, созданного Emscripten....66

3.5.2. Создание базовой HTML-страницы для использования в браузерах....69

3.6. Emscripten генерирует только файл WebAssembly....72

3.6.1. Компиляция C или C++ в виде вспомогательного модуля с помощью Emscripten....74

3.6.2. Загрузка и создание экземпляра модуля в браузере....76

3.7. Проверка поддержки: как проверить, доступен ли WebAssembly....84

Сценарии использования в реальном мире....85

Упражнения....86

Резюме....86

Часть II Работа с модулями....87

Глава 4. Повторное использование существующей кодовой базы на C++....88

4.1. Использование C или C++ для создания модуля со связующим кодом Emscripten....91

4.1.1. Внесение изменений в код на C++....92

4.1.2. Компиляция кода в модуль WebAssembly....97

4.1.3. Создание веб-страницы....98

4.1.4. Написание кода на JavaScript, взаимодействующего с модулем....100

4.1.5. Просмотр результатов....107

4.2. Использование C или C++ для создания модуля без Emscripten....107

4.2.1. Внесение изменений в C++....108

4.2.2. Компиляция кода в модуль WebAssembly....114

4.2.3. Создание файла JavaScript, взаимодействующего с модулем....115

4.2.4. Просмотр результатов....119

Сценарии использования в реальном мире....120

Упражнения....121

Резюме....121

Глава 5. Создание модуля WebAssembly, вызывающего JavaScript....122

5.1. Использование C или C++ для создания модуля со связующим кодом Emscripten....125

5.1.1. Внесение изменений в код на C++....127

5.1.2. Создание кода на JavaScript и добавление его в сгенерированный Emscripten JavaScript-файл....129

5.1.3. Компиляция кода в модуль WebAssembly....130

5.1.4. Изменение JavaScript-кода веб-страницы....131

5.1.5. Просмотр результатов....134

5.2. Использование C или C++ для создания модуля без связующих файлов Emscripten....135

5.2.1. Внесение изменений в код на C++....137

5.2.2. Компиляция кода в модуль WebAssembly....138

5.2.3. Изменение кода на JavaScript для взаимодействия с модулем....139

5.2.4. Просмотр результатов....142

Сценарии использования в реальном мире....142

Упражнения....143

Резюме....143

Глава 6. Создание модуля WebAssembly, вызывающего JavaScript, с использованием указателей на функции....144

6.1. Использование C или C++ для создания модуля со связующими файлами Emscripten....146

6.1.1. Использование указателя на функцию, передаваемого модулю через JavaScript....146

6.1.2. Изменение кода на C++....147

6.1.3. Компиляция кода в модуль WebAssembly....152

6.1.4. Изменение JavaScript-кода веб-страницы....153

6.1.5. Просмотр результатов....160

6.2. Использование C или C++ для создания модуля без связующего файла Emscripten....160

6.2.1. Использование указателей на функции, передаваемых в модуль через JavaScript....161

6.2.2. Изменение кода на C++....162

6.2.3. Компиляция кода в модуль WebAssembly....163

6.2.4. Изменение JavaScript-кода, который будет взаимодействовать с модулем....164

6.2.5. Просмотр результатов....174

Сценарии использования в реальном мире....174

Упражнения....175

Резюме....175

Часть III Продвинутые темы....177

Глава 7. Динамическое связывание: основы....178

7.1. Динамическое связывание: за и против....179

7.2. Варианты реализации динамического связывания....180

7.2.1. Вспомогательные и основные модули....181

7.2.2. Динамическое связывание: dlopen....182

7.2.3. Динамическое связывание: dynamicLibraries....193

7.2.4. Динамическое связывание: JavaScript API в WebAssembly....198

7.3. Обзор динамического связывания....205

Сценарии использования в реальном мире....207

Упражнения....207

Резюме....208

Глава 8. Динамическое связывание: реализация....209

8.1. Создание модулей WebAssembly....212

8.1.1. Разделение логики в validate.cpp на два файла....215

8.1.2. Создание нового файла С++ для логики формы Place Order (Разместить заказ)....218

8.1.3. Использование Emscripten для генерации вспомогательных модулей WebAssembly....221

8.1.4. Определение JavaScript-функции для обработки ошибок при валидации....226

8.1.5. Использование Emscripten для генерации основного модуля WebAssembly....227

8.2. Настройка веб-страницы....229

8.2.1. Изменение кода JavaScript веб-страницы....233

8.2.2. Просмотр результатов....243

Сценарии использования в реальном мире....244

Упражнения....245

Резюме....245

Глава 9. Потоки: веб-воркеры и pthread....246

9.1. Преимущества веб-воркеров....247

9.2. Рекомендации по использованию веб-воркеров....249

9.3. Предварительная загрузка модуля WebAssembly с помощью веб-воркера....249

9.3.1. Изменение логики calculate_primes....252

9.3.2. Использование Emscripten для генерации файлов WebAssembly....254

9.3.3. Копирование в правильное место....255

9.3.4. Создание HTML-файла для веб-страницы....256

9.3.5. Создание файла JavaScript для веб-страницы....256

9.3.6. Создание файла JavaScript для веб-воркера....260

9.3.7. Просмотр результатов....260

9.4. Использование pthread....261

9.4.1. Изменение логики calculate_primes для создания и использования четырех pthread....263

9.4.2. Использование Emscripten для генерации файлов WebAssembly....266

9.4.3. Просмотр результатов....268

Сценарии использования в реальном мире....271

Упражнения....271

Резюме....271

Глава 10. Модули WebAssembly в Node.js....273

10.1. Вспоминая пройденное....274

10.2. Валидация на стороне сервера....275

10.3. Работа с модулями, созданными Emscripten....276

10.3.1. Загрузка модуля WebAssembly....277

10.3.2. Вызов функций в модуле WebAssembly....278

10.3.3. Вызов JavaScript-функций....282

10.3.4. Вызов указателей на функции JavaScript....285

10.4. Использование JavaScript API в WebAssembly....287

10.4.1. Загрузка и создание экземпляра модуля WebAssembly....288

10.4.2. Вызов функций в модуле WebAssembly....290

10.4.3. Вызов JavaScript из модуля WebAssembly....294

10.4.4. Вызов указателей на функции JavaScript из модуля WebAssembly....298

Сценарии использования в реальном мире....302

Упражнения....303

Резюме....303

Часть IV Отладка и тестирование....305

Глава 11. Текстовый формат WebAssembly....306

11.1. Создание основной логики игры с помощью текстового формата WebAssembly....309

11.1.1. Разделы модуля....311

11.1.2. Комментарии....313

11.1.3. Сигнатуры функций....313

11.1.4. Узел module....314

11.1.5. Узлы import....315

11.1.6. Узлы global....319

11.1.7. Узлы export....321

11.1.8. Узел start....323

11.1.9. Узлы code....324

11.1.10. Узлы type....345

11.1.11. Узел data....347

11.2. Создание модуля WebAssembly из текстового формата....348

11.3. Модуль, созданный Emscripten....350

11.3.1. Создание файла на C++....350

11.3.2. Создание модуля WebAssembly....351

11.4. Создание файлов HTML и JavaScript....352

11.4.1. Изменение файла HTML....352

11.4.2. Создание файла JavaScript....354

11.5. Просмотр результатов....360

Сценарии использования в реальном мире....360

Упражнения....361

Резюме....361

Глава 12. Отладка....363

12.1. Расширение игры....365

12.2. Изменение HTML....366

12.3. Отображение количества попыток....367

12.3.1. Функция generateCards в JavaScript....368

12.3.2. Изменения в коде текстового формата....369

12.3.3. Создание файла Wasm....370

12.3.4. Тестирование изменений....372

12.4. Увеличение количества попыток....373

12.4.1. Функция updateTriesTotal в JavaScript....375

12.4.2. Изменение текстового формата....375

12.4.3. Создание файла Wasm....377

12.4.4. Тестирование изменений....378

12.5. Обновление экрана итогов....387

12.5.1. Функция levelComplete в JavaScript....388

12.5.2. Изменение текстового формата....389

12.5.3. Создание файла Wasm....390

12.5.4. Тестирование изменений....391

Упражнения....392

Резюме....392

Глава 13. Тестирование и все, что с ним связано....393

13.1. Установка среды тестирования JavaScript....395

13.1.1. Файл package.json....396

13.1.2. Установка Mocha и Chai....397

13.2. Создание и запуск тестов....398

13.2.1. Написание тестов....398

13.2.2. Запуск тестов из командной строки....403

13.2.3. HTML-страница, загружающая тесты....403

13.2.4. Запуск тестов из браузера....406

13.2.5. Исправление тестов....406

13.3. Что дальше....408

Упражнения....409

Резюме....409

Приложения....411

Приложение А. Установка и настройка инструментов....412

A.1. Python....412

A.1.1. Запуск локального веб-сервера....413

A.1.2. Тип носителя WebAssembly....414

A.2. Emscripten....417

A.2.1. Загрузка Emscripten SDK....418

A.2.2. Если вы используете Windows....419

A.2.3. Если вы используете Mac или Linux....419

A.2.4. Решение проблем при установке....420

A.3. Node.js....420

A.4. WebAssembly Binary Toolkit....421

A.5. Bootstrap....422

Приложение Б. Функции ccall, cwrap и вызовы функций напрямую....423

Б.1. Функция ccall....423

Б.1.1. Создание простого модуля WebAssembly....425

Б.1.2. Создание веб-страницы, которая будет взаимодействовать с модулем WebAssembly....425

Б.2. Функция cwrap....426

Б.2.1. Изменение кода JavaScript для использования cwrap....427

Б.3. Вызовы функций напрямую....428

Б.4. Передача массива в модуль....429

Приложение В. Макросы в Emscripten....431

В.1. Макросы emscripten_run_script....431

В.2. Макросы EM_JS....433

В.2.1. Без параметров....434

В.2.2. Передача значений параметров....435

В.2.3. Передача указателей в качестве параметров....437

В.2.4. Возвращение указателя на строку....438

В.3. Макросы EM_ASM....440

В.3.1. EM_ASM....441

В.3.2. EM_ASM_....442

В.3.3. Передача указателей в качестве параметров....444

В.3.4. EM_ASM_INT и EM_ASM_DOUBLE....444

В.3.5. Возврат указателя на строку....446

Приложение Г. Ответы к упражнениям....449

Г.1. Глава 3....449

Г.2. Глава 4....451

Г.3. Глава 5....451

Г.4. Глава 6....452

Г.5. Глава 7....453

Г.6. Глава 8....456

Г.7. Глава 9....457

Г.8. Глава 10....461

Г.9. Глава 11....465

Г.10. Глава 12....467

Г.11. Глава 13....470

Приложение Д. Дополнительные возможности текстового формата....472

Д.1. Операторы потока управления....473

Д.1.1. Операторы if....473

Д.1.2. Циклы....478

Д.2. Указатели на функции....486

Д.2.1. Тестирование кода....488

Создавайте высокопроизводительные браузерные приложения, не полагаясь на один только JavaScript! Компилируясь в бинарный формат WebAssembly, ваш код на C, C++ или Rust будет работать в браузере с оптимальной скоростью. WebAssembly обеспечивает большую скорость, возможности повторного использования существующего кода и доступ к новым и более быстрым библиотекам. Кроме того, при необходимости вы можете настроить взаимодействие с JavaScript.