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

Criando uma aplicação WASM completa

Aplique todo o conhecimento adquirido para projetar e criar uma aplicação sofisticada e de alto desempenho baseada em WebAssembly.

Criando uma aplicação WASM completa é uma aula grátis de WebAssembly (WASM) for High Performance Apps no CoddyKit. Esta é a aula 3 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.

Building a Complete WASM App

You've learned the building blocks of WebAssembly. Now, let's bring it all together! A 'complete' WASM application integrates high-performance WASM code with a responsive JavaScript host, managing data, concurrency, and error handling effectively.

We'll explore how to architect such an application by applying what you've learned.

WASM App Blueprint

A typical high-performance WASM application involves several layers. The JavaScript host handles UI and high-level logic, while WASM modules perform intensive computation. For complex tasks, Web Workers can offload WASM execution to separate threads, preventing UI freezes. This layered approach ensures both speed and responsiveness.

  • JavaScript Host: UI, API calls, orchestrates WASM.
  • WASM Module(s): Core high-performance logic.
  • Web Workers: Background execution for non-blocking operations.
  • Shared Memory: Efficient data exchange between threads.

Setting Up Our Rust-WASM Project

For building a complete application, our Rust WASM project needs to be set up to compile efficiently and interact smoothly with JavaScript. We use wasm-pack to build our Rust code into a WASM module and wasm-bindgen to generate the necessary JavaScript glue code for seamless interoperability.

High-Performance Image Logic

Let's consider a simple image processing task: converting an image to grayscale. The computationally intensive part will live in our Rust WASM module. We'll write a function that takes a pointer to image data in WASM's linear memory and processes it directly.

Try running this simplified Rust example:

pub extern "C" fn apply_grayscale(ptr: *mut u8, len: usize) {
    let slice = unsafe {
        assert!(!ptr.is_null());
        std::slice::from_raw_parts_mut(ptr, len)
    };

    // Image data is typically RGBA, 4 bytes per pixel
    for i in (0..len).step_by(4) {
        let r = slice[i] as u32;
        let g = slice[i + 1] as u32;
        let b = slice[i + 2] as u32;
        let gray = ((r + g + b) / 3) as u8;

        slice[i] = gray;
        slice[i + 1] = gray;
        slice[i + 2] = gray;
        // Alpha channel (slice[i+3]) remains unchanged
    }
}

// A minimal main function for runnable context.
// In WASM, `apply_grayscale` would be directly called by JS.
fn main() {
    let mut image_data = [
        255, 0, 0, 255,   // Red pixel
        0, 255, 0, 255    // Green pixel
    ];
    let ptr = image_data.as_mut_ptr();
    let len = image_data.len();
    apply_grayscale(ptr, len);
    println!("Processed first pixel R: {} G: {} B: {}", image_data[0], image_data[1], image_data[2]);
}

JS to WASM: Image Data Input

To pass our image data (e.g., from a canvas ImageData) to the WASM module, JavaScript needs to write it into WASM's linear memory. This involves getting a pointer from WASM to a memory region, then copying the Uint8ClampedArray into it. wasm-bindgen often simplifies this, but direct memory access is key.

Try running this example:

// Helper to simulate WASM memory and function call
const wasmMemory = new WebAssembly.Memory({ initial: 1 }); // 1 page = 64KB
const wasmByteView = new Uint8ClampedArray(wasmMemory.buffer);

// Simulate the WASM function (simplified grayscale logic)
const mockApplyGrayscale = (ptr, len) => {
  for (let i = ptr; i < ptr + len; i += 4) {
    const r = wasmByteView[i];
    const g = wasmByteView[i + 1];
    const b = wasmByteView[i + 2];
    const gray = Math.floor((r + g + b) / 3);
    wasmByteView[i] = gray;
    wasmByteView[i + 1] = gray;
    wasmByteView[i + 2] = gray;
  }
};

// Our "wasmModule" for this example
const wasmModule = {
  apply_grayscale: mockApplyGrayscale,
  memory: wasmMemory
};

// Example imageData (RGBA, 2 pixels)
const originalImageData = new Uint8ClampedArray([
  200, 100, 50, 255, // Pixel 1: Orange-ish
  50, 150, 200, 255  // Pixel 2: Blue-ish
]);

// Copy original data to WASM memory (offset 0 for simplicity)
wasmByteView.set(originalImageData, 0);

console.log("Original data in WASM memory (first 8 bytes):");
console.log(Array.from(wasmByteView.slice(0, 8)));

// Call the "WASM" function
wasmModule.apply_grayscale(0, originalImageData.length);

console.log("Processed data in WASM memory (first 8 bytes):");
console.log(Array.from(wasmByteView.slice(0, 8)));

WASM to JS: Processed Output

After WASM processes the data, the results are already present in its linear memory. JavaScript can then read this modified data directly from the WebAssembly.Memory buffer. This avoids costly data copying, especially for large datasets like image buffers.

Try running this example:

// Continuing from the previous example where wasmByteView has processed data

// Helper to simulate WASM memory and function call
const wasmMemory = new WebAssembly.Memory({ initial: 1 }); // 1 page = 64KB
const wasmByteView = new Uint8ClampedArray(wasmMemory.buffer);

// Simulate the WASM function (simplified grayscale logic)
const mockApplyGrayscale = (ptr, len) => {
  for (let i = ptr; i < ptr + len; i += 4) {
    const r = wasmByteView[i];
    const g = wasmByteView[i + 1];
    const b = wasmByteView[i + 2];
    const gray = Math.floor((r + g + b) / 3);
    wasmByteView[i] = gray;
    wasmByteView[i + 1] = gray;
    wasmByteView[i + 2] = gray;
  }
};

