Tessera

WebAssembly from the Ground Up

@wasmgroundup.com

A book about WebAssembly by @marianoguerra.org and @dubroy.com — learn Wasm by building a simple compiler in JavaScript. https://wasmgroundup.com/

74 Posts267 Follower 191 Folgt

WebAssembly from the Ground Up @wasmgroundup.com · 4mo ago

In case you missed it last week, @dubroy.com was on CodeTV to show to talk about #Wasm with @jason.energy. It was a lot of fun! Worth a watch if you missed it live.

CodeTV@codetv.dev · 4mo ago

Did you miss @dubroy.com teaching us about WebAssembly No worries! Check out our conversation on the Web Dev Podcast, then code along with us on Learn with Jason. WDP: codetv.dev/series/web-d... LWJ: codetv.dev/series/learn...

Patrick Dubroy @dubroy.com · 4mo ago

New post on the @ohmjs.org blog — Inside Ohm's PEG-to-Wasm compiler → ohmjs.org/blog/2026/03... v18 is now more than 50x faster for real-world grammars while using about 10% of the memory 🔥 …this post goes into the details of how it's built.

Bar chart comparing performance improvements across three technologies: JSON shows 15.6ms (v17) reduced to 0.35ms (v18), a 44.6x speed increase; LiquidHTML shows 2,250ms (JS) reduced to 36ms (Wasm), a 62.8x speed increase; and ES5 shows 3,308ms (JS) reduced to 55ms (Wasm), a 60.3x speed increase. Blue bars represent 'Before' measurements and green bars represent 'After' measurements

Patrick Dubroy @dubroy.com · 5mo ago

Tomorrow at 17:20 CET / 12:20 EDT / 9:20 PDT, I'll be livestreaming at twitch.tv/jlengstorf, teaching @jason.energy about WebAssembly!! I'll do my best to condense the best parts of our Wasm book (@wasmgroundup.com) into ~60 minutes. 😄

Twitch

Twitch is the world

twitch.tv

WebAssembly from the Ground Up @wasmgroundup.com · 5mo ago

Ohhh this is cool: github.com/dy/jz JS syntax that compiles to pure WASM. No runtime, no GC.

import jz from 'jz'

// 3 lines of JS → 120 bytes of WASM, compiles in <1ms
const { exports } = await WebAssembly.instantiate(jz(`
let { sin, PI } = Math
export let sine = (out, freq, t) => {
for (let i = 0; i < out.length; i++) out[i] = sin((t + i) * freq * PI * 2 / 44100)
}
`))

// Real-time audio at native speed, zero GC pauses
exports.sine(audioBuffer, 440, sampleOffset)

Patrick Dubroy @dubroy.com · 5mo ago

TIL: Multithreaded WebAssembly → github.com/pdubroy/til/... (corrected)

Just like in JavaScript, you can do shared memory multithreading in WebAssembly! I've long known this was possible, but until the other day, had never actually played with it myself, so I decided to put together a small, self-contained example.

(This is for Node, but it's pretty much the same in the browser.)

Details
Structured cloning of WebAssembly.Module
Normally you'd instantiate a Wasm module with WebAssembly.instantiate, which gives you a module instance. Here, we use WebAssembly.compile, which gives us a WebAssembly.Module. This is a stateless object that is structured-cloneable, which allows it to be safely shared across realm boundaries.

Serialization (an implicit part of structured cloning) of WebAssembly modules is defined in §3 of the WebAssembly Web API, which says:

Engines should attempt to share/reuse internal compiled code when performing a structured serialization, although in corner cases like CPU upgrade or browser update, this might not be possible and full recompilation may be necessary.

Shared memory
WebAssembly.Memory also support structured cloning. When we pass shared: true, the buffer property is a SharedArrayBuffer:

The structured clone algorithm accepts SharedArrayBuffer objects and typed arrays mapped onto SharedArrayBuffer objects. In both cases, the SharedArrayBuffer object is transmitted to the receiver resulting in a new, private SharedArrayBuffer object in the receiving agent (just as for ArrayBuffer). However, the shared data block referenced by the two SharedArrayBuffer objects is the same data block, and a side effect to the block in one agent will eventually become visible in the other agent.

Atomic add
The last piece of the puzzle is the i32.atomic.rmw.add instruction used in the addId function:

(func (export "add") (result i32)
;; mem[0] += workerId
i32.const 0
global.get 0
i32.atomic.rmw.add))
This instruction is defined in the threads proposal (a Stage 4 proposal, so not finalized yet), which defines "a new shared linear memory type and some new operations for atomic memory access".

