WebAssembly e C++: como executar código na PythonLib no navegador

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

Introdução: Por que o C++ de repente se tornou uma tecnologia web?



Se você programa em C++ e visita o PythonLib, provavelmente está acostumado a ver seu código rodando em algum lugar profundo — no backend, no núcleo de um motor de jogos ou em computações de alta carga. O frontend web tradicionalmente era território do JavaScript, HTML e CSS. Mas nos últimos cinco anos, tudo mudou.



Imagine: você escreveu em C++ um algoritmo complexo de processamento de imagens ou uma simulação física. Antes, para mostrar isso no navegador, você teria que reescrever tudo em JavaScript — perdendo desempenho e tempo. Agora existe o WebAssembly (frequentemente escrito apenas wasm). É uma tecnologia que permite executar código C++ compilado diretamente no navegador, com velocidade próxima à nativa.



Neste artigo, vamos entender o que é WebAssembly para um desenvolvedor C++, por que isso é importante para o projeto PythonLib, e escrever um exemplo real de compilação de C++ para wasm. Sem enrolação, apenas código e prática.



O que é WebAssembly em termos simples



WebAssembly é um formato binário de instruções de baixo nível. Pode ser imaginado como um "assembly para a web". Os navegadores (Chrome, Firefox, Safari, Edge) conseguem executar arquivos .wasm quase tão rápido quanto código nativo de máquina.



A principal diferença do JavaScript: wasm não é uma linguagem de programação, mas um alvo de compilação. Você escreve em C++, C, Rust ou Go, compila para .wasm, e o navegador executa.



Como funciona na prática C++ → WebAssembly



O processo é assim:

  • Você escreve código em C++ (por exemplo, uma função para calcular números de Fibonacci ou um módulo matemático complexo).
  • Usa o compilador Emscripten (baseado em LLVM/Clang) para compilar em .wasm + um wrapper JavaScript.
  • Adiciona os arquivos resultantes a uma página HTML.
  • O usuário abre a página — e o código C++ é executado no navegador dele.


Para o PythonLib, isso abre possibilidades interessantes: por exemplo, você pode escrever uma biblioteca computacional em C++, compilá-la para wasm, e usá-la em exemplos educacionais diretamente no site, sem exigir que o usuário instale um compilador.



Por que um desenvolvedor C++ deveria se importar com WebAssembly (e qual a relação com PythonLib)



Muitos acham que WebAssembly serve apenas para jogos ou gráficos pesados. Na verdade, os cenários são muito mais amplos. Aqui estão os principais motivos para aprender sobre wasm no PythonLib:



  • Velocidade. Partes críticas do código em C++ rodam de 2 a 10 vezes mais rápido que equivalentes em JavaScript puro. Se você escreve algoritmos matemáticos ou criptográficos — wasm é a escolha certa.
  • Reutilização de código. Não precisa reescrever bibliotecas C++ legadas para a web. Compilou — e pronto.
  • Segurança. Wasm é executado em uma sandbox isolada do navegador. É mais seguro do que executar um plugin nativo.
  • Aspecto educacional. No PythonLib, você pode mostrar exemplos vivos de código C++ que funcionam diretamente no navegador — o leitor vê não apenas a sintaxe, mas também o resultado da execução.


Outro ponto importante: WebAssembly não substitui o JavaScript, mas o complementa. JS continua sendo usado para manipulação do DOM, eventos e interface, enquanto o C++ assume os cálculos.



Prática: Compilando C++ para WebAssembly



Vamos escrever um programa simples em C++, compilá-lo para wasm e executá-lo no navegador. Para isso, precisaremos do Emscripten SDK.



Passo 1. Instalação do Emscripten



Se você usa Linux ou macOS, a instalação é feita com um comando (mais detalhes em emscripten.org):



git clone https://github.com/emscripten-core/emsdk.gitcd emsdk./emsdk install latest./emsdk activate latestsource ./emsdk_env.sh


No Win

Blogs

Book Recommendations