wasm-edge-computing-expert · diff
git:20260813.c9ab97d to git:20260813.0bbd192
54 added, 102 removed. Audit A to A.
---
name: wasm-edge-computing-expert
description: "Expert guide for WebAssembly (WASM) and Edge Computing. Covers WASI preview 2, Spin/Fermyon, Cloudflare Workers WASM, and high-performance browser computing / Panduan ahli untuk WebAssembly (WASM) dan Edge Computing. Mencakup WASI preview 2, Spin/Fermyon, Cloudflare Workers WASM, dan komputasi performa tinggi di browser."
- author: "Roedy Rustam"
+ author: vibes-plug-swarm
---
- # WebAssembly & Edge Computing Expert
+ # WASM & Edge Computing Expert
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
---
<a name="english"></a>
## English
### Description
- Expert guide for WebAssembly (WASM) and Edge Computing. Covers WASI (WebAssembly System Interface) Preview 2, Spin/Fermyon framework for serverless WASM, Cloudflare Workers WASM integration, and offloading heavy computational tasks to the browser. Targets Rust and Go compilation to WASM for high-performance execution.
+ A specialized guide for writing, compiling, and deploying WebAssembly (WASM) modules both on the Edge and in the browser. Covers the new WebAssembly System Interface (WASI) Preview 2, serverless execution environments (Spin, Cloudflare Workers, Fastly Compute), and bidirectional JavaScript-to-WASM interop.
### Trigger Conditions
- Activate this skill when the user is:
- - Porting heavy computational logic (image processing, cryptography, physics) to the browser.
- - Deploying ultra-fast, cold-start-free serverless functions at the edge (Cloudflare Workers, Fastly Compute).
- - Building portable, language-agnostic microservices using WASI (WebAssembly System Interface).
- - Writing Rust or Go code intended to run within a JavaScript/TypeScript environment.
-
- ---
+ - When porting heavy computational tasks (image processing, video encoding, cryptography) from JavaScript to Rust/Go via WASM.
+ - When deploying ultra-fast, cold-start-free serverless functions on Cloudflare Workers or Fermyon Spin.
+ - When the user asks about "WASI", "WebAssembly", or "Edge computing performance".
+ - When bridging legacy C/C++ libraries to run in the browser using Emscripten.
- ### Core Concepts
+ ### Core Architectural Guidelines
- #### 1. Architecture Overview: WASM at the Edge vs Browser
- WASM is a binary instruction format. In the browser, it runs alongside JavaScript to accelerate compute-heavy tasks. At the edge (serverless), it provides a secure, lightweight runtime with near-zero cold starts compared to traditional Docker containers.
+ #### 1. Language Choice & Toolchain
+ - **Rust (Recommended)**: Use `wasm-pack` for browser modules and `cargo component` for WASI Preview 2. Rust offers the smallest binary sizes and no garbage collector overhead.
+ - **Go**: Go 1.21+ has native WASI support (`GOOS=wasip1 GOARCH=wasm`), but binaries are larger due to the included runtime. Use TinyGo for smaller binaries.
+ - **AssemblyScript**: Use when the team only knows TypeScript, though performance is slightly less than Rust.
+ #### 2. Browser Integration (`wasm-bindgen`)
+ When writing Rust for the browser, minimize crossings between JS and WASM, as serialization is expensive.
```rust
- // Rust — Example: A simple WASM function (lib.rs)
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
- pub fn heavy_computation(n: i32) -> i32 {
- (1..=n).fold(0, |acc, x| acc + x)
+ pub fn compute_heavy_task(input: &[u8]) -> Vec<u8> {
+ // Process data entirely in WASM before returning
+ input.iter().map(|&b| b.wrapping_add(1)).collect()
}
```
- #### 2. Selection Guide: Where to run WASM?
-
- | Environment | Use Case | Recommended Tooling |
- |---|---|---|
- | **Browser (Client-side)** | Video/audio processing, 3D games, crypto | `wasm-pack` (Rust), Emscripten (C/C++) |
- | **Edge Network** | Global low-latency APIs, A/B testing, auth | Cloudflare Workers, Fastly Compute |
- | **Serverless/Cloud** | Microservices, plugin systems | Fermyon Spin, Wasmtime, Wasmer |
-
- **Recommendation:** Use Rust with `wasm-pack` for browser integration. For edge APIs, use Fermyon Spin or Cloudflare Workers for the best developer experience.
-
- ---
-
- ### WASI Preview 2 & The Component Model
-
- WASI (WebAssembly System Interface) Preview 2 introduces the Component Model, allowing WASM modules written in different languages to communicate seamlessly without glue code.
-
- ```toml
- # Example: spin.toml for a Fermyon Spin application
- spin_manifest_version = 2
-
- [application]
- name = "hello-wasm"
- version = "0.1.0"
- authors = ["Admin"]
-
- [[trigger.http]]
- route = "/..."
- component = "hello-wasm"
-
- [component.hello-wasm]
- source = "target/wasm32-wasi/release/hello_wasm.wasm"
- ```
-
- ---
-
- ### Best Practices
-
- 1. **Minimize JS <-> WASM Boundary Crossing:** Crossing the JavaScript and WebAssembly boundary carries overhead. Batch your data or pass memory pointers rather than calling simple WASM functions in a tight JS loop.
- 2. **Optimize Binary Size:** Use `wasm-opt` (from Binaryen) and configure your Rust `Cargo.toml` with `opt-level = "z"` and `lto = true` to produce the smallest possible WASM binary.
- 3. **Use WASI for Portability:** For backend applications, build against WASI rather than standard targets. This ensures your module can run anywhere—from edge networks to local Wasmtime runtimes—without OS-specific dependencies.
- 4. **Leverage SIMD:** Enable WebAssembly SIMD (Single Instruction, Multiple Data) if your target environments support it (most modern browsers and edge runtimes do) for massive parallel processing speedups.
-
- ---
-
- ### Common Pitfalls to Avoid
-
- | Anti-Pattern | Problem | Correct Approach |
- |---|---|---|
- | **String copying across boundary** | High memory allocation overhead | Pass memory offsets/pointers and decode strings via `TextDecoder` in JS. |
- | **Ignoring dead code elimination** | Massive `.wasm` files affecting load times | Use `wasm-snip`, `wasm-opt`, and enable Link Time Optimization (LTO). |
- | **Assuming multi-threading is default** | WASM runs single-threaded by default | Use Web Workers in the browser and enable SharedArrayBuffer for WASM threads. |
-
- ---
-
- ### Integration with Other Skills (MANDATORY)
-
- This skill works best when combined with:
- - `rust-programming-expert` — Rust is the premier language for compiling to WASM. Combine these skills for memory-safe edge logic.
- - `cloud-hosting-expert` — For deploying WASM modules to Cloudflare Workers or Vercel Edge.
- - `go-programming-expert` — For compiling Go (or TinyGo) backend services to WASM/WASI formats.
+ #### 3. Edge & WASI Preview 2
+ WASI Preview 2 introduces the Component Model, allowing WASM modules to securely access system resources (HTTP, Filesystem) without being tied to a specific language.
+ - Deploying to Cloudflare Workers:
+ ```toml
+ # wrangler.toml
+ main = "./build/worker.js"
+ [wasm_modules]
+ MODULE = "./build/module.wasm"
+ ```
+ - Deploying to Fermyon Spin: Use the `spin` CLI to build microservices entirely in WASM that start in under 1 millisecond.
- ### Referenced By Orchestrators (MANDATORY)
+ #### 4. Shared Memory & Atomics
+ For multi-threaded browser WASM, use `SharedArrayBuffer` and Web Workers. Ensure your server sends the correct headers:
+ - `Cross-Origin-Opener-Policy: same-origin`
+ - `Cross-Origin-Embedder-Policy: require-corp`
- This skill should be referenced by the following orchestrators:
- - `brainstorming` — Add to the "Backend & Infrastructure" and "Frontend & UI" rows.
- - `zero-to-prod-orchestrator` — Phase 3 (Architecture) and Phase 6 (Performance Optimization).
- - `production-ready-hardener` — Phase 5 (Performance & Core Web Vitals) for checking WASM bundle sizes.
+ ## Orchestration & Integration
+ - Enhances `api-gateway-proxy-expert` for running custom logic at the edge (Cloudflare/Kong).
+ - Integrates with `rust-programming-expert` or `go-programming-expert` for module compilation.
+ - Pairs with `performance-web-vitals` to offload main-thread blocking tasks.
---
<a name="bahasa-indonesia"></a>
## Bahasa Indonesia
### Deskripsi
- Panduan ahli untuk WebAssembly (WASM) dan Edge Computing. Mencakup WASI (WebAssembly System Interface) Preview 2, framework Spin/Fermyon untuk serverless WASM, integrasi Cloudflare Workers WASM, dan pemindahan beban komputasi berat ke browser. Menargetkan kompilasi Rust dan Go ke WASM untuk eksekusi berkinerja tinggi.
+ Panduan khusus untuk menulis, mengompilasi, dan mendeploy modul WebAssembly (WASM) baik di Edge maupun di browser. Mencakup WebAssembly System Interface (WASI) Preview 2, lingkungan serverless (Spin, Cloudflare Workers), dan interoperabilitas JavaScript-ke-WASM dua arah.
### Kondisi Pemicu
- Aktifkan skill ini ketika pengguna sedang:
- - Memindahkan logika komputasi berat (pemrosesan gambar, kriptografi, fisika) ke browser.
- - Mendeploy fungsi serverless yang super cepat dan tanpa *cold-start* di edge (Cloudflare Workers).
- - Membangun microservices yang portabel dan *language-agnostic* menggunakan WASI.
- - Menulis kode Rust atau Go yang dimaksudkan untuk berjalan di dalam lingkungan JavaScript/TypeScript.
+ - Saat memindahkan tugas komputasi berat (pemrosesan gambar, kriptografi) dari JavaScript ke Rust/Go melalui WASM.
+ - Saat mendeploy fungsi serverless ultra-cepat tanpa *cold start* di Cloudflare Workers atau Fermyon Spin.
+ - Saat menjembatani library C/C++ lama untuk dijalankan di browser menggunakan Emscripten.
- ### Panduan Singkat
+ ### Panduan Arsitektur Inti
- - **Minimalisir Perpindahan JS <-> WASM:** Melintasi batas antara JS dan WASM memiliki *overhead*. Proses data dalam batch daripada memanggil fungsi WASM dalam *loop* JS yang ketat.
- - **Optimasi Ukuran Binary:** Gunakan `wasm-opt` dan atur profil rilis Rust (`opt-level = "z"`, `lto = true`) untuk meminimalkan ukuran file `.wasm` agar tidak memperlambat *page load*.
- - **Gunakan WASI di Backend:** Kompilasi dengan target WASI agar modul Anda portabel dan dapat berjalan di berbagai *runtime* (Wasmtime, Wasmer, Cloudflare) tanpa terikat pada sistem operasi tertentu.
- - **Waspadai Alokasi Memori:** Hindari menyalin string atau array besar secara berulang melintasi batas WASM; gunakan *memory pointer* dan `SharedArrayBuffer` jika diperlukan.
+ #### 1. Pilihan Bahasa & Toolchain
+ - **Rust (Direkomendasikan)**: Menghasilkan ukuran biner terkecil. Gunakan `wasm-pack` untuk web dan `cargo component` untuk WASI.
+ - **Go**: Gunakan TinyGo untuk ukuran modul yang lebih kecil, atau Go native `GOOS=wasip1` untuk dukungan WASI penuh (namun biner akan lebih besar).
+ - **AssemblyScript**: Jika tim hanya menguasai TypeScript.
- ### Integrasi dengan Skill Lain (WAJIB)
+ #### 2. Integrasi Browser
+ Minimalkan pertukaran data (crossing) antara JavaScript dan WASM karena biaya serialisasinya tinggi. Kirim array besar (seperti `Uint8Array`) sekali, proses seluruhnya di WASM, lalu kembalikan hasilnya.
- Skill ini bekerja paling baik dikombinasikan dengan:
- - `rust-programming-expert` — Rust adalah bahasa utama untuk WASM. Kombinasikan untuk logika edge yang aman dari kebocoran memori.
- - `cloud-hosting-expert` — Untuk mendeploy modul WASM ke jaringan edge seperti Cloudflare Workers.
- - `go-programming-expert` — Untuk mengkompilasi layanan backend Go (atau TinyGo) ke format WASM/WASI.
+ #### 3. Edge & WASI Preview 2 (Component Model)
+ WASI Preview 2 memungkinkan modul WASM mengakses resource sistem (HTTP, File) secara aman. Anda dapat mendeploy service WASM murni ke infrastruktur edge seperti Fermyon Spin atau Fastly dengan waktu mulai (startup time) di bawah 1 milidetik, jauh lebih cepat daripada container Docker tradisional.
- ### Direferensikan oleh Orchestrator (WAJIB)
+ #### 4. Shared Memory & Web Workers
+ Untuk performa multi-threading sejati di browser menggunakan WASM, gunakan `SharedArrayBuffer`. Pastikan server Anda mengirimkan header keamanan COOP dan COEP yang diwajibkan oleh browser modern.
- Skill ini harus direferensikan oleh orchestrator berikut:
- - `brainstorming` — Tambahkan ke baris "Backend & Infrastructure" dan "Frontend & UI".
- - `zero-to-prod-orchestrator` — Fase 3 (Arsitektur) dan Fase 6 (Optimasi Performa).
- - `production-ready-hardener` — Fase 5 (Performa & CWV) untuk memeriksa ukuran bundle WASM.
+ ## Integrasi Orkestrasi
+ - Memperkuat `api-gateway-proxy-expert` untuk logika kustom di edge.
+ - Terintegrasi dengan `rust-programming-expert` untuk kompilasi modul.
+ - Melengkapi `performance-web-vitals` dengan memindahkan komputasi berat dari *main thread* JavaScript.