i32.atomic.rmw.add is equivalent to LOCK XADD on x86. As described in the threads proposal:

Patrick Dubroy @dubroy.com · 5mo ago

A while back, someone in the @wasmgroundup.com Discord asked about resources for learning the formal notation used in the WebAssembly spec. One I like is Jeremy Siek's "Crash Course on Notation in Programming Language Theory": siek.blogspot.com/2012/07/cras...

Crash Course on Notation in Programming Language Theory

This blog post is meant to help my friends get started in reading my other blog posts, that is, this post is a crash course on the notation ...

siek.blogspot.com

WebAssembly from the Ground Up @wasmgroundup.com · 5mo ago

Is it the end of February already?? Yes, yes it is. Which means we just sent out our #Wasm tidbits. Sign up here to get it in your inbox once a month (ish): sendfox.com/wasmgroundup

Ahoy!

Hope your February has been swell. Here in southern Germany, it's been a relatively snowy winter…but it's finally starting to feel like spring.

First and foremost, we wanted to let you know that we published a new blog post last week, A WebAssembly interpreter (Part 2). In Part 1, we created a simple Wasm interpreter from scratch, but it was only able to evaluate expressions consisting of literals. In the latest post, we add support for local and global variables. Give it a look!

And here are your Wasm tidbits for February:
• "WebCC is a lightweight, zero-dependency C++ toolchain and framework for building WebAssembly applications. It provides a direct, high-performance bridge between C++ and HTML5 APIs." And then there's Coi, "a modern, component-based language for building reactive web apps", which is built on WebCC.
• Marimo is an open-source reactive Python notebook; like Jupyter, but better in many ways (no hidden state, stored as pure Python files, …). And it also supports WebAssembly notebooks, powered by Pyodide; in other words, Wasm notebooks execute entirely in the browser, without a backend executing Python.
• Along the same lines: Pandoc for the People is a fully-featured GUI interface for Pandoc (probably the most-used Haskell program ever). It lets you run any kind of conversion that pandoc supports, without the documents ever leaving your computer. It's based on the recent Pandoc 3.9 release, which supports Wasm via the GHC wasm backend.

The Spritely Institute @spritelyinst.bsky.social · 5mo ago

Spritely Hoot, our Scheme->WASM compiler (and all-around WASM toolkit) hits 0.8.0, and this one is a BIG release! spritely.institute/news/hoot-0-... For the first time you can LIVE develop web applications using Hoot, from the comfort of your own editor! See the video at the top!

Hoot 0.8.0 released! — Spritely Institute

spritely.institute

WebAssembly from the Ground Up @wasmgroundup.com · 5mo ago

"Wasm with TypeScript" oh hey that's us!!

TypeScript.fm@typescript.fm · 5mo ago

Ep 56 is live! 🎙️ npmx.dev, Chrome 145 DevTools, WASM with TypeScript, and why OSS maintainers need breaks. Plus: fun with generics & how to pronounce "Knip". share.transistor.fm/s/c5f65179 #typescript

WebAssembly from the Ground Up @wasmgroundup.com · 5mo ago

We've released a new version of @wasmground/emit — the small, simple #Wasm 1.0 "assembler library" for JS/TS, which we build up piece by piece in our book. The headline feature: proper TypeScript types! Give it a spin and let us know what you think: www.npmjs.com/package/@was...

$import * as w from "@wasmgroundup/emit"; const mod = w.module([ w.typesec([w.functype([w.valtype.i32, w.valtype.i32], [w.valtype.i32])]), w.funcsec([w.typeidx(0)]), w.exportsec([w.export_("add", w.exportdesc.func(w.funcidx(0)))]), w.codesec([ w.code( w.func( [], w.expr([ [w.instr.local.get, ...w.i32(0)], [w.instr.local.get, ...w.i32(1)], w.instr.i32.add, ]), ), ), ]), ]); const { instance } = await WebAssembly.instantiate(w.flatten(mod)); const { add } = instance.exports as { add: (a: number, b: number) => number }; console.log(add(1, 2)); // 3$

Racket @racket-lang.org · 7mo ago

**for early adopters** The WebRacket repo is now public at github.com/soegaard/web... The WebRacket language is a subset of Racket that compiles to WebAssembly examples github.com/soegaard/web... and racket-stories.com/static/minis... a small Scheme interpreter

racket-stories.com

WebAssembly from the Ground Up @wasmgroundup.com · 6mo ago

Happy Friday! We just published a new blog post — A WebAssembly Interpreter: Part 2 → wasmgroundup.com/blog/wasm-vm... In the first post, we wrote a small #Wasm interpreter from scratch in JS. In Part 2, we extend the interpreter to support local and global variables.

