Deep Dive into WebAssembly

The Early Days: What Happened Before WebAssembly?

Imagine a world where the browser was just there to help you check your email, browse the occasional recipe, or maybe catch up on cat videos (you know, the essentials). Back then, JavaScript ruled the web like a big ol’ dinosaur, but it wasn’t exactly the speediest or most efficient creature in the ecosystem.

The web was built with a lot of HTML and JavaScript running in your browser, but it was kinda slow when it came to more complex apps. It was like trying to run a race with a turtle strapped to your back (no offense to turtles, they’re awesome, but you get the point).

But then, in 2015, something magical happened.

WebAssembly, or WASM for short, burst onto the scene like a superhero coming to save the day.

Hello, WebAssembly: The Basic Example

Now, let’s dive into how WebAssembly actually works. If you’re familiar with a basic “Hello, World!” in most languages, you’ll find WebAssembly’s version a bit… let’s say, a little more “barebones.”

Here’s the raw WebAssembly code for a simple “Hello, World!"—no frills, no extra libraries, just you and the machine:

1
2
3
4
5

(module
  (type $t0 (func (result i32)))
  (func $f0 (type $t0) (result i32)
    i32.const 42)
  (export "main" (func $f0)))

Okay, okay—don’t freak out just yet! This might look like alien code to you, but in the WebAssembly world, this is how you tell the browser, “Hey, I want to do something cool, like print ‘Hello, World!’” But instead of printing text, it simply returns an integer, because reasons.

You can imagine that printing text would come next—after all, WebAssembly is kind of low-level!

Now imagine how you’d run this in a browser without some serious prep work. That’s the beauty of WebAssembly—it gets compiled into a format that browsers understand, and you can run it in your browser just like you would any JavaScript or HTML file.

Assembly Language vs. .NET IL vs. Java IL: A Comparison

Assembly Language

Assembly language is the OG of low-level programming.

It’s basically what you’d use to tell the computer exactly what to do, step by step, in its native language (i.e., binary). But Assembly’s big downside is it’s highly machine-specific, meaning it’s not portable.
If you write something for an x86 processor, good luck running it on an ARM processor!

Here’s a very basic Assembly example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

section .data
    msg db 'Hello, World!',0
section .text
    global _start
_start:
    mov edx, 13
    mov ecx, msg
    mov ebx, 1
    mov eax, 4
    int 0x80
    mov eax, 1
    int 0x80

This will print “Hello, World!” on a Linux machine. But it’s very specific to that architecture, and you’d have to re-write it for other machines.

.NET Intermediate Language (IL)

.NET IL is a step up from Assembly in that it’s platform-independent. You write code in a language like C#, and it gets compiled into IL, which the .NET runtime (CLR) understands.

The .NET runtime then converts IL into native code for the current machine at runtime (just-in-time compilation).

Here’s an example of psuedo .NET IL for a simple “Hello, World!”:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.assembly HelloWorld {}
.module HelloWorld.exe
.method public static void Main() cil managed
{
    .entrypoint
    .maxstack 8
    .locals init ([0] string msg)
    ldstr "Hello, World!"
    stloc.0
    ldloc.0
    call void [System.Console]::WriteLine(string)
    ret
}

This code is much more abstract and platform-independent compared to Assembly.

Java Intermediate Language (IL)

Java takes a similar approach with its bytecode. You write your program in Java, and it gets compiled into bytecode, which is platform-independent.

The Java Virtual Machine (JVM) then translates this bytecode into machine code specific to the running machine.

Here’s an example of what Java bytecode might look like for “Hello, World!”:

1
2
3
4
5

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

This gets compiled into something like this bytecode:

1
2
3
4

0: getstatic     #2                  // Field java/lang/System.out:Ljava/io/PrintStream;
3: ldc           #3                  // String Hello, World!
6: invokevirtual #4                  // Method java/io/PrintStream.println:(Ljava/lang/String;)V
9: return

WebAssembly: The New Kid on the Block

Now, WebAssembly, as you saw earlier, is an intermediate language too, but it’s more compact and optimized for speed in the browser. It’s designed to run on any platform that supports modern web browsers.

Unlike Assembly, WebAssembly is designed for portability, like Java or .NET IL, but it’s much more lightweight.

In a nutshell, WebAssembly is like a supercharged, cross-platform, faster version of bytecode, but for the web.

Why WebAssembly Is the Future of the Web

So, why should you care about WebAssembly? Well, here’s the short version:

• Speed: WebAssembly code runs super fast because it’s compiled to machine code, like C++ or Rust, which can run near-native speeds in the browser.
• Portability: WebAssembly is platform-independent. It doesn’t care whether you’re using Windows, macOS, or Linux.
• Security: WebAssembly is sandboxed, which means it’s safer than just running raw JavaScript in the browser.

And why do you need a modern browser to run it? Simple—because WebAssembly relies on the latest web standards and browser features, which older browsers just don’t support.

So, to take advantage of all this WebAssembly goodness, make sure your browser is up-to-date. Thankfully, browsers like Chrome, Firefox, Safari, and Edge support it.

WebAssembly: The Ultimate Retro Gaming and Coding Machine

Tthanks to WebAssembly, you can now run old-school languages and even entire vintage computer systems, right in your browser. It’s like a time machine for your code!

Think about it: You could be surfing the web, and running Python, a vintage Apple 2, or even the Timex Sinclair, all in the same browser tab.

Sounds like magic, right?
Well, it’s not magic—it’s WebAssembly!

So, How Does WebAssembly Make This Possible?

Well, the trick is that WebAssembly allows you to run compiled code at near-native speeds right in your browser.

This means you can take almost any code written in languages like C, C++, Rust, and even some older, obscure languages, and run them in the browser without the need for the original hardware or operating system.

For example, if you want to run Python in the browser, WebAssembly enables it by letting you take a Python interpreter, compile it to WebAssembly, and then run it in your browser as if it were just another JavaScript app. Boom, Python in the browser. Like, actual Python, not just a limited subset of it!

Let’s Talk Python: From Desktop to Browser

Imagine running a full Python interpreter, including all your libraries, in the browser, with zero installations or setup. Thanks to WebAssembly, this is now possible. Projects like Pyodide have taken the Python interpreter, compiled it to WebAssembly, and made it run efficiently in the browser.

Pyodide even lets you use Python with all the power of JavaScript.

So you can run Python code in the browser and interact with the page in real-time.

No more “but I need Python on my desktop to make this work” excuses. You can now prototype Python code while on a coffee break, directly in your browser!

Here’s an example of a Python script running in your browser with Pyodide:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<script type="module">
    import * as pyodide from "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js";

    async function runPython() {
        await pyodide.loadPackage("numpy");
        let result = pyodide.runPython(`
            import numpy as np
            np.sum([1, 2, 3, 4, 5])
        `);
        console.log(result);
    }

    runPython();
</script>

Key Ideas

References

• WebAssembly.org
• Introduction to WebAssembly
• The History of WebAssembly