Uma curta introdução à WebAssembly

Assis Ferreira
Jan 10 · 3 min read
Photo by Dawid Zawiła on Unsplash

A algum tempo ouve se falar da WebAssembly, uma tecnologia que promete fazer uma virada de jogo na web e melhorar a nossa experiência no consumo de aplicações Web que exigem alta performance.

A maneira como as tecnologias Web evoluíram, vem tornando mais fácil a vida de todos que consomem serviços na Internet e a WASM (sigla para WebAssembly) é o resultado “natural” da evolução da Web.

Segue um video onde Engenheiros da Mozilla, Epic Games e de outras organizações de renome falam um pouco do porque da WASM: https://youtu.be/MaJCfdmr9Wga

Mas o que é WebAssembly?

A webassembly.org define a WebAssembly da seguinte forma

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

Sintetizando a WebAssembly é um conjunto de instruções binárias, resultante da compilação de códigos de linguagem de alto nível (C e C++ por exemplo), que pode ser executadas por navegadores Web modernos.

O que isso significa?, imagine a possibilidade programar o comportamento da nossa página Web numa linguagem que não seja JavaScript.

O objetivo de WASM é tornar mais rápido e eficiente algumas instruções a serem executadas nos nossos navegadores web e aproximar a performance web a performance nativa.

Para que WASM nos dê todas as vangatens os diversos navegadores (Firefox, Chrome, Safaria, Edge, etc) tem de adotar essa tecnologia, nessa ótica, criou-se a Web Assembly Community Group em 2015 cujo principal objetivo é discutir e promover a colaboração entre os navegadores na criação de formatos portáveis de tamanho e eficiência adequadas para a compilação para a Web.

Aplicabilidades

Após entender o que é a WASM e como ela vai nos ajudar, vamos ver as infinitas possibilidades de aplicações dessa tecnologia e algumas vantagens tiradas em cada uma das aplicações.

Video Games

Com a WASM teremos uma melhoria efetiva na próxima geração de jogos Web, segue alguns exemplos de jogos desenvolvidos com essa tecnologia:

Processamento e reconhecimento de imagens

Teremos melhora no desempenho nas edições de imagens e vídeos, e na execução de algoritmos para reconhecimento de imagens.

Aplicações de Músicas

Melhoria no Streaming e Caching em plataformas de músicas.

VR e AR

Redução de latência

Outras aplicabilidades

  • Visualização e simulação cientificas
  • Plataformas de simulação e emulação
  • Compreensão e Encriptação

Fora dos navegadores Web também pode ser tirar vantagens da WASM em aplicacões em Backend, aplicativos híbridos em dispositivos mobile, etc.

Por onde começar?

Pode se utilizar WASM de diversas formas entre elas:

  • Base do aplicativo programado por inteiro em WASM
  • Utilizar a WASM para programar principais funcoes do aplicativo e manter a interface em JavaScript e HTML
  • Reaproveitar de códigos existentes em outras linguagens, compilar para WASM e incorporar em JavaScript e HTML tirando proveito de bibliotecas auxiliares

Calculadora Simples em .c e compilada para .wasm

Fiz um exemplo simples utilizando a ferramenta online https://webassembly.studio/, este pode ser encontrado no seguinte endereço https://webassembly.studio/?f=kxa26hy6otm ou em https://github.com/assisfery/C-calculator-to-WASM

Conclusão

A WASM é um conjunto de instruções binárias feitas para serem executadas em navegadores Web aproximando a performance de aplicações Web a performance que temos em aplicações Nativas.

A tecnologia WASM não foi projetada para substituir o JS, mas sim para complementar, ou seja, para ser executada ao lado do JavaScript e tirar proveito de ambas as partes.

A WASM visa aproveitar dos recursos de hardware disponíveis em diversas plataformas na melhora de execução de aplicações que exigem mais desempenho do CPU.

Ela pode ser utilizada em diversas aplicações como, por exemplo computação gráfica, cálculos intensos, compreensão e transmissão de informações, etc.

O mais empolgante da WASM é como a Web vai melhorar com ela e o que há de vir daqui para frente.

Obrigado pela leitura.

Referências

https://webassembly.org/

https://developer.mozilla.org/en-US/docs/WebAssembly

https://www.w3.org/community/webassembly/

https://medium.com/mozilla-tech/why-webassembly-is-a-game-changer-for-the-web-and-a-source-of-pride-for-mozilla-and-firefox-dda80e4c43cb

https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

https://www.webassemblygames.com/

Assis Ferreira

Written by

a simple programmer fascinated by technologies and all that can bring to our civilization

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade