Unlocking the Power of WebAssembly
Tags: webassembly, webdev, javascript, security
Published: 2024-03-10 06:59:36

WebAssembly, often abbreviated as WASM.

Let's do a brief introduction into major concepts of WebAssembly:

- WebAssembly is a compile-targeted language for running bytecode on the web.
- Relative to Javascript, WebAssembly offers predictable performance. It is not inherently **faster** than Javascript, but it **can be faster than JavaScript** in the correct use case. Such as **computationally intensive tasks**, like nested loops or handling large amounts of data. Therefore, **WebAssembly is a complement to JavaScript, and not a replacement**.
- WebAssembly is extremely portable. WebAssembly runs on: all major web browsers, V8 runtimes like [Node.js](https://nodejs.org/en/), and independent Wasm runtimes like [Wasmtime](https://wasmtime.dev/), [Lucet](https://github.com/bytecodealliance/lucet), and [Wasmer](https://github.com/wasmerio/wasmer).
- WebAssembly has Linear Memory, in other words, one big expandable array. And in the context of Javascript, synchronously accessible by Javascript and Wasm.
- WebAssembly can export functions and constants, And in the context of Javascript, synchronously accessible by Javascript and Wasm.
- WebAssembly, in its current MVP, only handles integers and floats. However, tools and libraries exist to make passing high-level data types convenient.



### **Introduction to WebAssembly:**
## What is WASM?

WebAssembly is a binary instruction format that serves as a compilation target for programming languages, enabling them to run in web browsers at near-native speeds. 

Unlike JavaScript, which is traditionally used for web development, WebAssembly provides a low-level, efficient alternative that can unlock new possibilities for web applications.

### **Understanding the Difference between WASM and JavaScript:**

While JavaScript is a high-level scripting language, WebAssembly operates at a lower level, allowing for more efficient execution and improved performance. 

This key distinction opens up opportunities for developers to leverage existing codebases written in languages like C++, Rust, and AssemblyScript, among others, and seamlessly integrate them into web applications.

## Why WASM?
The answer lies in its efficiency, speed, and safety. 

WASM is designed to be a low-level virtual machine that runs at near-native speed. This means we can now run heavy computational tasks directly in our browsers, opening up a world of possibilities for web-based applications.

## Examples
- [Hello World](https://wasmbyexample.dev/example-redirect?exampleName=hello-world)
- [Linear memory](https://wasmbyexample.dev/examples/webassembly-linear-memory/webassembly-linear-memory.assemblyscript.en-us.html)
- [Graphics](https://wasmbyexample.dev/examples/reading-and-writing-graphics/reading-and-writing-graphics.assemblyscript.en-us.html)

## Latest Trends in WASM
In the recent years, WASM has gained significant traction. Let's look at some of the latest trends:

1. **WASI**: The WebAssembly System Interface (WASI) is a promising trend. It's a modular system interface for WebAssembly aiming to provide a wide range of system call capabilities, increasing the usefulness of WASM.
2. **WASM outside the browser**: While initially designed for web browsers, WASM is now being used outside the browser environment too. It's being utilized in edge computing, serverless computing, and more.
3. **Language support**: More and more programming languages are adding support for compiling to WASM. This is making it even more accessible and widespread.

## WASM + AI
While it was primarily designed for web applications, it has been increasingly used outside of the browser environment, including in machine learning applications.

1. **TensorFlow.js:** TensorFlow.js is a library for training and deploying machine learning models in JavaScript environments, including web browsers. It uses WebAssembly to accelerate computations, especially for operations like matrix multiplications, which are fundamental to many machine learning algorithms.
2. **ONNX.js:** Open Neural Network Exchange (ONNX) is an open-source format for representing deep learning models. ONNX.js is a JavaScript library that allows developers to run ONNX models in the browser and on Node.js. It leverages WebAssembly to optimize performance, making it suitable for running complex machine learning models in resource-constrained environments.
3. **Hugging Face Transformers:** Hugging Face provides a library for natural language processing (NLP) tasks called Transformers. They offer a JavaScript version of the library that runs in the browser using WebAssembly. This allows developers to perform tasks such as text generation, sentiment analysis, and question answering directly in web applications without requiring server-side computation.
4. **WebDNN:** WebDNN is a deep neural network library that uses WebAssembly and WebGL to accelerate inference on web browsers. It provides a framework for converting trained deep learning models into a format that can be efficiently executed in the browser. This allows for the deployment of complex machine learning models directly in web applications without relying on server-side processing.
5. **DeepLearn.js:** DeepLearn.js is a JavaScript library for deep learning that includes support for training and running neural networks in the browser. It uses WebAssembly to optimize performance, enabling real-time inference for applications such as image recognition, object detection, and more.

## Challenges for Adoption
1. Limited debugging support.
2. Increased complexity in development.
3. Lack of direct DOM access.
4. Security concerns with untrusted code.
5. Increased bundle size affecting load times.
6. Potential browser compatibility issues.

**Refs**
https://wasmbyexample.dev/examples/introduction/introduction.all.en-us.html
https://www.assemblyscript.org/compiler.html#using-the-compiler
https://developer.mozilla.org/en-US/docs/WebAssembly
https://digest.browsertech.com/archive/browsertech-digest-how-modyfi-is-building-with/https://www.modyfi.com/