WebAssembly: O que é e como criar um Hello World

As páginas da Web atualmente usam dois tipos de linguagens de programação. Por um lado, temos as linguagens do lado do servidor (como o PHP) que rodam no próprio servidor do site e enviam ao usuário as informações já processadas. E, por outro lado, as linguagens de programação do lado do cliente que são executadas no próprio navegador do usuário. Embora a linguagem mais usada na programação da Web do lado do cliente seja o JavaScript, existem outras alternativas que excedem em muito essa linguagem. E um deles é Webassembly. .

O que é WebAssembly

WebAssembly é uma linguagem de programação frontend que foi anunciada pela primeira vez em 2015. Em 2016, a primeira demonstração dessa linguagem foi feita em Firefox, cromo, Google Chrome e Microsoft borda executando uma demonstração popular chamada “Unity's Angry Bots”.

Webassembly.

Esta linguagem de programação, abreviada como Wasm , usa um formato de código binário portátil, bytecode). Graças a ele, os scripts do lado do cliente são totalmente executados no navegador. É uma linguagem de programação de baixo nível e, embora tenha sido originalmente criada como um destino de compilação para Código C e C ++ , também é compatível com outras linguagens, como Go e Ferrugem.

Esta linguagem de programação provou ser consideravelmente mais rápida do que outras linguagens de programação, como JavaScript. Além disso, quase não tem limitações em termos de funções, já que permite executar quase qualquer código de desktop diretamente no navegador. E com velocidade quase nativa.

O WASM não foi criado para substituir o JavaScript ou qualquer outra linguagem de front-end, mas sim para complementá-los. Os navegadores são capazes de executá-lo ao mesmo tempo, podendo carregar módulos criados em WebAssembly em aplicações JavaScipt.

Atualmente, o WebAssembly 1.0 já está incluído nos motores Firefox, Chrome, Safari e Edge.

Recursos WASM

Com tantas linguagens de programação funcionando hoje, é difícil encontrar diferenças críticas entre todas elas. Mas o WebAssembly tem apostado principalmente para se diferenciar de seus rivais em dois aspectos. Por um lado, estamos falando de um rápido e eficiente linguagem de programação, uma linguagem já de baixo nível que nos permitirá executar código binário a partir do navegador. Ao salvar intermediários ou intérpretes, o código é executado quase que instantaneamente no hardware, atingindo uma velocidade quase nativa.

Por outro lado, esta linguagem também apostou na segurança . O WASM usa técnicas para carregar a si mesmo na memória com segurança (com uma sandbox) para que o ambiente de tempo de execução seja isolado do resto do sistema. Este ambiente seguro pode até mesmo ser implementado em máquinas virtuais JavaScript existentes, oferecendo segurança adicional contra outros elementos. Este idioma aplicará as políticas de segurança do sistema, bem como as próprias permissões do navegador.

Claro, tudo relacionado a esta linguagem de programação é aberto . Suas instruções podem ser impressas em uma linguagem textual (não devemos escrever em uns e zeros) e podem ser depuradas, testadas, modificadas e experimentais com ela sem problemas. Além disso, é projetado para a preservação da web aberta, sendo compatível com as mesmas APIs do JavaScript e compatível com versões anteriores.

Como programar em WebAssembly

Esta linguagem de programação é aberta, então qualquer pessoa pode usá-la para o que quiser. Além disso, embora seja considerada uma linguagem de baixo nível, não é realmente complicada de usar.

Diferenciando os três estados

Ao falar sobre esta linguagem de programação, em primeiro lugar devemos diferenciar entre três estados diferentes:

  • Código fonte . O código do programa como tal. Esse código geralmente é escrito em uma linguagem de programação diferente, portanto, não é difícil criar programas ou módulos com ele. Podemos escolher a linguagem de programação que queremos nesta etapa, desde que seja compatível. Os mais usados ​​geralmente são C ++ e Rust.
  • Bytecode WebAssembly . Ao compilar o programa, o que devemos fazer é escolher que queremos fazê-lo neste formato. O próprio compilador de nosso ambiente de programação se encarregará de usar as instruções do IDE para converter o código da outra linguagem a este formato. O que obteremos no final é um arquivo .wasm.
  • Código da máquina . Quando tivermos o arquivo WASM compilado, nós o abrimos no navegador. E este é o responsável por traduzir o código diretamente para a linguagem de máquina, ou seja, para o binário.

Além disso, o WebAssembly possui uma linguagem intermediária conhecida como WASM-text. Essa linguagem passa a ser como uma linguagem de programação de alto nível para WASM. Os arquivos escritos neste idioma são salvos em arquivos com extensão WAT, e precisaremos de uma ferramenta chamada ” Kit de Ferramentas Binárias WebAssembly ”Para convertê-lo em um arquivo .wasm. Não costuma ser usado porque é muito mais complicado do que as outras línguas e, no final, não vale a pena. Mas existe e você tem que saber disso.

Exemplo de código WebAssembly WASM

Crie nosso primeiro programa

Existem muitas maneiras de compilar um programa ou módulo WebAssembly. Recomendamos, por exemplo, usar o SDK Emscripten, que podemos baixar de SUA PARTICIPAÇÃO FAZ A DIFERENÇA .

Em seguida, precisaremos de nosso módulo escrito nesta linguagem de programação. Usaremos um exemplo de “Hello World” escrito em C. Nosso arquivo, hello.c, terá o seguinte texto:

#include <stdio.h> int main() {printf("Hello Worldn");}

Assim que tivermos nosso arquivo escrito em C, usaremos o ” Inscrever-se ”Ferramenta para passá-lo para WASM. Podemos executar o Emscripten a partir do Python ou, melhor, a partir de um Windows Subsistema para Linux. Se estivermos programando no Windows e não quisermos usar o Linux, devemos procurar outro compilador equivalente. Para fazer isso com o Emscripten, abriremos um console do Windows e executaremos este comando nele:

emcc hello.c -s WASM=1 -o hello.html

O parâmetro “WASM = 1” é responsável por indicar ao programa que o que queremos é compilar o código nesta linguagem. O resultado, assim que as instruções forem concluídas, será:

  • Um arquivo hello.wasm, o binário.
  • Um arquivo JavaScript que contém as dependências necessárias para traduzir de C para WASM: hello.js.
  • O arquivo hello.html necessário para abrir o arquivo wasm no navegador e compilá-lo.

Simplesmente executando o “hello.html” estaremos executando o código no WebAssembly.