WebAssembly : The bridge

WebAssembly aka WASM can be viewed as the bridge between JavaScript and machine code. WebAssembly is a low-level language with a compact binary format that runs with near-native performance. It is a compilation target for languages like Rust, AssemblyScript, C/C++ and much more!

Why is WASM useful?

WASM was designed to provide highly optimized computation and performance on the web. JavaScript is a great language that wasn’t made with performance in mind but when used with other languages and WebAssembly It could bring excellent performance and the best traits of both worlds to the table!.

WASM can re-utilize code written for a completely different platform, in a completely incompatible language, into a modern-day browser.

While WebAssembly is designed to run on the Web, it is also desirable for it to be able to execute well in other environments, including everything from shells to full-blown application environments e.g. on servers in datacenters, on IoT devices etc. For example — Desktop WebAssembly, Nebulet - operating system microkernel that runs only WebAssembly.

It was made to but not bounded to help browsers run intensive computational tasks such as Emulation, VR/AR, Image Recognition etc. more efficiently.

Google Earth Ported to Browsers with WebAssembly

Unity, Tensorflow.js, Google Earth are some of the major projects that utilized WASM. Here is the full list — https://madewithwebassembly.com/

The Working of WASM

Lets look at the working by taking an example of C/C++ source code:

Assembly typically refers to humanly readable languages that are similar to machine code. Machine code is what your processor understands, 0s and 1s. Every high-level programming language gets translated down to machine code in order to run on the processor.

Different kinds of processor architectures (x86, ARM etc.) need different machine codes and different kinds of assembly for each of them. When the browser downloads the WebAssembly code it can quickly turn it to any machine’s assembly.

1. Emscripten transforms or compiles the source code into a .wasm binary or a wasm module.
2. WebAssembly cannot currently directly access the DOM. Thus, to access any Web API, WebAssembly needs to call out to JavaScript, which then makes the Web API call. Emscripten therefore creates the HTML and JavaScript glue code needed to achieve this.

Glue code — functionality of libraries used in source code, logic for calling the JavaScript APIs to fetch, load and run the .wasm file.

HTML document — It displays the result of the code

The WebAssembly has a textual format that’s easy to read (.wat), but binary representation is what you actually deliver to the browser (.wasm).

WASM Features

• Efficient - As WASM is a low-level binary format with a small size, it loads faster in web browsers. when these browsers execute the WASM code, they fetch it quicker from the server. It supports Streaming Compilation which is the compilation to machine code while a file is being downloaded. To be more elaborate, JavaScript engine can compile a file to native code but the file needs to be downloaded first. Whereas, WebAssembly, on the other hand, can be compiling to machine code as the bytes comes in, resulting in significantly faster startup times.
• Safe - WebAssembly is sandboxed, Sandboxing means isolating or limiting the scope of what a script can do for security purposes. It can’t access the user’s operating system directly, it only has access to the same APIs JavaScript does. WebAssembly also provides additional safety for languages like C/C++.
• Low-Level Bytecode - High-level programming language code (like C++ or Rust) is compiled down to the machine-readable binary object code aka bytecode. Bytecode is an instruction set designed for efficient execution by a software, commonly this software is a virtual machine. This makes it very low-level, which enables performance optimizations, but still portable; you don’t have to worry about which CPU (x64, ARM, etc.) your users have.
• Part of the open web platform - WebAssembly is designed to maintain the version-less, feature-tested, and backwards-compatible nature of the web. WebAssembly modules will be able to call into and out of the JavaScript context and access browser functionality through the same Web APIs accessible from JavaScript.

How can I get started or make use of WebAssembly?

Here, are the some of the ways in which you could develop using WebAssembly:

• WebAssembly modules can be imported into a web (or Node.js) app, exposing WebAssembly functions for use via JavaScript.
• Using AssemblyScript which looks similar to TypeScript and compiles to WebAssembly binary.
• Transferring a C/C++ application using Emscripten (compiles C/C++ into wasm).

Here is a link to get started with the ‘Hello World’ of wasm code— https://wasmbyexample.dev/examples/hello-world/hello-world.c.en-us.html

Lastly, WebAssembly is the bridge from high-level code to machine code and a bridge to more powerful browsers. It encourages the use of more languages being used for development. It will soon be used everywhere and not just the browser. Do check out awsm-wasm for all things WASM !.