This course begins with some small steps for working with WebAssembly straight away using online tools wasm Explorer and wasm Fiddle to try out the examples in the browser. We start by calling a WebAssembly function from JS, then a JS function from WebAssembly, then go on to reading and writing WebAssembly memory from JS. To move beyond these online sandboxes, we show the exact steps for setting up and running a complete local WebAssembly build workflow using the experimental LLVM WebAssembly build target. We then take a demo WebGL application written in JS and show how we can optimize this with WebAssembly to get a real world example of a WebAssembly performance improvement, although it isn’t as obvious a process as we might have hoped.
Overview
Syllabus
- Create and Run a Native WebAssembly Function
- Compile C Code into WebAssembly
- Call a JavaScript Function from WebAssembly
- Read WebAssembly Memory from JavaScript
- Write to WebAssembly Memory from JavaScript
- Allocate Dynamic Memory in WebAssembly with Malloc
- Create and Import a WebAssembly Memory
- Compiling C/C++ to WebAssembly using LLVM, Binaryen and WABT
- Clone and Build LLVM with the Experimental WebAssembly Target
- Install Binaryen and the WebAssembly Binary Toolkit (WABT)
- Typed Arrays in High Performance JavaScript
- Step-by-Step JS to WebAssembly Conversion
- A First Comparison of the Performance between JS and WebAssembly
- Optimize Collision Detection in JS with a Grid
- Surpass JS Performance with Optimized Collision Detection in WASM using a Linked List Grid
Taught by
Guy Bedford
