Compile C Code into WebAssembly
We use the C language instead of pure WAST to create a square root function using WASM Fiddle (https://wasdk.github.io/WasmFiddle//). We show how to run the WebAssembly in WASM Fiddle, then download and run it in the browser using a helper function to load the WebAssembly.
WASM Fiddle: https://wasdk.github.io/WasmFiddle/?t96rp
Demo Repo: https://github.com/guybedford/wasm-intro
[00:00] For this lesson, I'm using a project called WasmFiddle which allows me to write C in the box over here and compile it into WebAssembly in the browser, as well as running it to experiment with it.
[00:10] There's going to be many, many languages that compile into WebAssembly. This is one of the major benefits of WebAssembly, but if we want to play around with it and understand WebAssembly, C is one of the best levels to do this at, because it's a very low level abstraction on top of the raw assembly code.
[00:24] Let's create, for example, a get_square_root function. The return value of this function is going to be a floating point number. By default, float is a 32-bit type, and then we're going to call this function get_square_root. The input into this function is going to be a float number again.
[00:41] Then, we're just going to return the square root of a number. In C, the square root function is loaded from the math header, so I'm just going to include that header at the top. We can now build the code.
[00:55] At the bottom, our WebAssembly module comes up. We can see that it's exporting our get_square_root function, and we can see the function defined over here as well, where it's taking an input float 32, returning a float 32, and then taking the square root.
[01:12] Obviously, as you write more complicated C-code, it gets much more difficult to read this [indecipherable] , but there's a very, very direct translation between the two.
[01:20] If you want to play around with the outputs, this is a very simple, synchronous instantiation of WebAssembly that comes by default when you load up WasmFiddle. On this wasm instance or exports, we can access any of our functions in the C code.
[01:34] I'm going to run the get_square_root function over here. I can call it with any number and then use the run feature.
[01:43] To use this WebAssembly in our own projects, I'm going to click the "Download WASM" button. I'm then going to locate the program.wasm file in the local projects and open up the html. To load the wasm, I'm going to use a helper function called fetchAndInstantiateWasm. This will asynchronously load a WebAssembly file from a URL, execute it, and returned back the exports of that WebAssembly module.
[02:08] I can call this function directly, passing the URL of our program file, which is program.wasm, and this will return a promise, returning the exact exports of the wasm file. I can then assign our get_square_root function, directly from the wasm module exports available, as the name get_square_root. If you're on this in the browser, we can see get_square_root is now available.