WebAssembly is a really cool project that compiles other code languages so that they can run in the browser with JavaScript. It is significantly faster than many of its competitors. It lets more data-and-processing-heavy sites run more smoothly and quickly than otherwise possible. In this article, we’ll take a look at the technology from a top-down perspective–going over what it is and why you may want or need it.
What is WebAssembly?
In technical terms, WebAssembly is a binary encoding format that, as the original documentation says, “enables small files, fast decoding, and reduced memory usage.” It was designed to take code from the machine level. Just like languages such as C or C++ (or R, etc.). Then it compiles that into WebAssembly (or wasm), which then gets executed in the browser like JavaScript. Basically, it takes the executable code and runs it in the browser.
What this means for developers is that you can work more directly with the browser as though you’re interacting with the user’s computer on a machine level. You no longer have to go through the sometimes-convoluted steps that JavaScript requires. WASM lets you run full-fledged games and apps in the browser as though they were running on the machine itself. It’s almost like there’s an ideal virtual machine executing the commands. There are examples of Doom 3 being run solely in WebAssembly, as well as Figma.
Even if you don’t have a project quite so ambitious, WebAssembly deserves a look because it can speed up pretty much any JS-heavy site because it can keep necessary calculations away from JavaScript and into the hands of a tool that handles them better.
Why WebAssembly instead of JavaScript?
Well, first of all, don’t think about it as an either/or decision. It’s not. WebAssembly was designed to work alongside JS, not replace it. You can have some scripts run in JS, while others are executed via WASM. Additionally, it’s not a fringe technology. As of this writing, Chrome, Firefox, Safari, Android, and even Microsoft Edge (!) support WebAssembly.
That’s part of the reason looking into WebAssembly for WordPress and other web apps is so appealing. It has already become a coding standard that’s been adopted by every major player. Including Microsoft. And we all know how hesitant they can be about this kind of thing. So if there ever was a reason to start considering how you can use it, that’s it.
Also, we know that JavaScript can do some amazing things (look at the new WP Block Editor or Divi, both written in React.js). But it’s not great at everything. WebAssembly gives you the tools to render high-end visuals and animations to go along with the features and interaction you want out of JavaScript.
Until WebAssembly, if you wanted to do any of that and split your resources and computation, browser plug-ins and extensions would be required. Now, working alongside HTML5 and JavaScript, WASM makes it so that everything (roughly) that you could want to do can be compiled, executed, and rendered within the browser itself. Without a loss in performance or power.
Using WASM
To begin with, you’re going to need some sort of code in C, C++, R, etc. Then, you need to go download the Emscripten SDK, which lets you take that code and compile it to WASM.
Many of you are web developers, however, and may not have that level of polyglotitude. That’s okay. You can also write directly into the WebAssembly text style, or you can actually work your TypeScript into WASM.
With that done, Mozilla’s documentation puts it best:
The [Emscripten] generated HTML document loads the JavaScript glue file and writes stdout to a