WebAssembly e Rust: criação de aplicações web de alto desempenho

Introdução ao WebAssembly e Rust

As aplicações web modernas exigem cada vez mais desempenho. O JavaScript, apesar de todas as suas vantagens, nem sempre consegue lidar com tarefas computacionalmente complexas — processamento de imagens, renderização 3D, criptografia ou simulações. É aqui que o WebAssembly (WASM) entra em ação — um formato binário de instruções que é executado no navegador com velocidade quase nativa.

A linguagem Rust tornou-se uma das melhores candidatas para escrever módulos WASM: é segura, rápida e não possui garbage collector. Neste artigo, vamos explorar como compilar código Rust para WebAssembly, conectá-lo ao JavaScript e criar aplicações web reais de alto desempenho.

Configuração do ambiente para Rust + WASM

Antes de escrever código, instale as ferramentas necessárias:

• Rust — instale via rustup (instalador oficial).
• wasm-pack — ferramenta principal para compilar pacotes WASM.
• wasm-bindgen — biblioteca para conectar Rust e JavaScript.
• Node.js e npm — para testar e compilar o frontend.

# Instalação do wasm-packcurl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# Criar um novo projetocargo new --lib wasm-examplecd wasm-example

Após criar o projeto, abra o arquivo Cargo.toml e adicione as dependências:

[lib]crate-type = ["cdylib"]

[dependencies]wasm-bindgen = "0.2"

Escrevendo a primeira função em Rust para WebAssembly

Vamos criar uma função simples que soma dois números e retorna o resultado. Em src/lib.rs, escreva:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn add(a: i32, b: i32) -> i32 {    a + b}

O atributo #[wasm_bindgen] gera automaticamente um wrapper JavaScript para esta função. Agora, compile o projeto:

wasm-pack build --target web

Após a compilação, na pasta pkg aparecerão os arquivos: .wasm, .js (wrapper) e .d.ts (tipos TypeScript).

Integração com HTML e JavaScript

Crie uma página HTML simples para testar:

<!DOCTYPE html><html><head>    <script type="module">        import init, { add } from './pkg/wasm_example.js';

        async function run() {            await init();            console.log('2 + 3 =', add(2, 3)); // 5        }        run();    </script></head><body>    <h1>Rust + WebAssembly funcionando!</h1></body></html>

Abra o arquivo através de um servidor local (por exemplo, python3 -m http.server) — no console do navegador você verá o resultado 5.

Trabalhando com strings e tipos de dados complexos

O WebAssembly opera apenas com números. Para trabalhar com strings, arrays e objetos, utiliza-se o wasm-bindgen, que converte os tipos automaticamente.

Exemplo: função que retorna uma string

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn greet(name: &str) -> String {    format!("Olá, {}! Você está usando Rust + WASM.", name)}

Em JavaScript:

import init, { greet } from './pkg/wasm_example.js';

await init();console.log(greet("Alex")); // "Olá, Alex! Você está usando Rust + WASM."

Trabalhando com arrays (Vec)

Para passar arrays, use Vec<T>. Exemplo — função que dobra todos os elementos:

#[wasm_bindgen]pub fn double_numbers(arr: Vec<i32>) -> Vec<i32> {    arr.iter().map(|x| x * 2).collect()}

Código JavaScript:

const result = double_numbers([1, 2, 3, 4]);console.log(result); // [2, 4, 6, 8]