What the Hell is WASM --> WebAssembly?

MDN says...

Let's go the usual way first, I'm going to yoink the definition of wasm from MDN 🫣

WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C#, and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.

WebAssembly says...

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.

https://webassembly.org/

I say...

Now let's see what I gotta offer you from my perspective. In short, WASM is a language-neutral compilation target. I'm extremely sorry if I scared you there 🥹 Don't worry I'm gonna break it down. WebAssembly is still a piece of code that is similar to a low-level format. Lemme show you instead of me ranting 😁.

$noobyco@nixos:~/Desktop/wasm]$ cat hello.wasm

Now lemme show you what the real binary of hello.wasm looks like, Here we go...

$noobyco@nixos:~/Desktop/wasm]$ hexdump -C hello.wasm

I have been doing a ton of research and hands-on on programming language internals, thus it was Lil easy for me to grasp the internals of wasm quickly. Here is my blog post that you might wanna got through to clear out the mud.

But why?

Lemme give a scenario where we wanna use intensive applications like 3D games, Virtual and Augmented Reality, computer vision, and image/video editing, but on the web. It's possible to implement in the traditional way but we have to trade its performance. software needs to be written in near-native speed programming languages like C/C++, Rust, etc. For the web, it was challenging until the birth of WebAssembly, Now we can use Premier Pro and even hardcore games on the web with WASM.

Lemme summarise the benefits we get with WASM -

• Be fast, efficient, and portable — WebAssembly code can be executed at near-native speed across different platforms by taking advantage of common hardware capabilities

• Be readable and debuggable — WebAssembly is a low-level assembly language, but it does have a human-readable text format (the specification for which is still being finalized) that allows code to be written, viewed, and debugged by hand. One of them is WAT.

• Keep secure — WebAssembly is specified to be run in a safe, sandboxed execution environment. Like other web codes, it will enforce the browser's same-origin and permissions policies.

• Don't break the web — WebAssembly is designed so that it plays nicely with other web technologies and maintains backward compatibility.

WASM key concepts

It is important to skim through basic concepts to fully understand the bigger picture. Let's start with Modules.

1. Modules: It represents the WebAssembly binary that has been compiled by the WASM compiler.

2. Memory: A resizable ArrayBuffer that contains the linear array of bytes read and written by WebAssembly's low-level memory access instructions.

3. Table: A resizable typed array of references (e.g. to functions) that could not otherwise be stored as raw bytes in Memory (for safety and portability reasons).

4. Instance: A Module paired with all the states it uses at runtime including a Memory, Table, and set of imported values. An Instance is like an ES module that has been loaded into a particular global with a particular set of imports.

WebAssembly core mechanics

This particular section Is fully dedicated to the internals of WebAssembly. Throughout this, we'll explore its working in the browser as well as outside the browser platform like the server.

Where is it used for

Before going into the rabbit hole for each use case of WASM, we must look at the broad view of its use cases. Go through the official WebAssembly page for the use case.

https://webassembly.org/docs/use-cases/

On browser

WebAssembly in the browser works lil differently than on the server side. Okie let's do it...🚀 Let's be clear that browsers need to load .wasm modules that can be fetched and invoked from the Javascript using WASM web API. The browser has a Stack-based VM ( virtual machine ) that is responsible for executing .wasm files.

If we try to zoom in on the browser section of my scrappy drawing, we will find out that it's more than the compilation of WASM with HTML, CSS, and JS. So what is actually going on inside here? Well, that's a great question there😎...

Dw doesn't directly run .wasm files on the browser, as I earlier it needs to be fetched into Javascript using the WebAssembly web API. After successfully writing wasm code in js we need to load the code into the browser, This process happens when we spin some sort of server-like live-server in VS code. Do open up the dev tool in your browser and navigate to the network tag, If you can't see any files then you definitely need to refresh once. Finally, you will be able to see those files loaded in the browser successfully👏🏻👏🏻

On Server { outside browser }

The WebAssembly technology was Intentionally made to charge up web apps in terms of performance. Web Applications like Figma and Adobe Premier Pro are Intense applications that need to be written in low-level languages like C and C++.

We can also use the same technology outside the browser thanks to WASI { web Assembly system interface } Let's see how the pieces come together here!