Wasm: Emscripten vs WASI-SDK: Difference between revisions

Latest revision as of 11:44, 26 November 2025

WASI-SDK dan Emscripten adalah toolchain untuk compile C/C++ menjadi WebAssembly, tetapi targetnya berbeda:

Emscripten untuk browser (web platform)
WASI-SDK untuk environment WASI (non-web)

Emscripten

Cara install
*note: saya pakai Arch Linux

sudo pacman -S emscripten
export PATH="/usr/lib/emscripten/":$PATH

Sekarang buat code C++ simple

// hello.cpp

#include <stdio.h>

int main() {
    printf("Hello World\n");
    return 0;
}

lalu compile dengan perintah emcc

emcc hello.cpp -o hello.html

Maka secara otomatis emcc akan menghasilkan tiga file yaitu:

hello.html
hello.js
hello.wasm

WASI-SDK

ada beberapa cara install WASI-SDK:

build manual: tidak disarankan, butuh komputasi berat
download tar.gz: download dari https://github.com/WebAssembly/wasi-sdk/releases/tag/wasi-sdk-29, ekstrak ke /opt atau ke tempat lain
The Arch Linux Way: paru -S wasi-sdk-bin

saya pakai cara yang ketiga

Setalah itu install wasmtime, ini adalah runtime untuk menjalankan file .wasm
Ada dua cara:

cara official: curl https://wasmtime.dev/install.sh -sSf | bash
The Arch Linux Way: sudo pacman -S wasmtime

Cara pakai
Masih menggunakan code yang sama

// hello.cpp

#include <stdio.h>

int main() {
    printf("Hello World\n");
    return 0;
}

Lalu setelah itu:

export WASI_SDK_PATH=/opt/wasi-sdk

$WASI_SDK_PATH/bin/wasm32-wasi-clang++ \
  --sysroot=$WASI_SDK_PATH/share/wasi-sysroot \
  hello.cpp \
  -o hello.wasm

wasmtime hello.wasm

@@ Line 1: / Line 1: @@
 WASI-SDK dan Emscripten adalah toolchain untuk compile C/C++ menjadi WebAssembly, tetapi targetnya berbeda:
-* WASI-SDK untuk environment WASI (non-web)
+* <b>Emscripten</b> untuk browser (web platform)
-* Emscripten untuk browser (web platform).
+* <b>WASI-SDK</b> untuk environment WASI (non-web)
+== Emscripten ==
+Cara install<br>
+<i>*note: saya pakai Arch Linux</i>
+<syntaxhighlight lang=bash>
+sudo pacman -S emscripten
+export PATH="/usr/lib/emscripten/":$PATH
+</syntaxhighlight>
+Sekarang buat code C++ simple
+<syntaxhighlight lang=cpp>
+// hello.cpp
+#include <stdio.h>
+int main() {
+    printf("Hello World\n");
+    return 0;
+}
+</syntaxhighlight>
+lalu compile dengan perintah <code>emcc</code>
+<syntaxhighlight lang=bash>
+emcc hello.cpp -o hello.html
+</syntaxhighlight>
+Maka secara otomatis <code>emcc</code> akan menghasilkan tiga file yaitu:
+* hello.html
+* hello.js
+* hello.wasm
+== WASI-SDK ==
+ada beberapa cara install WASI-SDK:
+* build manual: tidak disarankan, butuh komputasi berat
+* download tar.gz: download dari https://github.com/WebAssembly/wasi-sdk/releases/tag/wasi-sdk-29, ekstrak ke <code>/opt</code> atau ke tempat lain
+* The Arch Linux Way: <code>paru -S wasi-sdk-bin</code>
+<i>saya pakai cara yang ketiga</i>
+Setalah itu install <i>wasmtime</i>, ini adalah runtime untuk menjalankan file <code>.wasm</code> <br>
+Ada dua cara:
+* cara official: <code>curl https://wasmtime.dev/install.sh -sSf | bash</code>
+* The Arch Linux Way: <code>sudo pacman -S wasmtime</code>
+Cara pakai<br>
+Masih menggunakan code yang sama
+<syntaxhighlight lang=cpp>
+// hello.cpp
+#include <stdio.h>
+int main() {
+    printf("Hello World\n");
+    return 0;
+}
+</syntaxhighlight>
+Lalu setelah itu:
+<syntaxhighlight lang=bash>
+export WASI_SDK_PATH=/opt/wasi-sdk
+$WASI_SDK_PATH/bin/wasm32-wasi-clang++ \
+  --sysroot=$WASI_SDK_PATH/share/wasi-sysroot \
+  hello.cpp \
+  -o hello.wasm
+wasmtime hello.wasm
+</syntaxhighlight>