WebAssembly (WASM)

You are reading Part 37 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 6]

Introduction

WebAssembly (WASM) is a low-level, binary instruction format that enables high-performance execution of compiled languages like C, C++, and Rust in web browsers. WASM runs alongside JavaScript, providing near-native performance while maintaining security and portability. This article explores how WebAssembly works, its integration with JavaScript, and its practical use cases.

1. What is WebAssembly (WASM)?

WebAssembly is a binary instruction format designed to run code efficiently in web browsers and other environments. Unlike JavaScript, which is interpreted, WebAssembly is compiled, leading to significant performance improvements.

Key Features of WebAssembly:

• High Performance – Runs at near-native speed.

• Portable & Secure – Sandboxed execution ensures security.

• Interoperable with JavaScript – Can call and be called by JavaScript.

• Supported in all major browsers – Chrome, Firefox, Edge, and Safari.

2. How WebAssembly Works

WebAssembly code is compiled from languages like C, C++, and Rust into a .wasm binary file, which is then executed by the browser's WASM engine.

Execution Flow:

1. Write Code in a Compiled Language (e.g., C, C++, Rust).

2. Compile Code to WASM Bytecode using tools like Emscripten or Rust WASM Pack.

3. Load & Execute in JavaScript using the WebAssembly API.

Example: Simple WASM Compilation from C

// simple.c
#include <stdio.h>

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

Compile to WebAssembly:

emcc simple.c -o simple.wasm -s EXPORTED_FUNCTIONS='["_add"]' -s MODULARIZE

3. Running WebAssembly in JavaScript

Once compiled, a .wasm file can be loaded and executed using JavaScript.

Example: Loading WASM in JavaScript

fetch("simple.wasm")
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes))
    .then(result => {
        console.log(result.instance.exports.add(5, 10)); // Output: 15
    });

• fetch() loads the .wasm file.

• WebAssembly.instantiate() compiles and executes it.

• The exported function add() is called from JavaScript.

4. WebAssembly vs JavaScript Performance

5. Practical Use Cases of WebAssembly

WebAssembly is widely used in applications that require high performance, including:

• Game Development – Running game engines like Unity and Unreal Engine in browsers.

• Image & Video Processing – High-performance media editing tools.

• Cryptography & Compression – Faster cryptographic operations.

• Machine Learning – Running ML models efficiently in web apps.

• 3D Rendering – Using WebGL and WebAssembly together.

Example: Running a WASM-powered Game Engine in the Browser

import init from "./game_engine.wasm";

init().then(engine => {
    engine.start();
});

6. WebAssembly & JavaScript Interoperability

WASM modules can call JavaScript functions, and JavaScript can call WASM functions, enabling seamless integration.

Calling JavaScript from WebAssembly

const imports = {
    env: {
        log: (num) => console.log("WASM Log:", num)
    }
};

WebAssembly.instantiate(wasmBinary, imports)
    .then(result => {
        result.instance.exports.callJS(42); // Calls `log(42)` in JavaScript
    });

7. Tools for WebAssembly Development

You are reading Part 37 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 6]