Write and Run WebAssembly in your browser with WasmFiddle!

A few weeks ago I wrote about how WebAssembly will fundamentally change the web, and might even kill off the app store.

Today I’m going to do a quick primer about what WebAssembly is, and how you can write it directly in your web browser JSFiddle style.

Why WebAssembly Matters

First, a short primer on what WebAssembly is and why it needs to be on every web developer’s radar.

WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.

You generally won’t write WebAssembly directly, but you will compile programs to wasm. If you’ve ever worked in any compiled language like C or C++, you know that you don’t sit there and write assembly code — you write in a higher level language that compiles to assembly.

When paired with WebGL, some amazing things are already being built in wasm. If you’re on desktop Chrome or Firefox (or even Chrome for Android) check out Funky Karts now!

wasm wawesome!

The developer of Funky Karts was even kind enough to document the process. It’s a really interesting read, but formatted a bit oddly — I recommend starting from the bottom post and working your way up.

Wasm in Devtools

This is what wasm looks like in Chrome Developer tools:

(btw, I’ve created devtools course if you’re interested)

This is from the Funky Karts game itself. Unfortunately there are no source maps back to C++ yet, so this is a bit of a dead end for learning.

Write wasm directly in your web browser

Compilers and toolchains and emscripten, oh my! When just starting out, all these things can be intimidating. But what if there was a way to compile to wasm directly in your web browser?

If you remember a little C++ you can get going in 30 seconds. First, navigate to WasmFiddle (!!!).

the wasmfiddle interface

Then click “Build” to compile and “Run” to run.

Here’s what the bottom panels look like, complete with our “42” output:

the true meaning of life

If you want to get fancy, you can click the pulldown that says “Text Format” and change views.

Now let’s try something more complex:

Replace the C++ code in the lefthand panel with this factorial program:

int factorial(int n){if (n == 0)return 1;elsereturn n * factorial(n-1);}

And change the log statement in the JS panel to this:

log(instance.exports.factorial(6))

Build and run!

YES!

Here’s my finished factorial function if you don’t feel like typing teh codez: https://wasdk.github.io/WasmFiddle/?xk3e1

The WebAssembly Revolution Begins

This Wasm Fiddle tool is awesome! Unfortunately there’s not a nice directory of fiddles that other people have made, but I’m going to reach out to the author of the tool, Michael Bebenita to see what other people have put up.

If you make something neat, PLEASE PLEASE PLEASE tweet to me or respond to this article. I’d love to see it.

Pssst… I’m building something insanely cool with WebAssembly & WebGL. Wanna be the first to know about it? Join my list!

Course

Want to compile to WebAssembly the easiest way possible? You can use the Unity game engine! If you’re new to developing games for the browser, check out this course that I just released! There’s a small section or two on WebAssembly :-).

Edit!

My buddy, Jonathan Potter put together this demo demonstrating how to do fractals in WasmFiddle https://wasdk.github.io/WasmFiddle/?ttxwx.

Please 💚 and follow if you learned something new today! It gives me a ton of motivation to keep writing articles like this.