WebAssembly (Wasm) em produção: levando C++, Rust e Go para o navegador e para além dele

Introdução: O JavaScript não é mais suficiente para tudo

Em 2026, WebAssembly (Wasm) deixou de ser uma tecnologia experimental e se tornou uma peça fundamental da arquitetura web moderna. O JavaScript continua excelente para interações de UI e lógica de negócio leve, mas há cenários onde seu modelo de execução single-threaded, garbage collection e interpretação JIT se tornam gargalos.

WebAssembly oferece uma alternativa: código compilado de linguagens como Rust, C++ e Go, executando no browser (ou em edge functions) com performance quase nativa. Não é uma substituição ao JavaScript, mas uma extensão estratégica que permite coisas antes impossíveis na web.

O que mudou em 2026

Wasm evoluiu dramaticamente desde suas primeiras versões:

Garbage Collection nativa: Antes, interações com JavaScript exigiam serialização de dados. Agora, Wasm GC permite alocação de objetos compartilhados entre JavaScript e Wasm sem cópia.

SIMD (Single Instruction, Multiple Data): Processamento paralelo de vetores para operações matemáticas e de imagens. Operações de compressão de vídeo, processamento de áudio e cálculos científicos se beneficiam enormemente.

Component Model: Padrão para composição de módulos Wasm, permitindo criar bibliotecas reutilizáveis independentemente da linguagem de origem.

WASI (WebAssembly System Interface): Wasm deixou de ser apenas "web." Com WASI, módulos Wasm podem rodar em servidores, edge functions e até em ambientes serverless, com acesso controlado ao sistema de arquivos e rede.

Casos de uso que justificam o custo

Não faz sentido compilar todo JavaScript para Wasm. O overhead de compilação, o tooling complexo e a curva de aprendizado só valem a pena em cenários específicos.

Processamento de imagens e vídeo

rust// Rust: compressão de imagem na edge
use image::{ImageReader, DynamicImage};
use std::io::Cursor;

#[wasm_bindgen]
pub fn compress_image(input_bytes: &[u8], quality: u8) -> Result<Vec<u8>, JsValue> {
    let img = ImageReader::new(Cursor::new(input_bytes))
        .with_guessed_format()?
        .decode()?;

    let mut output_bytes = Vec::new();
    let mut cursor = Cursor::new(&mut output_bytes);

    img.write_to(&mut cursor, image::ImageOutputFormat::Jpeg(quality))?;

    Ok(output_bytes)
}

#[wasm_bindgen]
pub fn resize_image(input_bytes: &[u8], width: u32, height: u32) -> Result<Vec<u8>, JsValue> {
    let mut img = ImageReader::new(Cursor::new(input_bytes))
        .with_guessed_format()?
        .decode()?;

    img = img.resize(width, height, image::imageops::FilterType::Lanczos3);

    let mut output_bytes = Vec::new();
    let mut cursor = Cursor::new(&mut output_bytes);
    img.write_to(&mut cursor, image::ImageOutputFormat::Png)?;

    Ok(output_bytes)
}

Por que Wasm aqui?

• Processamento de imagem é intensivo em CPU
• Operações de redimensionamento e filtro se beneficiam de SIMD
• Permite processamento no cliente, reduzindo custos de servidor

Criptografia e segurança

rust// Rust: criptografia AES-GCM para dados sensíveis
use aes_gcm::{Aes256Gcm, Key, Nonce};
use aes_gcm::aead::{Aead, NewAead};

#[wasm_bindgen]
pub struct AesEncryption {
    cipher: Aes256Gcm,
}

#[wasm_bindgen]
impl AesEncryption {
    pub fn new(key: &[u8]) -> Result<AesEncryption, JsValue> {
        let key = Key::from_slice(key);
        Ok(AesEncryption {
            cipher: Aes256Gcm::new(key),
        })
    }

    pub fn encrypt(&self, plaintext: &[u8], nonce: &[u8]) -> Result<Vec<u8>, JsValue> {
        let nonce = Nonce::from_slice(nonce);
        let ciphertext = self.cipher.encrypt(nonce, plaintext)
            .map_err(|e| JsValue::from_str(&e.to_string()))?;
        Ok(ciphertext)
    }

    pub fn decrypt(&self, ciphertext: &[u8], nonce: &[u8]) -> Result<Vec<u8>, JsValue> {
        let nonce = Nonce::from_slice(nonce);
        let plaintext = self.cipher.decrypt(nonce, ciphertext)
            .map_err(|e| JsValue::from_str(&e.to_string()))?;
        Ok(plaintext)
    }
}

