New Age of Web Applications with WebAssembly

WebAssembly is a new technology that can alter the way how web applications are built. Unlike conventional web applications that make use of JavaScript to manage the UI, WebAssembly uses the very familiar C, C++, or Rust to do the same. With the proper optimization WebAssembly may run faster than JavaScript.

The following steps are involved in running a WebAssembly application:

1. Write the code using C, C++, or Rust.
2. Compile the written code into WebAssembly. After compilation, this will give us a binary .wasm file.
3. Add the compiled .wasm binary file into the given project
4. Integrating the .wasm binary file with JavaScript.

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

script type="‘module’"

This involves the following steps

• Import the .wasm file into an array buffer. A buffer is a temporary storage for data that the JavaScript engine uses.
• 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++.