11 WebAssembly text format

 

This chapter covers:

  • Creating a WebAssembly text format version of a module
  • Compiling the text format code into a binary module using the WebAssembly Binary Toolkit’s online tool
  • Linking the Binary Toolkit’s generated module to an Emscripten generated module
  • Building the HTML and JS for the UI aspect of the game

WebAssembly is designed with a binary file format, so that the WebAssembly files are as small as possible to allow for fast transmissions and downloads, but this doesn’t mean it’s a way for developers to hide their code. In fact, quite the opposite is true. WebAssembly is designed with the openness of the web in mind. As a result, a text format equivalent of the binary format also exists.

The text format allows browser users to inspect the WebAssembly of a webpage in much the same way that they would inspect JavaScript. The text format equivalent of the binary format is also presented for debugging in the browser if the WebAssembly module doesn’t include source maps as highlighted in figure 11.1.

Figure 11.1 The developer tools in Firefox, with a breakpoint placed in the _ValidateName function of the WebAssembly module that you built in chapter 4, section 4.1

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

11.1.1    The module’s sections

11.1.2    Comments

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