Trabalhando com WebAssembly e Rust: do A ao Z

Introdução ao WebAssembly e Rust

WebAssembly (WASM) é um formato binário de instruções de baixo nível que permite executar código de alto desempenho no navegador com velocidade quase nativa. Rust, com seu sistema de propriedade e ausência de coletor de lixo, é a linguagem ideal para compilar para WebAssembly. Neste artigo, percorreremos o caminho desde a instalação das ferramentas até a criação de um módulo WASM completo em Rust.

Por que Rust? Ele oferece gerenciamento seguro de memória, tamanho mínimo de binário e excelente desempenho. Em combinação com WebAssembly, você pode escrever algoritmos complexos, jogos, editores gráficos e até aplicativos completos que rodam no navegador.

Instalação das ferramentas e preparação do ambiente

Para começar, você precisará de:

\n
• Rust (instalado via rustup)
\n
• Plataforma alvo wasm32-unknown-unknown
\n
• Ferramenta wasm-pack (compilação e publicação de WASM)
\n
• Servidor HTTP básico (ex.: python3 -m http.server)
\n

Instalação da plataforma alvo e do wasm-pack:

# Instalação da plataforma alvo para WebAssembly\nrustup target add wasm32-unknown-unknown\n\n# Instalação do wasm-pack\ncargo install wasm-pack

Agora vamos criar um novo projeto:

cargo new --lib wasm-rust-demo\ncd wasm-rust-demo

Abra o Cargo.toml e adicione a dependência:

[lib]\ncrate-type = ["cdylib"]\n\n[dependencies]\nwasm-bindgen = "0.2"

A flag cdylib indica que estamos criando uma biblioteca dinâmica compatível com WebAssembly.

Escrevendo o primeiro módulo WASM em Rust

Vamos criar uma função simples que estará disponível a partir do JavaScript. Edite o arquivo src/lib.rs:

use wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn greet(name: &str) -> String {\n    format!("Olá, {}! Bem-vindo ao mundo do WebAssembly!", name)\n}\n\n#[wasm_bindgen]\npub fn fibonacci(n: u32) -> u32 {\n    match n {\n        0 => 0,\n        1 => 1,\n        _ => fibonacci(n - 1) + fibonacci(n - 2),\n    }\n}\n\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -> i32 {\n    a + b\n}

O atributo #[wasm_bindgen] permite exportar funções para o JavaScript. Observe que String é automaticamente convertida em uma string JavaScript.

Agora vamos compilar o projeto:

wasm-pack build --target web

Após a compilação, os seguintes arquivos aparecerão na pasta pkg:

\n
• wasm_rust_demo_bg.wasm — módulo WASM compilado
\n
• wasm_rust_demo.js — wrapper JavaScript para importação conveniente
\n
• wasm_rust_demo.d.ts — declarações TypeScript
\n

Integração com JavaScript e HTML

Crie o arquivo index.html na raiz do projeto:

<!DOCTYPE html>\n<html lang="pt">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Demonstração Rust + WebAssembly</title>\n</head>\n<body>\n    <h1>Exemplo Rust + WebAssembly</h1>\n    \n    <div>\n        <h3>Função greet</h3>\n        <input type="text" id="nameInput" placeholder="Digite um nome" value="Mundo">\n        <button id="greetBtn">Cumprimentar</button>\n        <p id="greetOutput"></p>\n    </div>\n\n    <div>\n        <h3>Números de Fibonacci</h3>\n        <input type="number" id="fibInput" value="10" min="0" max="40">\n        <button id="fibBtn">Calcular</button>\n        <p id="fibOutput"></p>\n    </div>\n\n    <script type="module">\n        import init, { greet, fibonacci, add } from './pkg/