Skip to content

Introduction to WebAssembly (WASM)

WebAssembly, often abbreviated as WASM, is a binary instruction format designed as a portable target for the compilation of high-level languages like C, C++, and Rust. It enables the execution of code nearly as fast as running native machine code and has been designed as an open standard by a W3C Community Group.

WebAssembly is not meant to replace JavaScript, but to complement it. It allows developers to run performance-critical code at near-native speeds in the browser, opening up new possibilities for web applications.

Why WebAssembly?

Performance:

WASM is designed for efficient execution by modern browsers. Its binary format is optimized for compactness and fast execution, typically running 10-20x faster than JavaScript for compute-intensive tasks.

Portability:

It provides a consistent platform across different browsers and devices. A WASM module will run the same way, regardless of where it’s executed - whether on desktop, mobile, or server.

Language Flexibility:

Developers can write code in languages they’re already familiar with (C, C++, Rust, Go, etc.) and compile to WASM, rather than being limited to JavaScript.

Security:

WebAssembly respects the same-origin policy and runs in a sandboxed environment, ensuring web safety. It has no direct access to the DOM or browser APIs without going through JavaScript.

Interoperability:

WASM works seamlessly alongside JavaScript. You can call JavaScript functions from WASM and vice versa, allowing you to use each where it’s most appropriate.

Common Use Cases

WebAssembly is particularly useful for:

Performance-Critical Applications:

  • Image and video processing
  • Audio synthesis and processing
  • 3D graphics and game engines
  • Scientific simulations and visualizations
  • Compression/decompression algorithms

Porting Existing Code:

  • Legacy C/C++ applications to the web
  • Existing libraries and codebases
  • Desktop applications to browser-based versions

Real-World Examples:

  • Figma: Design tool using WASM for rendering
  • Google Earth: 3D rendering and data processing
  • AutoCAD: CAD software running in browser
  • Unity/Unreal: Game engines targeting web
  • Adobe Photoshop: Image processing in browser

When NOT to use WebAssembly

WASM is not always the answer. Avoid WASM for:

  • Simple web applications (JavaScript is faster to develop)
  • DOM manipulation (WASM has no direct DOM access)
  • Small performance improvements (overhead may negate gains)
  • When team doesn’t have experience with compiled languages

How Does WebAssembly Work?

WASM isn’t written by hand; instead, it’s a compilation target. This means developers write code in languages they are familiar with and then compile that code into WASM. This WASM code can then be executed in any environment that supports WebAssembly.

The process:

  1. Write code in a supported language (C, C++, Rust, etc.)
  2. Compile the code to .wasm binary format
  3. Load the WASM module in JavaScript
  4. Call WASM functions from JavaScript or vice versa

Architecture:

┌─────────────────┐
│  Source Code    │  (C, C++, Rust, Go, etc.)
└────────┬────────┘
         │ Compile
         ▼
┌─────────────────┐
│   .wasm file    │  (Binary format)
└────────┬────────┘
         │ Load & Execute
         ▼
┌─────────────────┐
│  Browser / VM   │  (JavaScript runtime)
└─────────────────┘

Browser Support

WebAssembly is supported in all modern browsers:

  • Chrome 57+ (March 2017)
  • Firefox 52+ (March 2017)
  • Safari 11+ (September 2017)
  • Edge 16+ (October 2017)

Support is now essentially universal, with over 95% global browser compatibility.

“Hello World” in WebAssembly

For a simple “Hello World” example, we’ll use C and then compile it to WASM.

Step 1: Write C Code

hello.c:

#include <stdio.h>

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

Step 2: Install Emscripten

Emscripten is a toolchain for compiling C/C++ to WebAssembly.

# Install via emsdk
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Step 3: Compile to WASM

emcc hello.c -s WASM=1 -o hello.html

This command generates three files:

  • hello.wasm - The compiled WebAssembly module
  • hello.html - HTML loader for the module
  • hello.js - JavaScript glue code to load and run the WASM

Step 4: Run in Browser

hello.html (auto-generated, but can be customized):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello WebAssembly</title>
</head>
<body>
    <script src="hello.js"></script>
    <script>
        Module.onRuntimeInitialized = function() {
            Module._main();
        };
    </script>
</body>
</html>

Open the hello.html file in a browser that supports WebAssembly. You should see the message “Hello, WebAssembly!” printed in the browser console or output area.

Local Server Required

Due to CORS restrictions, you’ll need to serve the files from a local web server rather than opening them directly as files. You can use:

# Python 3
python -m http.server 8000

# Node.js
npx serve

Then navigate to http://localhost:8000/hello.html

More Practical Example: Adding Numbers

Let’s create a more practical example that demonstrates calling WASM from JavaScript.

add.c:

