WebAssembly (WASM) is a game-changing technology that enables code written in different languages to execute on the web at near-native speed, bringing near-native performance to online apps. Because WASM is a binary instruction format, programmers may create high-performance web apps by using it as a portable compilation target for high-level languages like C, C++, and Rust.

We'll examine the foundations of WASM, examine its advantages for application speed and startup times, and offer helpful instructions for creating and executing WASM binaries in this post. We will also use examples from a GitHub repository that includes three demos — a frontend demo, a backend demo, and a TensorFlow.js demo that uses WASM — to further clarify these ideas.

What is WebAssembly (WASM) ?

Modern web browsers can run WASM, a low-level bytecode. It is intended to be used in conjunction with JavaScript to enhance its performance-critical code execution efficiency. WASM code is a great option for high-performance applications like machine learning models, data visualization tools, and games since it can run at speeds close to native on a variety of platforms.

Benefits of WASM

  1. Performance: Compared to JavaScript, WASM is intended to be quicker for activities requiring high speed. Because of its greater resemblance to machine code, optimizations that lead to substantial speed gains are possible.
  2. Portability: Any platform that supports the WASM runtime may execute code that has been compiled to WASM, guaranteeing consistent behavior in a variety of settings.
  3. Security: By operating in a sandboxed environment, WASM lowers the possibility of malicious code execution and offers a secure execution context.
  4. Interoperability: Because WASM integrates well with JavaScript, developers may take use of pre-existing web frameworks and technologies and combine them with high-performance code.

Building and Running WASM Binaries

To demonstrate the process of building and running WASM binaries, let's use the GitHub repository with our three demos.

Cloning the Repository

First, clone the repository from GitHub:

https://github.com/harsh4870/Docker-WASM.git

01-Frontend-golang

In the first demo, we'll build a WASM binary and run it in a web browser.

02-Backend-rust-container

The second demo demonstrates running WASM binaries inside a container as a backend HTTP server rust-based.

03-Tensorflow-face-detection-docker

The third demo leverages TensorFlow.js with WASM to accelerate face detection tasks in the browser with different backend options.

Quick demo

Improving Performance and Start-Up Times

Code may be executed more quickly using WASM than JS, which enhances application speed. Processing data, machine learning, and graphics rendering are examples of computationally demanding jobs where this is very useful.

Furthermore, quicker loading times and lower payloads are made possible by WASM's binary format. Because WASM modules are precompiled, the browser's WASM runtime may run them right away, speeding up startup and improving user experience.