asm.js - stealing C++ speed for javascript

Javascript is best known for being the only language that runs on any web browser. Say a heavy web app needs to be run faster. If we think to bring a totally new language for this, we need to make sure that all browsers support it. Obviously, not all browser developers would agree to support u!

So better option is to use javascript for this as it already has this support. But how? What about using only a selected javascript definitions that support faster performance. That sounds great and that is the exact approach taken by asm.js which was designed from a research project of Mozilla. The target of Mozilla is to bring asm.js to closer to the native speed.

Look at the below graph published by official asm.js page to understand that asm.js is so close to native speed.



               





Now let's get hands on experience on asm.js and develop a simple bomb moving game in asm.js. If you look at an asm.js code, you'd understand that asm.js is not meant to be written by hand. So what I'm going to do here, do the coding in C++ and then convert it to asm.js and run it on browsers. For this purposes, we have to use a source-to-source compiler that ultimately outputs asm.js. Emscripten is such compiler that compiles C and C++ into highly-optimizable JavaScript.

I found the below diagram which clearly explains the path that we would be following when creating our simple asm.js code.



                   

You can download emcripten SDK from here.

I am using linux and I followed these simple steps to install it.

# Fetch the latest registry of available tools.
./emsdk update

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

Simple C++ code is available at github

Now comes the interesting part. Let's compile it to asm.js...

Using emscripten, the strictly selected asm.js code can be taken from this command

./em++ -O1 -s ASM_JS=1 ~/Documents/projects/login/main.cpp 

You can run your generated code using node

a.out.js

If you look at the generated code, you can catch some beautiful tricks asm.js has used to improve performances.

For an eg:

Here asm.js is using bitwise operator to make the value that gets for variable hash to be a 32-bit integer



Then let's run our code on browser and see what happens.. You can embed your asm.js code and get an html file by,

./emcc -O1 -s ASM_JS=1 ~/Documents/projects/login/main.cpp -o output.html

Run the html in broswer and see how your C++ code has converted into something that actually runs on a browser in a face of javascript!
Also do not forget, that it has stole C++ static typing with AOT compilation for faster performances although you won't feel it here as this is a very small code piece. Even though asm.js would run on any browser, to experience the performance optimizations you should obviously be using a browser that supports asm.js.

I would end this by showing the output what we got from asm.js