A WebAssembly interpreter (Part 2)

Adding local and global variable support to our Wasm Interpreter

wasmgroundup.com

A. H. Zakai @kripken.com · 2y ago

Version 121 of Binaryen, the WebAssembly optimizer, is out: github.com/WebAssembly/... Compilation is now much faster on GC content, up to 2x.

github.com

WebAssembly from the Ground Up @wasmgroundup.com · 6mo ago

Just sent out our #Wasm tidbits for January. All the coolest kids at FOSDEM subscribe, why don't you? https://sendfox.com/wasm...

Hey y'all — Some of you might be on your way to FOSDEM, or already there; if so, have fun! Looks like there won't be a WebAssembly devroom this year, but there are a few Wasm talks on the schedule.

Anyways, here are your Wasm tidbits for January:

• eBPF.party is a set of hands-on exercises to learn about eBPF. It features a browser-based live feedback editor for C code, powered by TCC (Tiny C Compiler) compiled to Wasm.
• Meet Whamm: The WebAssembly Instrumentation Framework.
• Building docfind: Fast Client-Side Search with Rust and WebAssembly has some details on how the VS Code team built a client-side search engine for their documentation.
• The 2025 Web Almanac from the Http Archive has some interesting details about how Wasm is being used on the web: "We periodically crawl the top sites on the web and record detailed information about fetched resources, used web platform APIs and features, and execution traces of each page…then crunch and analyze this data to identify trends."

WebAssembly from the Ground Up @wasmgroundup.com · 8mo ago

We just sent out our last newsletter of the year, chock full of Wasm tidbits and captivating compiler content. Not signed up? You're missing out! Get on the list at sendfox.com/wasmgroundup

Wasm tidbits

• All the videos from the WebAssembly Workshop at ICFP/SPLASH '25 are up on YouTube. There are a bunch of interesting ones, but we particularly enjoyed Oscar Spencer's Wasm GC and the Future of High-Level Language Compilation.
• The Feature Status page on webassembly.org has been updated to include a bunch of new engines and tools, including Wizard, wazero, and Binaryen.
• It's not directly related to WebAssembly, but we've been following Matt Godbolt's Advent of Compiler Optimizations, and it's been great so far. It's a nice way to learn a bit more about x86 and ARM assembly, and about the various optimizations that C++ compilers do. You can follow it on his blog or on YouTube.
• Andy Wingo: "If anyone has never worked on a baseline compiler before, they are a really funny space; my first experience with Firefox's Wasm baseline compiler was an eye-opener for me." Firefox's low-latency WebAssembly compiler (2020).
• For a deeper look at strategies for baseline compilation, see Ben Titzer's Whose baseline compiler is it anyway?. "We demystify single-pass compilers for Wasm, explaining their internal algorithms and tradeoffs, as well as providing a detailed empirical study of those employed in production."
• We recently met some folks from CedarDB (the commercial version of the Umbra database system), who told us about how they use Wasm for user-defined operators. The details can be found in Moritz Sichert's PhD dissertation, Efficient and Safe Integration of User-Defined Operators into Modern Database Systems.

WebAssembly from the Ground Up @wasmgroundup.com · 8mo ago

Are you sad that Advent of Code is already over, and looking for a new challenge to close out the year? Why not learn some #Wasm? Until Jan 7, you can get our book for 25% off! Just head to wasmgroundup.com and use the code HOLIDAY25.

WebAssembly from the Ground Up

A book about WebAssembly — learn Wasm by building a simple compiler in JavaScript.

wasmgroundup.com

WebAssembly from the Ground Up @wasmgroundup.com · 8mo ago

A very readable doc about V8's new bytecode verifier. Readers of our book may notice the similarity to the Wasm security model — see this excerpt from the chapter "What makes WebAssembly safe?"

Excerpt from the V8 Sandbox - Bytecode Verification doc, reading:

"The bytecode verifier needs to ensure that the execution of verified bytecode does not lead to out-of-sandbox corruption, specifically stack corruption. As the bytecode is fairly simple, this reduces down to a few basic properties that must be verified:
Spatial memory safety: stores (and potentially loads) to/from the stack stay inside the stack frame and so do not corrupt stack memory
Control-flow Integrity (CFI): jumps within the bytecode land at a valid instruction (otherwise, we might execute arbitrary instruction and so the first property could not be guaranteed)
No unsafe functions: the bytecode should not call unsafe runtime or native functions

These properties are verifiable in linear time (constant per bytecode) with a relatively simple validator."

An excerpt from WebAssembly from the Ground Up, showing a section entitled "Sandboxed execution". The excerpt reads:

