Create WebAssembly Components with JavaScript and jco

Contributor name: Brian Sletten

Difficulty level: Intermediate

In this Shortcut, I am going to do something that might surprise you. I am going to show you how to build WebAssembly components with JavaScript. A lot of people have the idea that WebAssembly’s purpose is to eliminate JavaScript, but that could not be further from the truth.

JavaScript is not right for a lot of tasks that C, C++, and Rust are good for because it lacks the ability to optimize code until it is running. This does not make it a bad language. We just want to use the right tool for the job. If we have a problem to solve and JavaScript is a good fit, there is no reason at all that it cannot participate in the world of WebAssembly components.

There’s clearly a distinction here though. JavaScript is an interpreted language, not a compiled language, so we cannot rely directly on LLVM to generate that code as we do for, say, Rust. Fortunately, there is a tool from the Bytecode Alliance, called jco, that will assist us in creating components as well as a bunch of other cool stuff you will see over time.

In the GitHub repository for this Shortcut, you should enter the directory 24-Wasm-Components-JS. In it, you will find a readme.md file describing the installation instructions for the tools so you can follow along. Once again, you will also notice the same example-host directory that we have looked at previously; it contains an application that expects ...