Web Assembly

WebAssembly, or WASM for short, is the game-changer that is revolutionizing the web development world. Imagine being able to run high-performance, low-level code directly in the browser, without the need for any plugins or downloads. That’s exactly what WebAssembly makes possible. This cutting-edge technology is designed to enable the compilation of high-level languages such as C, C++ and Rust, making it the perfect choice for creating complex web applications, from 3D games to interactive visualizations, and from blockchain clients to scientific simulations. With its fast execution, improved security, and support for multiple languages, WebAssembly is set to become the new standard for web development.

WebAssembly (often shortened to WASM) is a binary instruction format for a stack-based virtual machine. It is designed as a portable target for the compilation of high-level languages like C, C++, and Rust, enabling deployment on the web for client and server applications. WebAssembly aims to execute at near-native speed and provides a compact binary format that is designed to run with a smaller memory footprint.

It was first introduced in 2015 as a new standard for web development, and since then it has been adopted by all major web browsers. It is designed to be executed by a virtual machine, which is built into modern web browsers.

WebAssembly is designed to be a safe and secure execution environment, it provides a sandboxed environment for code execution, it prevents malicious code from accessing the host system or other parts of the browser.

WebAssembly code can be written in a variety of languages, including C, C++, Rust, and Go, using tools like Emscripten, Rust-native-wasm, and wasm-bindgen. These tools convert the code from the source languages into the WebAssembly binary format.

WebAssembly and JavaScript are designed to work together, WebAssembly code can interact with JavaScript code, and can also access the Document Object Model (DOM) and other browser features through JavaScript. This allows developers to take advantage of the performance benefits of WebAssembly while still using JavaScript for the parts of their code that need to interact with the browser.

WebAssembly is supported by all major web browsers, such as Chrome, Firefox, Safari, and Edge. It is an open standard and is continuously being developed and improved by the WebAssembly Community Group, which is made up of representatives from major technology companies and organizations.

WebAssembly is now a W3C Recommendation, which means it has reached a stable state and is considered a standard for web development. The specification is continually improving and evolving to meet the needs of web developers and users.

WEB ASSEMBLY COMMUNITY GROUP

The WebAssembly Community Group (WACG) is a group of individuals and organizations that are interested in the development and evolution of the WebAssembly standard. The group is part of the World Wide Web Consortium (W3C), which is the main international standards organization for the World Wide Web.

The WACG is made up of representatives from major technology companies and organizations such as Google, Microsoft, Mozilla, Intel, and the Linux Foundation. Its goal is to promote the development and adoption of the WebAssembly standard by providing a forum for discussion, collaboration, and the creation of new ideas and proposals.

The WACG is responsible for the development of the WebAssembly specification, which defines the structure and behavior of the WebAssembly binary format. The group also develops and maintains the WebAssembly JavaScript API, which allows developers to interact with WebAssembly modules in web pages.

The WACG also works on developing new features and extensions for WebAssembly, such as multithreading, SIMD, and thread-local storage. It also works on improving the performance and security of WebAssembly, and on making it more accessible to a wide range of developers.

The group also hosts events, such as the WebAssembly Conference, to bring together experts and practitioners to share knowledge and ideas on the latest developments in the field. It also works with other web standards organizations to ensure that WebAssembly is integrated seamlessly with the web platform.

WEB ASSEMBLY ARCHITECTURE

WebAssembly has a simple stack-based architecture that consists of the following main components:

Memory: WebAssembly has a linear memory model, where memory is treated as a single, large array of bytes. Programs can manipulate memory using load and store instructions.
Stack: WebAssembly uses a stack to store values and perform calculations. Instructions that operate on the stack include arithmetic and logical operations, as well as control flow instructions.
Registers: WebAssembly uses a small number of registers to hold temporary values. The contents of registers can be moved to and from the stack.
Types: WebAssembly supports a small set of types, including integers, floating-point numbers, and pointers. This is to ensure that WebAssembly code is compact and efficient.
Instructions: WebAssembly has a small set of instructions that operate on the stack, memory, and registers. These instructions include arithmetic and logical operations, control flow, and memory access operations.
Modules: A WebAssembly module is a self-contained unit of code and data that can be loaded and executed by a WebAssembly runtime. A module can contain multiple functions and global variables.
Imports and exports: A WebAssembly module can import functions and data from other modules, and it can export functions and data to be used by other modules.
Tables and linear memory: WebAssembly allows for the creation of tables, which can be used as a way to call functions indirectly, and linear memory, which is a contiguous region of memory that can be accessed by the program.
Exception handling: WebAssembly has an exception handling mechanism that allows to throw and catch exceptions, and to perform cleanup operations when an exception is thrown.
Compilation and instantiation: WebAssembly code is typically loaded and compiled by a WebAssembly runtime, and then instantiated to create an executable instance of the module.