"WebAssembly sandboxed execution is based on a technique known as Software-based Fault Isolation (SFI). It’s a remarkably simple idea. Here’s how it works —

The “sandbox” consists of two regions of memory: a code region and a data region. Then, the host must enforce two policies:

- A data-access policy ensures that any memory access in the untrusted module can only target its designated data region.
- A control-flow policy ensures that the untrusted module can’t transfer control outside its own code region — except by calling explicitly-allowed functions."

Samuel Groß@saelo.bsky.social · 8mo ago

More details: docs.google.com/document/d/1... Implementation: source.chromium.org/chromium/chr...

WebAssembly from the Ground Up @wasmgroundup.com · 8mo ago

If you're into compilers or interested in low-level programming, don't miss @matt.godbolt.org's Advent of Compiler Optimizations! I've learned a few new things every day…Saturday's post was no exception: xania.org/202512/06-di...

Division — Matt Godbolt’s blog

Division doesn't have to be slow with some clever tricks

xania.org

WebAssembly from the Ground Up @wasmgroundup.com · 8mo ago

I don't check LinkedIn very often, but today it was worth it. 😊

I'm a few chapters in, and the book truly exemplifies iterative learning 'from the ground up'. It starts with atomic units and the simplest thing that could possibly work, but then each chapter builds on the previous, while not jumping over any gaps. As an author, I appreciate how much thought went into creating that experience, but as a reader, it's just a smooth ride. Thanks Mariano Guerra and Patrick Dubroy for such an excellent book. I highly recommend it!

WebAssembly from the Ground Up @wasmgroundup.com · 9mo ago

One of our goals in the book was to encourage readers to become familiar with the WebAssembly spec. That's why, in the library we create for producing Wasm modules, we aim for "eye-closeness" with the spec. Left: code from the book. Right: the 1.0 spec text.

$// im*:vec(import) export function importsec(ims) { return section(SECTION_ID_IMPORT, vec(ims)); } // mod:name nm:name d:importdesc export function import_(mod, nm, d) { return [name(mod), name(nm), d]; } export const importdesc = { // x:typeidx func(x) { return [0x00, typeidx(x)]; }, };$ Excerpt from the WebAssembly core specification show § 5.5.5. Import Section, and the definitions of `importsec`, `import`, and `importdesc`.

Excerpt from the WebAssembly core specification show § 5.5.5. Import Section, and the definitions of `importsec`, `import`, and `importdesc`.

WebAssembly from the Ground Up @wasmgroundup.com · 9mo ago

Oh hey! We're on the HN front page 😄 If you've read the book and enjoyed it, and feel like leaving a comment, it would certainly help us out!

A screenshot of the Hacker News front page. Post #5 is circled in bright pink — the title is "WebAssembly from the Ground Up", and it has 105 point and 19 comments.

WebAssembly from the Ground Up @wasmgroundup.com · 9mo ago

Wasm Maze by Kenny Fully → kennyfully881230.github.io/wasm_fun/was... "I ended up learning a lot about how to use linear memory to render one time to the canvas on every frame. Not only that, I learn how to do collisions, sprite clipping etc all in Wasm." Source code: github.com/kennyfully88...

WebAssembly from the Ground Up @wasmgroundup.com · 9mo ago

Per your request, please find enclosed…a new blog post! A WebAssembly interpreter (Part 1) → wasmgroundup.com/blog/wasm-vm... We build up a simple interpreter from scratch, in JavaScript, for a small subset of Wasm instructions (arithmetic and comparison).

A WebAssembly interpreter (Part 1)

Implementing a Wasm Interpreter to explore its design and semantics

wasmgroundup.com

WebAssembly from the Ground Up @wasmgroundup.com · 9mo ago

This is something we thought about in our book…that's why the first (proper) chapter ends by producing a minimal (but valid) Wasm module.

Patrick Dubroy@dubroy.com · 9mo ago

"Some compiler-development experiences are long slogs where you write code for months without ever having a thing that produces an actual executable that you can run." "My First Fifteen Compilers" by Lindsey Kuper blog.sigplan.org/2019/07/09/m...

Backend-first compiler development
Although the nanopass approach doesn’t specifically mandate implementing a compiler in a back-to-front manner — starting with code generation and working upward from there — the back-to-front approach was a hallmark of P523 in the year I took it. For me, a first-year grad student who had never worked on compilers before, this way of organizing the work was incredibly motivating: at the end of week one of the course (and at the end of week two, and so on for each week), I had written a compiler! Admittedly, what I had at the end of week one was a compiler for an input language that wasn’t very different from the output language. But it converted code in its input language to honest-to-goodness x86 assembly code on which I could then run an off-the-shelf assembler and produce a working executable.

