WebAssembly

Concepts of Programming Languages

What is WebAssembly?

What is it?

• WebAssembly is a portable binary-code format for fast, safe execution in the browser and beyond.

Why it exists?

• To run computationally heavy code (e.g., C/C++, Rust) at near-native speed on the web.
• To complement JavaScript. Not replace it.

WebAssembly is a new type of (virtual) machine and architecture.

What is WebAssembly?

webassembly.org

- 1995: JavaScript is developed within 10 days by Brendan Eich

- ... Java Applets, Flash, ActiveX, Silverlight
- ... JavaScript improvements, ...

- 2015: First presentation of WebAssembly from the W3C WebAssembly Working Group
- 2016: Google, Microsoft and Mozilla show their first implementations
- 2017: WebAssembly is offically supported by all Web Browsers
- 2019: A WebAssembly system interface is specified for portable applications outside the browser
- 2022: Docker suggests Wasm as an alternative to containers
- 2025: Webassembly 3.0 (64-Bit, Garbage Collector, ...)
- Now:  WebAssembly is constantly enhanced (https://webassembly.org/roadmap/)

After the introduction of JavaScript in the 90s, it is the second language supported directly by web browsers

What is WebAssembly?

• WebAssembly is designed as a portable target for compiling high-level languages

JavaScript vs. WebAssembly?

• JavaScript requires a complex optimization

• WebAssembly simplifies processing

Design

• Binary format:

- small size and easy to interpret

• Stack Machine with local and global variables:

- Efficient decoding and compilation

• Structured control flow and structured use of the stack:

- One-Pass Verification

• Simple types: i32, i64, f32, f64

- Representation of today's CPU architecture

Design

• Linear memory with load/store addressing

- Sandboxed
- 64kB segment. Enables hardware-supported boundary check
- Size adaptable at runtime

• Garbage collection engine

- Memory management for high-level languages

• Interface via defined interface

- Export/import of functions, global variables and so-called tables

• Assembler text format

- Open and possibility for debugging

Stackmachine in Detail

Example of a stack machine

Evaluate

i64.const 3   ;; push 3 onto stack
i64.const 9   ;; push 9 onto stack
i64.add       ;; pop 3 and 9 from stack, add them, push result onto stack
i64.const 4   ;; push 4 onto stack
i64.const 6   ;; push 6 onto stack
i64.add       ;; pop 4 and 6 from stack, add them, push result onto stack
i64.mul       ;; pop 12 and 15 from stack, multiply them, push result onto stack

Demo in WebAssembly Text Format

• Example in src/webassembly/wat folder

add.wat

(module
  (type (;0;) (func (param i32 i32) (result i32)))
  (func (;0;) (type 0) (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add)
  (export "add" (func 0)))

add.js

const fs = require('fs');

async function Run() {
    let buffer = await fs.readFileSync('./add.wasm');
    let result = await WebAssembly.instantiate(buffer);
    let add = result.instance.exports.add
    console.log(add(5, 2))
}

Run()

Supported languages in 2025

• Source:

github.com/appcypher/awesome-wasm-langs

In Production:
🐔 C              🐔 C++              🐔 Go           🐔 Rust
Stable for production:
🐥 .Net           🐥 AssemblyScript   🐥 Brainfuck    🐥 C#
🐥 Clean          🐥 COBOL            🐥 Dart         🐥 F#
🐥 Forth          🐥 Grain            🐥 Lobster      🐥 Lua
🐥 Never          🐥 Rego             🐥 TypeScript   🐥 WebAssembly
🐥 Zig
Unstable:
🐣 Ada            🐣 D                🐣 Eel          🐣 Elixir
🐣 Java           🐣 JavaScript       🐣 Lisp         🐥 Kotlin/Wasm
🐣 Lys            🐣 Pascal           🐣 Perl         🐣 PHP
🐣 Poetry         🐣 Python           🐣 Prolog       🐣 R
🐣 Ruby           🐣 Scheme           🐣 Scopes       🐣 Swift
🐣 Tcl
Work in Progress:
🥚 Faust          🥚 Co               🥚 Forest       🥚 Haskell
🥚 Julia          🥚 Kou              🥚 Nim          🥚 Ocaml
🥚 Plorth

Demo in C

• Example in src/webassembly/C folder

add.c

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

add.js

const fs = require('fs');

async function Run() {
    let buffer = await fs.readFileSync('./add.wasm');
    let result = await WebAssembly.instantiate(buffer);
    let add = result.instance.exports.add
    console.log(add(5, 2))
}

Run()

Demo in Go

package main

func main() {
    println("Hello World")
}

index.html

<html>
<body>
    <script src="wasm_exec.js"></script>
    <script>
        const go = new Go();

        async function Run() {
            let response = await fetch('lib.wasm')
            let buffer = await response.arrayBuffer();
            let result = await WebAssembly.instantiate(buffer, go.importObject);
            go.run(result.instance)
        }

        Run()
    </script>
</body>
</html>

Exercise

github.com/s-macke/concepts-of-programming-languages/blob/master/docs/exercises/Exercise11.md

• Write a Hello world App in Go and execute it as node app or in the browser.

• Javascript or WebAssembly doesn't support concurrency and are single threaded. Test Go concurrency for the wasm compile target.

• Webassembly does not support Coroutines either, e.g. blocking calls such as time.Sleep(1 * time.Second). Test blocking calls.

WebAssembly and Go Routines

• Webassembly does not support concurrency yet. Also no event timers for the scheduler
• However go executables run in the browser. How is that possible?

func ListPrimes() {
    for n := 100000000001; ; n++ {
        if big.NewInt(int64(n)).ProbablyPrime(100000) {
            fmt.Printf("%d\n", n)
        }
        runtime.Gosched()
    }
}

func main() {
    go ListPrimes()
    for {
        fmt.Printf("Hello, WebAssembly!\n")
        time.Sleep(1 * time.Second)
    }
}

• Go supports concurrency when you execute the Scheduler on purpose

Applications

webassembly.org/docs/use-cases/

• Run every code in your browser without full rewrite.
• Migrate legacy native apps to web apps.
• Better execution for languages and toolkits that are currently cross-compiled to the Web (C/C++, GWT, …).
• Image / video editing
• Games: - Casual games that need to start quickly. - AAA games that have heavy assets. - Game portals (mixed-party/origin content).
• Peer-to-peer applications (games, collaborative editing, decentralized and centralized).
• Music applications (streaming, caching).
• Image recognition.
• Live video augmentation (e.g. putting hats on people’s heads).

Applications

• VR and augmented reality (very low latency).
• CAD applications.
• Scientific visualization and simulation.
• Platform simulation / emulation (ARC, DOSBox, QEMU, MAME, …).
• Language interpreters and virtual machines.
• Developer tooling (editors, compilers, debuggers, …).
• Remote desktop.
• VPN.
• Encryption.

Outside the browser

• Game distribution service (portable and secure).
• Server-side compute of untrusted code.
• Hybrid native apps on mobile devices.
• Generic Plugins for your software. (e. g. Microsoft Flight Simulator)
• Universal Docker containers
• Universal standalone applications (see WASI)

Used by

• Google in Google Sheet
• Figma
• AutoCAD Web
• Unity WebGL games/apps
• Cloudflare Workers
• Plugin mechanisms in Flight Simulator

Calls from and to Go

//go:build js
// +build js

package main

import (
    "syscall/js"
)

func add(this js.Value, input []js.Value) any {
    result := input[0].Float() + input[1].Float()
    return js.ValueOf(result)
}

func main() {

    document := js.Global().Get("document")
    p := document.Call("createElement", "p")
    p.Set("innerHTML", "Hello WASM from Go!")
    document.Get("body").Call("appendChild", p)

    // register function
    js.Global().Set("add", js.FuncOf(add))

    // prevent exit
    c := make(chan struct{}, 0)
    <-c
}

Calls from and to Go

index.html

        const go = new Go();

        async function Run() {
            let response = await fetch('lib.wasm')
            let buffer = await response.arrayBuffer();
            let result = await WebAssembly.instantiate(buffer, go.importObject);
            go.run(result.instance)
            document.body.innerHTML += add(41, 1);
        }

        Run()
    </script>

What is WASI?

• WebAssembly System Interface
• A portable interface for applications that run outside the browser

Question:

1. What are the issues with virtualization such as Docker?
2. You have an Hello world executable and a binary executable, that can only be access through
exported and imported functions. What functions do you have export and import to execute the executable?

WASI Demo

Exercise

github.com/s-macke/concepts-of-programming-languages/blob/master/docs/exercises/Exercise11.md

• Reverse Polish Calculator in the browser
• Show generated image in the browser

Future

• WebAssembly Roadmap

webassembly.org/roadmap/

• WebAssembly Proposals

https://github.com/WebAssembly/proposals

• WASI Proposals

https://github.com/WebAssembly/WASI/blob/main/docs/Proposals.md

Links

• Awesome-wasm, Curated list of awesome things regarding WebAssembly

github.com/mbasso/awesome-wasm

• WasmWeekly, WebAssembly Today, Newletter

wasmweekly.news/

webassemblytoday.substack.com/

• Webassembly CLI Tools

github.com/bytecodealliance/wasm-tools

• Webassembly Binary Toolkit

github.com/WebAssembly/wabt

• Binaryen, Compiler infrastructure and toolchain library

github.com/WebAssembly/binaryen

Links

• WebAssembly Studio

webassembly.studio/

• WebAssembly Roadmap

webassembly.org/roadmap/

Thank you