Chapter 19: WebAssembly

WebAssembly (often abbreviated as wasm) is a binary instruction format designed to be a portable compilation target for high-level languages like C, C++, and Rust. It allows code written in these languages to be run in the web browser at near-native speed. This chapter covers the basics of WebAssembly and its integration with JavaScript, focusing on compiling C/C++ code to WebAssembly.

Introduction to WebAssembly

What is WebAssembly?

WebAssembly is a low-level assembly-like language with a compact binary format that is designed to be fast to decode, validate, and execute. It is designed to run alongside JavaScript, enabling developers to use other languages for performance-critical tasks while leveraging the web's flexibility.

Key Features

Performance: WebAssembly code runs at near-native speed by leveraging common hardware capabilities.
Portability: WebAssembly modules are portable and can run on any platform with a compliant browser.
Safety: WebAssembly has a well-defined and secure execution environment, with built-in safety features.

Compiling C/C++ to WebAssembly

Prerequisites

To compile C/C++ code to WebAssembly, you'll need:

Emscripten: A complete toolchain for compiling C/C++ code to WebAssembly. It includes a compiler and libraries for running WebAssembly code in the browser.

Setting Up Emscripten

Install Emscripten

Follow the official installation guide to install Emscripten on your system. This typically involves installing Python and the Emscripten SDK.
Configure Emscripten

After installation, you need to configure your environment. Run the following command:
```
source /path/to/emsdk/emsdk_env.sh
```

Compiling C/C++ Code

Once Emscripten is installed, you can compile C/C++ code to WebAssembly using the emcc command.

Example: Compiling a C Program

Write a C Program (hello.c)

#include <stdio.h>

int main() {
    printf("Hello, WebAssembly!\n");
    return 0;
}

Compile to WebAssembly

Run the following command to compile the C program to WebAssembly:
```
emcc hello.c -o hello.html
```
This will generate hello.html, hello.js, and hello.wasm files. The .wasm file contains the compiled WebAssembly code, while the .js file is a JavaScript glue code to load and run the WebAssembly module.

Running the WebAssembly Module

Open the HTML File

Open hello.html in a web browser. You should see "Hello, WebAssembly!" printed in the browser's console.

Integrating WebAssembly with JavaScript

You can call WebAssembly functions from JavaScript and vice versa. This allows you to leverage the performance benefits of WebAssembly while using JavaScript for other tasks.

Example: Calling a WebAssembly Function from JavaScript

Write a C Function (add.c)

#include <stdio.h>

int add(int a, int b) {
    return a + b;
}

Compile to WebAssembly
```
emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_add']"
```
This command exports the add function so it can be called from JavaScript.

Use the Function in JavaScript

<!-- add.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>WebAssembly Example</title>
  </head>
  <body>
    <script src="add.js"></script>
    <script>
      // Wait for the WebAssembly module to be loaded
      Module.onRuntimeInitialized = function () {
        // Call the WebAssembly function
        let result = Module._add(5, 3);
        console.log("Result from WebAssembly:", result);
      };
    </script>
  </body>
</html>

In this example, the add function is called from JavaScript after the WebAssembly module is initialized, and the result is logged to the console.

Summary

WebAssembly provides a way to run high-performance code in the browser by compiling languages like C/C++ to a binary format that can be executed quickly and safely. With tools like Emscripten, you can integrate WebAssembly into your web applications, enabling complex and performance-critical tasks to be handled efficiently. By understanding how to compile and interact with WebAssembly modules, you can leverage this powerful technology to enhance the performance and capabilities of your web applications.