O que é WebAssembly e por que ele afeta todos os desenvolvedores web!

Você já ouviu alguma notícia sobre WebAssembly? Google, Microsoft, Mozilla e outros estão se unindo para lançar um novo formato binário para a web.

Vamos direcionar um olhar mais atento para o que é WebAssembly e por que seu aspecto e desenvolvimento futuro devem importar para todos.

Ele vai mudar a web. Pelo menos alguma extensão dela.

JavaScript — o idioma da web

A web é baseada em vários padrões, o que é absolutamente bom. E isso faz com que a vida de construtores e criadores de código seja mais fácil. Imagine que não existisse quaisquer regra, linguagem, estrutura ou conceito sob os quais construiríamos sites e aplicações.

O padrão web que detém diversos conjuntos de informações tem um nome bem conhecido. É chamado de JavaScript.

O JavaScript é basicamente a linguagem de programação padrão para plataformas web. E como cada vez mais os softwares se tornam softwares web, o JavaScript ganhou uma imensa popularidade.

Tem havido algumas tentativas ao longo dos anos para contornar as limitações do JavaScript, o que ele definitivamente tem. Arquivos JavaScript são arquivos de texto simples. Esses arquivos são baixados do servidor e, em seguida, analisados e compilados pelo motor JavaScript no navegador.

Os navegadores atualmente usam JavaScript para interpretar código e habilitar funcionalidades, como conteúdo dinâmico. Melhorias de desempenho com frameworks JavaScript também foram feitas. No entanto, os sistemas baseados em bytecode são ainda mais rápidos e mais eficientes.

Então, o que diabos é WebAssembly?

WebAssembly é uma espécie de novo código de byte. WebAssembly — ou abreviado: “wasm” — é uma nova sintaxe para código binário seguro de baixo nível. Ele é definido como “um formato portátil para execução, carregamento, verificação e exibição de modelos de código”, projetado para servir como um alvo de compilação para a web.

Isso definitivamente significa melhorias de desempenho no navegador. E nos dá acesso a um conjunto de blocos de construção de baixo nível, como uma gama de tipos e operações.

Não me interpretem mal. Ele não é anunciado e concebido como uma alternativa ao JavaScript.

E como Bjarne Stroustup declarou:

JS vai sobreviver. “Há apenas dois tipos de linguagem: aquelas sobre as quais as pessoas reclamam e aquelas que ninguém usa”.)

Ou como Eric Elliott afirmou: “Pode ser útil não pensar em WebAssembly como uma linguagem de fato. Ele é mais como uma máquina”.

De asm.js para WebAssembly?

O asm.js é ótimo para código na compilação escrito — por exemplo — em C ou C ++. O asm.js é um subconjunto do JavaScript, que pode ser usado em plataformas de baixo nível, e é uma linguagem de destino eficiente para compiladores.

A ideia do asm.js é codar o JavaScript de uma forma que os motores de compilação produzam código de máquina mais eficiente. Se você compilar C ++ para asm.js, poderá alcançar grandes melhorias de velocidade em navegadores web.

O WebAssembly tem algumas vantagens sobre o asm.js que envolvem principalmente problemas de desempenho. De acordo com o FAQ do WebAssembly: “Em dispositivos móveis, grandes códigos compilados podem facilmente levar 20–40s apenas para serem analisados […] As primeiras experiências mostram que o WebAssembly pode ser carregado mais do que 20 vezes mais rapidamente, porque o trabalho de análise é mínimo”.

O que isso tem de tão incrível, afinal?

Então, provavelmente você está perguntando: por que toda essa febre sobre a notícia? O WebAssembly é definitivamente uma melhoria para o JavaScript. Mas não apenas isso. É uma grande melhoria para o navegador também.

Os navegadores vão entender o formato binário. Então você vai ser capaz de compilar pacotes binários que comprimem muito mais do que um conteúdo JavaScript.

Isso poderia trazer a “performance parecida com aplicativos” para todos os aplicativos de conteúdos da web. Parece ótimo, né? Em vez de ter que analisar o código completo, porém, que muitas vezes pode demorar um pouco (especialmente no celular), o WebAssembly pode ser decodificado significativamente mais rápido.

Quem já está nessa?

Google, Microsoft e Mozilla são apenas alguns nomes. Engenheiros líderes lançaram uma Comunidade WebAssembly com a missão de “promover a colaboração cross-browser em estágio inicial em formato portátil do novo, […] formato para compilação na web”.

No entanto, é necessário lembrar que a obra “acaba de começar” no WebAssembly. Então este é um estágio muito cedo do projeto e vai certamente demorar algum tempo até que o WebAssembly se torne um padrão web bem conhecido.

Por que isso afetará todos os desenvolvedores web?

Porque ele vai permitir que os desenvolvedores façam todo tipo de coisas novas que não teriam sido possíveis ou tão fáceis com JavaScript.

A comunidade W3C WebAssembly tem poucos casos de uso para o WebAssembly e como ele vai facilitar a vida dos desenvolvedores web. Aqui estão alguns:

• A melhor forma de execução das linguagens de programação é cross-compilada para a web.
• Para o desenvolvedor das ferramentas, dentro do navegador.
• Cliente mais rápido para aplicações empresariais (por exemplo, bancos de dados).

O WebAssembly pode ser usado de várias maneiras. Por exemplo, pode ser utilizado em código existente JavaScript/HTML que pode ser incorporado. Por outro lado, o WebAssembly pode ser usado como o framework principal, enquanto a IU (interface de usuário) ainda é feita em JavaScript / HTML.

