WebAssembly with C: Emscripten Tutorial from Hello World to Instantiation

In Emscripten's compilation approach, memory is represented using a single JavaScript typed array (ArrayBuffer). Load operations in LLVM IR become reads from this array, and store operations become writes to it. This creates an almost direct mapping between LLVM IR memory operations and JavaScript array accesses. For integer operations, JavaScript's lack of native integer types requires using bitwise OR with zero (x | 0) to coerce values into 32-bit integers, ensuring correct behavior equivalent to C/C++ integer operations.

WebAssembly provides shared memory (a heap) that both WebAssembly and JavaScript can access. This shared memory allows complex data structures to be created and manipulated by both sides. WebAssembly uses 'data' statements to initialize memory with values, written when the module is instantiated. WebAssembly accesses shared memory by pushing a memory address onto the stack, then pushing the value to store, and using a store instruction. WebAssembly can store strings in shared memory using null-terminated byte sequences, with JavaScript reading the memory buffer and decoding bytes to JavaScript strings (UTF-16 encoded). WebAssembly supports global variables that both sides can access, and tables for function pointers enabling dynamic function binding.

For C/C++ WebAssembly: disable exceptions and RTTI if unused, be aware that templates duplicate code and virtual calls inhibit dead code elimination. Standard library code (like iostream) is larger than simple C code. Emscripten provides -O3 (speed), -Os (size), and -Oz (more size) flags, with automatic wasm-opt integration. Emscripten also enables low-memory-unused optimization and can minify import names. For JavaScript, Closure Compiler reduces size by 2/3 to 1/2.

WebAssembly memory is a JavaScript array buffer enabling shared access between WebAssembly and JavaScript. Both can access the same bytes, with WebAssembly using array indexes and JavaScript manipulating bytes directly. This shared memory enables efficient value passing without memory addresses. The array bounds provide isolation, preventing WebAssembly from accessing other JavaScript objects like the window global. The engine performs bounds checking on every load/store, throwing exceptions on out-of-bounds access. Tables provide secure function pointers by storing indexes (not addresses) in arrays outside WebAssembly's memory, preventing malicious code from manipulating memory addresses.

WebAssembly modules can export functions that return typed arrays, which map directly to WebAssembly memory without copying. JavaScript code calls these functions through the generated glue code (hello.js), passing parameters and receiving typed array references. This enables efficient data sharing between WebAssembly and JavaScript without memory duplication.

This extensive section addresses the critical challenges of integrating desktop applications with browser environments. File system access is restricted; Emscripten provides MEMFS (in-memory) and IDBFS (IndexedDB for persistence) with explicit synchronization requirements. Network communication uses Qt's QNetworkAccessManager for HTTP requests and Qt WebSockets for bidirectional real-time communication, with HTTPS requirements for websockets. Cross-Origin Resource Sharing (CORS) headers must be set for resource access. Multi-threading requires pthreads emulation via Emscripten, but web workers offer a more practical approach for CPU-bound tasks. SharedArrayBuffer enables memory sharing between workers but requires secure context (HTTPS), COOP headers, and COI headers. Memory allocation is challenging, particularly with Safari's behavior of not accepting memory hints and not freeing memory on page refresh.

WebAssembly (WASM) is a low-level stack-based technology endorsed by the W3C that enables secure, fast execution of compiled binary code directly in web browsers, supporting languages beyond JavaScript; Emscripten serves as an open-source C/C++ to WebAssembly compiler toolchain that translates legacy code into portable web modules, generating both .wasm binaries and JavaScript wrappers that can be loaded via the streaming interface for efficient background compilation, with advanced features including multi-threading, SIMD vectorization, and garbage collection support being actively developed.

WebAssembly can communicate with servers using the Fetch API through emscripten_fetch(). Implementation involves including emscripten_fetch.h, creating fetch attributes with method, URL, and data, and handling responses in callbacks. This enables sending data to backend services like logging messages. Threading support uses pthreads with flags -s USE_PTHREADS and -s THREAD_POOL_SIZE. Threads require shared array buffer support enabled in the browser. Use pthread_create() to spawn threads and mutexes for thread-safe shared data access. Threads can run background tasks while the main thread handles user interactions, improving application responsiveness.

This video provides a beginner-friendly introduction to creating and managing threads in C on Linux using the pthreads library. The key concepts covered include: (1) including pthread.h header file and adding -pthread link option to gcc command, (2) defining a thread function that will execute in parallel, (3) declaring pthread_t variables to store thread information, (4) using pthread_create() to create threads with parameters for thread attributes, entry function, and arguments, (5) using pthread_join() to wait for thread completion and prevent premature process termination, (6) creating multiple threads to demonstrate parallel execution, and (7) implementing error checking for thread creation functions. The video demonstrates how threads can execute concurrently by using sleep() to show that multiple threads can reach the same code point simultaneously.

