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

Emscripten ile C/C++'ı WASM'a Derleme

Ortamınızı kurun ve Emscripten araç zincirini kullanarak ilk C/C++ programınızı bir WebAssembly modülüne derleyin.

Emscripten ile C/C++'ı WASM'a Derleme, CoddyKit'te ücretsiz bir WebAssembly (WASM) for High Performance Apps dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, WebAssembly (WASM) for High Performance Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. WebAssembly (WASM) for High Performance Apps kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Meet Emscripten!

Hoş geldiniz! Bugün, C/C++ kodunu WebAssembly'ye (WASM) derlemeyi öğreneceğiz. Bunun için temel araç Emscripten'dir.

Emscripten; C/C++ kodunu alıp onu WASM'ye derleyen ve tarayıcıda ya da Node.js ortamında çalışmasına yardımcı olacak "yapıştırıcı" JavaScript koduyla birlikte sunan eksiksiz bir araç zinciridir.

Bridging C/C++ to WASM

Neden Emscripten? Tarayıcılar C/C++ dilini doğrudan anlamazlar. Emscripten güçlü bir çevirmen görevi görür.

  • C/C++ kodunuzu verimli WASM ikili formatına derler.
  • WASM modülünü yüklemek ve JavaScript üzerinden onunla etkileşim kurmak için JavaScript "yapıştırıcı" kodları oluşturur.
  • C/C++ standart kütüphane fonksiyonlarını (printf gibi) JavaScript karşılıklarını sağlayarak yönetir.

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!

Sıkça Sorulan Sorular

“Emscripten ile C/C++'ı WASM'a Derleme” dersi ücretsiz mi?

Evet — “Emscripten ile C/C++'ı WASM'a Derleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve WebAssembly (WASM) for High Performance Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. WebAssembly (WASM) for High Performance Apps kursu toplamda 4 dersten oluşur.

“Emscripten ile C/C++'ı WASM'a Derleme” dersinde ne öğreneceğim?

Ortamınızı kurun ve Emscripten araç zincirini kullanarak ilk C/C++ programınızı bir WebAssembly modülüne derleyin. WebAssembly (WASM) for High Performance Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

WebAssembly (WASM) for High Performance Apps öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te WebAssembly (WASM) for High Performance Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Emscripten ile C/C++'ı WASM'a Derleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu WebAssembly (WASM) for High Performance Apps dersinde kod yazıp çalıştırabilir miyim?

Evet. Her WebAssembly (WASM) for High Performance Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Emscripten ile C/C++'ı WASM'a Derleme
  2. WASM'ı JavaScript'te Yükleme ve Çalıştırma
  3. Temel Veri Alışverişi: İlkel Türler
  4. C/C++'tan JavaScript İşlevlerini Çağırma
← WebAssembly (WASM) for High Performance Apps Sayfasına Dön