divyam.dev/content/posts/hello-webassembly-c.md

title	date	draft	tags
Hello WebAssembly: Getting Started with C/C++	2023-11-21T06:40:48Z	false	WebAssembly C C++ Emscripten

If you've spent any time working on performance-critical web applications, you've probably hit the performance ceiling of JavaScript. I ran into this heavily during my Google Summer of Code project working on Chromium's audio processing pipeline. We needed near-native speeds to process audio without stuttering, and standard JavaScript just wasn't going to cut it.

Enter WebAssembly (Wasm).

WebAssembly is essentially a low-level binary format that runs directly in the browser at near-native speeds. It lets us write code in systems languages like C, C++, or Rust, compile it, and run it right alongside our JavaScript.

Today, I want to walk you through the absolute basics: taking a simple C program and running it in your browser.

The Magic Tool: Emscripten

To bridge the gap between C/C++ and the web, we need a toolchain. The undisputed heavyweight champion here is Emscripten. It takes your C/C++ code, compiles it into a .wasm binary, and even generates the JavaScript "glue" code needed to load it into the browser.

Let's get it installed. Open your terminal and run:

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

# Fetch and install the latest tools
./emsdk install latest

# Make them active
./emsdk activate latest

# Load the environment variables (you'll need to do this for new terminal sessions)
source ./emsdk_env.sh

Writing some C Code

Let's not overcomplicate things for our first run. Create a file called hello.c:

#include <stdio.h>

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

It doesn't get much simpler than that. But how do we get this to run in Chrome or Firefox?

Compiling to Wasm

With our Emscripten environment active, we can use emcc (the Emscripten Compiler Frontend). In the same directory as your hello.c file, run:

emcc hello.c -o hello.html

Here is what's happening under the hood:

• emcc is our compiler.
• -o hello.html tells Emscripten that we don't just want the raw binary; we want an HTML file we can actually open.

If you look at your directory now, Emscripten generated three files: hello.wasm (the actual compiled binary), hello.js (the JavaScript glue code to load the binary), and hello.html (a basic webpage to display the output).

Running the Code

Because browsers have strict security policies around loading local files via JavaScript, you can't just double-click hello.html. We need to serve it over a local web server.

Python makes this super easy:

python3 -m http.server

Now, open your browser and head to http://localhost:8000/hello.html. If everything went according to plan, you'll see a terminal-like console on the webpage printing: Hello, WebAssembly!.

Wrapping up

This is obviously just the tip of the iceberg. Printing a string is fun, but the real power of WebAssembly comes from porting massive C++ codebases (like audio engines, physics simulators, or databases) directly into the browser.

In future posts, I'll dive into more realistic use cases—like how I used Wasm and WebWorkers to build lock-free ring buffers for Chromium, passing complex memory structures back and forth between JavaScript and C++.

Until then, happy hacking!