⏱️5 min read · 908 words
WebAssembly (Wasm) passou de experimental para pronto para produção em 2026. Navegadores, servidores (via WASI) e computação de ponta executam Wasm. Com a finalização do Modelo de Componente e as principais linguagens (Rust, Go, Python, C++) suportando alvos Wasm, a promessa de “escrever uma vez, executar em qualquer lugar” é finalmente real para códigos de desempenho crítico. Este guia cobre tudo, desde o básico até a implantação em produção.
📋 Table of Contents
Por que WebAssembly?
- Desempenho quase nativo— 1,5x-2x mais lento que C nativo, 10-100x mais rápido que JavaScript para tarefas com uso intensivo de CPU
- Portabilidade de idioma– execute o código Rust, C/C++, Go no navegador ou servidor
- Sandbox de segurança— modelo de segurança estrito baseado em capacidade
- WASI (interface do sistema WebAssembly)— execute o Wasm fora do navegador (servidores, edge, CLI)
- Modelo de Componente— módulos interoperáveis entre idiomas
Ferrugem para WebAssembly
# Install wasm-pack
cargo install wasm-pack
# Add wasm target
rustup target add wasm32-unknown-unknown
# Create a Wasm library
cargo new --lib fast_crypto
cd fast_crypto# Cargo.toml
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
getrandom = { version = "0.2", features = ["js"] }
sha2 = "0.10"
hex = "0.4"
[profile.release]
opt-level = 3
lto = true
codegen-units = 1// src/lib.rs
use wasm_bindgen::prelude::*;
use sha2::{Sha256, Digest};
#[wasm_bindgen]
pub fn hash_sha256(data: &str) -> String {
let mut hasher = Sha256::new();
hasher.update(data.as_bytes());
hex::encode(hasher.finalize())
}
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
if n <= 1 { return n as u64; }
let mut a = 0u64;
let mut b = 1u64;
for _ in 2..=n {
(a, b) = (b, a.wrapping_add(b));
}
b
}
// Struct exposed to JavaScript
#[wasm_bindgen]
pub struct ImageProcessor {
width: u32,
height: u32,
pixels: Vec<u8>,
}
#[wasm_bindgen]
impl ImageProcessor {
#[wasm_bindgen(constructor)]
pub fn new(width: u32, height: u32) -> Self {
Self { width, height, pixels: vec![0u8; (width * height * 4) as usize] }
}
pub fn grayscale(&mut self) {
for chunk in self.pixels.chunks_mut(4) {
let gray = (0.299 * chunk[0] as f32 + 0.587 * chunk[1] as f32 + 0.114 * chunk[2] as f32) as u8;
chunk[0] = gray; chunk[1] = gray; chunk[2] = gray;
}
}
pub fn pixels(&self) -> *const u8 {
self.pixels.as_ptr()
}
}# Build for browser
wasm-pack build --target web
# Generated:
# pkg/
# fast_crypto_bg.wasm
# fast_crypto.js (JS bindings)
# fast_crypto.d.ts (TypeScript types)Usando Wasm em JavaScript/TypeScript
// Using wasm-pack generated bindings
import init, { hash_sha256, fibonacci, ImageProcessor } from './pkg/fast_crypto.js';
async function main() {
// Must initialize Wasm module first
await init();
// Call Wasm functions directly
const hash = hash_sha256("Hello, WebAssembly!");
console.log("SHA256:", hash);
const fib = fibonacci(50);
console.log("Fibonacci(50):", fib);
// Use Wasm class
const processor = new ImageProcessor(800, 600);
processor.grayscale();
// Performance comparison
console.time("wasm-hash");
for (let i = 0; i < 100000; i++) hash_sha256(`test${i}`);
console.timeEnd("wasm-hash");
}
// Using with Next.js (server-side safe)
// next.config.js:
// experimental: { serverComponentsExternalPackages: ['fast_crypto'] }WASI: WebAssembly fora do navegador
// Run Rust-compiled Wasm on servers via Wasmtime
use std::io::{self, Read};
fn main() {
let mut input = String::new();
io::stdin().read_to_string(&mut input).unwrap();
let processed = process_data(&input);
println!("{}", processed);
}
fn process_data(data: &str) -> String {
data.to_uppercase()
}# Compile to WASI target
rustup target add wasm32-wasi
cargo build --target wasm32-wasi --release
# Run with Wasmtime (server-side Wasm runtime)
wasmtime target/wasm32-wasi/release/myapp.wasm < input.txt
# Docker with Wasm (Docker+Wasm integration)
docker run --runtime=io.containerd.wasmtime.v1 --platform=wasi/wasm myapp:latestPython para WebAssembly (Pyodide)
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.0/full/pyodide.js"></script>
</head>
<body>
<script>
async function runPython() {
const pyodide = await loadPyodide();
// Install packages
await pyodide.loadPackage(["numpy", "pandas"]);
// Run Python code
const result = await pyodide.runPythonAsync(`
import numpy as np
arr = np.random.rand(1000000)
arr.mean()
`);
console.log("Mean:", result);
}
runPython();
</script>
</body>
</html>Wasm at the Edge (trabalhadores da Cloudflare)
// wrangler.toml
// [build]
// command = "cargo install -q worker-build && worker-build --release"
// src/worker.rs compiled to Wasm and deployed to Cloudflare edge
// Handle 50M+ requests/day with sub-millisecond cold starts
// Worker JS + Wasm bundle
import { hash_sha256 } from './pkg/fast_crypto.js';
import wasm from './pkg/fast_crypto_bg.wasm';
export default {
async fetch(request) {
await wasm();
const body = await request.text();
const hash = hash_sha256(body);
return new Response(JSON.stringify({ hash }), {
headers: { 'Content-Type': 'application/json' }
});
}
};Quando usar WebAssembly
- Tarefas com uso intensivo de CPU: processamento de imagem/vídeo, criptografia, inferência de ML
- Bibliotecas nativas portuárias: FFmpeg, OpenCV, SQLite para navegador
- Computação de ponta: Trabalhadores da Cloudflare, computação rápida
- Sistemas de plug-ins: execute com segurança código não confiável (sandbox Wasm)
- Motores de jogo: Unity, Godot compila para Wasm
Não use Wasm para: Manipulação de DOM, aplicativos CRUD simples, código onde o desempenho JS já é bom.
WebAssembly em 2026 é uma tecnologia de produção séria. Rust + wasm-pack é o melhor caminho para o navegador Wasm, WASI permite implantação no lado do servidor e na borda, e o Modelo de Componente está tornando a interoperabilidade de linguagem uma realidade. Comece com um problema de uso intensivo de CPU que o JavaScript resolve lentamente – os ganhos de desempenho tornarão o investimento claro.
🔗 Share this article
✍️ Leave a Comment