So what is Emscripten? Wikipedia provides the following definition:

We discussed source-to-source compilers (or transpilers) in the first chapter and used TypeScript as an example. Transpilers convert source code in one programming language to equivalent source code in another programming language. To elaborate on Emscripten running as a backend to the LLVM compiler, we need to provide some additional details about LLVM.

The official website for LLVM (https://llvm.org) defines the LLVM as a collection of modular and reusable compiler and toolchain technologies. There are several sub-projects that make up LLVM, but we'll be focusing on the two that Emscripten utilizes: Clang and the LLVM Core libraries. To understand how these pieces fit together, let's review the design of a three-stage compiler:

The process is relatively straightforward: three separate stages or ends handle the compilation process. This design allows for different frontends and backends for various programming languages and target architectures and completely decouples the machine code from the source code by using an intermediate representation. Now let's associate each compilation stage with a component of the toolchain we'll use to generate WebAssembly:

Clang is used to compile C/C++ down to LLVM's Intermediate Representation (IR), which Emscripten compiles to a Wasm module (binary format). The two diagrams also demonstrate the relationship between Wasm and machine code. You can think of WebAssembly as a CPU in the browser, with Wasm being the machine code on which it runs.