Lesson 02-Understanding WebAssembly’s Working Principles

WASM Virtual Machine

Key Features:

• Security Sandbox: The WASM virtual machine operates in a tightly controlled environment, isolated from other parts of the host (e.g., browser), preventing malicious code from harming the user’s system or stealing data.
• Stack-Based Architecture: WASM uses a stack-based architecture, storing operands and performing computations on a stack. This design simplifies compilation and boosts execution efficiency.
• Binary Format: WASM code is stored in a compact binary format, making it easy to parse, validate, and reducing network transmission overhead.
• Modularity: WASM programs are organized into modules that can export and import functions, facilitating interaction with other WASM modules or the host environment (typically JavaScript).
• Portability: The WASM virtual machine is independent of specific hardware or operating systems, ensuring consistent cross-platform execution.

How It Works:

• Loading and Validation: When a WASM module is loaded, it undergoes validation to ensure compliance with WASM specifications, confirming no illegal operations or security risks.
• Compilation and Execution: After validation, the WASM virtual machine may either compile the code just-in-time (JIT) to machine code for better runtime performance or interpret it directly for faster startup.
• Memory Management: The WASM virtual machine manages a linear memory region, directly accessed by WASM code via indices. Unlike JavaScript’s automatic garbage collection, this gives developers more control but requires manual memory management.
• Interoperability: The WASM virtual machine interfaces with the host environment (usually the browser’s JavaScript runtime), allowing WASM modules to call JavaScript functions and vice versa for communication and data exchange.

WASM Module Example (Assuming Compiled to example.wasm)

Consider a basic WASM module with a function to compute the sum of two numbers:

(module
  (func $add (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.add
  )
  (export "add" (func $add))
)

(module
  (func $add (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.add
  )
  (export "add" (func $add))
)

This WASM code defines a function named add that takes two 32-bit integer parameters ($x and $y) and returns their sum.

Loading and Calling a WASM Module in JavaScript

Here’s how to load this WASM module and call the add function in JavaScript:

// Asynchronously load the WASM module
WebAssembly.instantiateStreaming(fetch('example.wasm'))
  .then(obj => {
    const { instance } = obj;

    // Access and call the add function from WASM
    const add = instance.exports.add;

    // Use the function
    const result = add(5, 10);
    console.log('5 + 10 =', result); // Should output "5 + 10 = 15"
  })
  .catch(console.error);

// Asynchronously load the WASM module
WebAssembly.instantiateStreaming(fetch('example.wasm'))
  .then(obj => {
    const { instance } = obj;

    // Access and call the add function from WASM
    const add = instance.exports.add;

    // Use the function
    const result = add(5, 10);
    console.log('5 + 10 =', result); // Should output "5 + 10 = 15"
  })
  .catch(console.error);

This JavaScript code uses WebAssembly.instantiateStreaming to asynchronously load the WASM module, compiling and instantiating it. Once loaded, the add function is retrieved from the module’s exports and called like a regular JavaScript function, with the result logged.

• Module Loading: WebAssembly.instantiateStreaming is a convenient method that loads, compiles, and instantiates a WASM module from a URL. For finer control, WebAssembly.instantiate can be used.
• Interoperability: Through instance.exports, JavaScript accesses all exported functions, globals, etc., from the WASM module. WASM functions behave as regular JavaScript functions, callable transparently.
• Type System: WASM has a strict type system, but during JavaScript interaction, types are automatically converted to align with JavaScript’s dynamic typing. In this example, WASM’s integer parameters and return values work seamlessly with JavaScript’s Number type.

Bytecode Format

WebAssembly (WASM) bytecode is a compact, binary, low-level instruction set designed for efficient execution in web environments. It consists of byte sequences representing opcodes and operands that describe program logic and data.

WASM Bytecode Structure

A WASM bytecode file comprises multiple sections, each with a 1-byte ID and a length prefix indicating the section type and size. Common sections include:

• Custom Section (0x00): Custom data, e.g., source map information.
• Type Section (0x01): Defines function signatures.
• Import Section (0x02): Declares externally imported functions, tables, memories, and globals.
• Function Section (0x03): Lists module-defined functions.
• Table Section (0x04): Defines tables (array-like structures, often for function pointers).
• Memory Section (0x05): Defines memory regions.
• Global Section (0x06): Defines global variables.
• Export Section (0x07): Exports functions, tables, memories, or globals.
• Start Section (0x08): Specifies the module’s start function.
• Element Section (0x09): Initializes table contents.
• Code Section (0x0a): Contains function body bytecode.
• Data Section (0x0b): Initializes memory data.

In-Depth Analysis

Consider the simple WASM function for adding two numbers:

(module
  (func $add (param $x i32) (param $y i32) (result i32)
    get_local $x
    get_local $y
    i32.add
  )
  (export "add" (func $add))
)

(module
  (func $add (param $x i32) (param $y i32) (result i32)
    get_local $x
    get_local $y
    i32.add
  )
  (export "add" (func $add))
)

The corresponding bytecode (simplified representation) might look like:

00 61 73 6d 01 00 00 00 01 07 01 60 02 7f 7f 01 7f 03 02 01 00 0a 09 01 07 00 20 00 20 01 6a 0b 01 01 0a 05 01 03 61 64 64 00 00

• 00 61 73 6d: File header, marking WebAssembly binary format.
• 01 00 00 00: Version number, here 1.0.0.
• Subsequent bytes include section IDs and lengths, e.g.:
• 01 07: Type Section, 7 bytes long.
• 03 02 01 00: Function Section, declaring one function type.
• 0a 09 01 07 00: Code Section, containing function body bytecode.
• Function body bytecode example:
• 20 00: get_local $x, reads local variable $x.
• 20 01: get_local $y, reads local variable $y.
• 6a: i32.add, performs addition.

Instruction Format

WASM instructions typically consist of a 1-byte opcode followed by zero or more operands, depending on the instruction. For example, the get_local opcode is 0x20, followed by a 1-byte local variable index.

This structure ensures WASM bytecode is compact and easily parsed, enabling cross-platform execution with near-native performance.

Assembly and Compilation Process

WebAssembly (WASM) development typically involves writing code in high-level languages (e.g., C/C++, Rust) and compiling it into WASM bytecode, encompassing source-to-assembly and binary transformations.

WebAssembly Assembly Language

WASM assembly language (or text format) is a human-readable representation directly corresponding to binary bytecode. It uses mnemonics for WASM instructions, allowing developers to write or inspect WASM code. For example, a simple addition function in WASM assembly might look like:

(func $add (param $x i32) (param $y i32) (result i32)
  get_local $x
  get_local $y
  i32.add
)

(func $add (param $x i32) (param $y i32) (result i32)
  get_local $x
  get_local $y
  i32.add
)

Compilation Process

The compilation from high-level languages to WASM bytecode involves several steps:

• Source Code Preprocessing: For languages like C/C++, preprocessors handle macros, conditional compilation, etc.
• Compilation to Intermediate Representation: Compilers (e.g., Clang/LLVM, Emscripten, or Rust’s compiler) convert source code into an intermediate representation (IR). For LLVM, this is LLVM IR, a high-level, platform-agnostic format.
• Optimization: Apply optimizations at the IR level, such as dead code elimination, loop optimization, and constant propagation, to enhance efficiency.
• Conversion to WASM IR: Transform optimized IR into WebAssembly’s intermediate representation (WASM IR), a high-level, structured format closer to final WASM code.
• Generation of WASM Text or Binary:
• Text Format: Optionally generate WASM assembly text (.wat file) for readability and debugging.
• Binary Format: Compile WASM IR into binary format (.wasm file), executable on the WASM virtual machine.
• Linking: If multiple WASM modules exist, link them into a cohesive module.

Detailed Code Example
Consider a simple C function:

int add(int x, int y) {
  return x + y;
}

int add(int x, int y) {
  return x + y;
}

Using the Emscripten compiler, this undergoes the above process, resulting in WASM binary. The generated WASM text format might resemble the earlier assembly code. Each transformation involves detailed instruction mapping and data layout adjustments to ensure efficient and compliant WASM code.

The WASM compilation process transforms high-level code into IR, then WASM IR, and finally binary bytecode, incorporating multiple layers of conversion and optimization to ensure performance, security, and cross-platform compatibility.

WASM and Emscripten

Emscripten is an open-source LLVM-to-JavaScript compiler toolchain that enables C and C++ code to be compiled into WebAssembly (WASM) or JavaScript for execution in web browsers. It plays a pivotal role in the WASM ecosystem.

1. Compilation Toolchain

Emscripten provides a complete toolchain, including compilers, linkers, and runtime libraries, designed to convert C/C++ code into WASM or JavaScript. It leverages LLVM (Low-Level Virtual Machine) as its backend, compiling source code into IR before generating the target format.

2. WASM Support

As one of the earliest projects to support WebAssembly, Emscripten allows developers to compile C/C++ code directly into WASM binary, critical for high-performance web applications due to WASM’s near-native execution speed.

3. Compatibility and Optimization

Emscripten ensures generated WASM code complies with web standards, employing optimization techniques like inline caching, dead code elimination, and loop unrolling to boost performance. It also supports web-specific features such as WebGL, Web Workers, and Asyncify (for simulating asynchronous behavior).

4. System Libraries and APIs

Emscripten includes web-optimized system libraries and APIs, like emscripten.js, facilitating WASM module interaction with JavaScript environments and handling memory management and thread emulation. It supports a subset of POSIX APIs, easing the porting of Linux-targeted C/C++ programs to the web.

5. Development Workflow

With Emscripten, developers use familiar C/C++ toolchains, compiling code to WASM via simple command-line tools. This streamlines high-performance web application development, especially for projects reusing existing C/C++ codebases.

6. Community and Ecosystem

Emscripten boasts an active developer community and extensive documentation, providing a solid foundation for troubleshooting, sharing best practices, and driving innovation. As WebAssembly grows, Emscripten’s role as a bridge between traditional desktop applications and modern web platforms continues to expand.