WebAssembly’s simple architecture makes it easy to implement in a variety of environments, including web browsers, servers, and embedded devices. It also allows for efficient execution and a small binary size. However, the simplicity of the architecture also means that it can be less expressive than more traditional programming languages.

SOME WEB ASSEMBLY USE CASES

High-performance web applications: WebAssembly allows developers to write high-performance code in languages like C and C++, which can be run in the browser. This can be useful for applications that require a lot of computation or that need to process large amounts of data, such as video and image processing, scientific simulations, and machine learning.
Gaming: WebAssembly can be used to develop high-performance 2D and 3D games that run in the browser. This allows developers to create games that can be played on any device with a modern web browser, without the need for additional software or plugins.
Cryptography: WebAssembly can be used to perform encryption and decryption operations in the browser. This can be useful for applications that need to keep sensitive data secure, such as online banking and e-commerce.
Audio and video processing: WebAssembly can be used to perform real-time audio and video processing in the browser. This can be useful for applications that need to perform tasks such as transcoding, compression, and streaming.
Virtual and augmented reality: WebAssembly can be used to develop virtual and augmented reality applications that run in the browser. This can allow developers to create immersive experiences that can be accessed by anyone with a web browser.
IoT devices: WebAssembly can be used to develop lightweight and efficient applications that run on devices with limited resources, such as IoT devices.
Language interpreters: WebAssembly can be used to implement interpreters for languages that are not natively supported by web browsers, such as Python, Ruby and Lua.
Machine learning: WebAssembly can be used to perform complex machine learning tasks such as image recognition, natural language processing, and predictive analytics in the browser.
WebAssembly-based blockchain clients: WebAssembly can be used to create blockchain clients that can run in the browser, making it possible for users to interact with blockchain networks without the need for specialized software.
WebAssembly-based VR and AR: WebAssembly can be used to create VR and AR experiences in the browser, making it possible for users to experience VR and AR without the need for specialized hardware or software.
WebAssembly-based video editing tools: Some web-based video editors are now built on WebAssembly, which makes them more responsive and faster than before.
WebAssembly-based scientific simulations: WebAssembly is being used to create web-based simulations of physical phenomena, such as fluid dynamics, particle dynamics, and more.

CURRENT ECOSYSTEM

WABT

WABT (WebAssembly Binary Toolkit) is a set of tools for working with WebAssembly binary files. It includes a command-line tool (wasm-objdump, wasm-interp, etc.) and a C library (libwasm.a) for parsing and processing WebAssembly files. The toolkit can be used for tasks such as disassembling, converting, and interpreting WebAssembly binary files. It is also useful for debugging and testing WebAssembly modules. The project is open source and hosted on GitHub. https://github.com/WebAssembly/wabt

EMSCRIPTEN (C,C++)

Emscripten is an open-source toolchain that allows developers to run C and C++ code in a web browser or JavaScript environment, by converting it to JavaScript, or more specifically, to WebAssembly.It uses the LLVM compiler infrastructure to convert C and C++ code to WebAssembly. It also includes a JavaScript library that provides a JavaScript API for interacting with the WebAssembly code.

WASM-PACK (RUST)

wasm-pack is a tool for building and packaging Rust-generated WebAssembly.It is a command-line tool that provides a convenient way to build and package Rust code as WebAssembly. It automatically generates the necessary JavaScript glue code to interact with the WebAssembly code from JavaScript, making it easy to use Rust code in web applications.

GO WEB ASSEMBLY TOOLCHAIN (GO lang)

The Go WebAssembly toolchain is a set of tools and libraries that allows developers to write Go code that can be compiled to and run on WebAssembly.It allows developers to use the Go programming language to write code that runs on WebAssembly.The Go WebAssembly toolchain also includes the gccgo compiler, which is an alternate implementation of the Go compiler that uses the GNU Compiler Collection (GCC) instead of the standard Go compiler. This allows developers to use the GCC toolchain to compile Go code to WebAssembly.

PYODIDE (Python)

Pyodide is an open-source project that aims to bring the Python programming language to the browser by compiling it to WebAssembly. Pyodide is built on top of the WebAssembly JavaScript API and provides a way to run Python code in the browser by embedding a Python interpreter in the browser and providing a JavaScript API for interacting with it.

HOW CAN WE INCLUDE WEB ASSEMBLY IN OUR WEB APPS

To use WebAssembly in a web app we can follow the following steps

