Você já se perguntou sobre os principais conceitos e casos de uso do WASM? Se não, nós cobrimos você.
WebAssembly (WASM) é uma nova linguagem de baixo nível que permite desbloquear desempenho nativo na web.
Em WebAssembly para Iniciantes – Parte 1, apresentamos o WASM de uma perspectiva de iniciante, cobrindo sua definição e limitações. Além disso, analisamos os recursos do WebAssembly, o roteiro do WASM e como o JavaScript funciona com o WebAssembly, e não contra ele.
Esta postagem explorará o WebAssembly discutindo os objetivos do WASM, os principais conceitos e os casos de uso. Também vamos dar uma olhada em alguns de seus projetos interessantes.
Vamos começar.
últimas postagens
Objetivos do WebAssembly
Para entender os principais conceitos do WebAssembly, primeiro precisamos examinar seus objetivos. Essas metas incluem:
- Capacidade de aproveitar o hardware disponível usando o tempo de carregamento e o formato binário com eficiência de tamanho como destino de compilação. Em palavras simples, o WASM usa uma Abstract Syntax Tree (AST) em formato binário, suportando compilação e execução em velocidade nativa. Ao usar a abordagem, o WASM pode funcionar em vários dispositivos, incluindo IoT, Web e dispositivos móveis.
- O objetivo do WASM não é alterar ou mudar a plataforma da Web existente. Com essa abordagem, o WebAssembly pode se integrar bem com a Web atual e anterior. Ele também permite que o WebAssembly funcione perfeitamente com JavaScript, incluindo execução paralela ou chamadas síncronas de JavaScript.
- Para trabalhar perfeitamente com políticas de segurança de permissões e de mesma origem.
- Certifique-se de que os desenvolvedores possam projetar suas soluções para oferecer suporte a incorporações não relacionadas ao navegador.
- Por último, dando aos desenvolvedores as ferramentas para trabalhar de forma eficiente com o código-fonte do WebAssembly, fornecendo um formato de texto editável por humanos.
Conceitos chave do WebAssembly
Dentro do capô, o WebAssembly segue os seguintes passos:
- Primeiro, você precisa escrever código em uma linguagem de tipagem estática com tipos definidos.
- Depois de concluído, você gera um módulo WASM pré-compilado e alimenta o código no compilador do mecanismo.
- A etapa acima garante que o WASM ignore a análise e deixe o código pronto para ser renderizado no navegador da web.
Os principais conceitos por trás do WebAssembly em execução no navegador da Web incluem:
- Memória: A memória no WebAssembly é gerenciada e escrita por suas instruções de acesso à memória de baixo nível. Tecnicamente, é um ArrayBuffer redimensionável e contém uma matriz de bytes de memória.
- Módulo: O módulo no WebAssembly é um código de computador executável compilado. Devido à sua forma sem estado, o navegador da Web compila o Módulo e o compartilha entre o Windows e os Trabalhadores. Além disso, o Módulo armazena e declara importações e exportações, além de abrigar as funções, tabelas, tipos, globais e Memória.
- Tabela: Uma tabela consiste em todas as referências e funções usando uma matriz digitada redimensionável. Isso elimina a necessidade de armazenar bytes brutos na memória.
- Instância: No WASM, uma instância é um módulo durante o tempo de execução, com todos os estados pareados. Esses estados incluem Tabela, Memória e outros conjuntos de valores importados.
Conceitos chave do WASM
Como desenvolvedor da Web, você pode usar a API JavaScript para chamar e definir módulos, tabelas, instâncias e tabelas. Além disso, você usa JavaScript para chamar exportações WASM de forma síncrona dentro das funções JavaScript. Portanto, o JavaScript funciona bem com o WebAssembly, pois você pode usar o WASM para escrever aplicativos de alto desempenho no navegador da web.
Objetos WASM
Ao trabalhar com WebAssembly, você deve controlar oito objetos WASM. Esses objetos incluem:
- WebAssembly.Global – O objeto Global é uma instância de variável global. É acessível por WebAssembly.Module e JavaScript.
- WebAssembly.Module – Aqui, o objeto Module contém o código WASM sem estado. O código é pré-compilado.
- WebAssemly.Instance – WebAssembly.Instance é a instância executável e com estado de WebAssembly.Module.
- WebAssembly.Table – O objeto Table contém referências de função e atua como um wrapper de JavaScript.
- WebAssembly.CompileError – O objeto CompileError contém todos os erros durante a validação e decodificação.
- WebAssembly.RuntimeError – Aqui, o objeto RuntimeError lista todos os erros de tempo de execução.
- WebAssembly.LinkError – O objeto LinkError contém erros que ocorrem durante a instanciação do módulo.
Casos de uso e projetos WASM
Já sabemos que o WebAssembly oferece desempenho semelhante ao nativo no navegador da web. No entanto, para entender verdadeiramente onde você pode usá-lo, você deve examinar seus casos de uso. Vamos listar abaixo alguns dos casos de uso do WASM.
Os casos de uso do WebAssembly abrangem dentro e fora do navegador. Por exemplo, se você deseja usar o WASM em um navegador, pode fazer várias coisas, incluindo:
- Edição de vídeo ou áudio, como o projeto ffmpegwasm.
- Jogos de vídeo no navegador da web, como esses jogos de alto desempenho.
- Visualização científica e simulação
- Emulação/simulação de plataformas como DOSBox, MAME, etc.
- Criptografia
- Área de trabalho remota
- ferramentas de desenvolvedor
Casos de Uso
De um ponto de vista geral, os casos de uso atraentes do WebAssembly incluem
- A capacidade de escrever código mais rápido pode tirar proveito do hardware subjacente.
- Além disso, você também pode fazer a compactação do lado do cliente, o que resulta em melhor tempo de carregamento e economia de largura de banda. Portanto, você usa a CPU do cliente ou o hardware subjacente para fazer a compactação e descompactação e, em seguida, usa os recursos do servidor.
- Além disso, você pode usar diferentes linguagens de programação para escrever código para a Web, além de apenas usar JavaScript. Por exemplo, você pode usar Rust, C e C++ para escrever código de alto desempenho para determinados aspectos de seus aplicativos da web.
Projetos
Se passarmos para exemplos do mundo real, vale a pena mencionar os seguintes projetos.
- A Figma melhorou o desempenho de seu aplicativo da web com o uso do WebAssembly. Eles reduziram o tempo de carregamento durante a inicialização do aplicativo, a renderização de todo o design e até o download de um arquivo de design. Como discutimos anteriormente, o WebAssembly também é ótimo para compactação. A Figma implementou o WASM para melhorar o tamanho do download, reduzindo-o significativamente.
- Pyodide: Outro projeto empolgante do WASM é o projeto Pyodide, que foi lançado pela Mozilla. Ele permite que os cientistas compilem a pilha científica Python para WebAssembly, incluindo NumPy, SciPy, Scikit-learn, etc., para o navegador. Ele oferece uma conversão de objeto transparente entre Python e JavaScript. Por fim, também permite que os desenvolvedores usem APIs da Web usando Python.
- Brazor WebAssembly: A estrutura do Brazor WebAssembly permite que os desenvolvedores criem aplicativos da Web interativos, de página única e do lado do cliente com .NET. Você pode hospedar esses aplicativos no navegador com o tempo de execução .NET baseado em WebAssembly. Aqui, como desenvolvedor, você obtém acesso à funcionalidade do navegador em seu código .NET com a ajuda das APIs JavaScript do WebAssembly.
Fonte: Figma See More
Outros muitos projetos conhecidos e valiosos estão usando o WebAssembly. Estes são Binaryen, Cheerp, Forest, Grain e outros.
Pensamentos finais
O WebAssembly não é exatamente amigável para iniciantes. No entanto, ao estudar seus casos de uso e conceitos-chave, você pode entender claramente sua capacidade.
Com projetos empolgantes no mercado, é o melhor momento para aprender WebAssembly, principalmente se você estiver na área de desenvolvimento Web. A capacidade do WASM de funcionar fora do navegador também o torna uma escolha excelente para desenvolvimento orientado ao desempenho.
Gostou de ler o artigo? Que tal compartilhar com o mundo?