Por que Wasm aqui?

• Criptografia requer implementações constant-time para segurança
• Bibliotecas JavaScript de criptografia podem ter vulnerabilidades
• Performance consistente independentemente do ambiente

Compressão e compressão de dados

rust// Rust: compressão Zstandard para transferências grandes
use zstd;

#[wasm_bindgen]
pub fn compress_zstd(data: &[u8], level: i32) -> Result<Vec<u8>, JsValue> {
    let compressed = zstd::encode_all(Cursor::new(data), level)
        .map_err(|e| JsValue::from_str(&e.to_string()))?;
    Ok(compressed)
}

#[wasm_bindgen]
pub fn decompress_zstd(compressed: &[u8]) -> Result<Vec<u8>, JsValue> {
    let decompressed = zstd::decode_all(Cursor::new(compressed))
        .map_err(|e| JsValue::from_str(&e.to_string()))?;
    Ok(decompressed)
}

Por que Wasm aqui?

• Zstandard é muito mais eficiente que gzip/brotli
• Permite compressão em tempo real no browser
• Reduz significativamente largura de banda

Ferramentas e tooling

Compilando Rust para Wasm

toml# Cargo.toml
[package]
name = "my-wasm-lib"
version = "0.1.0"
edition = "2021"
crate-type = ["cdylib"]

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

[dependencies]
wasm-bindgen = "0.2"
image = "0.24"
aes-gcm = "0.10"
zstd = "0.11"

[dependencies.web-sys]
version = "0.3"
features = ["console"]

bash# Compila Rust para Wasm
wasm-pack build --target web

# Gera:
# - pkg/my_wasm_lib_bg.wasm (binário Wasm)
# - pkg/my_wasm_lib.js (bindings JavaScript)
# - pkg/my_wasm_lib.d.ts (TypeScript definitions)

Integrando com TypeScript

typescript// Uso do módulo Wasm em TypeScript
import init, {
  compress_image,
  resize_image,
  AesEncryption
} from './pkg/my_wasm_lib';

class ImageProcessor {
  private wasmInitialized = false;

  async initialize() {
    if (this.wasmInitialized) return;

    await init();
    this.wasmInitialized = true;
  }

  async processUpload(file: File): Promise<Blob> {
    await this.initialize();

    const bytes = await file.arrayBuffer();
    const uint8Array = new Uint8Array(bytes);

    // Redimensiona para largura máxima de 1920
    const compressed = resize_image(uint8Array, 1920, 0);

    // Comprime com qualidade 80
    const output = compress_image(compressed, 80);

    return new Blob([output], { type: 'image/jpeg' });
  }
}

// Uso em React
function ImageUpload() {
  const [processing, setProcessing] = useState(false);
  const processor = useMemo(() => new ImageProcessor(), []);

  const handleUpload = async (file: File) => {
    setProcessing(true);
    try {
      const processed = await processor.processUpload(file);
      // Upload do arquivo processado
      await uploadToServer(processed);
    } finally {
      setProcessing(false);
    }
  };

  return (
    <input
      type="file"
      accept="image/*"
      onChange={(e) => {
        const file = e.target.files?.[0];
        if (file) handleUpload(file);
      }}
      disabled={processing}
    />
  );
}

Wasm além do browser: Edge e Server-side

Wasm em CloudFlare Workers

typescript// CloudFlare Worker usando Wasm
import wasmModule from './image_processor.wasm';

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    const imageUrl = url.searchParams.get('url');

    if (!imageUrl) {
      return new Response('Missing URL parameter', { status: 400 });
    }

    // Busca a imagem
    const imageResponse = await fetch(imageUrl);
    const imageData = await imageResponse.arrayBuffer();

    // Instancia módulo Wasm
    const wasm = await WebAssembly.instantiate(wasmModule);
    const { resize_image } = wasm.instance.exports;

    // Redimensiona na edge
    const result = (resize_image as any)(
      new Uint8Array(imageData),
      800,  // width
      600   // height
    );

    return new Response(result, {
      headers: {
        'Content-Type': 'image/jpeg',
        'Cache-Control': 'public, max-age=31536000',
      },
    });
  }
};

Wasm com WASI em Lambda

rust// Rust compilado com suporte WASI para rodar em Lambda
use std::io::{self, Read, Write};
use std::fs::File;

