Introdução ao WebAssembly

Este artigo tem como objetivo dar uma breve introdução ao WebAssembly e seus benefícios.

Motivação

WebAssembly tem passado pela minha cabeça por uma certa frequência. Lembro até hoje da primeira vez que ouvi falar sobre essa nova tecnologia e de um exemplo onde um jogo era executado no front-end com uma performance muito boa utilizando apenas WebAssembly.

Desde então sempre esbarro com algum artigo falando sobre como grandes empresas utilizam WebAssembly para melhorar seus serviços agregando performance, novas funcionalidades e etc.

Foi então que me surgiu uma dúvida:

“Será que essa tecnologia é tão complexa assim que apenas grandes empresas conseguem utilizá-la ou é uma tecnologia simples e fácil de lidar?”.

E então eu comecei a pesquisar.

O que é WebAssembly

Segundo o Mozilla MDN:

“O WebAssembly é um novo tipo de código que pode ser executado em navegadores modernos — é uma linguagem de baixo nível, semelhante ao assembly, com um formato binário compacto, executado com desempenho quase nativo e fornece a linguagens como C / C++ e Rust com um destino de compilação para que eles possam ser executados na web. Ele também foi projetado para funcionar com o JavaScript, permitindo que ambos trabalhem juntos.”

Então, basicamente, você pode escrever código em outras linguagens (sejam elas de baixo ou alto nível), gerar um código WebAssembly que tem um formato mais compacto e executa com um desempenho quase nativo e trazer essa nova funcionalidade para o front-end. O quão legal é isso?

Com o WebAssembly nós poderíamos utilizar uma biblioteca de processamento de imagem feita em C e utilizá-la no front-end. Ou até mesmo utilizar uma biblioteca de inteligência artificial feita em Python sem precisar reescrever algum código dela.

Pense nas possibilidades.

Uma coisa importante de notar é que o WebAssembly não veio para substituir o JavaScript no front-end e sim para trabalharem lado a lado.

“Mas Vinicius, essa história parece boa demais pra ser verdade. Ele teve ter algum problema de utilização ou algo do tipo.”

Compatibilidade na Web

Atualmente o WebAssembly tem uma alta compatibilidade com os mais diversos browsers.

Utilizando o site caniuse.com você consegue checar a compatibilidade de novas features através dos diferentes tipos de browsers e suas versões.

Segue um print da tabela de compatibilidade do WebAssembly:

No canto superior direito você pode ver que ele apresenta compatibilidade com 90% de todos os browsers (eu tive que limitar um pouco os resultados mostrados para caber no print, caso tenha interesse em ver tudo você pode clicar aqui).

Projetos feitos com WebAssembly

Depois de descobrir tudo isso fiquei curioso pra saber quem estava utilizando WebAssembly nos dias de hoje, e encontrei o site madewithwebassembly.com. Ele tem uma grande coleção de projetos que utilizam essa tecnologia e explica como ela agrega valor para eles. Separei três exemplos que achei interessante em áreas totalmente diferentes:

Tensorflow

Tensorflow é uma biblioteca feita para treinar e deployar modelos de machine learning. Nesse post eles explicam como começaram a utilizar WebAssembly para treinar os modelos e como atingiram resultados com um tempo até dez vezes melhor.

Unity

Para quem não conhece, Unity é uma engine utilizada para desenvolvimento de jogos onde com o mesmo código você consegue distribuir o seu jogo através de diversas plataformas. Nesse post de 2018 eles anunciam a possibilidade de começar a publicar jogos para web utilizando WebAssembly e detalham seus benefícios, desde a quantidade de código até a melhoria na utilização da memória.

Google Earth

O Google Earth é um programa desenvolvido pela Google que renderiza um modelo 3D da terra e possibilita que o usuário possa movê-lo e dar zoom em qualquer área que quiser. Nesse post no blog do chromium eles explicam como o WebAssembly ajudou eles a trazer o Google Earth para mais browsers.

Este artigo será dividido em duas partes. Essa que foca na parte mais teórica do WebAssembly e a segunda que conta com um exemplo prático.