Introduction to Web Assembly

The world is changing at a fast pace and so is the technology. The developers and researchers are striving to get fast responses from their products. Coming to the arena of web development, the changes have been coming, but there hasn’t been a major breakthrough in the performance of the web in terms of speed.

Why Web Assembly?

JavaScript has been there on the web but it wasn’t really designed to be fast to start up a very large application. It has its own limitations in terms speed it offers for heavy applications on the web.

Also, when we wanted to run code on our webpage, we had to use javascript. Whether we want to change the DOM or run a calculation, the only thing we could use was javascript.

So, now let’s move forward and know what is Web Assembly and how it solves the above problems.

What is Web Assembly?

Quoting from the official website ,

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

Let’s understand this in simple words.

WebAssembly aka Wasm is an efficient low-level bytecode for the web. It is an improvement to JavaScript (it’s not a replacement for Javascript) and works alongside it. It’s a new capability which will change the way we think about webapps.

You can consider JavaScript as the boss and WebAssembly does the job that it has been told!

It delivers a secure, portable and fast run-time to allow programming languages such as C++ to be used in web applications.

This new standard will enable web applications to run amazing video games, support for computer-aided designs, image/video editing, and even run heavy computations. Using this standard, various javascript frameworks can significantly reduce load times for heavy websites and provide near-native performance.

Imagine that you are running a heavy game or a cool video/image editor all within your browser smoothly.

Want to know more? Go ahead and watch what the developers want to say

Who are developing this?

It is developed at the World Wide Web Consortium (W3C) with engineers from Mozilla, Microsoft, Google, and Apple.

WebAssembly Support

All four major browsers namely Google Chrome, Mozilla Firefox, Safari and Edge are capable of running code compiled to the wasm format on the web.

Let’s get started!

Tutorial courtesy: Google I/O 17

Workflow

1. Basic Tooling Setup

The compiler toolchain that currently has the most support for WebAssembly is called LLVM. But its a bit tricky to work, so there’s another tool called Emscripten which is a bit easier to use at the moment. It uses LLVM under the hood.

Visit here to get your Emscripten compiler setup ready. Once you are done with compiling the Toolchain, you can try the hello world program as well.

2. Adding code to our C++ file

You can add the below code to your C++ file. Basically, we are exporting WASM function to JavaScript.

#include <emscripten/bind.h>
emscripten::val my_function(int w,int h){
    return emscripten::val(emscripten::typed_memory_view(bufferSize,buffer));
}
EMSCRIPTEN_BINDINGS(hello){
  emscripten::function("my_function",&my_function);
}

3. Compiling a C/C++ file

Command line to build a C file

emcc -o hello.js -s WASM=1 hello_world.c

Command line to build a C++ file

em++ -o hello.js --bind --std=c++11 -s WASM=1 hello.cpp

The output of above lines would be hello.js and hello.wasm . hello.js contains all the glue code to call the module.

Here -s WASM=1 tells Emscripten to generate WebAssembly modules.

4. Adding script in our HTML file

Now we can add the script below in our HTML file, this script makes a call into WASM from JS.

<script src="hello.js"></script>
<script>
  const data = Module.my_function(width,height);
</script>

That’s it we have finally used our C++ code in our HTML file using the WebAssembly module.

If you feel you can’t handle the above steps, I have found an amazing online tool that can translate your C++ code to WebAssembly. Go ahead and explore here .

WebAssembly in action

As of now, you might have imagined what WebAssembly can do. Now let me show you some great examples that can motivate you further.

1. Tanks Demo

The developers at wasm have developed a demo game using unity which has been exported to the web using web assembly. Go ahead, try it.

Tanks! Demo - WebAssembly

2. Construct 3

More motivation for the gamers, you can even build your game online using this amazing game editor. The technology that made this editor possible? Guessed it right, our cool WebAssembly.

Construct 3 r94.2 ★★★★★

3. Online image compressing tool

This is an awesome project built by Alex Danilo which allows you to compress your images online. You can view the image quality and its size in real-time from your browser.

4. WebAssembly Video Editor

If image compression didn’t thrill you, treat yourself to this amazing online video editing tool.

WASM Example

5. WebSight

WebSight is a real-time performance demo of face detection algorithm that uses OpenCV. It demonstrates a comparison of performance between JavaScript, asm.js, and WebAssembly. Performance is measured by the length of time it takes to detect face(s) or eyes in the image or video.

WebSight, A WebAssembly Application

Future Prospects

The WebAssembly can be considered as Javascript’s nitro booster. It will surely be adopted in all major webapps to boost their performance in the coming future.

I will leave you with some useful resources that can be your roadmap towards your contribution to WebAssembly.

1. https://www.w3.org/community/webassembly/
2. https://github.com/webassembly
3. https://developer.mozilla.org/en-US/docs/WebAssembly
4. https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

Till then, happy learning!