De Rust para WASM com wasm-pack e React

O fluxo de trabalho padrão de Rust para WASM usa duas ferramentas: wasm-pack coordena a compilação (compila Rust para WASM, executa wasm-bindgen e gera o pacote npm), enquanto wasm-bindgen gera vínculos JavaScript que permitem chamar funções Rust como funções JavaScript comuns, com tratamento adequado de tipos.

O atributo #[wasm_bindgen] marca funções, estruturas e métodos Rust para exportação para JavaScript. Sem ele, a função é compilada para WASM, mas não fica acessível a partir do JavaScript. Quando você anota uma função com #[wasm_bindgen], wasm-bindgen gera o código de integração JavaScript que lida com a conversão dos argumentos e dos valores de retorno.

Uma função Rust exportada mínima: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. A função recebe dois inteiros sem sinal de 32 bits e retorna um. wasm-bindgen gera JavaScript que chama essa função com argumentos numéricos e retorna um resultado numérico.

Execute wasm-pack build --target web no diretório do pacote Rust. Isso compila o código Rust para WASM, executa wasm-bindgen para gerar vínculos JavaScript e produz um diretório pkg/ contendo o binário .wasm, um módulo de integração JavaScript e definições de tipos TypeScript.

Importe o módulo gerado no seu componente React: import init, { add } from '../pkg/my_lib'. A função init carrega e instancia o binário WASM (chame-a uma vez em um useEffect). Após a inicialização, chame diretamente as funções exportadas: const result = add(2, 3).

Para dados complexos além de números primitivos, wasm-bindgen fornece js_sys::Array (matriz do JavaScript), js_sys::Object (objeto JavaScript) e wasm_bindgen::JsValue (qualquer valor JavaScript). Esses tipos permitem que as funções Rust aceitem e retornem matrizes e objetos JavaScript, embora com mais sobrecarga de serialização do que os tipos primitivos.

O princípio fundamental de desempenho é manter os dados na memória do WASM e realizar toda a computação nela. Passe os dados uma vez, faça a computação e retorne apenas o resultado final. Evite padrões que transferem dados repetidamente através do limite do WASM a cada etapa. A sobrecarga de cada travessia do limite é pequena, mas se acumula em ciclos apertados.

O crate serde-wasm-bindgen permite serializar estruturas do Rust para objetos JavaScript e desses objetos de volta para estruturas do Rust usando Serde. Anote a estrutura com #[derive(Serialize, Deserialize)] e use serde_wasm_bindgen::to_value() e from_value(). Essa é a abordagem padrão para passar dados estruturados complexos.

Computações WASM de longa duração bloqueiam a thread em que são executadas. Coloque o WASM em uma tarefa em segundo plano da Web para manter a thread principal do React livre. Crie um arquivo de tarefa que inicialize o módulo WASM e processe mensagens. Envie dados para a tarefa por meio de postMessage, receba os resultados pelo evento de mensagem e atualize o estado do React com o resultado.

O wasm-pack gera automaticamente arquivos de declaração do TypeScript (.d.ts) para todas as funções e todos os tipos exportados. Isso fornece segurança completa de tipos ao seu projeto React com TypeScript ao chamar funções do Rust. Os tipos gerados refletem as assinaturas das funções do Rust — add(a: number, b: number): number — fazendo o preenchimento automático da IDE funcionar corretamente.

Os binários WASM normalmente têm de 100kb a 2MB após a otimização. Ative o wasm-opt na compilação do wasm-pack definindo opt-level = "z" no perfil de versão do Cargo.toml para obter uma otimização agressiva do tamanho. Forneça os arquivos WASM com Content-Type: application/wasm e ative o HTTP/2 para que o navegador transmita o binário com eficiência.

Qual é a finalidade do atributo #[wasm_bindgen] no código Rust?

wasm-pack build --target web compila Rust para WASM e gera vinculações JavaScript por meio do wasm-bindgen. Anote as funções exportadas com #[wasm_bindgen]. Importe init e as funções exportadas no React, chame init() em um useEffect e depois chame as funções como JavaScript comum. Use serde-wasm-bindgen para serialização de estruturas complexas. Execute o WASM em tarefas em segundo plano da Web para computações longas e mantenha a thread principal do React livre.