WebAssembly is the technology of the future?

4 min readJul 2, 2021

Originally posted on blog.knoldus.com by Aman Verma

WebAssembly, generally called wasm, is a compact, fast and portable code that can run on most browsers, making it a technology of the future. Let us learn more about it in this blog.

Introduction

"WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications."

This is the definition that I got from the WebAssembly official web page. Let us break this definition up and understand it. It states that WebAssembly is a binary instruction format. This binary instruction format is similar to byte code in java. This code can not be understood by us but by a virtual machine which is next in our definition. A stack-based virtual machine is a virtual machine that considers the operands of all the instructions as they are on a stack. The next part of the definition tells that wasm is a compilation target for many programming languages. This is indeed true, many languages compile their code to wasm which makes it easier to transfer on the web for deployment purposes.

Understanding WebAssembly

To understand WebAssembly, we have to understand it from the very beginning when the computers were invented. At that time, to interact with the big-sized computers we needed to code in machine language, i.e., the language of 0s and 1s. It was quite difficult to code in that.

So we started coding in Hex symbols which were not quite helpful as it was also very difficult to code in Hex. We then started using assembly languages which made it somewhat easy to code as it was understandable by us. For example, LDX stood for load in the X register, similarly LDY for load in the Y register. So it was easier but for different species of microprocessors, we needed a different assembly language.

So we switched to high-level languages like C, which did the same task but it was highly dependent on OS. To solve this we came up with the concept of virtual machines. Like in Java, we have a JVM(Java Virtual Machine). The Java code is compiled to a byte code that is understandable by JVM which runs it.

Now, WebAssembly is the same concept but for web browsers.

A java code or any other code is compiled to a WebAssembly code(.wasm file) which can run on a virtual machine in the browsers. It enables most browsers to run any kind of code and use the output. This is the beauty of WebAssembly codes.

Here is a picture that shows how a wasm file interacts with the DOM.

In this image, the main.wasm file cannot directly interact with the DOM, but it can interact with the app.js file through the VM. The app.js file uses the main.wasm file to instantiate the module and use the functions that the module exports. It then uses the output of the wasm file to print on the webpage. This is how wasm architecture works.

What WebAssembly is not

WebAssembly is not –

A transpiling target for JavaScript
A replacement for JS
A Programming Language

Let us understand each one of them. Firstly, WebAssembly is not a transpiling target for JavaScript. Transpiling means converting a high-level language to another high-level language like transpiling typescript to JavaScript. Though typescript can be compiled to WebAssembly.

Second, WebAssembly is not a replacement for JavaScript. Though many people say, it is the end of JavaScript, but you need JavaScript to host WebAssembly in the browser.

Third, WebAssembly is not a programming language. Though there is a textual format of wasm, writing it on its own will take far more time.

Textual Representation of wasm

wasm is a binary instruction format code that is not understandable by us, so there is a .wat file that is the textual representation of the wasm file. Here is a sample .wat file that adds two numbers.

add.wat

(module
(func $add (param $lhs i32) (param $rhs i32) (result i32)
get_local $lhs
get_local $rhs
i32.add)
(export “add” (func $add))
)

There is a module declaration in the first line and then there is a function named add with two parameters lhs and rhs and an i32 return value. The parameter declaration is done in this format (param $parametername datatype). It is called an S-expression.

Then there is a get_local call that retrieves the local variables and puts them on the stack. So, lhs and rhs are put on a stack and then add function for integers is called and the addition is done for the top two elements in the stack and the result is pushed back. The result is returned because it is at the top of the stack.

The add function is exported with the name ‘add’ to be used by other programs.

So this was an introduction to wasm. This is indeed the technology of the future. So, that was all from my side.