WebAssembly, é pra comer?

5 min readSep 24, 2017

O que é WebAssembly:

WebAssembly ou wasm é um novo formato que pode ser interpretado nas versões mais recentes dos browsers e tem um alto potencial de ser a linguagem mais usada na interwebs nossa de cada dia. Ele define um novo formato de texto que encoda as informações para um formato binário e trás consigo um monte de melhorias relacionadas ao nosso cenário atual de desenvolvimento.

Suporte

A maioria dos browsers modernos, cerca de 60%, já aceitam o novo formato, o esperado é que com o tempo só aumente mais ainda essa cobertura dos browsers e com funções nativas novas de compatibilidade com JS e outras features.

Tá, mas por qual motivo,razão ou circustância deveria usar isso?

Portabilidade

Capacidade de converter códigos de outras linguagens no formato wasm com a velocidade nativa, isso abre um leque de oportunidades para desenvolvedores como re-utilização de libs de outras linguagens e melhoria em ferramentas como por exemplo OpenCV, Unity e outras. Ainda podemos utilizar o .wasm em outros ambientes como IoT, servidores,apps mobiles por exemplo.

Como Jaydson Gomes escreveu:

nós não iremos escrever módulos WebAssembly, mas sim portar códigos já existentes, ou até mesmo criar soluções que exigem alta performance em outras linguagens.

Leve

Nas imagens acima podemos verificar como funciona a sua build:

Primeiro escrevemos o código na linguagem que preferimos, depois compilamos ela pro formato .wast(formato de texto do WebAssembly) e depois o resultado final que será gerado em HEX(com o formato .wasm) mas nesse WebAssembly Explorer foi reescrito em x86 asm.

O wasm foi gerado em formato binário e resultando num arquivo realmente leve e assim melhorando a performance durante o carregamento das páginas diferentemente de arquivos JavaScript que são maiores. Assim, consumindo muito menos banda e sendo assustadoramente rápido o carregamento.

Parsing

peguei daqui: https://www.quora.com/How-does-a-JavaScript-engine-such-as-Rhino-V8-or-SpiderMonkey-work-What-are-some-useful-resources-for-understanding-them

Linguagens como JavaScript tem um longo caminho até serem de fato executadas pelo sistema de parsing feito pelos engines dos browsers.

Diferentemente do WebAssembly em que não há necessidade disso visto que o código gerado já é a transformação intermediária e só precisa de um encode para funcionar.

Expressão comum quando as pessoas descobrem o wasm

Ficou vazio sem um exemplo né? Let’s do it!

Primeiramente precisamos do emsdk que é um SDK que fará a conversão do seu código, no caso, C/C++ para o formato de WebAssembly. Para instalação do SDK eu segui o guia do repo oficial que pode ser encontrado nesse link:

https://github.com/juj/emsdk

Com o SDK funcionando e podendo utilizar o emcc podemos prosseguir:

Iremos criar uma aplicaçãozinha que mostra os resultados de uma calculadora.

Só relembrando como funciona o WebAssembly:

Iremos primeiro criar nosso arquivo C que será posteriormente compilado em wasm:

Depois de testar o seu código com o compilador de C de sua preferência como gcc, iremos portar o código para WebAssembly:

emcc calculadora.c -s WASM=1 -s SIDE_MODULE=1 -o calculadora.wasm

Um arquivo calculadora.wasm, será gerado na pasta após a execução do emcc.

Não falei muito sobre os compiladores né? Quando instalamos o emsdk que é a SDK para conseguirmos compilar nossos códigos em linguagem fonte ele instala basicamente dois compiladores que é o emcc(que compila de C para .wasm) e o em++(que compila de C++ para .wasm).

O .wasm ainda não consegue ser reconhecido como <script type=’module’>, por isso iremos rodar ele usando JavaScript. O emsdk fornece no próprio emcc um gerador de javascript para vermos o WebAssembly em ação, podemos executar ele com o seguinte comando:

emcc calculadora.c -s WASM=1 -o calculadora.js

Depois disso é só importarmos o calculadora.js num .html e conseguiremos o seguinte resultado:

Se você quiser montar o Javascript na mão sem uso de nenhum gerador temos um ótimo tutorial feito pelo Jaydson Gomes que pode ser encontrado nesse link:

https://braziljs.org/blog/iniciando-com-webassembly-parte-2/

Também existem várias funções prontas já implementadas nos browsers que dão suporte a .wasm e podem ser encontradas no seguinte link:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly

Conclusão

WebAssembly é muito poderoso e podemos portar várias aplicações ou usar features de outras linguagens nos nossos browsers enriquecendo mais o mundo de desenvolvimento para internet, existem múltiplas possibilidades de usarmos essa linguagem e com certeza a web que conhecemos hoje não será a mesma daqui a 2~5 anos.

Portar as aplicações/ferramentas para o browser pode parecer muito desafiador, nesse tutorial inclusive tive grandes problemas em desenvolver sem o uso do gerador, mas com o aumento atual da comunidade as pessoas andam desenvolvendo várias ferramentas que nos ajudam/ajudarão com isso.

Links interessantes:

https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/
https://developer.mozilla.org/pt-BR/docs/WebAssembly
https://medium.com/@ianjsikes/get-started-with-rust-webassembly-and-webpack-58d28e219635 feito pelo Ian J Sikes, uma maneira de portar Rust em wasm muito linda e com novas ferramentas ❤
https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/