WebAssembly

Concepts of Programming Languages

Sebastian Macke

Rosenheim Technical University

What is WebAssembly?

WebAssembly is a portable binary-code format for executable programs.

- 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
- 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

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

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 2022

Source:

github.com/appcypher/awesome-wasm-langs

In Production:
🐔 C              🐔 C++              🐔 Go           🐔 Rust
Stable for production:
🐥 .Net           🐥 AssemblyScript   🐥 Brainfuck    🐥 C#
🐥 Clean          🐥 COBOL            🐥 F#           🐥 Forth
🐥 Lobster        🐥 Lua              🐥 Never        🐥 Rego
🐥 TypeScript     🐥 WebAssembly      🐥 Zig
Unstable:
🐣 Ada            🐣 D                 🐣 Eel          🐣 Elixir
🐣 Java           🐣 JavaScript        🐣 Kotlin/Wasm  🐣 Lisp
🐣 Lys            🐣 Pascal            🐣 Perl         🐣 PHP
🐣 Poetry         🐣 Python            🐣 Prolog       🐣 R
🐣 Ruby           🐣 Scheme            🐣 Scopes       🐣 Swift
🐣 Tcl
Work in Progress:
🥚 Dart           🥚 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/

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.
Interactive educational software, and news articles.
Platform simulation / emulation (ARC, DOSBox, QEMU, MAME, …).
Language interpreters and virtual machines.
POSIX user-space environment, allowing porting of existing POSIX applications.
Developer tooling (editors, compilers, debuggers, …).
Remote desktop.
VPN.
Encryption.

Outside the browser

Game distribution service (portable and secure).
Server-side compute of untrusted code.
Server-side application.
Hybrid native apps on mobile devices.
Generic Plugins for your software.

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>