Write a program in a language that can be compiled to WebAssembly, such as C, C++, Rust or Go.
Use a compiler or tool to convert the code into a WebAssembly binary file (.wasm)
Include the WebAssembly binary file in our HTML file as a JavaScript module.
Use JavaScript to instantiate and interact with the WebAssembly module. This can be done using the WebAssembly JavaScript API.
Once the module is instantiated, we can call its functions and access its memory.
Create an HTML file that will be used to run the WebAssembly module.
Use JavaScript to load the WebAssembly module and start using it.

EXAMPLES

Let’s start with a basic example for adding two numbers in web assembly’s text format.
(Docs : https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format)

First let’s write a basic web assembly program and save it as a .wat file. We will name it as add.wat

(module
  (func (export "add") (param i32 i32) (result i32)
    get_local 0
    get_local 1
    i32.add)
  (memory 1)
)

Now let’s convert it into WASM binary format using WABT

wat2wasm add.wat

Let’s check the WASM binary file using xxd

xxd add.wasm

00000000: 0061 736d 0100 0000 0107 0160 027f 7f01  .asm.......`....
00000010: 7f03 0201 0005 0301 0001 0707 0103 6164  ..............ad
00000020: 6400 000a 0901 0700 2000 2001 6a0b       d....... . .j.

Now let’s load this add.wasm file in our browser.To do that create a normal .html file and include the following script.

<script>
    WebAssembly.instantiateStreaming(
        fetch('add.wasm')
    ).then((obj)=>{
        console.log(obj.instance.exports.add(4000, 2000));
    })
</script>

If you remember we have created an add module in our wat file and exported it.Just like accessing any js module after instantiating the wasm file we can access the exported modules.Here we are accessing the add module from wasm and passing two arguments for the computation.As a result we are getting the following output in our browser developer console.

Now let’s try to convert a C++ program into Web Assembly and run it inside the browser.

Let’s write a small c++ program to print the current OS information.

#include <iostream>
#include <sys/utsname.h>

int main() {
    struct utsname os_info;
    uname(&os_info);
    std::cout << "OS name: " << os_info.sysname << std::endl;
    std::cout << "OS version: " << os_info.version << std::endl;
    std::cout << "OS release: " << os_info.release << std::endl;
    std::cout << "OS machine: " << os_info.machine << std::endl;
    return 0;
}

Now let’s compile and run it.

g++ osinfo.cpp -o osinfo

./osinfo  

OS name: Linux
OS version: #1 SMP PREEMPT
OS release: 5.15.85-1-MANJARO
OS machine: x86_64

It perfectly prints my machine’s OS information.

Now let’s convert the c++ program into Wasm.To do this we need to use Emscripten.

emcc osinfo.cpp -s WASM=1 -o osinfo.html

It will generate the following files

osinfo.wasm
osinfo.js
osinfo.html

Now let’s run the html file using a simple http-server.
It prints the following in the browser

OS name: Emscripten
OS version: #1
OS release: 3.1.29
OS machine: wasm32

But wait isn’t the output is different ? Yes as I have mentioned earlier Web Assembly modules are executed inside a Stack based Virtual Machine inside the browser.Here we are getting the VM’s information printed in the browser.

I have just shown some basic examples.I hope you get the bigger picture of using wasm in your web applications for performance intensive tasks.

A FEW WELL KNOWN WEB ASSEMBLY IMPLEMENTATIONS

Figma: A web-based design and prototyping tool that uses WebAssembly to provide a fast and responsive user interface.
https://www.figma.com
AutoCAD Web: A web-based version of the popular AutoCAD software, which is built using WebAssembly and allows users to create and edit 2D and 3D designs in the browser.
https://web.autocad.com
Google Earth: The web-based version of the popular Google Earth application uses WebAssembly to provide a high-performance 3D rendering engine for displaying satellite imagery and other geospatial data.
https://earth.google.com
Wasm File : https://earth.google.com/static/9.180.0.0/earthwasm.wasm

CONCLUSION

WebAssembly is a powerful new technology that has the potential to shape the future of web development. Its low-level, binary instruction format is designed to be fast to decode and execute, which means that it has the potential to significantly improve the performance of web applications. Furthermore, WebAssembly’s support for a growing number of programming languages means that developers will be able to use their preferred language to create web apps.

Overall, WebAssembly is a promising technology that has the potential to significantly improve the performance, security, and accessibility of web apps.It’s worth noting that WebAssembly is still an emerging technology and its future developments are uncertain. As the technology continues to evolve and gain more traction in the industry, it will be exciting to see how it will shape the future of web development.

Citations:
https://webassembly.org
https://developer.mozilla.org/en-US/docs/WebAssembly
https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en

Image Courtesy: Photo by Sebastian Svenson on Unsplash https://unsplash.com/photos/d2w-_1LJioQ

Murali's Blog