WebAssembly - Modules

Hello, aspiring programmers! Today, we're going to embark on an exciting journey into the world of WebAssembly modules. Don't worry if you're new to programming – I'll be your friendly guide, and we'll take this step-by-step. By the end of this lesson, you'll have a solid understanding of WebAssembly modules and how they work. Let's dive in!

What is WebAssembly?

Before we talk about modules, let's quickly cover what WebAssembly is. Imagine you're building a sandcastle. WebAssembly is like having a special bucket that lets you build castles faster and stronger than ever before. In the world of web development, WebAssembly is a low-level language that runs in browsers, allowing for near-native performance.

Step 1: Understanding WebAssembly Modules

WebAssembly modules are the building blocks of WebAssembly applications. Think of them as LEGO pieces – each module is a self-contained unit that can be combined with others to create something amazing.

Key Concepts

Binary Format: Modules are typically distributed in a binary format (.wasm files).
Compilation: These modules are compiled from languages like C, C++, or Rust.
Imports and Exports: Modules can import functionality and export their own functions.

Step 2: Creating and Using WebAssembly Modules

Now, let's walk through the process of creating and using a WebAssembly module.

2.1 Writing the WebAssembly Module

First, we need to write our module. We'll use a simple C function as an example:

// add.c
int add(int a, int b) {
    return a + b;
}

This function adds two numbers. Simple, right? But how do we turn this into a WebAssembly module?

2.2 Compiling to WebAssembly

To compile this to WebAssembly, we use a tool called Emscripten. Here's the command:

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

This command creates two files:

add.wasm: Our WebAssembly module
add.js: JavaScript glue code to load and use our module

2.3 Loading the Module in JavaScript

Now, let's see how we can use this module in a web page:

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Add Function</title>
</head>
<body>
    <h1>WebAssembly Add Function</h1>
    <p>Result: <span id="result"></span></p>
    <script src="add.js"></script>
    <script>
        Module.onRuntimeInitialized = async _ => {
            const result = Module._add(5, 3);
            document.getElementById('result').textContent = result;
        };
    </script>
</body>
</html>

Code Explanation

Let's break down what's happening in this code:

We include the add.js file, which loads our WebAssembly module.
We use Module.onRuntimeInitialized to ensure the module is loaded before we use it.
We call our add function using Module._add(5, 3).
The result is displayed on the page.

Example: A More Complex Module

Now that we've seen a simple example, let's try something a bit more complex. We'll create a module that calculates the factorial of a number.

// factorial.c
int factorial(int n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

Compile it the same way:

emcc factorial.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_factorial"]' -o factorial.js

Now, let's use it in our HTML:

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Factorial</title>
</head>
<body>
    <h1>WebAssembly Factorial Calculator</h1>
    <input type="number" id="input" value="5">
    <button onclick="calculateFactorial()">Calculate</button>
    <p>Result: <span id="result"></span></p>
    <script src="factorial.js"></script>
    <script>
        function calculateFactorial() {
            const n = document.getElementById('input').value;
            const result = Module._factorial(n);
            document.getElementById('result').textContent = result;
        }

        Module.onRuntimeInitialized = async _ => {
            calculateFactorial();
        };
    </script>
</body>
</html>

Output

When you run this in a browser, you'll see an input field where you can enter a number. Clicking the "Calculate" button will display the factorial of that number, all computed using our WebAssembly module!

Conclusion

Congratulations! You've just taken your first steps into the world of WebAssembly modules. We've covered the basics of creating, compiling, and using WebAssembly modules in web applications. Remember, this is just the beginning – WebAssembly opens up a whole new world of possibilities for web development, allowing you to bring high-performance computing to the browser.

As you continue your journey, you'll discover how WebAssembly can be used for everything from games to complex data processing. Keep experimenting, and don't be afraid to push the boundaries of what's possible in the browser!

Method	Description
Module.onRuntimeInitialized	Ensures the WebAssembly module is fully loaded before use
Module._functionName	Calls a function exported from the WebAssembly module
emcc	Emscripten compiler command for creating WebAssembly modules

Remember, learning WebAssembly is like learning to ride a bike – it might seem tricky at first, but with practice, you'll be zooming along in no time. Happy coding!

Credits: Image by storyset

Previous Tutorial:

WebAssembly - “Hello World”

Next Tutorial:

WebAssembly - Validation