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 is a new portable, size- and load-time-efficient format suitable for . wasm compilation to the web You generally won’t write WebAssembly directly, but you will . 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. compile programs to wasm When paired with WebGL, . If you’re on desktop Chrome or Firefox (or even ) check out now! some amazing things are already being built in wasm Chrome for Android Funky Karts wasm wawesome! The developer of Funky Karts was even kind enough to . It’s a really interesting read, but formatted a bit oddly — I recommend starting from the and working your way up. document the process bottom post Wasm in Devtools This is what wasm looks like in Chrome Developer tools: (btw, I’ve created if you’re interested) devtools course This is from the Funky Karts game itself. Unfortunately there are back to C++ yet, so this is a bit of a dead end for learning. no source maps 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, to see what other people have put up. Michael Bebenita If you make something neat, PLEASE PLEASE PLEASE to me or respond to this article. I’d love to see it. tweet Pssst… I’m building . Wanna be the first to know about it? Join ! something insanely cool with WebAssembly & WebGL 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 ! There’s a small section or two on WebAssembly :-). course that I just released Edit! My buddy, put together this demo demonstrating how to do fractals in WasmFiddle . Jonathan Potter 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.
