WebAssembly Tutorial: A Beginner's Guide

Hello there, future WebAssembly wizards! I'm thrilled to be your guide on this exciting journey into the world of WebAssembly. As someone who's been teaching computer science for more years than I care to admit (let's just say I remember when floppy disks were actually floppy), I'm here to make this adventure as fun and accessible as possible. So, grab your favorite beverage, get comfy, and let's dive in!

What is WebAssembly?

Imagine you're building a sandcastle. JavaScript is like using your hands - it's flexible and easy to start with, but it might not be the fastest way to build a massive fortress. WebAssembly, on the other hand, is like having a set of specialized tools - it might take a bit more setup, but boy, can it build things quickly!

WebAssembly, often abbreviated as Wasm, is a binary instruction format designed for efficient execution in web browsers. It's like a secret code that your browser understands, allowing programs to run at near-native speed.

Why Should You Care?

1. Speed: WebAssembly is lightning-fast. It's like upgrading from a bicycle to a sports car for your web applications.
2. Language Diversity: You're not limited to JavaScript anymore. C, C++, Rust - bring 'em on!
3. Security: WebAssembly runs in a sandboxed environment, keeping things safe and sound.

Getting Started with WebAssembly

Setting Up Your Development Environment

Before we start coding, we need to set up our workspace. It's like preparing your kitchen before cooking a gourmet meal. Here's what you'll need:

1. A modern web browser (Chrome, Firefox, Safari, or Edge)
2. A text editor (I recommend Visual Studio Code, but use whatever you're comfortable with)
3. Emscripten toolkit (we'll install this together)

Let's install Emscripten:

# Clone the Emscripten repository
git clone https://github.com/emscripten-core/emsdk.git

# Enter the cloned directory
cd emsdk

# Download and install the latest SDK tools
./emsdk install latest

# Activate the latest SDK tools
./emsdk activate latest

# Set up the environment variables
source ./emsdk_env.sh

Don't worry if this looks like gibberish right now. Think of it as setting up your easel and paints before creating a masterpiece!

Your First WebAssembly Program

Let's start with a simple "Hello, World!" program. We'll write it in C and then compile it to WebAssembly.

Step 1: Write the C Code

Create a file named hello.c and add the following code:

#include <stdio.h>

int main() {
    printf("Hello, WebAssembly World!\n");
    return 0;
}

This is like writing a letter that we're going to translate into a language our browser understands.

Step 2: Compile to WebAssembly

Now, let's turn our C code into WebAssembly. Run this command in your terminal:

emcc hello.c -s WASM=1 -o hello.html

This command is like putting our letter into a magical translation machine. It creates three files:

• hello.wasm: The WebAssembly binary
• hello.js: JavaScript glue code
• hello.html: A HTML file to run our program

Step 3: Run Your WebAssembly Program

Open the hello.html file in your web browser. You should see "Hello, WebAssembly World!" printed on the page. Congratulations! You've just run your first WebAssembly program!

Understanding the Magic

Let's break down what just happened:

1. We wrote a simple C program.
2. We used Emscripten to compile our C code into WebAssembly.
3. Emscripten also generated some JavaScript to load and run our WebAssembly.
4. The browser executed our WebAssembly code, printing our message.

It's like we wrote a letter in English (C), translated it to a universal language (WebAssembly), and then had a interpreter (JavaScript) read it out loud in a way everyone (the browser) could understand.

Going Further: A Simple Calculator

Now that we've got our feet wet, let's try something a bit more interactive. We're going to create a simple calculator that adds two numbers.

Step 1: Write the C Code

Create a new file called calculator.c:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
    return a + b;
}

Here, EMSCRIPTEN_KEEPALIVE is like putting a giant "IMPORTANT" stamp on our function. It tells Emscripten to keep this function available for JavaScript to call.

Step 2: Compile to WebAssembly

Compile our calculator:

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

This command is a bit more complex, but think of it as giving specific instructions to our translation machine.

Step 3: Create the HTML Interface

Create a file named calculator.html:

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Calculator</title>
</head>
<body>
    <h1>WebAssembly Calculator</h1>
    <input type="number" id="num1" placeholder="Enter first number">
    <input type="number" id="num2" placeholder="Enter second number">
    <button onclick="calculateSum()">Add</button>
    <p>Result: <span id="result"></span></p>

    <script src="calculator.js"></script>
    <script>
        Module.onRuntimeInitialized = function() {
            window.add = Module.cwrap('add', 'number', ['number', 'number']);
        }

        function calculateSum() {
            var num1 = parseInt(document.getElementById('num1').value);
            var num2 = parseInt(document.getElementById('num2').value);
            var sum = add(num1, num2);
            document.getElementById('result').textContent = sum;
        }
    </script>
</body>
</html>

This HTML file is like creating a user-friendly interface for our calculator. It's got input boxes for our numbers and a button to trigger the calculation.

Step 4: Run Your WebAssembly Calculator

Open calculator.html in your browser. You should see two input boxes and an "Add" button. Enter two numbers, click "Add", and voila! Your WebAssembly calculator in action!

Conclusion

And there you have it, folks! We've taken our first steps into the exciting world of WebAssembly. We've set up our environment, created a "Hello, World!" program, and even built a simple calculator.

Remember, learning WebAssembly is like learning to ride a bike. It might seem wobbly at first, but with practice, you'll be zooming around the web development world in no time. Keep experimenting, keep learning, and most importantly, have fun!

In our next lesson, we'll dive deeper into WebAssembly's capabilities and explore how to optimize performance. Until then, happy coding!

Method	Description
emcc	Emscripten compiler command
EMSCRIPTEN_KEEPALIVE	Macro to prevent function from being optimized out
Module.cwrap	Creates a wrapper to call compiled C functions
Module.ccall	Calls a compiled C function directly

Credits: Image by storyset