WebAssembly in Action
With examples using C++ and Emscripten
Gerard Gallant
  • MEAP began November 2018
  • Publication in Fall 2019 (estimated)
  • ISBN 9781617295744
  • 425 pages (estimated)
  • printed in black & white

WebAssembly in the future and when you want to know what is going on, you should read this book.

Sander Zegveld

“Any application that can be written in JavaScript, will eventually be written in JavaScript.”
 — Jeff Atwood, Cofounder of StackOverflow

“Atwood’s Law” is driven by the idea that all applications will ultimately wind up on the web and therefore must be written in JavaScript. WebAssembly may be your way out! With WebAssembly, you can write in nearly any modern language and run your code in the browser through a memory-safe, sandboxed execution environment that can be embedded in a web browser and other platforms. Getting set up and moving with WebAssembly requires you to modify your web dev process; WebAssembly in Action will get you started quickly and guide you through real-world examples and detailed diagrams that help you create, run, and debug WebAssembly modules.
Table of Contents detailed table of contents

Part 1: First Steps

1 Meet WebAssembly

1.1 What is WebAssembly?

1.2 What problems does it solve?

1.2.1 Performance improvements

1.2.2 asm.js, the forerunner to WebAssembly

1.2.3 Faster startup times compared with JavaScript

1.2.4 Ability to use languages other than JavaScript in the browser

1.2.5 Opportunity for code reuse

1.3 How does it work?

1.3.1 Overview of how compilers work

1.3.2 Loading, compiling, and instantiating a module

1.4 Structure of a WebAssembly module

1.4.1 Preamble

1.4.2 Known sections

1.4.3 Custom sections

1.5 WebAssembly Text Format

1.6 How is WebAssembly secure?

1.7 What languages can I use to create a WebAssembly module?

1.8 Where can I use my module?

1.9 Summary

2 A look inside WebAssembly modules

2.1 Known sections

2.2 Custom sections

2.3 Summary

3 Creating your first WebAssembly module

3.1 The Emscripten toolkit

3.2 WebAssembly modules

3.2.1 When would you not use a WebAssembly module?

3.3 Emscripten output options

3.4 Compiling C or C++ with Emscripten and using the HTML template

3.5 JavaScript plumbing code

3.5.1 Compiling C or C++ with Emscripten generated JavaScript

3.5.2 Creating a basic HTML webpage for use in browsers

3.6 Only the WebAssembly file

3.6.1 Compiling C or C++ as a side module with Emscripten

3.6.2 Loading and instantiating in a browser

3.7 Feature detection: How to test if WebAssembly is available

3.8 Exercises

3.9 Summary

Part 2: Working with Modules

4 Creating a WebAssembly module that JavaScript talks to

4.1 Using C or C++ to create a module with Emscripten plumbing

4.1.1 Making the C++ modifications

4.1.2 Compiling the code into a WebAssembly module

4.1.3 Creating the webpage

4.1.4 Creating the JavaScript that will interact with the module

4.1.5 Viewing the results

4.2 Using C or C++ to create a module without Emscripten

4.2.1 Making the C++ modifications

4.2.2 Compiling the code into a WebAssembly module

4.2.3 Creating the JavaScript that will interact with the module

4.2.4 Viewing the results

4.3 Exercises

4.4 Summary

5 Creating a WebAssembly module that calls into JavaScript

5.1 Using C or C++ to create a module with Emscripten plumbing

5.1.1 Adjusting the C++ code

5.1.2 Creating the JavaScript that you want included in Emscripten’s generated JavaScript file

5.1.3 Compiling the code into a WebAssembly module

5.1.4 Adjusting the JavaScript code of the webpage

5.1.5 Viewing the results

5.2 Using C or C++ to create a module without Emscripten plumbing

5.2.1 Making the C++ modifications

5.2.2 Compiling the code into a WebAssembly module

5.2.3 Adjusting the JavaScript that will interact with the module

5.2.4 Viewing the results

5.3 Exercises

5.4 Summary

6 Creating a WebAssembly module that talks to JavaScript using function pointers

6.1 Using C or C++ to create a module with Emscripten plumbing

6.1.1 Using a function pointer given to the module by JavaScript

6.1.2 Adjusting the C++ code

6.1.3 Compiling the code into a WebAssembly module

6.1.4 Adjusting the JavaScript code of the webpage

6.1.5 Viewing the results

6.2 Using C or C++ to create a module without Emscripten plumbing

6.2.1 Using function pointers given to the module by JavaScript

6.2.2 Making the C++ modifications

6.2.3 Compiling the code into a WebAssembly module

6.2.4 Adjusting the JavaScript that will interact with the module

6.2.5 Viewing the results

6.3 Exercises

6.4 Summary

Part 3: Advanced Topics

7 Dynamic linking: the basics

7.1 Dynamic linking: pros and cons

7.2 Dynamic linking options

7.2.1 Side modules and main modules

7.2.2 Dynamic linking: dlopen

7.2.3 Dynamic linking: dynamicLibraries

7.2.4 Dynamic linking: WebAssembly JavaScript API

7.3 Dynamic linking review

7.4 Exercises

7.5 Summary

8 ynamic linking: the implementation

8.1 Creating the WebAssembly modules

8.1.1 Split the logic in the validate.cpp file into two files

8.1.2 Create a new C++ file for the Place Order form’s logic

8.1.3 Use Emscripten to generate the WebAssembly side modules

8.1.4 Define a JavaScript function to handle an issue with the validation

8.1.5 Use Emscripten to generate the WebAssembly main module

8.1.6 Adjusting the webpage

8.1.7 Adjusting the JavaScript of your webpage

8.1.8 Viewing the results

8.2 Exercises

8.3 Summary

