A few weeks ago I wrote about how WebAssembly will fundamentally change the web, and might even [kill off the app store](https://hackernoon.com/webassembly-the-death-of-the-app-store-c9bc3f9557c8).

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](http://caniuse.com/#feat=wasm)) check out [Funky Karts](https://www.funkykarts.rocks/demo.html) now!

[![](https://hackernoon.com/hn-images/1*1sc7bx-4FWLM0Pc9Q-vyYg.png)](https://www.funkykarts.rocks/demo.html)

wasm wawesome!

The developer of Funky Karts was even kind enough to [document the process](http://www.rossis.red/wasm.html). It’s a really interesting read, but formatted a bit oddly — I recommend starting from the [bottom post](http://www.rossis.red/wasm.html#the_plan) and working your way up.

#### Wasm in Devtools

This is what wasm looks like in Chrome Developer tools:

![](https://hackernoon.com/hn-images/1*-IEiplXGgWel-4x6cQxHXw.png)

(btw, I’ve created [devtools course](https://www.udemy.com/master-google-chrome-developer-tools/?couponCode=INSIDEJOB15) if you’re interested)

This is from the Funky Karts game itself. Unfortunately there are [no source maps](https://github.com/kripken/emscripten/wiki/WebAssembly#debugging-webassembly) 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](https://wasdk.github.io/WasmFiddle/) (!!!).

![](https://hackernoon.com/hn-images/1*ZntGPd6GfsKVtvV1hj9gDg.png)

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:

![](https://hackernoon.com/hn-images/1*fZhYy4lSaoT481Q6ajjEpA.png)

the true meaning of life

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

![](https://hackernoon.com/hn-images/1*XPstAhjiySjUF3ZGl6dtTw.png)

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;  
  else  
    return n \* factorial(n-1);  
}

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

log(instance.exports.factorial(6))

Build and run!

![](https://hackernoon.com/hn-images/1*x_WMQOmL7DhHfZ0IfNvEcw.png)

YES!

![](https://hackernoon.com/hn-images/1*ANNYxvY8Jox7INzQYKxlAw.png)

Here’s my finished factorial function if you don’t feel like typing teh codez: [https://wasdk.github.io/WasmFiddle/?xk3e1](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](https://medium.com/@mbebenita) to see what other people have put up.

If you make something neat, PLEASE PLEASE PLEASE [tweet](https://twitter.com/theroccob) 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](https://upscri.be/1c08e9/)!

![](https://upscri.be/media/form.jpg)

#### 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](https://www.udemy.com/webgl-with-unity-the-ultimate-guide-to-games-in-the-browser/?couponCode=MEDIUM11)! There’s a small section or two on WebAssembly :-).

#### Edit!

My buddy, [Jonathan Potter](https://medium.com/@jonathanpotter_80804) put together this demo demonstrating how to do fractals in WasmFiddle [https://wasdk.github.io/WasmFiddle/?ttxwx](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._

Write and Run WebAssembly in your browser with WasmFiddle!

Too Long; Didn't Read

People Mentioned

Companies Mentioned

@theroccob

RELATED STORIES