#include <emscripten/emscripten.h>

// EMSCRIPTEN_KEEPALIVE prevents the function from being removed by compiler optimization
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
    return a + b;
}

Compile:

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

Use in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WASM Add Example</title>
</head>
<body>
    <h1>WebAssembly Addition</h1>
    <p>Result: <span id="result"></span></p>

    <script src="add.js"></script>
    <script>
        Module.onRuntimeInitialized = function() {
            // Call the WASM function
            let result = Module._add(5, 3);
            document.getElementById('result').textContent = result;
            console.log('5 + 3 =', result);
        };
    </script>
</body>
</html>

WebAssembly Text Format (WAT)

WebAssembly also has a text format called WAT (WebAssembly Text) which is human-readable:

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  (export "add" (func $add))
)

You can convert WAT to WASM using tools like wat2wasm:

wat2wasm add.wat -o add.wasm

This is useful for learning and understanding how WASM works at a lower level.

Modern WebAssembly Features

WebAssembly continues to evolve with new proposals and features:

WASI (WebAssembly System Interface):

  • Allows WASM to run outside the browser (Node.js, standalone)
  • Provides system-level APIs (file I/O, networking)
  • Enables true “write once, run anywhere” for compiled code

Threads and Atomics:

  • Multi-threading support for parallel computation
  • Shared memory between threads

SIMD (Single Instruction, Multiple Data):

  • Vectorized operations for better performance
  • Particularly useful for multimedia processing

Reference Types:

  • Better integration with JavaScript objects
  • More efficient data passing between JS and WASM

Exception Handling:

  • Native exception handling in WASM
  • Better error propagation

Tools and Languages

Languages that compile to WASM:

  • C/C++: Via Emscripten
  • Rust: Native WASM support via wasm-pack
  • Go: Via TinyGo
  • AssemblyScript: TypeScript-like language for WASM
  • C#: Via Blazor WebAssembly
  • Python: Experimental via Pyodide

Development Tools:

  • Emscripten: C/C++ to WASM compiler
  • wasm-pack: Rust to WASM workflow tool
  • WABT: WebAssembly Binary Toolkit
  • Binaryen: Optimizer and compiler infrastructure

Future of WebAssembly

WebAssembly is rapidly evolving beyond just a compilation target for the web:

Expanding Beyond Browsers:

  • Server-side execution (Node.js, Deno, specialized runtimes)
  • Edge computing and CDN execution
  • IoT and embedded systems
  • Blockchain smart contracts

Improved Developer Experience:

  • Better debugging tools
  • Source maps for WASM
  • Integration with browser DevTools
  • Profiling and performance analysis tools

New Capabilities:

  • Direct DOM access (without JavaScript intermediary)
  • Component model for better modularity
  • Interface types for language interop
  • Garbage collection support

Growing Ecosystem:

  • More languages targeting WASM
  • Framework support (React, Vue, etc.)
  • Package registries (wapm, etc.)
  • Cloud providers adding WASM support

Summary

WebAssembly represents a significant evolution in web technology, enabling near-native performance for compute-intensive applications in the browser.

Key Takeaways

What is WebAssembly:

  • Binary instruction format for the web
  • Compilation target for languages like C, C++, Rust
  • Designed for near-native performance
  • Complements JavaScript, doesn’t replace it

Main Advantages:

  • Performance: 10-20x faster than JavaScript for compute tasks
  • Portability: Runs consistently across all platforms
  • Language choice: Use C, C++, Rust, Go, and others
  • Security: Sandboxed execution environment
  • Interoperability: Works seamlessly with JavaScript

Best Use Cases:

  • Performance-critical applications (games, graphics, simulations)
  • Image/video/audio processing
  • Porting existing C/C++ codebases
  • Scientific computing and data analysis
  • Compression and cryptography

Development Workflow:

  1. Write code in supported language
  2. Compile to .wasm using tools like Emscripten
  3. Load WASM module in JavaScript
  4. Call functions between JS and WASM

Browser Support:

  • Universally supported in modern browsers (95%+ global support)
  • Available since 2017
  • Ready for production use

Modern Features:

  • WASI for system-level access
  • Multi-threading support
  • SIMD for vectorized operations
  • Expanding beyond browser to server and edge

Getting Started:

  • Install Emscripten for C/C++
  • Use wasm-pack for Rust
  • Try AssemblyScript for TypeScript-like syntax
  • Start with simple examples and build up

Future Outlook:

  • Continued performance improvements
  • Better tooling and debugging
  • Expansion beyond browser (server, edge, IoT)
  • Growing ecosystem and community

WebAssembly opens new possibilities for web development, allowing developers to bring high-performance applications to the browser while leveraging existing codebases and expertise in compiled languages.