9 Threading: web workers and pthreads

9.1 Benefits of web workers

9.2 Considerations for using web workers

9.3 Pre-fetch a WebAssembly module using a web worker

9.3.1 Adjusting the calculate primes logic

9.3.2 Use Emscripten to generate the WebAssembly files

9.3.3 Copying files to the correct location

9.3.4 Creating the HTML file for the webpage

9.3.5 Creating the JavaScript file for the webpage

9.3.6 Creating the web worker’s JavaScript file

9.3.7 Viewing the results

9.4 Using pthreads

9.4.1 Adjusting the calculate primes logic to create and use four pthreads

9.4.2 Using Emscripten to generate the WebAssembly files

9.4.3 Viewing the results

9.5 Exercises

9.6 Summary

10 WebAssembly modules in Node.js

10.1 Revisiting what you know

10.2 Server-side validation

10.3 Working with Emscripten-built modules

10.3.1 Loading a WebAssembly module

10.3.2 Calling functions in the WebAssembly module

10.3.3 Calling into the JavaScript

10.3.4 Calling JavaScript function pointers

10.4 Using the WebAssembly JavaScript API

10.4.1 Loading and instantiating a WebAssembly module

10.4.2 Calling functions in the WebAssembly module

10.4.3 The WebAssembly module calling into the JavaScript

10.4.4 The WebAssembly module calling JavaScript function pointers

10.5 Exercises

10.6 Summary

Part 4: Debugging and Tools

11 WebAssembly text format

11.1 Creating the game’s core logic using WebAssembly text format

11.1.1 The module’s sections


11.1.3 Function signatures

11.1.4 The module node

11.1.5 The import nodes

11.1.6 The global nodes

11.1.7 The export nodes

11.1.8 The start node

11.1.9 The code nodes

11.1.10 The type nodes

11.1.11 The data node

11.2 Generate a WebAssembly module from the text format

11.3 The Emscripten-generated module

11.3.1 Create the C++ file

11.3.2 Generate a WebAssembly module

11.4 Create the HTML and JavaScript files

11.4.1 Modify the HTML file

11.4.2 Create the JavaScript file

11.5 Viewing the results

11.6 Exercises

11.7 Summary

12 Debugging

12.1 Extending the game

12.2 Adjust the HTML

12.3 Display the number of tries

12.3.1 generateCards JavaScript function

12.3.2 Adjust the text format

12.3.3 Generate the Wasm file

12.3.4 Test the changes

12.4 Increment the number of tries

12.4.1 The updateTriesTotal JavaScript function

12.4.2 Adjust the text format

12.4.3 Generate the Wasm file

12.4.4 Test the changes

12.5 Update the summary screen

12.5.1 The levelComplete JavaScript function

12.5.2 Adjust the text format

12.5.3 Generate the Wasm file

12.5.4 Test the changes

12.6 Exercises

12.7 Where do you go from here?

12.8 Summary


Appendix A: Installation & tool setup

A.1 Python

A.2 Emscripten

A.3 Node.js

A.4 WebAssembly Binary Toolkit

A.5 Bootstrap

Appendix B: ccall, cwrap, and direct function calls

B.1 ccall

B.2 cwrap

B.3 Direct function calls

B.4 Passing an array to a module

Appendix C: Emscripten macros

C.1 emscripten_run_script macros



Appendix D: Exercise solutions

D.1 Chapter 3

D.2 Chapter 4

D.3 Chapter 5

D.4 Chapter 6

D.5 Chapter 7

D.6 Chapter 8

D.7 Chapter 9

D.8 Chapter 10

D.9 Chapter 11

D.10 Chapter 12

Appendix E: Text format extras

E.1 Control flow statements

E.2 Function pointers

About the Technology

WebAssembly compiles code written in C, C++, Rust, and other high-level languages into an ultra-compact bytecode files that run in the browser and other environments at near-native speeds. Besides vastly improved performance, opportunities to reuse existing code, and the freedom to build in your favorite language, this game-changer allows access to newer and faster libraries. WebAssembly is the joint effort of industry leaders like Microsoft, Mozilla, Google, and others, with support built into all major browsers.

About the book

WebAssembly in Action introduces the WebAssembly stack and walks you through the process of writing and running browser-based applications. Expert developer Gerard Gallant gives you a firm foundation of the structure of a module, HTML basics, JavaScript Promises, and the WebAssembly JavaScript API. After building simple modules, you’ll delve deeper into dynamic linking of multiple modules at runtime, working with NodeJS modules, building modules with C/C++ and the Emscripten toolkit, and running a UI-independent thread with an HTML5 web worker.

To ensure your code is error-free, you’ll also learn about WebAssembly Text Format, which is vital for debugging. You’ll reinforce your learning with real-world examples and get a glimpse of features-to-come, including host bindings and garbage collection. WebAssembly makes it possible to create apps for online video gaming, image and video editing, virtual reality, peer-to-peer collaboration, music streaming, and many more without adjusting to the idiosyncrasies of JavaScript. This well-rounded tutorial is your ticket!

What's inside

  • The WebAssembly format
  • Dynamic linking of multiple modules at runtime
  • Communicating between modules and JavaScript
  • Debugging modules
  • Unreleased features like host bindings and garbage collection!

About the reader

Written for developers with a basic understanding of C/C++, JavaScript, and HTML.

About the author

Gerard Gallant is a Microsoft Certified Professional and a Senior Software Developer at Dovico Software. He blogs regularly on Blogger.com and DZone.com.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
MEAP combo
$49.99 pBook + eBook + liveBook
MEAP eBook
$39.99 pdf + ePub + kindle + liveBook

placing your order...

Don't refresh or navigate away from the page.

FREE domestic shipping on three or more pBooks