What Is WebAssembly and Why Do You Need It?

WebAssembly (also known as WASM) was launched in 2017 as a binary instruction format for a stack-based virtual machine, developed to run in modern web browsers to provide “efficient execution and compact representation of code on modern processors including in a web browser.”

With WebAssembly you can develop high-performance web applications using open web platform technologies and various languages. WebAssembly makes it possible to create video, audio, graphics, 3D environments, multimedia games, cryptographic computations, and even portable language implementations. On top of that, WebAssembly offers serious performance gains over the standard tools. It is not designed to be used as a language itself, but rather as an effective compilation target for languages like C, C++, and Rust (all of which are very fast by design).

WebAssembly is an open standard, created with the following goals in mind:

• Be executed at near-native speeds.
• Be readable and easily debuggable.
• Be secure.
• Don’t break the web.

But Why WebAssembly?

Traditionally, the web is thought of with two components:

• A virtual machine
• A set of Web APIs

For the longest time, JavaScript has been the primary language that runs within the virtual machine, and it has worked quite well for that purpose. However, modern use-cases have illustrated one of the biggest problems with JavaScript — performance. When running resource-intensive apps, such as 3D games, VR and augmented reality, and video editing, we see JavaScript isn’t capable of delivering near-native performance. Couple that with the compute cost of downloading, parsing, and compiling larger JavaScript-based applications, and the issue becomes even more pronounced.

Although WebAssembly is a completely different language than JavaScript, it’s intended to not replace JavaScript, but to run alongside it. This way, developers can get a best-of-both-worlds for their applications. And, unlike JavaScript, WebAssembly is a low-level, assembly-like language with a compact binary format. This makes it possible for WebAssembly to deliver near-native performance.

And with more and more cloud native, mobile-first development going on, near-native performance has become crucial for some applications to function in a way that is viable to consumers.

The main benefits of using WebAssembly are:

• Near-native performance.
• Security.
• Easy debugging.
• Open-source.
• Hardware, language, and platform-independent.
• Lightweight.

There are eight objects that are key to WebAssembly. Those objects are:

• WebAssembly.Module – this object contains stateless WebAssembly code that has been pre-compiled by the browser.
• WebAssemly.Global – this object represents a global variable instance that is accessible from both JavaScript and importable/exportable across one or more instances of WebAssembly.Module.
• WebAssembly.Instance – this object is a stateful, executable instance of WebAssembly.Module.
• WebAssembly.Memory – this object is a resizable ArrayBuffer or SharedArrayBuffer that holds raw bytes of memory accessed by a WebAssembly.Instance.
• WebAssembly.Table – this object is a JavaScript wrapper that stores function references.
• WebAssembly.CompileError – this object indicates an error during decoding or validation.
• WebAssembly.LinkError – this object indicates an error during a module instantiation.
• WebAssembly.RuntimeError – this object is an error that is thrown when WebAssembly specifies a trap.

What Should You Know Before Diving into WebAssembly?

Before you embark on developing with WebAssembly, you should at least understand how JavaScript functions within a browser environment. You should also be comfortable working with the command-line interface. C and C++ knowledge would also be a major plus to know.

How Does WebAssembly Work?

In short, there are five steps to creating with WebAssembly:

1. Install the Emscripten core (an LLVM/Clang-based compiler that compiles C and C++ source into WebAssembly) and the required toolchain.
2. Create your code in C, C++, or Rust.
3. Compile your code into WebAssembly with Emscripten.
4. Convert the compiled WebAssembly code (via glue code) into an HTML page.
5. Serve your new app via HTTP.

WebAssembly Use Cases

There are so many use-cases for WebAssembly. Some of the possibilities include:

• Greenfield/multiplatform development.
• Migrating from desktop-only to desktop and browser-based applications.
• Modernizing older apps written in Silverlight.
• Backward compatibility with older platforms.
• Progressive web apps.
• Mobile apps.

You’ll also find plenty of websites that were built with WebAssembly. Sites like:

• Seed-RS
• Pest Parser
• Sandspiel
• Spherro
• Macro Railroad
• MTG On Curve
• Adex Explorer

You’ll also find any site that runs a Unity game uses WebAssembly. WebAssembly is also perfectly capable of building web-based apps for word processing, spreadsheets, presentations, slides, photo/video editing, and so much more. And although WebAssembly might not be the most widely-used technology at the moment, it’s gaining ground. As of 2020, the vast majority of WebAssembly was being used for crypto mining and gaming. However, given the nature of how web and mobile applications have evolved, I would expect exponentially more and more WebAssembly to be deployed in the near future.