The following steps are involved in running a WebAssembly application:
- Write the code using C, C++, or Rust.
- Compile the written code into WebAssembly. After compilation, this will give us a binary .wasm file.
- Add the compiled .wasm binary file into the given project
Step 1: Write the code
We will be using WebAssembly Explorer, that converts our C or C++ code and allows to download a .wasm file.
Step 2: Compile
Once code is ready, click the button “Compile” in the left-most bar. In the compiler, the middle column contains human-readable version of the .wasm binary code, known as WebAssembly Text Format (WAT).The right column shows the assembly code.
The WAT helps us understand how the compiler refers the function created and makes it more human readable.
The file created will have a section called “export” where function name will have “_Z3” prefix and “ii” suffix. We use this name to import the functions. These are added by the compiler for debugging purposes.
Step 3: Importing the Binary file
The middle WAT section features a download .wasm binary file option. We should create a directory and put the .wasm file in it as well as create two other files, namely,
../index.html and script.js(empty for now)<.p>
Step 4: Integrating the Binary file
We include the .wasm as a module like a regular ES6 module
This involves the following steps
- Once we have imported the .wasm file, we can compile it into a module.
- After compiling the module we can create an instance of the WebAssembly module so that we can use the functions we wrote in C++.