Building Web Applications and WebAssembly (WASM)

Nyx provides a complete, dual-engine web stack: high-throughput asynchronous backend microservices (2.5M req/sec) and zero-overhead client-side WebAssembly (WASM32) execution with hardware-accelerated Canvas2D and WebGL/WebGPU rendering.

1. The Nyx WebAssembly Architecture

In the Nyx architecture, WebAssembly execution is decoupled into a deterministic computational core and a lightweight browser runtime bridge:

2. The WASM 32-bit Linear Memory Model

Nyx allocates a deterministic 32-bit linear memory space segmented into structured operational zones without unpredictable runtime garbage collection sweeps:

3. End-to-End WASM Compilation & Execution Pipeline

3-1. Compiling Core Logic to WASM via Clang / Emscripten

Nyx source code compiles down to optimized standard C or LLVM IR, which is compiled directly to standalone WebAssembly:

# Option A: Standalone WASM with Clang (Zero runtime dependencies)
clang --target=wasm32 -O3 -nostdlib -Wl,--no-entry -Wl,--export-all -o web-runtime/app.wasm logic.c

# Option B: Emscripten Toolchain (Complete POSIX & WebGL bindings)
emcc logic.c -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_nyx_main','_nyx_render_frame']" -o web-runtime/app.wasm

3-2. Initializing the Browser Host Bridge (nyx_web_runtime.js)

The browser runtime loads app.wasm, instantiates linear memory pages, and binds the presentation cycle to requestAnimationFrame for 120 FPS rendering:

// web-runtime/nyx_web_runtime.js — Zero-Dependency WASM Host
const importObject = {
    env: {
        memory: new WebAssembly.Memory({ initial: 16, maximum: 256 }),
        nyx_log: (ptr, len) => console.log(decodeNyxString(ptr, len)),
        nyx_time_now: () => performance.now()
    }
};

// Stream & instantiate WebAssembly module
WebAssembly.instantiateStreaming(fetch('app.wasm'), importObject)
    .then(obj => {
        const { nyx_main, nyx_render_frame } = obj.instance.exports;
        
        // 1. Initialize application
        nyx_main();

        // 2. 120 FPS Frame Synchronization Loop
        function frame(timestamp) {
            nyx_render_frame();
            requestAnimationFrame(frame);
        }
        requestAnimationFrame(frame);
    })
    .catch(err => {
        console.error("Failed to initialize Nyx WASM runtime:", err);
    });

4. Building High-Throughput Web Microservices (std.http)

For backend cloud servers, Nyx provides asynchronous routing with SSE real-time streaming:

import std.http
import std.json
import std.io

pub fn main() {
    let mut router = http.create_router()

    // 1. Health check route
    router.get("/health", |req| {
        http.Response.json("{\"status\":\"healthy\",\"uptime\":3600}")
    })

    // 2. REST Endpoint
    router.get("/api/tasks", |req| {
        let payload = "{\"status\":\"ok\",\"service\":\"Nyx Microservice v0.28.0\"}"
        http.Response.json(payload)
    })

    // 3. Real-Time Server-Sent Events (SSE) stream
    router.get("/api/stream", |req| {
        let mut res = http.Response.sse()
        res.send_event("telemetry", "Cluster mesh online: 0.00ms latency")
        res
    })

    std.io.println("🚀 Nyx Web Server listening on http://127.0.0.1:8080")
    http.listen_and_serve("127.0.0.1:8080", router)
}

5. Testing and Live Verification

You can run the backend server or inspect the live WebAssembly demo directly:

# Run backend microservice via Nyx CLI
nyx run src/main.nyx

# Verify WebAssembly runtime harness locally
python -m http.server 8000 --directory web-runtime

Experience the live interactive WebAssembly container:

🌐 Launch Nyx WebAssembly Runtime Demo →