Menos código, melhor desempenho, menos bugs?

De acordo com o grupo WebAssembly, o simples fato de utilizar WebAssembly significa menos código-fonte. Em comparação com asm.js, isso significa uma redução de cerca de 25% no tamanho do código — embora ele seja apenas um protótipo, e os resultados variam.

Então, provavelmente você está querendo saber como manter-se atualizado sobre WebAssembly? Eu recomendo os seguintes recursos úteis para WebAssembly:

• Página do GitHub WebAssembly
• Documentação de projeto WebAssembly
• Comunidade W3C WebAssembly
• O que é WebAssembly por Eric Elliott

Como eu utilizo o WebAssembly em minha aplicação?

Acima nós falamos sobre primitivas puras que o WebAssembly adiciona à plataforma Web: um formato binário para código e APIs para carregar e executar esse código binário. Agora vamos falar sobre como nós podemos utilizar estas primitivas na prática.

O ecossistema do WebAssembly está em seu estado inicial: sem dúvidas, mais ferramentas vão aparecer. Neste momento, existem quatro pontos de entrada principais:

• Portando uma aplicação C/C++ com Emscripten.
• Escrevendo ou gerando WebAssembly diretamente no nível do assembly.
• Escrevendo uma aplicação Rust e definindo WebAssembly como seu output.
• Usando AssemblyScript que se parece com TypeScript e compila ao binário WebAssembly.

Vamos falar sobre estas opções:

Portando a partir de C/C++

Duas das muitas opções para criar códigos WASM, são um assembler wasm online ou Emscripten. Existem algumas opções de assembler wasm online, como:

• WasmFiddle
• WasmFiddle++
• WasmExplorer

Estes são excelentes recursos para pessoas que estão tentando descobrir por onde começar, mas não possuem as otimizações e ferramentas do Emscripten.

A ferramenta Emscripten é capaz de pegar qualquer código fonte C/C++ e compilá-lo para um módulo .wasm, além da “cola” JavaScript necessária para carregar e executar o módulo, e um documento HTML para exibir os resultados do código.

De maneira resumida, o processo funciona da seguinte maneira:

Emscripten primeiro alimenta o C/C++ no clang+LLVM — um maduro compilador C/C++, enviado como parte do Xcode do OSX, por exemplo.

Emscripten transforma o resultado compilado do clang+LLVM em um binário .wasm

Por si só, o WebAssembly atualmente não pode acessar diretamente o DOM; ele só pode chamar o JavaScript, transmitindo tipos de dados primitivos de ponto flutuante e inteiro. Portanto, para acessar qualquer API da Web, o WebAssembly precisa chamar o JavaScript, que faz a chamada da API da Web. Portanto, o Emscripten cria o código de “cola” HTML e JavaScript necessário para alcançar isso.

O código de “cola” JavaScript não é tão simples quanto você imagina. Para começar, o Emscripten implementa bibliotecas populares de C/C++ como SDL, OpenGL, OpenAL e partes do POSIX. Essas bibliotecas são implementadas em termos de APIs da Web e, portanto, cada uma exige algum código JavaScript para conectar o WebAssembly à API da Web subjacente.

Portanto, parte do código está implementando a funcionalidade de cada biblioteca respectiva usada pelo código C/C ++. O código de “cola” também contém a lógica para chamar as APIs JavaScript do WebAssembly mencionadas acima para buscar, carregar e executar o arquivo .wasm.

O documento HTML gerado carrega o arquivo JavaScript e grava stdout em um <textarea>. Se o aplicativo usar OpenGL, o HTML também conterá um elemento <canvas> usado como destino de renderização. É muito fácil modificar a saída do Emscripten e transformá-la em qualquer aplicativo da web que você precisar.

Você pode encontrar a documentação completa em Emscripten em emscripten.org, e um guia para implementar a cadeia de ferramentas e compilar seu próprio aplicativo C/C ++ no wasm em Compiling from C/C++ to WebAssembly.

Escrevendo WebAssembly diretamente

Deseja criar seu próprio compilador, ou suas próprias ferramentas, ou criar uma biblioteca JavaScript que gere o WebAssembly em tempo de execução?

Da mesma maneira que as linguagens assembly físicas, o formato binário do WebAssembly tem uma representação de texto — os dois têm uma correspondência 1:1. Você pode escrever ou gerar esse formato manualmente e depois convertê-lo no formato binário com qualquer uma das várias WebAssemby text-to-binary tools.

Para um guia simples de como fazer isso, consulte o artigo Converting WebAssembly text format to wasm.

Escrevendo em Rust mirando WebAssembly

Também é possível escrever o código Rust e compilar para WebAssembly, graças ao trabalho incansável do Rust WebAssembly Working Group. Você pode começar a instalar a cadeia de ferramentas necessária, compilar um programa Rust de amostra em um pacote npm do WebAssembly e usá-lo em um aplicativo web de amostra, no artigo Compiling from Rust to WebAssembly.

Usando AssemblyScript

Para desenvolvedores web que quereem testar o WebAssembly sem a necessidade de abrende detalhes de C ou Rust, AssemblyScript irá sem a melhor opção. Ele gera um pequeno bundle e seu desempenho é um pouco mais lento comparado a C ou Rust. Você pode conferir sua documentação em https://docs.assemblyscript.org/.

...

artigos usados como referencia:

https://usersnap.com/blog/what-is-webassembly-for-web-developer/ https://developer.mozilla.org/pt-BR/docs/WebAssembly/Concepts