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. [1]
It is a low-level assembly-like language that can be compiled to binary format and run by the browser. It’s considered the 4th main programming language for a web application, besides HTML, CSS, and JS.
Web Assembly was created by Microsoft, Google, Mozilla, and Apple. This article will walk you through the fundamental information about it.
Key features of Web Assembly
Performance Optimization
Building a website with JS language encounters a big problem: performance. This is because JS is a high-level programming language, consumes many intermediate steps for the browser to understand and execute the scripts, and is not designed to optimize many complex computational tasks.
Web Assembly is a low-level programming language that the browser can easily understand and execute. Web Assembly is compiled from many source languages like C/C++, Rust,…, which have the powerful ability to optimize algorithms and complex jobs that JS can't do.
Support Multiple Languages
With Web Assembly, different languages like C, C++, Rust, Go, etc., which cannot run in a browser, can now be compiled the code to Web Assembly and run the same in web browsers at near-native speed.
![Wasm control flow [2]](https://lh3.googleusercontent.com/scWLPGMGvuwJfwIlxhLcztUnE9WZlaFiPFFb5CFDfU8Z_iJgK7GnRi433hIJOM3BwXBsAy3yOP-yzS62l57P7EhiVuLEPKDj24dVBwMmq-wNbIrbAGDNpbqu6lus1dcIOWWib7G-)
Be readable and debuggable
Web Assembly is a low-level assembly language in .wasm files, so it isn’t easy to read and debug. But it has a human-readable text format (WebAssembly Text Format, abbreviated as .wat), using S-Expression syntax, which allows code to be written, viewed, and debugged by hand.
Keep Secure
The security model of WebAssembly has two essential goals: to protect users from buggy or malicious modules and provide developers with valuable primitives and mitigations for developing safe applications within the constraints of [3]
Use WebAssembly in your web app
Porting from C/C++ program
You can write programs with many languages and then compile them to a .wasm file.
There are many ways to create .wasm code. You can use online wasm ensembles such as WasmFiddle, WasmFiddle++, WasmExplorer (compile C/C++ code to .wasm file online), wasm-pack (compile Rust code to .wasm), etc. Another choice is using Emscripten, a tool that is able to compile C/C++ code to the .wasm module, plus JS code for loading and running a module and an HTML document to display the result of code.
Here is an example of a program that calculates the sum of numbers from 1 to n translated from C++ to .wat and .wasm files using WasmExplorer
int Sum(int n){
int s = 0;
for(int i = 1; i<=n;i++){
s += i;
}
return s;
}wasm-function[0]:
sub rsp, 8 ; 0x000000 48 83 ec 08
cmp edi, 1 ; 0x000004 83 ff 01
jl 0x2d ; 0x000007 0f 8c 20 00 00 00
0x00000d:
mov eax, edi ; 0x00000d 8b c7
add eax, -1 ; 0x00000f 83 c0 ff
mov eax, eax ; 0x000012 8b c0
mov ecx, edi ; 0x000014 8b cf
add ecx, -2 ; 0x000016 83 c1 fe
mov ecx, ecx ; 0x000019 8b c9
imul rax, rcx ; 0x00001b 48 0f af c1
shr rax, 1 ; 0x00001f 48 d1 e8
mov ecx, eax ; 0x000022 8b c8
lea eax, dword ptr [rcx + rdi*2 - 1] ; 0x000024 8d 44 79 ff
jmp 0x2f ; 0x000028 e9 02 00 00 00
0x00002d:
xor eax, eax ; 0x00002d 33 c0
0x00002f: ; 0x00002f from: [0x000028]
nop ; 0x00002f 66 90
add rsp, 8 ; 0x000031 48 83 c4 08
ret ; 0x000035 c3(module
(table 0 anyfunc)
(memory $0 1)
(export "memory" (memory $0))
(export "_Z3Sumi" (func $_Z3Sumi))
(func $_Z3Sumi (; 0 ;) (param $0 i32) (result i32)
(block $label$0
(br_if $label$0
(i32.lt_s
(get_local $0)
(i32.const 1)
)
)
(return
(i32.add
(i32.add
(i32.shl
(get_local $0)
(i32.const 1)
)
(i32.wrap/i64
(i64.shr_u
(i64.mul
(i64.extend_u/i32
(i32.add
(get_local $0)
(i32.const -1)
)
)
(i64.extend_u/i32
(i32.add
(get_local $0)
(i32.const -2)
)
)
)
(i64.const 1)
)
)
)
(i32.const -1)
)
)
)
(i32.const 0)
)
)Writing WebAssembly directly with the .wat file
As mentioned above, WebAssembly has a text format: .wat; you can write your code in .wat files and use the same tools to convert it to .wasm files.
Loading and running WebAssembly code
JS language provides some method to load the .wasm module. Two main methods to load them are using the WebAssembly built-in object, which acts as namespace for all WebAssembly-related functionality [4] or using XMLHttpRequest, which makes up an important feature of WebAssembly: portable, which means you can embed .wasm code anywhere in your web project without breaking your web architecture or logic flow.
Conclusion
Although still a fairly new technology, WebAssembly is increasingly popular because of its performance advantage for WebApp over the Javascript programming language. That opens up many opportunities to develop web platforms with high speed and adapt to many languages and external plugins. In the near future, Web Assembly may become a must-learn language for developers who want to be a success in web application development.
References
[1] WebAssembly official website, webassembly.org, accessed April 12th, 2022.
[2] How fast and efficient is wasm, adservio.fr, accessed April 12th, 2022.
[3] WebAssembly home page, developer.mozilla.org, accessed April 12th, 2022.