WebAssembly, baby steps
I have been hearing about and even indirectly using the technology called WebAssembly for years now. But I never actually dug into the nitty gritty of its details and how it works, so I decided to correct that and see if I can do the most basic, simplest WebAssembly-based exercise: take a piece of code that’s not javascript and run it on the browser via WebAssembly.
WebAssembly at a very high level
It’s a methodology for packaging and running your code on the browser. Javascript is what browsers understand and execute. But with WebAssembly, you can write your code using language the browsers can’t execute directly, and when packaged into WebAssembly format, they can run the code. Very good introductory materials can be found on Mozilla’s Developer Network to get started: https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts
Avoiding abstractions
I am a dotnet developer, so I was tempted to start with Microsoft’s docs and create a Blazor app. You can build full web apps, but it comes with abstractions that hide the WebAssembly details from you, and I really want to feel the plumbing on this before going via the abstraction route.
Both C# and F# appear to have web frameworks at the ready. I will leave this approach for the next time when I will try to use Blazor framework in C# and Bolero framework in F#. But right now, I really want to get the most basic code executed on a simple HTML page.
Rust route
This looked very promising in my reading: https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm
A very simply rust app. But I quickly ran into blockers installing rust on my local machine, ie requiring to download library gigs to build rust apps. One day I might attempt that, but right now, I want something that’s super simple.
Getting wasm packaged library
The simplest approach turned out to be getting a C++ code compiled into wasm via WasmFiddle: https://wasdk.github.io/WasmFiddle/
Here, we have a very simple piece of code:
int main() { return 42; }
A function called “main” which returns 42. Yes! That’s what I need, the basics! You can build that in WasmFiddle and download the resulting wasm library, and store it as “program.wasm”.
Interacting with wasm library from javascript
Ok, so now I have code that is NOT javascript, that I will call in the browser. I will build a simple web app that contains index.html and program.wasm files. I borrowed a simple scaffold index.html from MDN again, here is what it looks like:
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>hello-wasm example</title>
</head>
<body>
<script type="text/javascript">
WebAssembly.instantiateStreaming(
fetch("program.wasm")
).then(
(results) => {
console.log("I am here!")
console.log(results)
var answer = results.instance.exports.main();
console.log(answer)
}
);
</script>
</body>
</html>What’s happening here is that we are using “WebAssembly” module that browsers make available to the developers. Using this module, we can load the wasm instructions and interact with them from javascript!
Using fetch(), I am grabbing the “program.wasm” bits and passing them to WebAssembly.instantiateStreaming() function. The result of the call is a compiled library that you can interact with.
In my sample code, I first output to console the confirmation that the wasm library was successfully loaded, log the library itself, and then note I am calling the “main” function and outputting the results.
And there in the console, you see the answer 42, as expected:
Simple but powerful
It’s such a silly example but so powerful. We took C++ code that was compiled to wasm, loaded it in the browser, and interacted with it! We are not supposed to be able to run C++ on the browser, but here we are!
Now I am ready for more abstractions and will look to try out Blazor and see how it uses wasm to help write full-fledged web apps.
