I'm Stoked About WASM and You Should Be Too

By Justin Jordan — March 23, 2019 — 5 min read

WebAssembly (WASM) is one of the most exciting advancements in web technology since perhaps HTML5. It's about to make the internet faster and could completely blur the line between web and native. If it scares you, it shouldn't. WebAssembly is amazing!

When I talk about WASM, I get mixed responses. Sometimes I get, “Wow, that sounds revolutionary,” but mostly I just get blank stares and a shrug like they don’t care. Perhaps they’re thinking, “Oh great. Another thing to learn or I’ll get left behind!” That’s how it seems anyway. But I get it—there’s already a ton of technologies that have come out just in the past couple years, so it’s easy to understand why some might just pass WASM off as just one more thing to learn. But it not JUST another thing to learn. It’s a binary format and it’s about to change the web forever!

Dude… What’s WASM?

WASM is short for WebAssembly—a new binary format for the web. It’s merely a file format, or compiler target, which can execute in all major browsers, right now! Currently, languages such as C++ and Rust can be compiled to WASM for production and shipped with your web app to be executed via JavaScript. Because it’s basically machine code, it’s very lightweight and it’s FAST!

WASM represented using S-expressions

Who’s it For?

If you’re a web developer like me, you most likely don’t write lower-level code on a day to day basis. Web devs live in the world of JavaScript, HTML, and CSS, so it’s not immediately clear how WASM might benefit us. Like, what are we gonna do with it exactly?

First let me talk about the cool stuff. Some people are going to make games with it! The top two game engines, Unreal and Unity, can already export to web using WebAssembly. So if you’ve always wanted to make super graphic intense web games, then the future is now! Personally, I’ve dabbled in game development, but I’m not really a game developer; however, I’m eager to see the disruptive advancements that are coming our way.

As for us web devs, we might not even use WASM directly, but, at the very least, we’ll use it passively through libraries and frameworks like React and, most likely, webpack. There’s no official word that these frameworks will utilize WASM that I know of, but there’s been some speculation that the React team might soon use it to speed up React’s virtual DOM, which is a huge resource hog, so it could use as much optimization as it can get.

Getting Started

Good news! All the major browser vendors have already rolled out WebAssembly support as of late 2017, so you can ship WASM apps today, no problem! The languages that are production ready for WebAssembly are C++ and Rust, which can be compiled using a toolchain call Emscripten. It’s been around for a while now as it was previously developed for ASM.js, the predecessor to WASM, so at this point it’s fairly well documented and ready to go. And if you’re concerned about supporting older browsers, you can ship an ASM.js fallback, which is just some super gnarly JavaScript—open in your text editor at your own risk! The ASM.js file sizes can be huge, but they’re optimized to run blazing fast.

TypeScript to the Rescue

If you’re thinking, “But I don’t wanna write websites with C++,” then don’t worry. I’m right there with you! Lucky for us, there’s a project called AssemblyScript that I only just learned about while writing this blog, conveniently enough. AssemblyScript simply extends TypeScript with WASM specific types like i32 and i64 (integers) and will automatically codesplit into JS and WASM files, so you don’t have to get into the nitty gritty of things. Magnificent!

A team at Google has already used AssemblyScript to build a web-based image compression tool called Squoosh. With it, you can compress images in real-time completely in browser. For more information on it, the developers give a good talk about it and also there’s a YouTube video where they explain why WASM was crucial for optimization of the app. They say it kind of had to do with a certain browser that doesn’t run on Mac. 😉

Squoosh screenshot

Pit Falls

A potential downside is that WASM is still very cutting edge. It’s basically the wild west, so learning resources are sparse. It’s getting there, but you still might have to do some experimentation and invent your own standards and practices. Good news is that if you strike while the iron’s hot, you might make a name for yourself as a WASM pioneer.

The biggest downside is there’s no access to the DOM, so you can’t write a pure WebAssembly app. This is being worked on, but at the moment, WASM very much feels like a blackbox that you throw numbers into. However, WebAssembly wasn’t designed to be a replacement for JS anyway, so maybe it’s not really a deal breaker. But hopefully soon JavaScript’s DOM monopoly will be a thing of the past, allowing developers to choose from many different languages for our projects. Call me a dreamer!

Conclusion

Whether you think you need it or not, you have to admit, WASM is pretty awesome! Undoubtedly, it’s something to look forward to and get excited about. The web may change a little, but it’s nothing to fear. WebAssembly may finally bridge the gap between web and native, which is the part that gets me the most giddy. But all in all, things are going to stay mostly the same; however, now we have a shiny new tool for when we need some extra power.