WebAssembly: aplicações Web com performance de aplicação nativa

Introdução

Este é um artigo que acompanha a palestra que dei na Fatec Mogi das Cruzes em 6 de novembro de 2018 sobre WebAssembly. Aqui, teremos a bibliografia usada para montar a apresentação, recomendações de outros recursos para quem tiver se interessado sobre o tema e também uma rápida demo mostrando na prática o uso básico de WebAssembly em uma aplicação Web.

Bibliografia / recomendações de mais recursos sobre o tema

Download da apresentação

Abaixo, segue uma lista de artigos e outros tipos de mídia que recomendo fortemente para quem tiver se interessado sobre WebAssembly e quiser entender mais não só sobre como usar a tecnologia mas também o porquê da sua criação e quais os seus trunfos sobre JavaScript (e outras tecnologias já aposentadas como Java Applets e Flash).

Demonstração

Criei um repositório no GitHub com uma demonstração simples de como compilar para WebAssembly um programa em C que calcula e imprime na tela os 30 primeiros números da sequência de Fibonacci.

Para rodar o exemplo em sua máquina, basta baixar o repositório e depois abrir o arquivo main.html com o Firefox (a versão deve ser 52 ou superior). Versões novas de todos os principais navegadores também suportam WebAssembly, no entanto parece ser necessário algum passo extra para execução de WebAssembly localmente (no Chrome e no Safari, por exemplo, ocorre um erro ao se tentar carregar o arquivo .wasm; não cheguei a pesquisar exatamente porque isso acontece, mas em um uso em produção esse problema não deve surgir).

O demo usa o Emscripten, uma ferramenta para compilação de C e C++ para WebAssembly. Se você quiser experimentar e modificar o programa do demo, será necessário instalar o Emscripten (e algumas outras dependências) localmente.

Um ponto interessante é que o Emscripten já gera automaticamente um arquivo HTML e também um arquivo JS que executa o código (desenvolvido em C ou C++) que foi compilado para WebAssembly (.wasm).

Para esse simples demo, eu basicamente segui os passos descritos no artigo Compiling a New C/C++ Module to WebAssembly da Mozilla Developer Network (MDN).

Para quem desejar se aprofundar, nesse artigo também é mostrado como ter outras funções - que não a função main - chamadas pelo código JS. Nesse mesmo artigo - e também em outros artigos da seção no MDN sobre WebAssembly - é mostrado como escrever manualmente código JS para chamar código que foi compilado para WebAssembly (e há também outros artigos com tópicos mais avançados sobre WebAssembly). Recomendo fortemente a leitura desse artigo para quem quiser começar a estudar essa nova tecnologia.

Outro ponto interessante que surgiu enquanto eu criava o demo foi a segurança de código compilado para WebAssembly. Em uma primeira tentativa, eu havia cometido um erro de implementação que fazia com que fosse acessado um índice não existente no array instanciado durante o algoritmo. Esse, aliás, é um erro muito comum em programas escritos em C (e outras linguagens de programação similares). Em C - pelo menos por padrão, no entanto existem ferramentas que poderiam ajudar na detecção da falha - esse erro passaria indetectado e poderia resultar em brechas de segurança na aplicação; em WebAssembly, no entanto, o código é abortado com um erro de array index out of bounds. Aliás, essas e outras mensagens de alerta / erro serão exibidas no console JavaScript do seu navegador, então fica a dica de olhar o console caso o seu programa não esteja funcionando!

Conclusão

WebAssembly é uma tecnologia muito interessante e - como disse durante a palestra - com grandes chances de vingar (principalmente por se adequar perfeitamente ao ecossistema Web e por ter suporte das grandes empresas desse mercado). Na minha opinião, vale a pena pelo menos ficar de olho nos desenvolvimentos da tecnologia nos próximos anos; acredito que, conforme ela for amadurecendo, começará a aparecer no dia a dia de muitos desenvolvedores Web (ou até em empresas que vislumbrarem na tecnologia a possibilidade de começar a oferecer uma experiência Web com base em alguma aplicação nativa já madura).

Caso você tenha alguma dúvida ou queira fazer alguma observação, não hesite em me contatar. Espero que este artigo tenha pelo menos ajudado você a dar os primeiros passos na jornada de aprendizado dessa nova tecnologia com tanto potencial.