Web Assembly

Web assembly is a low level assembly like language with a compact binary format that provides high speed performance and supports various languages like C,C++,Rust to be executed in browsers.The language is not handwritten but is designed to be an effective compilation target for different languages such that it can be used to create web ready modules which can be run in modern browsers with high speed performance.

Getting Started with Web Assembly:

We can take c/c++ code and translate it into Wasm(Web Assembly) using a compiler tool like Emscripten and then load the generated wasm module into Javascript app where it can be executed by browser. We can download emsdk(emscripten sdk) from github and use it. The emscripten sdk can generate codes in javascript format to load and initialize the WebAssembly binary code or in html format alongside wasm format which can be run in browser.

 

How is it faster than JS Applications alone?

Let us take a look at process of JavaScript Engine with and without using web assembly:

The original Javascript follows following process:

1. Parsing a code so that the original source code can be interpreted.
2. Compiling the given code and optimizing them.
3. Re-optimizing the code when its initial assumptions have failed.
4. Run the code.
5. Clean up the memory.

The JavaScript with web assembly follows following process:

1. Fetch web assembly code from server.
2. The parsing process in JS can be omitted since the code is already converted to bytecode.Instead the bytecode is decoded and validated to ensure absence of errors.
3. The compilation process is one time process in which re-optimization does not occur since the compilation is already done and compiler should not worry about data types and different versions of the same code based on those different types.
4. The code is then executed.
5. Garbage Collection is not done because memory must be managed manually.

 

Languages Supporting Web Assembly so far:

1. Production Ready:
   • C/C++ and RUST:- They have production ready support via Emscripten.
2. Experimental:
   • C# has experimental support via Blazor.
   • TypeScript via AssemblyScript.
   • Java via TeamVM.
   • Kotlin via TeamVM.
   • Lua via Luwa.
   • Haskell via HaskelWasm
   • Forth via WASM Forth
   • Elixir,Kou, Faust, Forest, Ocaml, Plorth, etc.

 

Browser Support:

Web assembly is supported by following browsers:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

 

Advantages of Web Assembly:

1. Efficiency: Bytecode is efficient than the original Javascript code sent over the network and interpreted.
2. Code Re-usability: The existing C/C++ code can be directly compiled into web assembly module and load it in the web application to be used in browser rather than writing the whole application again.
3. Standardization: Web assembly is based on open and accepted standards, all browsers have to comply with them removing cross browser compatibility issues.
4. Language Independent: Since we can build web paps with different languages we can use the best library with good algorithms that are already existing in any language supporting web assembly.

 

Future Enhancements:

1. Adding multi-threading to take advantage of shared memory and simplified porting of existing code.
2. Adding support for SIMD vectors i.e. Support for vector instructions in image, video processing.
3. Garbage Collection support  to efficiently allocate and manipulate managed objects from wasm codes.

 

Example Code:

Example 1:

Here is a simple C code for Fibonacci series that we are going to compile with web assembly and run on browser.

Let us save it as fib.c

Then we compile the given C code to wasm file using emscripten.The compilation code is:

It produces two files fib.wasm and fib.js. fib.wasm is a web assembly file containing bytecode commands and fib.js contains supporting header modules for .wasm file.

We can then load it from a html file as :

We can then run the html code by following command:

Example 2:

A simple C++ code for generating a bouncing ball.

We can see that we can include javascript code inside a C++ file to generate web assembly code.

Then it is compiled to wasm as:

The corresponding html code is:

Example 3:

A simple C code to print Hello World.

We then compile it to WASM code as:

It generates hello.wasm,hello.js and hello.html. We can then double click on hello.html to see results.

Another interesting example comparing performance of javascript code, asm.js and webassembly is shown by websight. We can download the code from github from following link:

https://github.com/Web-Sight/WebSight

We can run the code as :

Then we can see the video demo showing the results in fps (frame per seconds). The results shows that the web-cam video produces about 45 fps with the one with web assembly whereas the one with only JavaScript produces around 1.8 fps.

There are many implementations done using web assembly so far.Some of them are:

• https://blog.qt.io/blog/2018/05/22/qt-for-webassembly-examples/
• https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html
• https://www.airconsole.com/play/worldy-cu
• https://www.blend4web.com/apps/code_snippets/code_snippets.html

References:

• https://webassembly.org/
• https://mbebenita.github.io/WasmExplorer/
• https://github.com/kripken/emscripten
• https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html
• https://github.com/mbasso/awesome-wasm