WebAssembly Concepts

Understanding the fundamentals of WebAssembly and its place in modern web development

What is WebAssembly?

WebAssembly (often abbreviated as WASM) is a binary instruction format for a stack-based virtual machine. It's designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

Key Characteristics of WebAssembly:

  • Binary format - Compact size for faster transmission over networks
  • Near-native performance - Executes at speeds close to native machine code
  • Language-agnostic - Can be compiled from various languages (C, C++, Rust, etc.)
  • Secure by design - Runs in a sandboxed execution environment
  • Complements JavaScript - Works alongside JavaScript, not replacing it

Analogy: WASM as a Universal Translator

Think of WebAssembly as a universal translator for the web. Just as a translator allows people speaking different languages to communicate, WebAssembly allows code written in various languages to run in browsers. The "translation" happens once (at compile time), creating an efficient binary format that browsers understand directly, rather than having to interpret it on the fly like JavaScript.

History and Evolution

WebAssembly emerged from a collaboration between major browser vendors seeking to create a more efficient compilation target for the web.

timeline title WebAssembly Timeline 2015 : WebAssembly Community Group formed 2017 : MVP (Minimum Viable Product) released 2018 : Became a W3C Recommendation 2019 : WebAssembly System Interface (WASI) announced 2020 : Thread support proposals 2021 : Enhanced garbage collection proposals 2022-2024 : Continued expansion of capabilities

Before WebAssembly, projects like asm.js and Google Native Client (NaCl) attempted to bring high-performance code execution to browsers, but WebAssembly represents the first standardized solution with universal browser support.

WebAssembly Architecture

The WebAssembly Module System

WebAssembly code is organized into modules, which are the deployable and executable units of code in WebAssembly.

WebAssembly Module Type Section Function Signatures Function Section Function Declarations Memory Section Linear Memory Definitions Export Section Exports to JS Import Section Imports from JS Global Section Global Variables Table Section Function References Code Section Function Bodies Data Section Initial Memory Contents

WebAssembly Virtual Machine

WebAssembly defines a stack-based virtual machine that executes the binary instructions.

  • Stack-based execution model - Operations pop operands from and push results to a stack
  • Linear memory - A contiguous, resizable array of bytes
  • Tables - Arrays of references (e.g., function references)
  • Structured control flow - No arbitrary jumps, ensuring security and validation

The WebAssembly Binary Format

WebAssembly modules are distributed in a compact binary format (.wasm files) that is efficiently transmittable over the web and quickly loadable by browsers.

Text Format vs. Binary Format

WebAssembly has both a binary format (for production) and a text format (for development and debugging).

WebAssembly Text Format (.wat)

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

Compiled Binary (hexadecimal view)

00 61 73 6D  01 00 00 00  01 07 01 60  02 7F 7F 01  
7F 03 02 01  00 07 07 01  03 61 64 64  00 00 0A 09  
01 07 00 20  00 20 01 6A  0B

The binary format is what's actually transmitted over the network and executed by the browser, while the text format is human-readable for development purposes.

WebAssembly in the Browser Environment

JS API for WebAssembly

Browsers provide JavaScript APIs for working with WebAssembly modules:

// Fetch and instantiate a WebAssembly module
fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(result => {
    // Use exports from the WebAssembly module
    const add = result.instance.exports.add;
    console.log(add(40, 2)); // 42
  });

WebAssembly and JavaScript Integration

JavaScript and WebAssembly are designed to work together efficiently:

graph TD A[JavaScript] -->|calls| B[WebAssembly Functions] B -->|returns results to| A C[WebAssembly] -->|calls| D[JavaScript Functions] D -->|returns results to| C E[DOM] ------|accessed by| A

Real-World Example: Unity Game Engine

The Unity game engine uses WebAssembly to compile games written in C# for the web. This allows developers to write complex game logic in a language designed for performance, while seamlessly integrating with browser capabilities for rendering and user interaction.

This integration demonstrates how JavaScript handles DOM interactions and rendering, while WebAssembly efficiently manages the computationally intensive game logic and physics simulations.

WebAssembly vs. JavaScript

Complementary Technologies

WebAssembly was designed to complement JavaScript, not replace it. Each has its strengths:

Feature WebAssembly JavaScript
Performance Near-native speed JIT-compiled, but slower for compute-intensive tasks
Memory management Manual (in source languages like C++/Rust) Automatic garbage collection
Type system Static typing Dynamic typing
DOM access Only through JavaScript Direct access
Developer experience Compiled from other languages Written directly, easier for web developers
Startup time Parse/compile overhead, then fast Faster initial execution for small scripts

When to Use WebAssembly

  • Computationally intensive tasks - Image/video processing, simulations, games
  • Porting existing C/C++/Rust codebases - Reuse battle-tested libraries
  • Performance-critical applications - When every millisecond counts
  • Large, complex applications - Where structured typing helps manage complexity

WebAssembly Beyond the Browser

WebAssembly is expanding beyond browsers into other environments:

WebAssembly System Interface (WASI)

WASI standardizes how WebAssembly modules access system resources outside the browser, enabling server-side and desktop applications.

graph LR A[WebAssembly Module] --> B{WASI} B --> C[File System] B --> D[Network] B --> E[Time] B --> F[Random Numbers] B --> G[Other System Resources]

Emerging Use Cases

Real-World Example: Fastly's Compute@Edge

Fastly's Compute@Edge platform uses WebAssembly to run customer code at the edge of their network (in their global CDN). This allows developers to write high-performance code that executes close to end users, reducing latency while maintaining security through WebAssembly's sandboxed execution model.

Getting Started with WebAssembly

Languages and Compilation

Several languages can be compiled to WebAssembly:

  • C/C++ - Using Emscripten
  • Rust - Using wasm-pack or direct wasm32 target
  • AssemblyScript - TypeScript-like syntax targeting WebAssembly
  • Go - Experimental WebAssembly support
  • C#/.NET - Using Blazor WebAssembly

Simple Example: C to WebAssembly with Emscripten

fibonacci.c

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int fibonacci(int n) {
    if (n <= 1) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

Compilation

emcc fibonacci.c -o fibonacci.js -s EXPORTED_FUNCTIONS='["_fibonacci"]' -s EXPORTED_RUNTIME_METHODS='["cwrap"]'

Using in browser

fetch('fibonacci.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(result => {
    const fibonacci = result.instance.exports.fibonacci;
    console.log(fibonacci(10)); // 55
  });

WebAssembly Tools and Resources

Development Tools

Learning Resources

Practice Activities

Activity 1: Exploring WebAssembly Examples

Visit WebAssembly.org/demo and explore the examples. Compare the performance between WebAssembly and JavaScript implementations.

Activity 2: WebAssembly Explorer

Try the online WebAssembly Explorer to see how C/C++ code compiles to WebAssembly.

Activity 3: AssemblyScript Hello World

Follow the AssemblyScript Getting Started Guide to create a simple WebAssembly module using TypeScript-like syntax.

Activity 4: Research

Research a real-world application that uses WebAssembly (e.g., Figma, Google Earth, Unity games) and write a brief summary of how they leverage WebAssembly for their application.

Further Topics to Explore

Summary

In this lecture, we've covered the fundamental concepts of WebAssembly:

WebAssembly represents a significant evolution in web development, enabling performance-critical applications and bringing more language choices to web developers, while maintaining the security and platform independence that makes the web powerful.