WebAssembly, a jornada — O que é WASM?

Essa é a parte 3 da série WebAssembly, a jornada. Se você está iniciando por esse artigo, talvez seja melhor iniciar por aqui.

No último artigo, nós mostramos como o JavaScript evoluiu através dos anos e como os compiladores Just In Time dessa linguagem funcionam, tornando a execução do JS mais rápida. Isso nos dá um plano de fundo que nos ajuda a comparar a performance do JavaScript com o WebAssembly. Mas o que é WebAssembly mesmo?

O que é WebAssembly?

WebAssembly ou WASM, é um Compiler Target (o código que o compilador gera) de formato binário, que roda códigos como C, C++ e Rust no navegador com uma performance bem próxima a de um código nativo.

Um aspecto interessante do WebAssembly é que ele não foi feito para ser uma alternativa para o JavaScript, mas para trabalhar lado a lado dele, provendo aos desenvolvedores a performance das linguagens compiladas/tipadas e a flexibilidade do JavaScript ao mesmo tempo. Usando a API do WebAssembly no Javascript, você pode carregar módulos WASM numa aplicação JavaScript e compartilhar funcionalidade entre os dois.

No final do artigo anterior, mostramos como o JavaScript é rápido e terminamos perguntando qual seria a tecnologia que poderia ajudar as aplicações web a dar o mesmo salto de performance visto com a introdução do compiladores JIT em 2008. WebAssembly é essa tecnologia. Mas para entender como um código escrito em WASM pode ser mais rápido que JavaScript, precisamos analisar como o motor JS do browser conceitualmente trata os dois.

• Carregamento: O código Javascript é carregado mais lento que WebAssembly, já que o formato .wasm é binário e, portanto, mais compacto do que o equivalente em .js.
• Parser: Não existe parser de um código .wasm ao invés disso, o código WASM é decodificado e o tempo de decodificação é menor que o parser do JavaScript, já que seu código é mais próximo da linguagem de máquina. Sabemos que o parser de 1MB de JavaScript pode facilmente ultrapassar a marca de 1 segundo; o AST binário pode mitigar essa lentidão no parser do JavaScript, mas isso é assunto para um outro artigo.
• Compilação/Otimização: O código .wasm é otimizado quando o seu código binário é gerado, retirando esse tempo gasto na execução, o que não acontece no JavaScript que otimiza o código a medida em que ele é executado. Já a compilação é mais rápida no WASM por conta dessas otimizações feitas na compilação do código fonte para WebAssembly. Além disso, os navegadores estão implementando compiladores WASM via stream, o que na prática torna a compilação mais rápida que o tempo de download, dando a impressão de quase instantaneidade na compilação.
• Execução: Como explicado no artigo anterior, a fase the execução não é estritamente relacionada à execução do código, mas também inclui todas as otimizações especulativas feitas pelo compilador JIT. Isso acontece pela natureza imprevisível do código JavaScript. O código .wasm não necessita dessas otimizações, já que seu código é de tipagem estática; isso também faz o motor do navegador gastar menos memória já que o Profiler não precisa manter uma tabela com as estatísticas de execução desse código afim de otimiza-lo.
• GC: O WebAssembly não tem Garbage Collector ainda.

Para ilustrar, a comparação da execução entre o código WebAssembly e JavaScript pode teoricamente ser como a seguinte imagem:

Comparação teórica da execução de um código JavaScript e WASM.

Equívocos comuns quando se falam de WebAssembly?

• WASM vai matar o JavaScript: Não é esperado que o WebAssembly seja usado no lugar do JavaScript, ele foi criado para complementa-lo onde a performance da aplicação web é crítica.
• WASM é uma nova linguagem de programação: Lembre-se, WASM é um formato binário, intermediário, que serve como Compiler Target para linguagens de programação como C, C++ e Rust. Embora exista um formato de texto para representação do seu código, não é esperado que se escreva código nessa representação.
• Só sendo programador C ou Rust para programar para WASM: O suporte para outras linguagens de programação virá assim que novas funcionalidades forem adicionadas ao WebAssembly, como suporte ao Garbage Collector. Além disso existem projetos de novas linguagens e até sub/superset do JavaScript que compila para WASM.

Como visto acima e nos textos anteriores, WASM é teoricamente mais rápido que JavaScript, mas como isso é na prática? É isso que iremos descobrir no próximo artigo.

Links

• What is WebAssembly (em inglês): https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts
• AST Binário, link da explicação da proposta (em inglês): https://github.com/binast/ecmascript-binary-ast
• Javascript startup performance (em inglês): https://medium.com/reloading/javascript-start-up-performance-69200f43b201
• Turboscript — um superset do JavaScript que compila para WASM: https://github.com/01alchemist/TurboScript
• Walt — sintaxe JavaScript-like para WebAssembly: https://github.com/ballercat/walt