TodayTools

WebAssembly flashcards

Run fast compiled code safely in the browser and beyond.

Donate
Beginner friendly, starts from zero
Section
How to study
0
WebAssemblyStart from zero · 1 of 12

What is WebAssembly, in one plain sentence?

WebAssembly, or Wasm, is a way to run fast code written in languages like C++ or Rust inside a web browser, next to the page's JavaScript.

Desktop-speed code, in a browser tab.

All topics

WebAssembly at a glance

WebAssembly runs fast code from languages like C++ and Rust inside a web browser, next to JavaScript.

A universal travel plug: code from many languages takes one standard shape, and every browser has the socket.

Words you will meet

Compile
Turn the code a person writes into a file of numbers a computer runs
Module
A compiled .wasm file, ready to run
Instance
One running copy of a module with its own data
Export
A function the module offers to JavaScript
Import
A function JavaScript hands in for the module to use
Sandboxed
Locked in a safe box with no reach outside unless given
Pointer
A number that says where data sits in memory
Runtime
A program that runs Wasm outside the browser

The steps

  1. 1. Start from zero (12 cards): What WebAssembly is, where you meet it, and the plain words for modules, memory and tools before you load your first one.
  2. 2. Core basics (14 cards): What Wasm is, when it beats JavaScript, and how a module is loaded and called.
  3. 3. Next steps (15 cards): Rust with wasm-bindgen, Emscripten, memory, bundle size, workers and WASI.
  4. 4. Go deeper (15 cards): Wasm 3.0, the Component Model, GC, SIMD, threads, JSPI, startup cost and debugging.
All 12 cards in Start from zero
What is WebAssembly, in one plain sentence?
WebAssembly, or Wasm, is a way to run fast code written in languages like C++ or Rust inside a web browser, next to the page's JavaScript.
What problem does Wasm solve? What was it like before?
Browsers once ran only JavaScript, so heavy jobs like photo editing or 3D games were slow or needed an install. Wasm lets fast programs run in a tab at near full speed.
Where do you already meet Wasm every day?
Online photo and video editors, design tools that run in the browser, background blur in video calls and many browser games use Wasm under the hood.
What everyday thing is Wasm like?
A universal travel plug. Code from many languages is shaped into one standard plug, and every browser has the socket for it.
What are JavaScript, the UI and the DOM?
JavaScript is the main language browsers run to make pages do things. The UI is what you see and click. The DOM is the browser's live map of the page that JavaScript changes.
What do source code, compile, binary and machine code mean?
Source code is the text a programmer writes. Compiling turns it into a binary, a file of numbers a computer runs. Machine code is the chip's own binary language.
What are a module and an instance?
A .wasm file holds a module: ready, compiled code. An instance is one running copy of that module with its own data, like several players of the same game, each with his own score.
What are exports and imports?
Exports are the functions a module offers to JavaScript, like add. Imports are the functions JavaScript hands in, like log, because Wasm cannot reach anything by itself.
What do sandboxed, memory and a pointer mean?
Sandboxed means locked in a safe box: no files, network or page unless given. Its memory is one long row of bytes (tiny numbers, 0 to 255), and a pointer is a position in that row.
What are a toolchain, a runtime and a server?
A toolchain is the set of tools that turns your language into Wasm, like Rust's cargo. A server is a computer that serves others, and a runtime is a program that runs Wasm outside the browser, on servers too.
What do you need, and what is your first tiny win?
Just a browser, nothing to install. Open its console (F12 on most computers) and paste this. The eight bytes are the smallest valid module, and WebAssembly.validate checks them and prints true.
What will you be able to do after this topic?
Compile Rust or C++ to Wasm, load it in a page, pass numbers, text and pictures between JavaScript and Wasm, and judge when Wasm is worth it and when plain JavaScript is better.
WebAssembly cheatsheet

JS API

  • WebAssembly.instantiateStreaming(fetch(url), imports) Download, compile and instantiate
  • WebAssembly.compileStreaming(fetch(url)) Compile to a reusable Module
  • WebAssembly.instantiate(module, imports) New instance from a Module
  • instance.exports.fn() Call an export
  • new Uint8Array(exports.memory.buffer) View linear memory
  • memory.grow(pages) Add 64 KiB pages
  • WebAssembly.validate(bytes) Feature-detect with a tiny module

Rust

  • rustup target add wasm32-unknown-unknown Browser target
  • rustup target add wasm32-wasip2 WASI 0.2 component target
  • wasm-pack build --target web --release Build crate plus JS glue
  • wasm-bindgen app.wasm --out-dir pkg --target web Generate glue by hand
  • RUSTFLAGS="-C target-feature=+simd128" Enable SIMD
  • cargo install wasm-bindgen-cli --version 0.2.x Match the crate version

Size and speed

  • opt-level = "z" Optimise for size
  • lto = true Whole-program optimisation
  • codegen-units = 1 Better optimisation, slower build
  • panic = "abort" Drop unwinding code
  • wasm-opt -Oz -o out.wasm in.wasm Binaryen size pass
  • Content-Encoding: br Serve compressed

Tools

  • wasm-tools print app.wasm Binary to WAT
  • wasm-tools validate app.wasm Check a module
  • wasm-tools component wit app.wasm Show a component's interface
  • wasm2wat app.wasm -o app.wat Disassemble (WABT)
  • emcc main.c -O3 -o main.js C/C++ to Wasm plus glue
  • wasmtime run --dir=. app.wasm Run with a directory grant

Features

  • SIMD (v128) Vector maths, all major browsers
  • Threads + atomics Needs cross-origin isolation
  • GC Managed structs and arrays
  • Exception handling Native try and throw
  • Tail calls return_call for functional languages
  • Memory64 Over 4 GiB (Wasm 3.0)
  • JSPI Sync Wasm waits on JS promises
Donate