Introduction to WebAssembly

Web Assembly is not JavaScript. It allows high-level languages like C and Rust to be compiled into a language the browser can also understand.
Web Assembly works with binary data. Therefore, it can run not only on browsers but also on servers and desktop computers. However, there is no broad use case for writing a desktop app using web assembly right now.
As you know, computers only have the concept of one and zero. Everything else we can do with computers is merely manipulating ones and zeroes. A bit (binary digit) is the smallest unit of information in computing, and a group of 8 bits is called a byte.
We use only 1 and 0 means using a Base 2 (binary) counting system in computing. That is, in any given position, there are only two options: 0 or 1. Compare this with our everyday base 10 (decimal) system, where any given position can be 0-9.

What is Endianness in computers?

When computers interpret instructions they need to know the byte order known as endianness. When the leftmost bit represents the largest value this is known as little endian. When the rightmost bit is the largest value is known as big endian.
Web Assembly reads and writes instructions in little endian byte order.
In reality, most humans would be unable to follow endless blocks of ones and zeroes. Thus, hexadecimal serves as an intermediate step: concise enough for machines but readable for humans and is the lowest level programming language.

Let a try JavaScript code to convert the numbers.

Decimal (8) to Binary

Decimal (503) to Binary

Note: .toString(the base number of decimal (10), binary (2) or hexadecimal (16)) depends on the number to convert into.

What is Web Assembly?

Web Assembly (wasm) is a powerful low-level language meant to be a compile target for high-level languages. It is designed to be portable and ran in many different environments. It is intended to compliment JavaScript, not replace it.

Web Assembly runs in its environment near-native speed, can be cached, and runs much faster than JavaScript can be parsed.

What is the file type of Web Assembly?

There are only two file types of wasm : i.e.

1. .wasm is the actual assembly code in binary format

2. .wat is the human readable textual representation of the code

What are modules in Web Assembly?

The fundamental unit of code is a module. Within the module, we create functions to export which can be called by JavaScript. Function parameters are known as locals and we access them with either get_local or local.get. A Web Assembly module is a tree-based structure known as an S-expression.

Wasm is initialized with two parenthesis and include with a module. All code in a webassembly module is grouped into functions, which have the following pseudo-code :
( func <signature> <locals> <body> )
i32 is 32-bit integer. There are even four use cases to use numbers-types in wasm. then (result) is used to return something and if there is no (result) means the function doesn’t return anything. Check out the mozilla docs to know more on this.

Writing your first program with Web Assembly

Now we’re going to use Web Assembly Studio to write our first hello world program. Let’s get into it.

Jump into the src folder. There you can see main.html and main.js. Don’t worry about this file. Keep your focus on the main.wat file. When you open this file, you can see there are many lines of code. Replace this code with the following snippet:
(module
(func $helloWorld (param $num1 i32) (result i32)
get_local $num1
)
(export “helloWorld” (func $helloWorld))
)
and in main.js change the exports.add(1,1) to exports.helloWorld(42) as shown below in the picture.?

Make sure to save the file and press the Build & Run button to execute the program. You can see the output as 42.

Go the output folder, a main.wasm file is locate after compiling our program. Can you tell what is it? It is the binary format of our program. You can read at this time, but can’t edit. If you want to edit this you have to go to the main.wat file.

Comparing the JavaScript and Wasm code with the same logic implementation.

You can see how difficult and complex is the web Assembly code to write/ understand. Programmers can use a high-level language like AssemblyScript which compiles to Web Assembly. Let’s discuss about AssemblyScript.

What is AssemblyScript?

AssemblyScript is a TypeScript-to-Web Assembly compiler. It provides both high-level language features like loops but also allows for low-level memory access.

Let’s make an environment setup for Assembly Script:

Make sure we’re on latest version of node and have a good code editor. (I am using VSCode)

Note: Node.js need to be version 14 or above.
Install npx
npm i -g npx
Create working directory
mkdir mywasm && cd mywasm
Install the loader
npm i –save @assemblyscript/loader
Install AssemblyScript
npm i –save-dev assemblyscript
Build an empty project
npx asinit .
npm run asbuild
You can follow the official quick start guide setup of AssemblyScript here

AssemblyScript automatically looks in the /assembly directory for files to compile. and replace the code as following in the index.ts .
export function minusOne(n: i32): i32 {
return n – 1;
}
Convert our AssemblyScript to Web Assembly. The converted files are located in /build. AssemblyScript automatically loads and imports your built wasm files into index.js.
index.jsTo run our compiled module we require index.js and call our exported wasm function. Then open the terminal and type as the below image showing.
compiling the program using nodeLook! We got the result as 5.

It is a normal program to run in Node.js environment . I am not going into the details about this web assembly program. Web Assembly is a huge topic and is not possible to explore completely in one blog. However, you can follow the below resources to know more about WASM.

More WASM resources to explore ?

Wasi – WebAssembly System Interface. A common API to operating-system-like features.

Made with Web Assembly – An open source showcase of awesome production applications, side projects, and use cases made with WebAssembly.

ASBind – Library to handle passing high-level data structures between AssemblyScript and JavaScript

Binaryen – Binaryen is a compiler and toolchain infrastructure library for WebAssembly.

Emscripten – A complete compiler toolchain to WebAssembly.

Built With AssemblyScript – A collection of AssemblyScript projects

Interference AssemblyScript – Advanced example of using AssemblyScript

Conclusion

Let me know if you got stuck in any concept of WebAssembly, you can leave a comment below and I will give my best reply. I hope you understood the abstraction of WebAssembly. Let’s connect through my LinkedIn.