// Our "wasmModule" for this example
const wasmModule = {
  apply_grayscale: mockApplyGrayscale,
  memory: wasmMemory
};

// Example imageData (RGBA, 2 pixels)
const originalImageData = new Uint8ClampedArray([
  200, 100, 50, 255, // Pixel 1: Orange-ish
  50, 150, 200, 255  // Pixel 2: Blue-ish
]);

// Copy original data to WASM memory (offset 0 for simplicity)
wasmByteView.set(originalImageData, 0);

// Call the "WASM" function
wasmModule.apply_grayscale(0, originalImageData.length);

// To get the processed image data back into a JS array:
const processedImageData = new Uint8ClampedArray(
  wasmByteView.slice(0, originalImageData.length)
);

console.log("Data read back into JS array (first 8 bytes):");
console.log(Array.from(processedImageData.slice(0, 8)));

Keeping UI Responsive with Workers

For heavy computations like image processing, running WASM directly on the main thread can block the UI. The solution is to offload these tasks to a Web Worker. The worker loads the WASM module and performs the computation, communicating results back to the main thread via messages.

This example shows the message passing concept:

// main.js (simulated)
const worker = {
  onmessage: null,
  postMessage: (msg, transfers) => {
    console.log("Main thread sends to worker:", msg.type);
    // Simulate worker receiving and responding
    setTimeout(() => {
      if (msg.type === 'processImage') {
        const imageData = new Uint8ClampedArray(msg.data.buffer);
        // Simulate WASM processing
        for (let i = 0; i < imageData.length; i += 4) {
          const r = imageData[i];
          const g = imageData[i + 1];
          const b = imageData[i + 2];
          const gray = Math.floor((r + g + b) / 3);
          imageData[i] = gray;
          imageData[i + 1] = gray;
          imageData[i + 2] = gray;
        }
        if (worker.onmessage) {
          worker.onmessage({ data: { type: 'imageProcessed', result: imageData }, transfers: [imageData.buffer] });
        }
      }
    }, 10);
  }
};

worker.onmessage = (event) => {
  if (event.data.type === 'imageProcessed') {
    console.log("Main thread receives from worker:", event.data.type);
    console.log("Processed image data (first 8 bytes):", Array.from(event.data.result.slice(0, 8)));
    // Update UI with processed image data
  }
};

function sendImageToWorker(imageData) {
  // Transferrable objects improve performance for large data
  worker.postMessage({ type: 'processImage', data: imageData }, [imageData.buffer]);
}

// Example call (in main.js context, after image loaded)
const demoImageData = new Uint8ClampedArray([200,100,50,255, 50,150,200,255]);
console.log("Original demo image data (first 8 bytes):", Array.from(demoImageData.slice(0, 8)));
sendImageToWorker(demoImageData);

Shared Memory for Concurrency

While Web Workers prevent UI blocking, transferring large amounts of data between the main thread and workers can still be a bottleneck. SharedArrayBuffer allows both threads to access the same block of memory simultaneously. This is crucial for truly parallel WASM computations that need to coordinate or share state.

  • One memory block: Accessible by main thread and all workers.
  • No copying: Eliminates data transfer overhead.
  • Atomics: Required for safe, synchronized access to shared memory.
  • Use case: Real-time simulations, complex multi-threaded algorithms.

Handling Errors Gracefully

In a complete application, robust error handling is vital. When an error occurs in WASM, it typically crashes the module. We need mechanisms to catch these and communicate them back to JavaScript. Strategies include returning specific error codes, exporting a WASM function to set an error state, or using wasm-bindgen's built-in error propagation for Rust Result types.

  • Return Codes: WASM function returns 0 for success, non-zero for error.
  • Error State: WASM exports a function to retrieve last error message.
  • wasm-bindgen Errors: Rust Result types can be automatically converted to JS exceptions.

Orchestrating the Full Workflow

Let's put all the pieces together for our grayscale application. Imagine a web page with an image:

  1. User uploads an image.
  2. JavaScript reads the image into an ImageData object.
  3. JS sends the ImageData (or its underlying Uint8ClampedArray) to a Web Worker.
  4. The Web Worker loads the WASM module.
  5. The Worker calls the WASM grayscale function, passing the image data pointer.
  6. WASM processes the image data in memory.
  7. The Worker receives the processed data (already in its memory view).
  8. The Worker sends the processed data back to the main thread.
  9. The main thread updates the canvas with the new ImageData.

This full cycle demonstrates a high-performance, non-blocking WASM application.

Integrated WASM Concepts

Consider a complex WebAssembly application that performs real-time video processing. It uses Rust compiled to WASM, interacts with JavaScript, and needs to maintain a responsive user interface. Which of the following strategies are crucial for building such an application effectively?

Building Robust WASM Apps

You've now seen how to bring together various WebAssembly concepts to build a sophisticated application. From architecting the interaction between JavaScript and WASM, to managing memory, leveraging Web Workers for concurrency, and ensuring robust error handling, these principles are key to developing high-performance, production-ready WASM solutions.

The future of WASM is about seamless integration and unlocking new levels of web application capability.

Perguntas Frequentes

A aula “Criando uma aplicação WASM completa” é grátis?

Sim — o texto completo de “Criando uma aplicação WASM completa” é 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 “Criando uma aplicação WASM completa”?

Aplique todo o conhecimento adquirido para projetar e criar uma aplicação sofisticada e de alto desempenho baseada em WebAssembly. 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 3 de 4.

Quanto tempo leva a aula “Criando uma aplicação WASM completa”?

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. Modelo de componentes WASM e APIs futuras
  2. Ferramentas e ecossistema avançados do WASM
  3. Criando uma aplicação WASM completa
  4. Coleta de Lixo WASM e Tipos de Referência
← Voltar para WebAssembly (WASM) for High Performance Apps