The WebAssembly threads proposal introduces primitives for parallel computation, including shared linear memory between threads and atomic instructions. This enables multiple threads to work on the same data in parallel, allowing performance to scale with the number of threads. The proposal builds on existing Web Worker capabilities but adds shared memory access, enabling near-native speeds for multi-threaded applications. Each WebAssembly thread runs in a Web Worker but shares memory through a shared array buffer. Atomic operations allow synchronization between threads, with mutex implementations that retry on worker threads (since blocking the main thread isn't possible). This is particularly useful for applications like image processing and scientific computations that benefit from parallel execution. The proposal is stable and shipped in Chrome 74, with Firefox Nightly available behind a flag.

Multiple languages compile to WebAssembly: C, C++, Rust, Go, .NET (C#/F#), AssemblyScript (TypeScript variant), and the WebAssembly text format. Webpack is the primary build tool for integrating WebAssembly into JavaScript projects. Front-end frameworks like React, Vue, or Angular can be combined with WebAssembly. A practical example demonstrates a React application that fetches markdown from GitHub, processes it through a Go WebAssembly module, and displays the results. The Go module is compiled through webpack's Go extension, exposing functions to JavaScript. This integration requires handling compilation, type definitions, and runtime communication between JavaScript and WebAssembly.

Webpack can be used to bundle WebAssembly modules for use in JavaScript applications. The process involves installing the wasm-pack tool, which handles the compilation and bundling of WebAssembly modules. Webpack can load WebAssembly modules asynchronously using dynamic imports. For Electron applications, the bundling process may be simplified since the modules run in a Node.js environment. Proper configuration of webpack and wasm-pack is necessary to ensure WebAssembly modules are correctly bundled and loaded.

ES Module integration for WebAssembly enables dead code elimination and module splitting, essential for reducing bundle sizes. Currently, WebAssembly libraries are bundled and uploaded to package managers, making unused code removal impossible. The goal is to enable bundlers to analyze WebAssembly modules, remove unused portions, and combine multiple packages into optimized bundles. This would provide the same developer experience and performance benefits that JavaScript bundlers provide today.

Webpack 4 implements a generic module architecture replacing the previous JavaScript-only approach. This enables WebAssembly as first-class citizens with scope hoisting and code splitting capabilities. The architecture also supports HTML and CSS modules as entry points with lazy loading. Combined with dropping Node.js v4 support and utilizing modern data structures like Maps and Sets, this enables up to 50% performance improvements and opens the door for compiling languages like Rust and C# to run in browsers at near-native speeds.

This tutorial demonstrates how to create a development environment that compiles Rust code to WebAssembly and integrates it with a Vite-powered frontend framework (Svelte with TypeScript). The process involves installing wasm-pack to compile Rust code, initializing a wasm-pack project, building the WebAssembly binary, and then integrating it with Vite using vite-plugin-wasm and vite-plugin-top-level-await to enable seamless JavaScript imports of WebAssembly functions.

WASI (WebAssembly System Interface) is a standardized system interface that enables WebAssembly modules to run outside the browser in a portable and secure manner, allowing the same compiled WebAssembly module to execute across different programming languages (like Python, Rust, Go) and operating systems while maintaining high-level type safety and providing lightweight sandboxing through capability-based security, where modules receive file descriptors with attached permissions rather than direct access to system resources.

This video introduces the WebAssembly System Interface (WASI) as a standard enabling WebAssembly modules to interact with system resources like the filesystem, console, and command-line arguments—capabilities traditionally limited in browser-based WebAssembly. The tutorial demonstrates building Rust command-line interface (CLI) applications and then compiling them to WebAssembly using WASI. Viewers learn to create a basic Rust CLI with `cargo new`, execute it natively, and then reconfigure the build target for WASI. The process includes compiling the Rust code into a WebAssembly module (.wasm) and executing it using WASI-compatible runtimes such as Wasmtime and Wasmer. Tools like `cargo wasi` are introduced to streamline development. The video shows how to read command-line arguments, write output to the console, and create or modify files using WASI’s filesystem APIs. It also covers generating standalone executable binaries from WebAssembly modules using Wasmer. Filesystem access is framed within sandboxed environments, highlighting WASI’s security model. The tutorial compares the size and performance of native Rust binaries versus their WebAssembly counterparts. Use cases for WASI are explored, including portable CLI tools, serverless functions, and secure plugin systems. The video emphasizes WASI’s potential to enable WebAssembly as a universal runtime beyond the browser, allowing developers to write once and deploy across platforms with consistent security boundaries.

WebAssembly System Interface (WASI) is a standardized system interface that enables WebAssembly programs to interact with underlying system resources like file systems, clocks, and random number generators, making them more powerful and versatile. Go 1.21 introduced support for WASI Preview 1 through a new compiler extension called 'wasm port', allowing Go programs to be compiled into WebAssembly binaries that can run on various WASI runtimes such as Wasmtime, Wazero, and Node.js. While WASI P1 provides basic system interaction capabilities, it currently lacks direct network connection support, which can be addressed through third-party libraries like wasmtime-go. Future developments include WASI Preview 2 for improved stability, WASI modules support in Docker and Kubernetes for serverless and edge deployments, and Go Wasm export for seamless integration of Go functions with WebAssembly.

WASI provides a standardized API for WebAssembly programs to access OS resources (files, network, time) with security built-in. Programs must explicitly grant capabilities for each resource type. This enables standalone WebAssembly execution outside browsers. The vision is compiling code once to WebAssembly and running it anywhere with a WebAssembly engine, fulfilling the dream of platform-independent code execution.

WASI (WebAssembly System Interface) enables running WebAssembly code outside traditional web browsers by providing a standardized runtime interface that grants access to system-level capabilities such as file systems and networking; with .NET 8's experimental WASI support, developers can compile and execute C# applications as standalone WebAssembly modules using tools like Wasmtime, allowing .NET code to run anywhere—including servers, desktops, and embedded systems—without requiring a full .NET runtime environment.