WebAssembly - Dynamic Linking

Hello, aspiring programmers! I'm thrilled to guide you through the exciting world of WebAssembly and dynamic linking. As your friendly neighborhood computer science teacher, I'll do my best to make this journey fun and enlightening. Let's dive in!

Introduction to WebAssembly and Dynamic Linking

WebAssembly, or Wasm for short, is like a secret language that allows your web browser to run super-fast programs. Imagine it as a turbo boost for your websites! Now, dynamic linking is like giving these Wasm programs the ability to make new friends and share their toys while they're running. Cool, right?

What is Dynamic Linking?

Dynamic linking is a way for programs to connect with other code or libraries while they're running, instead of having everything packed together from the start. It's like being able to add new LEGO pieces to your creation even after you've started playing!

Working with Imports and Exports

In the world of WebAssembly, imports and exports are how our Wasm modules communicate with the outside world and with each other. Let's break this down with some fun examples!

Exports: Sharing Your Toys

When a Wasm module exports something, it's like saying, "Hey, I've got this cool function (or variable) that I want to share with others!" Let's see how this works:

(module
  (func $greet (param $name i32) (result i32)
    ;; Function body here
  )
  (export "greet" (func $greet))
)

In this example, we're creating a function called greet and then exporting it so others can use it. It's like putting your favorite toy in the middle of the playground for everyone to enjoy!

Imports: Borrowing from Friends

Imports are the opposite of exports. When a Wasm module imports something, it's saying, "I need to use this cool thing that someone else has!" Here's how it looks:

(module
  (import "console" "log" (func $log (param i32)))

  (func $sayHello
    i32.const 42
    call $log
  )
)

In this code, we're importing a log function from a console module. It's like asking to borrow your friend's super cool remote-controlled car because you don't have one yourself!

Practical Example: A Dynamic Calculator

Let's put everything together with a more complex example. We'll create a calculator where we can dynamically add new operations!

First, let's create our main Wasm module:

(module
  ;; Import our basic operations
  (import "math" "add" (func $add (param i32 i32) (result i32)))
  (import "math" "subtract" (func $subtract (param i32 i32) (result i32)))

  ;; Export our calculator function
  (func $calculate (export "calculate") (param $op i32) (param $a i32) (param $b i32) (result i32)
    (if (i32.eq (local.get $op) (i32.const 0))
      (then
        (call $add (local.get $a) (local.get $b))
      )
      (else
        (if (i32.eq (local.get $op) (i32.const 1))
          (then
            (call $subtract (local.get $a) (local.get $b))
          )
          (else
            (i32.const -1) ;; Error code for unknown operation
          )
        )
      )
    )
  )
)

Now, let's see how we can use this in JavaScript:

const mathModule = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};

WebAssembly.instantiate(wasmBytes, { math: mathModule }).then(({ instance }) => {
  const { calculate } = instance.exports;

  console.log(calculate(0, 5, 3)); // Should output 8 (5 + 3)
  console.log(calculate(1, 10, 4)); // Should output 6 (10 - 4)
});

In this example, we're creating a dynamic calculator. The Wasm module imports basic math operations and exports a calculate function. The JavaScript code provides the implementations for these operations and then uses the exported function.

Adding New Operations Dynamically

The beauty of dynamic linking is that we can add new operations on the fly! Let's say we want to add a multiplication operation:

mathModule.multiply = (a, b) => a * b;

// Now we can update our Wasm module to use this new operation
// (This would require recompiling the Wasm module with the new import)

Methods Table

Here's a table summarizing the key methods we've discussed:

Method	Description	Example
export	Shares a function or variable from a Wasm module	(export "greet" (func $greet))
import	Borrows a function or variable from outside the Wasm module	(import "console" "log" (func $log (param i32)))
instantiate	Creates a new instance of a Wasm module	WebAssembly.instantiate(wasmBytes, importObject)

Conclusion

WebAssembly and dynamic linking open up a world of possibilities for creating fast, flexible web applications. By understanding exports and imports, you can create modular, reusable code that can adapt and grow as your needs change.

Remember, learning to code is like learning a new language or instrument - it takes practice and patience. Don't be afraid to experiment and make mistakes. That's how we all learn and grow!

Keep coding, stay curious, and most importantly, have fun on your WebAssembly adventure!

Credits: Image by storyset