Show HN: WebAssembly from the Ground Up – learn WASM by building a compiler

6 points by pdubroy 7 hours ago

Hi HN!

We (pdubroy & marianoguerra) just launched an online book called WebAssembly from the Ground Up. It's an online book to learn Wasm by building a simple compiler in JavaScript.

This is the book we wish we'd had 3 years ago. Unlike many WebAssembly resources that focus on use cases and tooling, we wanted a deep dive into how Wasm actually works.

We focus on the core of WebAssembly: the module format and the instruction set. We think the low-level details — the "virtual ISA" — are the most interesting part, and we had the crazy idea that writing a compiler is the best way to learn it.

Over the course of the book, you'll build up two things:

1. An "assembler library", that can be used to produce WebAssembly modules. Here's an example:

  const mod = module([
    typesec([functype([], [])]),
    funcsec([typeidx(0)]),
    exportsec([export_('main', exportdesc.func(0))]),
    codesec([code(func([], [instr.end]))]),
  ]);
  return Uint8Array.from(mod.flat(Infinity));

  extern func setPixel(x, y, r, g, b, a);
  
  func draw(width, height, t) {
    let y = 0;
    while y < height {
      let x = 0;
      while x < width {
        let r = t;
        let g = x;
        let b = y;
        let a = 255;
        setPixel(x, y, r, g, b, a);
        x := x + 1;
      }
      y := y + 1;
    }
    0
  }

You can check out a sample here: https://wasmgroundup.com/book/contents-sample/ — we'd love to hear what you think! There's also a 25% discount for HN readers — just use the code HNWASM25 at checkout.