Using WebAssembly

Posted on - Last Modified on

In 2013, the appearance of asm.js made it possible to translate statically typed code (C/C++) into a subset of JavaScript instructions that allowed early optimization of the code using some optimization techniques that were ahead of its time. Here is a basic example of C code that adds two integers and returns their sum:

int sum(int a, int b)
{
	return a + b;
}

After running the emscripten compilation on this code, you'd get the output as JavaScript code:

function sum(a, b) {
	a = a | 0;
	b = b | 0;
	return (a + b) | 0;
}

It is a normal JavaScript function with two parameters (a and b), but the interesting part appears in the first line of the function. The a = a | 0 notation (bitwise OR operation) will enforce the JavaScript engine to convert the value of the a variable to an integer. In the case of integers, the adding operation is faster than for floating point numbers that a would be by default in JavaScript. This optimization technique has its limits and does not offer a general solution for JavaScript code performance improvement. Code for asm.js is not usually written by hand—it is always generated by some transcompiler, like emscripten or LLVM. If you are interested in learning how to compile C/C++ code to asm.js, check out this article or take a look at the Emscripten Tutorial and Mozilla Hacks pages.

Google, Mozilla, and Microsoft started creating a new binary format for the Web called WebAssembly (short notation is wasm), which is meant to solve the issue of JavaScript performance – not as asm.js does, but by defining a new binary format that can be directly loaded and executed by the JavaScript engines inside (and outside) of the browsers. Doing this saves time spent on JIT (just in time) compilation from JavaScript to bytecode, and from bytecode to machine code before execution. The new file format in the early stages is meant to be used for holding performance critical code compiled from other languages than JavaScript.  

Some of the use cases of this new standard include improving the performance for existing Web applications (on mobile devices, this reduces the cost of computing power and extends battery life), video and music playback, image processing, video games, security and cryptography, video editing, and many more.

The new standard is not yet finished but shows a lot of improvements in performance compared to asm.js. Two proof of concept applications, AngryBots and PlatformerGame, are both games that need high performance and high computing power, and feature a lot of textures and lights/shadows calculation.

At the moment, WebAssembly focuses mainly on supporting code written in C/C++, but you can start building WebAssembly using the WebAssembly Polyfill on GitHub. There is an initiative for WebAssembly to have a text view plus the possibility to view the WebAssembly's source code in the browser. Luke Wagner's blog post states that “WebAssembly is the next step of asm.js,” and they are designing the new standard to be backwards-compatible with asm.js code and JavaScript features. Brendan Eich, the creator of JavaScript, also wrote a blog post about WebAssembly with some useful videos and links about the evolution of JavaScript, how asm.js appeared, and how WebAssembly will be next big step for JavaScript.

The standard's design and basic concepts of the new WebAssembly are available on GitHub. Everybody is welcome to contribute to it.  

Posted 2 July, 2015

Greg Bogdan

Software Engineer, Blogger, Tech Enthusiast

I am a Software Engineer with over 7 years of experience in different domains(ERP, Financial Products and Alerting Systems). My main expertise is .NET, Java, Python and JavaScript. I like technical writing and have good experience in creating tutorials and how to technical articles. I am passionate about technology and I love what I do and I always intend to 100% fulfill the project which I am ...

Next Article

Things to Keep in Mind When Designing a Logo