0Pricing
WebAssembly (WASM) for High Performance Apps · Aula

Compilando C/C++ para WASM com Emscripten

Configure seu ambiente e compile seu primeiro programa em C/C++ em um módulo WebAssembly usando a cadeia de ferramentas do Emscripten.

Compilando C/C++ para WASM com Emscripten é uma aula grátis de WebAssembly (WASM) for High Performance Apps no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de WebAssembly (WASM) for High Performance Apps, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de WebAssembly (WASM) for High Performance Apps inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Meet Emscripten!

Welcome! Today, we'll learn to compile C/C++ code into WebAssembly (WASM). The key tool for this is Emscripten.

Emscripten is a complete toolchain that takes C/C++ code and compiles it into WASM, along with "glue" JavaScript code to help run it in a web browser or Node.js environment.

Bridging C/C++ to WASM

Why Emscripten? Browsers don't understand C/C++ directly. Emscripten acts as a powerful translator.

  • It compiles your C/C++ into the efficient WASM binary format.
  • It generates JavaScript "glue" code to load the WASM module and interact with it from JavaScript.
  • It handles C/C++ standard library functions (like printf) by providing JavaScript equivalents.

Setting Up Emscripten

Setting up Emscripten involves downloading the Emscripten SDK (emsdk). This SDK contains everything you need: the emcc compiler, Node.js, Python, and other utilities.

Typically, you'd run commands like:

  • git clone https://github.com/emscripten-core/emsdk.git
  • cd emsdk
  • ./emsdk install latest
  • ./emsdk activate latest

This prepares your environment to use emcc.

A Simple C Function

Let's start with a very simple C program. This program defines a function add and calls it from main. We'll compile this into WASM.

 #include <stdio.h>

// A simple C function to add two numbers
int add(int a, int b) {
    return a + b;
}

int main() {
    int result = add(5, 7);
    printf("Result of add(5, 7): %d\n", result);
    return 0;
}

The `emcc` Command

The heart of Emscripten is the emcc compiler. It's a drop-in replacement for gcc or clang that knows how to target WebAssembly.

You'll use emcc just like you would a standard C/C++ compiler, but with specific flags to control the WASM output.

Compiling Our C Code

Now, let's compile our add.c file. We'll tell emcc to output a JavaScript file that includes the compiled WASM module.

The command -o add.js tells Emscripten to create add.js (the glue code) and add.wasm (the binary module).

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

The Generated Files

After running the emcc command, you'll find two main files:

  • add.wasm: This is the actual WebAssembly binary module. It contains the compiled add function in a highly optimized, compact format.
  • add.js: This is the JavaScript "glue" code. It's responsible for loading add.wasm, setting up the WASM environment, and providing an interface to call functions exported from the WASM module.

What the Glue Does

The generated JavaScript glue code (e.g., add.js) is crucial. It handles:

  • Fetching and instantiating the .wasm file.
  • Setting up the WASM module's memory.
  • Converting JavaScript types to WASM types and vice-versa.
  • Providing an object (often named Module) to interact with the WASM module's exported functions.

This allows you to seamlessly call your C functions from JavaScript.

Optimizing Your WASM

Emscripten allows you to optimize your WASM output for size and speed. This is crucial for web performance.

You can use optimization flags similar to gcc:

  • -O0: No optimizations (fastest compile time).
  • -O1, -O2: Standard optimizations.
  • -O3: Aggressive optimizations (slower compile, smaller/faster code).
  • -Os: Optimize for size.
  • -Oz: Optimize aggressively for smallest size.

For production, emcc -O3 or emcc -Oz are common choices.

Quick Check: Emscripten

You've learned about Emscripten and its role. Let's test your understanding!

Recap: Compiling C/C++

In this lesson, you've taken your first step into WebAssembly with C/C++!

  • We introduced Emscripten as the toolchain for compiling C/C++ to WASM.
  • You saw how emcc compiles C code into .wasm and .js glue files.
  • We discussed the purpose of both the WASM binary and the JavaScript glue code.
  • You learned about basic optimization flags for emcc.

Next, we'll dive into how to load and run these WASM modules in a web browser using JavaScript!

Perguntas Frequentes

A aula “Compilando C/C++ para WASM com Emscripten” é grátis?

Sim — o texto completo de “Compilando C/C++ para WASM com Emscripten” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de WebAssembly (WASM) for High Performance Apps, atualize para CoddyKit PRO. O curso de WebAssembly (WASM) for High Performance Apps inclui 4 aulas no total.

O que vou aprender em “Compilando C/C++ para WASM com Emscripten”?

Configure seu ambiente e compile seu primeiro programa em C/C++ em um módulo WebAssembly usando a cadeia de ferramentas do Emscripten. Você pratica WebAssembly (WASM) for High Performance Apps com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar WebAssembly (WASM) for High Performance Apps?

Nenhuma experiência prévia é necessária. WebAssembly (WASM) for High Performance Apps no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Compilando C/C++ para WASM com Emscripten”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de WebAssembly (WASM) for High Performance Apps?

Sim. Cada aula de WebAssembly (WASM) for High Performance Apps inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Compilando C/C++ para WASM com Emscripten
  2. Carregando e executando WASM em JavaScript
  3. Troca básica de dados: tipos primitivos
  4. Chamando funções JavaScript a partir de C/C++
← Voltar para WebAssembly (WASM) for High Performance Apps