WebAssembly, a Web without JavaScript
Tags: webassembly, webdev
Published: 2020-02-25 10:02:18

According to [the official site](https://webassembly.org/):

> 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.

In a nutshell, it's a technology that allows code written in other languages; mainly C/C++ and Rust; to be executed by a VM embedded in the browser as a low level byte code.

## History

The idea behind Wasm is not new, some precursors existed like Google Native Client and asm.js, we perhaps remember the Java Applets. Wasm started as a project by Mozilla and was announced in June 2015. The first PoC was in March 2016 and consisted on a Unity game running on FireFox.  By 2017, the majority of the browsers including Chrome, Safari and Edge implemented the Wasm VM. In February 2018, Wasm was adopted as W3C standard as the Javascript core specification and Api have been published by a group of engineers from Mozilla, Microsoft, Google and Apple.

## Design and Main Ideas

The de facto language for the Web is JavaScript, a high level interpreted programming language executed by various engines like V8 in Chrome, SpiderMonkey in FireFox and Chakra in IE. Besides that, JavaScript is weakly typed and dynamic. The previous facts imply that JavaScript is not an ideal language for performance for the following reasons:

1. The process of interpretation leads to the time consuming process of parsing and processing the code before executing it.
2. Byte code generation for the engine is usually optimized by a technique called JIT (Just in Time) compilation where parts of code are analyzed (profiled precisely) to spot frequently used parts to be precompiled as a "compilation cache". Although the apparent performance gains, profiling can add overhead to the code execution life cycle.
3. Being weakly typed and dynamic leads to an additional effort of inferring variable types and scopes which add more processing time.
4. Finally, GC and mono-threading will make things all but faster.

![V8 engine overview](https://dev-to-uploads.s3.amazonaws.com/i/x1bxz1lbjlqa9lh8r9l1.png)

Being not well suited for performance is not a major issue for the JavaScript programming language as the majority of Web related coding is frequently limited to DOM manipulation, regular expression parsing or GUI component instantiation and lifecycle management. But when it comes to some more intensive tasks like running a 3D game or a Virtual Reality scene, media streaming or even high performance large DOM manipulation; certainly JavaScript will not be the first choice. Those performance demanding tasks are already coded in the low level language C/C++ and are well proven, so the idea was to be able to integrate the already coded high performance C/C++ libraries (like OpenGL for 3D rendering) on the Web page. In other words, porting a high-performance code to the browser.
WebAssembly made this possible by adopting a compiled byte code from an already existing C/C++ or Rust code. This already compiled byte code will be executed by a stack based virtual machine supported by the browser. Wasm Specification consists of those two main parts:

1. A byte code specification for the stack base VM to implement.
2. A JavaScript API to allow any Wasm code to call or access its surrounding environment (DOM, passing arguments).

![Wasm vs JavaScript](https://dev-to-uploads.s3.amazonaws.com/i/xetji617g9ol2ayxrnkm.jpg)

## Tools and Usage

WebAssembly tooling is based on EmScripten, the main goal of those tools is to take a C/C++ source code and generate a Wasm module in addition to a JavaScript "glue" to make the module readable by  the browser.

![Wasm typical flow](https://dev-to-uploads.s3.amazonaws.com/i/4pqw0z197rmp2xypup5q.png)

A typical flow for C/C++ source code (factorial in this example) will involve the following:

- Generating a Wasm module by calling:
```shell
emcc factorial.c -s WASM=1 -o factorial.html
```

- Running the resulting Wasm module and JavaScript glue code:
```shell
emrun --no_browser --port 8080
```

## Future Road Map

Although accepted as W3C standard, the committee has planned the following features:

- Threading and concurrency, provide a p-thread like environment execution, shared memory and mutexes.
- Garbage collection, allocate and manipulate GC objects from Wasm code.
- Exception handling, full implementation of C++ style exception handling.
- Bulk memory operations, copying and clearing large chunks of memory with an efficient architecture independent way.

## Conclusion

WebAssembly is a technology meant to integrate high-performance portable C/C++ code (or even other languages like Rust) into the JavaScript Web context in order to extend its capabilities to run highly demanding features like 3D or image and video processing.

## References

For more details you can consult the following links:

- Official page: https://webassembly.org
- W3C entry: https://www.w3.org/community/webassembly