Some compiler-development experiences are long slogs where you write code for months without ever having a thing that produces an actual executable that you can run. But with the back-to-front nanopass approach, we got that hit of gratification every week! Furthermore, thinking of each component of the compiler as itself being a compiler was useful because it encouraged us to structure our code in a readable, modular, and maintainable way, in much the same way that parser combinator libraries support the development of readable, modular, maintainable parsers.

Chrome for Developers @developer.chrome.com · 9mo ago

Ever thought about writing #WebAssembly by hand? 🤔 Authors Patrick @dubroy.com and @marianoguerra.org think it's crucial for learning. They join #WasmAssembly host Thomas Steiner to discuss their ebook, "WebAssembly from the Ground Up" → goo.gle/3Ln67Pp

WebAssembly from the Ground Up with Patrick Dubroy and Mariano Guerra

@titzerbl.bsky.social · 9mo ago

Today I presented to the Wasm CG a proposal for fine-grained dynamic code generation as a core WebAssembly feature. The proposal is now at phase 1! github.com/WebAssembly/... Also immortalized in song: suno.com/song/19e0679...

GitHub - WebAssembly/jit-interface: WebAssembly specification, reference interpreter, and test suite for the jit-interfaces proposal.

WebAssembly specification, reference interpreter, and test suite for the jit-interfaces proposal. - WebAssembly/jit-interface

github.com

Patrick Dubroy @dubroy.com · 9mo ago

Working on a diagram for an upcoming @wasmgroundup.com blog post.

Diagram showing WebAssembly bytecode execution with a horizontal memory strip containing hexadecimal values (41 03 41 02 6c 41 04 6a 0a 46). Above the strip are labels 'instructions' and 'pc' (program counter) with arrows pointing to specific bytes. The program counter highlights byte '6c'. Below the strip, purple arrows point to different instruction bytes, labeled with their corresponding WebAssembly operations: 'i32.const' (pointing to 41 03 and 41 02), 'i32.mul' (pointing to 6c), 'i32.add' (pointing to 6a), and 'i32.eq' (pointing to 46). On the right side is a stack representation showing values '2' and '3' in rectangular boxes.

WebAssembly from the Ground Up @wasmgroundup.com · 9mo ago

This week the W3C WebAssembly Community Group is holding an in-person meeting in Munich. We (@dubroy.com and @marianoguerra.org) are planning to be there. Patrick tomorrow, and both of us on Thursday for the Research Day. If you see us, come say hi!

Thomas Steiner @tomayac.com · 10mo ago

📢 New #WasmAssembly podcast 🎙️ episode: #WebAssembly from the Ground Up with @dubroy.com and @marianoguerra.org. Learn how they're teaching #Wasm by building a compiler in JavaScript and why writing Wasm by hand is crucial! 🍿 www.youtube.com/watch?v=dRdD... 🎧 wasmassembly.libsyn.com/webassembly-...

WebAssembly from the Ground Up with Patrick Dubroy and Mariano Guerra

YouTube video by Chrome for Developers

youtube.com

WebAssembly from the Ground Up @wasmgroundup.com · 10mo ago

Interesting paper presented at MPLR yesterday — "A Snapshot of the Performance of Wasm Backends for Managed Languages" → users.cs.northwestern.edu/~robby/pubs/... Benchmarks Wasm implementations of Dart, Haskell, Scheme, OCaml, Ruby against the native impls.

Abstract
WebAssembly (Wasm) has been extended to support features
such as garbage collection, references, exceptions, and tail
calls that facilitate compilation of managed languages. In
this paper, we capture a snapshot of the performance of languages that use these new capabilities from two perspectives.
First, we present a language-by-language performance comparison of six managed language implementations on Wasm
to the performance to their native implementations. Second, we focus on the implementation of the Bigloo Scheme
compiler and explore the impact of different choices for compiling specific aspects of the language. Our findings suggest
that Wasm has become a promising compilation target for
most managed languages, but that its performance still falls
short of that achieved by native code. Our results also show
that the quality of the Wasm implementations vary, with the
best ones being, on average, about 1.4× slower than the native backend and the worst ones seeing average slowdowns
of more than 8× with some tests even failing to execute
correctly.

Disclaimer
☞ This study contains no novelty regarding compilation
or, more generally, implementation techniques. Its purpose is to provide information to language communities
about the state of existing Wasm backends. Specifically,
it offers information that sets some basic performance
expectations and it offers some experience with the performance of several specific compilation technique choices
in the context of the Bigloo Scheme compiler.