How WebAssembly May Reinvent How We Write and Ship Code on the Web – InApps 2022

WebAssembly (WASM) is a new(ish) computer assembly language that can run in the browser. It is also wicked fast. Designed to work in tandem with JavaScript, WebAssembly’s compact binary format allows it to run with near-native performance. Even more powerfully, WebAssembly is also a compile target — meaning that it can allow other languages like C, C++, and Rust to run on the web.

Paul Milham is lead developer at WildWorks, where he builds games like Animal Jam using WebAssembly — which he describes as “kind of like a new superpower for JavaScript.”

Milham gave an overview talk called “What’s a WASM?” at the most recent Node.js Interactive conference, and his enthusiasm for the language was inspirational. InApps caught up with Milham recently to talk about his feeling that WebAssembly/WASM has the potential to “completely reinvent how we write and ship code on the web” — and ways to get started learning.

So, then, what’s a WASM?

First, a disclaimer: I’m not anyone important; I didn’t design WebAssembly or anything like that. I just think it’s awesome and could be a really big deal for how we code on the web. I actually wish I knew more about the history of WebAssembly — the best source for this is maybe Brendan Eich’s Twitter feed. It also seems to most directly draw its origins from asm.js. I’m sure other projects like Google’s PNaCl probably influenced its design as well. Like everything else related to the web, there’s a sense that these amazing things have somehow crawled from a primordial ooze.

I like the definition from webassembly.org, which says simply that “WebAssembly, or WASM, is a new, portable, size- and load-efficient format suitable for compilation to the web.”

Binary encoded assembly is a really good description of WebAssembly language. Don’t expect anything fancy like a for-loop — it’s a lot lower level than that. It’s an efficient and fast stack machine that is safe, open and debuggable. It’s web tech! It is not some separate thing; this upholds all the values of the web. And this is REAL. A lot of people don’t realize this but WebAssembly is in your browser now. It’s in Firefox, it’s in Chrome. It’s in Safari, in Edge. And it is in Node.js. Download the latest version of node, type webassembly in, hit enter, you’re going to see there is an object there.

What intrigued you personally about WebAssembly to the point where you decided to sit down and learn the language yourself?

So, as an engineer, I’m always studying new technology. If you want to stay relevant, you need to keep that mindset of always learning. WebAssembly, in particular, interested me because it promises speed but also predictable performance — those two features are very attractive to game developers.

The web is awesome, I love it, but Javascript isn’t an ideal language for coding games. Stable rendering performance is important for continuity and immersion in many kinds of games. If you open up your browser dev tools and turn on the profiler, you’ll see there’s a lot going on. JavaScript engines jump through a lot of hoops to deliver the amazing performance we see, but the complexity that comes with them often leads to unpredictable performance. WebAssembly addresses issues surrounding speed and performance predictability. It’s hard to understate how exciting the prospect of smooth performance is.

WebAssembly has a lot more to offer beyond this, too, but this is what personally excites me the most.

Do you have any current favorite examples of places where WASM is in use?

WebAssembly is still really new, but it’s supported in all major browsers at this point and we are seeing interesting use cases starting to crop up. Mozilla is using it with Rust to parse source maps, and several game engines like Unity and Unreal are using it as a compilation target. I think we’re soon going to start seeing it in use in lots of performance-critical areas.

There is the potential for it to be used for all kinds of interesting stuff. People are experimenting right now building virtual DOM with it. Another thing is, you can take these C++ libraries — and there is a lot of C++ code out there — you can take them, compile to WebAssembly, and efficiently run them on the web. Sometimes I see JavaScript modules that are essentially, “I don’t like C++ code, I’m just going to rewrite it in JavaScript” — I hope we will see some of those move to WA. You’re going to see speed almost as good, and it’s fully portable.

It’s important to understand that we’re just at the beginning of this. As developers leverage WebAssembly in frameworks and build tools, it’s likely you’ll soon be using it without even knowing. It’s just speculation at this point, but WebAssembly has the potential to completely upend how we write and ship code on the web. All of the major browser vendors are backing it and there’s a lot of excitement around it among famous JavaScripters.

The big question is, how does this make my life as a developer better, or easier?

WebAssembly code is fast to execute, quick to download and has a few tricks up its sleeve like being able to be compiled while it downloads. In short, WebAssembly makes the web a more performant platform. Ultimately, what’s good for the web is going to be good for web developers.

It’s important to remember that WebAssembly is a compilation target. If you hand roll WebAssembly code, don’t expect fancy things like strings or for loops. Write in a language that compiles to WebAssembly like C or Rust. WebAssembly modules can be built from many different languages. There’s lots of cool stuff out there that isn’t written in JavaScript. It’d be cool if you could just load it up like any other module and access it from JavaScript though, right?

So if one the most exciting parts of WASM is allowing just about any language to target the browser, or even node.js, what are some potential ways this power could be harnessed going forward?

One of the coolest things about WebAssembly is that it is a compilation target and I think we’ll eventually see pretty much everything compile to it. Even though it’s missing features like garbage collection, we’re already seeing lots of languages advertising experimental support for it.

Being able to choose your language is a big win. For example, I love Javascript, but not everyone does. There are myriad reasons for not wanting to use JavaScript or even being unable to use it for your current project. WebAssembly can really help make that a non-issue.

What is the best way for someone interested in WA to start learning/using?

Start with [Matteo Basso’s repository of WASM resources]. This repository is pure gold. It’s just a huge list of WebAssembly resources. To get hands-on experience, I’d recommend just playing around with it.

Then, WasmFiddle is really cool to experiment with without having to set up a toolchain. You just type c code in a browser and it’ll handle the compilation to WebAssembly for you.

If you want to hand code then Wabt (pronounced wabbit) is a great resource. That’s what I used to write my first WebAssembly module.

Be forewarned though, it’s kind of stone age way to write code. Don’t forget that WebAssembly is a compilation target, so you can see if your preferred tooling has support for it and try it that way. My personal favorite right now is Rust [to] WebAssembly. Really cool stuff happening there. High-level tools like Unity are adding WebAssembly support. Using something like that you can reap the benefits of WebAssembly without understanding the underlying technology at all.

Feature image via Pixabay.