fn main() -> io::Result<()> {
    let args: Vec<String> = std::env::args().collect();

    if args.len() < 3 {
        eprintln!("Usage: {} <input> <output>", args[0]);
        return Ok(());
    }

    let mut input = File::open(&args[1])?;
    let mut output = File::create(&args[2])?;

    let mut buffer = Vec::new();
    input.read_to_end(&mut buffer)?;

    // Processamento intensivo de dados
    let processed = process_data(&buffer);

    output.write_all(&processed)?;

    Ok(())
}

bash# Compila para WASI
cargo build --target wasm32-wasi --release

# Executa em Lambda usando runtime WASI
# (requer Lambda Runtime Interface Emulator para WASI)

Performance: JavaScript vs Wasm

Comparação realista para operações intensivas:

Importante: Para operações simples (DOM manipulation, HTTP requests), Wasm não oferece vantagem significativa e até pode ser mais lento devido ao overhead de marshaling entre JavaScript e Wasm.

Trade-offs e considerações

Quando NÃO usar Wasm

Operações simples de UI:

• Manipulação de DOM
• Event handling
• Animações CSS

Código com muita interação com JavaScript:

• Se cada operação Wasm exige chamadas de ida e volta para JS, o overhead supera o benefício

Desenvolvimento rápido (MVP):

• Compilação e tooling Wasm adicionam complexidade
• Para MVPs, JavaScript puro é mais rápido de desenvolver

Desafios de debugging

typescript// Habilita logging no Wasm
const wasm = await WebAssembly.instantiateStreaming(
  fetch('./my_wasm.wasm'),
  { env: {
    console_log: (ptr: number, len: number) => {
      const bytes = new Uint8Array(wasmMemory.buffer, ptr, len);
      const message = new TextDecoder().decode(bytes);
      console.log('[WASM]', message);
    }
  }
);

Ferramentas de debugging:

• Chrome DevTools tem suporte a stepping em Wasm
• wasm-pack gera source maps que mapeam Rust para Wasm
• console.log via bindings funciona bem

Bundle size considerations

bash# Analisar tamanho do bundle Wasm
wasm-pack build --release
ls -lh pkg/*.wasm

# Otimizações para reduzir tamanho
# 1. Ativa lto (Link Time Optimization) no Cargo.toml
[profile.release]
lto = true
opt-level = "z"  # otimiza para tamanho
codegen-units = 1

# 2. Usa wasm-opt do Binaryen para otimizações adicionais
wasm-opt pkg/my_wasm_lib_bg.wasm -O3 -o pkg/my_wasm_lib_bg_opt.wasm

Roadmap de implementação

Fase 1: Identificação e POC (2 semanas)

1. Identifique operações CPU-intensive no seu código
2. Implemente POC em Rust para as operações candidatas
3. Compare performance com JavaScript baseline

Fase 2: Integração (4 semanas)

1. Configure tooling (wasm-pack, wasm-bindgen)
2. Crie bindings TypeScript bem tipados
3. Implemente lazy loading do módulo Wasm

typescript// Lazy loading do Wasm
let wasmModule: any = null;

async function getWasm() {
  if (!wasmModule) {
    wasmModule = await import('./pkg/my_wasm_lib');
    await wasmModule.default();
  }
  return wasmModule;
}

// Uso
const wasm = await getWasm();
const result = wasm.heavyOperation(data);

Fase 3: Produção (ongoing)

1. Monitora performance real em produção
2. Ajusta níveis de otimização com base em métricas
3. Gradualmente expande uso de Wasm para outros casos

Métricas de sucesso

• Redução de tempo de CPU em operações intensivas: Objetivo >3x melhoria
• Tamanho do bundle Wasm: <500KB após compressão gzip
• Tempo de inicialização do módulo Wasm: <200ms
• Impacto na experiência do usuário: Percebível em operações >500ms

Sua aplicação sofre com operações CPU-intensive que bloqueiam a UI, transferência de grandes arquivos ou processamento de imagens no servidor? Fale com especialistas da Imperialis sobre implementação de WebAssembly para mover cargas computacionais para o cliente e edge, reduzindo custos e melhorando experiência.

Fontes

• WebAssembly documentation — Documentação oficial
• wasm-bindgen guide — Bindings Rust para JavaScript
• WASI documentation — WebAssembly System Interface
• MDN WebAssembly docs — Guia MDN