Mozilla

Mozilla
=======

Os artigos abaixo incluem conteúdos sobre como baixar e compilar os códigos fontes da Mozilla. Além disso, encontrará artigos úteis sobre como o código funciona, como desenvolver complementos para aplicativos Mozilla e afins.

ComplementosModifique e amplie os aplicativos da Mozilla

FirefoxO Firefox é um popular navegador de internet da Mozilla, disponível para várias plataformas como Windows, Mac OS X e Linux no desktop, bem como Android e iOS nos dispositivos móveis. Sendo altamente compatível com as últimas tecnologias web e poderosas ferramentas de desenvolvimento, o Firefox é um excelente navegador tanto para usuários comuns quanto desenvolvedores web.


Aprendendo desenvolvimento web

Aprendendo desenvolvimento web
==============================

Bem-vindo à área de aprendizado da MDN. Este conjunto de artigos tem como objetivo fornecer aos iniciantes no desenvolvimento web tudo o que eles precisam para começar a codificar sites.

O objetivo desta área da MDN não é levá-lo de "iniciante" a "especialista", mas levá-lo de "iniciante" a "confortável". A partir daí, você poderá começar a fazer o seu próprio caminho, aprendendo com o restante da MDN e outros recursos intermediários a avançados que assumem muito conhecimento prévio.

Se você é um iniciante, o desenvolvimento web pode ser desafiador - nós o ajudaremos e forneceremos detalhes suficientes para que você se sinta à vontade e aprenda os tópicos adequadamente. Você deve se sentir em casa, seja um aluno aprendendo desenvolvimento web (sozinho ou como parte de uma classe), um professor que procura materiais para a aula, um hobby ou alguém que só quer entender mais sobre como as tecnologias web funcionam.

O que há de novo?
-----------------

O conteúdo da área de aprendizado está sendo adicionado regularmente. Começamos a manter as Notas de versão da área de aprendizado para mostrar o que mudou - verifique regularmente!

Se você tiver dúvidas sobre os tópicos que gostaria de ver cobertos ou que estão faltando, envie-nos uma mensagem em nosso Fórum de discussão.

Onde começar
------------

* Iniciante: Se você é um iniciante no desenvolvimento web, recomendamos que você comece trabalhando no nosso módulo Introdução à Web, que fornece uma introdução prática ao desenvolvimento web.
* Perguntas específicas: Se você tiver uma pergunta específica sobre desenvolvimento web, nossa seção Perguntas comuns pode ter algo para ajudá-lo.
* Além do básico: Se você já possui um pouco de conhecimento, o próximo passo é aprender HTML e CSS em detalhes: comece com o módulo Introdução ao HTML e vá para nosso módulo Primeiros passos com CSS.
* Passando para o script: Se você já está familiarizado com HTML e CSS ou se interessa principalmente por codificação, deve passar para o JavaScript ou para o desenvolvimento no servidor. Comece com nossos módulo Primeiros passos com JavaScript e Primeiros passos programando o site no servidor.

**Nota:** Nosso glossário fornece definições de terminologia.

Assuntos abordados
------------------

A seguir, uma lista de todos os tópicos abordados na área de aprendizado da MDN.

Intordução à Web

Fornece uma introdução prática ao desenvolvimento da web para iniciantes.

HTML - Estruturando a Web

HTML é a linguagem que usamos para estruturar as diferentes partes do nosso conteúdo e definir qual é o seu significado ou propósito. Este tópico ensina HTML em detalhes.

CSS - Estilizando a Web

CSS é a linguagem que podemos usar para estilizar e esquematizar nosso conteúdo web, além de adicionar comportamentos como animação. Este tópico fornece uma cobertura abrangente de CSS.

JavaScript — Script dinamico do lado do cliente

JavaScript é a linguagem de script usada para adicionar funcionalidade dinâmica a páginas da web. Este tópico ensina todos os elementos essenciais necessários para se sentir confortável com a escrita e a compreensão do JavaScript.

Formulários web - Trabalhando com dados do usuário

Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário. Nos artigos listados abaixo, abordaremos todos os aspectos essenciais da estruturação, estilo e interação com os formulários web.

Acessibilidade - torne a web utilizável por todos

Acessibilidade é a prática de disponibilizar o conteúdo web para o maior número possível de pessoas, independentemente da deficiência, dispositivo, localidade ou outros fatores de diferenciação. Este tópico fornece tudo o que você precisa saber.

Desempenho da Web - tornando os sites rápidos e responsivos

O desempenho da Web é a arte de garantir que os aplicativos façam download rápido e respondam à interação do usuário, independentemente da capacidade, tamanho da tela, rede ou recursos do dispositivo.

Ferramentas e testes

Este tópico aborda as ferramentas que os desenvolvedores usam para facilitar seu trabalho, como ferramentas de teste entre navegadores, linters, formatadores, ferramentas de transformação, sistemas de controle de versão e ferramentas de implantação.

Programação do site no servidor

Mesmo se você estiver se concentrando no desenvolvimento web do lado do cliente, ainda é útil saber como os servidores e os recursos de código do lado do servidor funcionam. Este tópico fornece uma introdução geral sobre como funciona o lado do servidor e tutoriais detalhados que mostram como criar um aplicativo do lado do servidor usando duas frameworks populares - Django (Python) e Express (Node.js).

Obtendo nossos exemplos de código
---------------------------------

Os exemplos de código que você encontrará na Área de aprendizado estão disponíveis no GitHub. Se você deseja copiar todos eles para o seu computador, a maneira mais fácil é fazer o download de um ZIP da última ramificação do código mestre.

Se você preferir copiar o repositório de uma maneira mais flexível que permita atualizações automáticas, siga as instruções mais complexas:

1. Instale o Git na sua máquina. Este é o software do sistema de controle de versão, no qual o GitHub trabalha.
2. Abra o prompt de comando do seu computador (Windows) ou terminal (Linux, macOS).
3. Para copiar o repositório da área de aprendizado para uma pasta chamada learning-area no local atual para o qual o prompt de comando / terminal está apontando, use o seguinte comando:

```bash
git clone https://github.com/mdn/learning-area
```

4. Agora você pode entrar no diretório e encontrar os arquivos que procura (usando o Finder / File Explorer ou o comando cd).

Você pode atualizar o repositório `learning-area` com as alterações feitas na versão principal no GitHub com as seguintes etapas:

1. No prompt de comando / terminal, entre no diretório `learning-area` usando `cd`. Por exemplo, se você estivesse no diretório pai:

```bash
cd learning-area
```

2. Atualize o repositório usando o seguinte comando:

```bash
git pull
```

Contate-nos
-----------

Se você quiser entrar em contato conosco sobre qualquer coisa, a melhor maneira é enviar uma mensagem para o nosso Fórum de discussão. Gostaríamos de ouvir sua opinião sobre qualquer coisa que você acha que está errada ou ausente no site, solicitações de novos tópicos de aprendizado, solicitações de ajuda com itens que você não entende ou qualquer outra pergunta ou preocupação.

Se você estiver interessado em ajudar a desenvolver / melhorar o conteúdo, veja como você pode ajudar e entre em contato! Temos o prazer em conversar com você, seja você um aluno, professor, desenvolvedor web experiente ou alguém interessado em ajudar a melhorar a experiência de aprendizado.

Veja também
-----------

Boletim informativo para desenvovedores mozilla

Nosso boletim informativo para desenvolvedores web, que é um excelente recurso para todos os níveis de experiência.

Learn JavaScript

Um excelente recurso para aspirantes a desenvolvedores web - Aprenda JavaScript em um ambiente interativo, com breves lições e testes interativos, guiados por avaliação automatizada. As primeiras 40 lições são gratuitas e o curso completo está disponível por um pequeno pagamento único.

Web demystified

Uma grande série de vídeos explicando os fundamentos da web, destinados a iniciantes no desenvolvimento web. Criado por Jérémie Patonnier.

Codecademy

Um ótimo site interativo para aprender linguagens de programação do zero.

BitDegree

Teoria básica de programação com um processo de aprendizado gamificado. Principalmente focado em iniciantes.

Code.org

Teoria e prática básicas de programação, destinadas principalmente a crianças / iniciantes.

EXLskills

Cursos gratuitos e abertos para o aprendizado de habilidades técnicas, com orientação e aprendizado baseado em projetos.

freeCodeCamp.org

Site interativo com tutoriais e projetos para aprender desenvolvimento web.

Web literacy map

Uma estrutura para alfabetização na web de nível básico e habilidades do século XXI, que também fornece acesso a atividades de ensino classificadas por categoria.

Edabit

Milhares de desafios interativos de JavaScript.


Desenvolvimento de jogos

Desenvolvimento de jogos
========================

Jogar é uma das atividades mais populares em computadores. Novas tecnologias aparecem, constantemente, para tornar possível o desenvolvimento de jogos melhores e mais poderosos, que podem ser executados em qualquer navegador compatível com os padrões web.

Desenvolver jogos web
---------------------

Bem-vindas ao centro de desenvolvimento de jogos MDN! Nesta área da página oferecemos recursos para desenvolvedores web que querem dedicar-se a jogos. Você encontrará muitos tutoriais úteis e artigos técnicos no menu principal à sua esquerda - sinta-se livre para explorá-los.

Também incluímos uma seção de referências para que você possa, facilmente, encontrar informações sobre todas APIs mais usadas no desenvolvimento de jogos, acompanhadas de uma lista de ferramentas e engines úteis e, exemplos de jogos.

**Nota:** Você já deve ter um conhecimento básico sobre as principais tecnologias web — tais como HTML, CSS e Javascript — antes de tentar criar jogos web. A Área de aprendizado é o melhor para você, se você for completamente principiante.

Leve jogos nativos para a Web
-----------------------------

Se você é programador nativo (codifica jogos em C++ por exemplo) e tem interesse em levar os seus jogos para a Web, você deve aprender mais sobre a nossa ferramenta Emscripten — é uma LLVM para o compilador JavaScript que carrega bytecode LLVM (exemplo: código gerado do C/C++ usando Clang, ou de qualquer outra linguagem de programação) e compila esses bytecodes para asm.js, que pode rodar na Web.

Para começar, veja:

* Sobre Emscripten - introdução que inclui detalhes de alto nível.
* Baixar e instalar - para instalar o conjunto de ferramentas.
* Emscripten Tutorial - um tutorial que vai te mostrar como começar.
Exemplos
--------

Para uma lista de exemplos de jogos web, veja a nossa página de exemplos. Também dê uma olhada em openwebgames.com para mais exemplos e recursos úteis!

![](/pt-BR/docs/Games/owg-logo-dark.svg)

Veja também
-----------

Desenvolva Novos Jogos

Um portal colaborativo com um grande número de tutoriais de desenvolvimento de jogos web. Não tem estado muito ativo ultimamente, mas ainda possui algumas dicas boas.

Creative JS

Uma coletânea de impressivas técnicas e experimentos Javascript, não específicas para jogos mas, ainda assim, úteis. Não tem estado muito ativo ultimamente, mas também possui algumas dicas boas.

Padrões de desenvolvimento de jogos

Um e-book, escrito por Bob Nystrom, que discute padrões de programação no contexto de desenvolvimento de jogos com o objetivo de ajudar desenvolvedores a produzir códigos mais efetivos e eficientes.

~~Blog Artillery~~ - Inativo

A empresa de jogos HTML5 Artillery possui alguns artigos interessantes no seu blogue.

Desenvolvendo jogos para o Firefox OS

Um guia rápido para criar jogos 2D com HTML5, para a sua distribuição no Firefox OS e outras plataformas móveis.

Gamedev.js Weekly

Boletim de notícias semanal sobre desenvolvimento de jogos HTML5, lançado toda Sexta-Feira. Contém os últimos artigos, tutoriais, ferramentas e recursos.

HTML5 Game Devs Forum

Fóruns para desenvolvedores, criadores de framework e publicadores. Faça perguntas, obtenha retorno, ajude outras pessoas.

HTML5 Game Engine

Lista dos frameworks HTML5 mais populares para jogos, juntamente com a sua classificação, benefícios e exemplos.

JSBreakouts

Compare JavaScript clonando em diferentes frameworks para te ajudar a escolher o melhor para você.

Tuts+ Desenvolvimento de Jogos

Tutoriais e artigos sobre desenvolvimento de jogos em geral.

#BBG IRC chat

Fale, diretamente, com desenvolvedores, em tempo real.

HTML5 Gamedev Starter

Partida para novos desenvolvedores de jogos, uma lista organizada de links para vários recursos úteis na web.

js13kGames

Competição de codificação JavaScript para desenvolvedores de jogos HTML5 com tamanho de arquivo limitado a 13 kilobytes. Todos os jogos submetidos estão disponíveis no Github para leitura.

Mozilla Hacks blog

Categoria de Jogos no Mozilla Hacks blog, contém artigos interessantes relacionados a gamedev.

Visual-js game engine

2d/3d/webSocket engine orientada a jogos. Conjunto de ferramentas apenas para Windows. Hospedado no site de projetos bitbucket.


O projeto MDN

O projeto MDN
=============

O **MDN Web Docs** é uma wiki onde nós documentamos a Web aberta, as tecnologias Mozilla e outros tópicos de desenvolvedores. Qualquer pessoa é bem-vinda para adicionar e editar conteúdo. Você não precisa ser um programador ou saber muito sobre tecnologia; há muitas tarefas diferentes que precisam ser executadas, desde os simples (corrigir erros de leitura e erros de correção) até as mais complexas (escrever a documentação da API).

A missão do MDN Web Docs é fornecer aos desenvolvedores as informações necessárias para criar facilmente na plataforma web. Nós convidamos você a ajudar!

Nós precisamos da sua ajuda! É fácil. Não se preocupe em pedir permissão ou em cometer erros. Por outro lado, por favor, conheça a comunidade MDN; estamos aqui para ajudá-lo! A documentação abaixo, pode te ajudar a começar.

* Início rápido para iniciantes Você é novo no MDN e quer aprender como ajudar a torná-lo melhor? Comece aqui!
* Eu sou um usuário avançado Acesse nosso guia completo e aprofundado para os colaboradores do MDN para aprender mais quando você se sentir confortável.
* Compartilhe Se você ama o MDN, compartilhe a nossa a rede! Encontre o material necessário, como arte, ferramentas e guias para promover o MDN.


Glossário do MDN Web Docs: Definições de termos relacionados à Web
==================================================================

Tecnologias da Web contém longas listas de jargões e abreviações usadas em documentação e codificação. Este glossário fornece definições de palavras e abreviaturas que você precisa saber para entender e desenvolver para a web com sucesso.

Os termos do glossário podem ser selecionados na barra lateral.

**Nota:** Este glossário é um trabalho interminável em andamento. Você pode ajudar a melhorá-lo escrevendo novas entradas ou melhorando as já existentes.


Tecnologia Web para desenvolvedores

Tecnologia Web para desenvolvedores
===================================

A Web aberta apresenta oportunidades incríveis para os desenvolvedores. Para tirar o máximo proveito dessas tecnologias, você precisa saber como usá-las. Abaixo, você encontrará links para nossa documentação de tecnologias Web.

Documentação para desenvolvedores Web
-------------------------------------

Guia para Desenvolvedores Web

O Guia para Desenvolvedores Web provê um conteúdo útil de informações, para realmente ajudá-lo a usar as tecnologias Web para fazer o que deseja ou precisa.

Tutoriais para Desenvolvedores Web

Uma lista de tutoriais para orientá-lo passo a passo no aprendizado de APIs, tecnologias ou áreas abrangentes dos tópicos.

Acessibilidade

Permitir que o maior número possível de pessoas use sites, mesmo quando as habilidades dessas pessoas são limitadas de alguma forma.

Performance

Tornar o conteúdo o mais disponível e interativo possível, o mais rápido possível.

Security

Protegendo os usuários contra vazamentos de dados e roubo de dados, ataques de canal lateral e ataques como scripts entre sites, injeção de conteúdo e click-jacking.

Referências para Tecnologias Web
--------------------------------

APIs da Web

APIs de programação JavaScript que você pode usar para criar aplicativos na Web.

HTML

HTML fornece os blocos de construção fundamentais para estruturar documentos e aplicativos da Web.

CSS

Folhas de estilo em cascata são usadas para descrever a aparência de documentos e aplicativos da Web.

JavaScript

JavaScript é a linguagem de programação nativa da Web.

WebAssembly

O WebAssembly permite que programas escritos em C, C++, Rust, Swift, C#, Go e muito mais sejam executados na Web.

Eventos (en-US)

Eventos são o que você cria aplicativos da Web para reagir; por exemplo, quando uma página da Web termina de carregar ou um usuário seleciona algo, pressiona uma tecla, redimensiona uma janela, envia um formulário ou pausa um vídeo.

HTTP

HTTP é o protocolo fundamental da Internet para buscar documentos, folhas de estilo, scripts, imagens, vídeos, fontes e outros recursos pela Web — e para enviar dados de volta aos servidores Web.

Mídia (en-US)

Formatos, codecs, protocolos, APIs e técnicas para incorporar e transmitir conteúdo de vídeo, áudio e imagem em documentos e aplicativos da Web.

SVG

Gráficos vetoriais escaláveis permitem que você crie imagens que podem ser dimensionadas suavemente para qualquer tamanho.

MathML

MathML permite exibir notações matemáticas complexas na Web.

Componentes da Web

Componentes Web são elementos personalizados que você pode definir e reutilizar em seus aplicativos Web.

WebDriver (en-US)

WebDriver é um mecanismo de automação de navegador para controlar remotamente um navegador emulando as ações de uma pessoa real usando o navegador. É amplamente usado para testes entre navegadores de aplicativos da Web.

Extensões da Web

Extensões da Web são uma maneira de você fornecer aos usuários recursos aprimorados em seus navegadores — para fazer coisas como bloquear anúncios e outros conteúdos, personalizar a aparência das páginas e muito mais.

Manifestos de aplicativos da Web

Manifestos de aplicativos da Web permitem que os usuários instalem aplicativos da Web nas telas iniciais de seus dispositivos, com aspectos como orientação de tela retrato/paisagem e modo de exibição (por exemplo, tela cheia) predefinidos.

Progressive Web Apps (PWAs) (en-US)

Progressive Web Apps fornecem uma experiência de usuário semelhante a aplicativos móveis nativos.

Documentação das ferramentas do desenvolvedor
---------------------------------------------

Ferramentas do desenvolvedor do Firefox

Documentação para o conjunto de ferramentas de desenvolvimento web incorporadas ao Firefox.

Chrome DevTools

Documentação para o conjunto de ferramentas de desenvolvedor da Web incorporadas ao Chrome.

Safari Web Inspector

Documentação para o conjunto de ferramentas de desenvolvedor da Web incorporadas ao Safari.

Edge DevTools

Documentação para o conjunto de ferramentas de desenvolvedor da Web incorporadas ao Edge.


WebAssembly

WebAssembly
===========

**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

O WebAssembly é um novo tipo de código que pode ser executado em browsers modernos — se trata de uma linguagem de baixo nível como assembly, com um formato binário compacto que executa com performance quase nativa e que fornece um novo alvo de compilação para linguagens como C/C++, para que possam ser executadas na web. Também foi projetado para executar em conjunto com o JavaScript, permitindo que ambos trabalhem juntos.

Em poucas palavras
------------------

O WebAssembly tem enormes aplicações para a plataforma web — ele irá fornecer uma maneira de executar na web código escrito em diversas linguagens em velocidade quase nativa, com apps que não conseguiriam fazer isso antes.

O WebAssembly foi projetado para complementar e executar lado a lado com JavaScript — usando as APIs JavaScript do WebAssembly, você pode carregar módulos WebAssembly em um aplicativo JavaScript e compartilhar funcionalidade entre ambos. Isso permite que você aproveite o desempenho e poder da WebAssembly e a expressividade e flexibilidade do JavaScript nos mesmos aplicativos, mesmo que você não saiba como escrever código de WebAssembly.

E o que é ainda melhor é que ele está sendo desenvolvido como um padrão web através da W3C WebAssembly Community Group com participantes ativos de todos os principais fornecedores de browsers.

Guias
-----

Conceitos WebAssembly

Comece lendo os conceitos de alto nível por trás do WebAssembly - o que é, por que é tão útil, como ele se encaixa na plataforma web e como usá-lo.

Compilando C/C++ para WebAssembly

Quando você escreve o código em C/C++, você pode então compilá-lo em .wasm usando uma ferramenta como Emscripten. Veja como isso funciona.

Carregando e executando código WebAssembly (en-US)

Depois de ter um .wasm, este artigo aborda como buscá-lo, compilá-lo e instanciá-lo, combinando a API JavaScript WebAssembly (en-US)como Obter ou APIs XHR.

Compilando módulos de WebAssembly no cache

O cache de grandes módulos WebAssembly no cliente é útil para melhorar o desempenho da inicialização do aplicativo. Este artigo explica como usar isso usando IndexedDB.

Usando a API JavaScript do WebAssembly

Depois de carregar um módulo .wasm, você vai querer usá-lo. Neste artigo, mostramos como usar a WebAssembly através da API JavaScript da WebAssembly.

Exportando funções de WebAssembly (en-US)

Funções WebAssembly exportadas são as reflexões de JavaScript das funções da WebAssembly e permitem chamar o código WebAssembly do JavaScript. Este artigo descreve o que são.

Compreendendo o formato de texto do WebAssembly

Este artigo explica o formato de texto wasm. Esta é a representação textual de baixo nível de um módulo .wasm mostrado nas ferramentas de desenvolvedor do navegador ao depurar.

Convertendo o formato de texto do WebAssembly para o wasm (en-US)

Este artigo fornece um guia sobre como converter um módulo WebAssembly escrito no formato de texto em um binário .wasm.

Referência da API
-----------------

`WebAssembly` (en-US)

Este objeto atua como o espaço para todas as funcionalidade relacionada à WebAssembly.

`WebAssembly.Module` (en-US)

A `WebAssembly.Module` o objeto contém o código da WebAssembly sem estado que já foi compilado pelo navegador e pode ser eficientemente compartilhado com os trabalhos (en-US), armazenados em cache no IndexedDB, e instanciados várias vezes.

`WebAssembly.Instance` (en-US)

A `WebAssembly.Instance` o objeto é uma instância executável e estável de um `Módulo`. Os objetos `Instanciados` contêm todas as funções de WebAssembly exportadas (en-US)que permitem chamar o código WebAssembly do JavaScript.

`WebAssembly.instantiate()` (en-US)

The `WebAssembly.instantiate()` a função é a API primária para compilar e instanciar o código WebAssembly, retornando um `Module` e sua primeira `instância`.

`WebAssembly.Memory()` (en-US)

Em `WebAssembly`. O objeto `Memory` é redimensionável `ArrayBuffer` que detém os bytes de memória invocados por uma `instância` de código.

`WebAssembly.Table()` (en-US)

Em `WebAssembly`. O objeto `Table` é uma matriz redimensionável de valores opacos, como referências de funções, acessadas por uma `instância` de código.

`WebAssembly.CompileError()` (en-US)

Cria um novo objeto WebAssembly `CompileError`.

`WebAssembly.LinkError()` (en-US)

Cria um novo objeto WebAssembly `LinkError`.

`WebAssembly.RuntimeError()` (en-US)

Cria um novo objeto WebAssembly `RuntimeError`.

Exemplos
--------

* WASMSobel
* Consulte nosso webassembly-examples para outros exemplos.
Especificações
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface  |

Compatibilidade do navegador
----------------------------

{{Compat}}Veja também
-----------

* webassembly.org
* WebAssembly articles on Mozilla Hacks blog
* W3C WebAssembly Community Group
* Large-Allocation HTTP header


Compilando um novo módulo C/C++ para WebAssembly - WebAssembly

Compilando um novo módulo C/C++ para WebAssembly
================================================

Quando você escreve um novo módulo de código em uma linguagem como C/C++, você pode compilá-lo no WebAssembly usando uma ferramenta como Emscripten. Vejamos como funciona.

Configuração do ambiente Emscripten
-----------------------------------

Primeiro, vamos configurar o ambiente de desenvolvimento necessário.

### Pré-requisitos

Obtenha o SDK Emscripten, seguindo estas instruções https://emscripten.org/docs/getting\_started/downloads.html

Compilando um exemplo
---------------------

Com o ambiente configurado, vamos ver como usá-lo para compilar um exemplo C para Emscripten. Há várias opções disponíveis ao compilar com o Emscripten, mas os dois principais cenários que abordaremos são:

* Compilando para wasm e criando HTML para executar nosso código, além de todo o código JavaScript "cola" necessário para executar o wasm no ambiente web.
* Compilando para wasm e apenas criando o JavaScript.

Veremos ambos a seguir.

### Criando HTML e JavaScript

Este é o caso mais simples que veremos, no qual você obtém emscripten para gerar tudo o que precisa para executar seu código, como WebAssembly, no navegador.

1. Primeiro precisamos de um exemplo para compilar. Faça uma cópia do seguinte exemplo simples em C e salve-o em um arquivo chamado `hello.c` em um novo diretório em sua unidade local:

```cpp
#include <stdio.h>

int main() {
    printf("Hello World\n");
    return 0;
}
```

2. Agora, usando a janela do terminal que você usou para entrar no ambiente do compilador Emscripten, navegue até o mesmo diretório que seu arquivo `hello.c` e execute o seguinte comando:

```bash
emcc hello.c -o hello.html
```

As opções que passamos com o comando são as seguintes:

* `-o hello.html` — Especifica que queremos que o Emscripten gere uma página HTML para executar nosso código (e um nome de arquivo para usar), bem como o módulo wasm e o código JavaScript "glue" para compilar e instanciar o wasm para que possa ser usado no ambiente web. de to compile and instantiate the wasm so it can be used in the web environment.

Neste ponto em seu diretório de origem, você deve ter:

* O código binário do módulo wasm (`hello.wasm`)
* Um arquivo JavaScript contendo código de cola para traduzir entre as funções C nativas e JavaScript/wasm (`hello.js`)
* Um arquivo HTML para carregar, compilar e instanciar seu código wasm e exibir sua saída no navegado (`hello.html`)
### Executando seu exemplo

Agora tudo o que resta é você carregar o resultado `hello.html` em um navegador que suporte WebAssembly. Ele é ativado por padrão no Firefox 52, Chrome 57, Edge 57, Opera 44.

**Nota:** Se você tentar abrir o arquivo HTML gerado (`hello.html`) diretamente de seu disco rígido local (por exemplo, `file://your_path/hello.html`), você terminará com uma mensagem de erro ao longo das linhas de `both async and sync fetching of the wasm failed.` Você precisa executar seu arquivo HTML por meio de um servidor HTTP (`http://`) — consulte Como você configura um servidor de teste local Para maiores informações.

 Se tudo funcionou como planejado, você deverá ver a saída "Hello world" no console do Emscripten aparecendo na página da Web e no console JavaScript do seu navegador. Parabéns, você acabou de compilar C para WebAssembly e executá-lo em seu navegador!

 ![image](/pt-BR/docs/WebAssembly/C_to_Wasm/helloworld.png)

### Usando um modelo HTML personalizado

Às vezes você vai querer usar um modelo HTML personalizado. Vejamos como podemos fazer isso.

1. Antes de tudo, salve o seguinte código C em um arquivo chamado `hello2.c`, em um novo diretório:

```cpp
#include <stdio.h>

int main() {
    printf("Hello World\n");
    return 0;
}
```

2. Procure o arquivo `shell_minimal.html` em seu repositório emsdk. Copie-o para um subdiretório chamado `html_template` dentro do seu novo diretório anterior.
3. Agora navegue em seu novo diretório (novamente, na janela do terminal do ambiente do compilador Emscripten) e execute o seguinte comando:

```bash
emcc -o hello2.html hello2.c -O3 --shell-file html_template/shell_minimal.html
```

As opções que passamos são um pouco diferentes desta vez:
    * Nós especificamos `-o hello2.html`, o que significa que o compilador ainda produzirá o código de cola JavaScript e `.html`.
    * Também especificamos `--shell-file html_template/shell_minimal.html` — isso fornece o caminho para o modelo HTML que você deseja usar para criar o HTML pelo qual você executará seu exemplo.
4. Agora vamos executar este exemplo. O comando acima terá gerado `hello2.html`, que terá praticamente o mesmo conteúdo do modelo com algum código de cola adicionado para carregar o wasm gerado, executá-lo etc. Abra-o em seu navegador e você verá a mesma saída do último exemplo.

Você pode especificar a saída apenas do arquivo JavaScript "cola" em vez do HTML completo especificando um arquivo .js em vez de um arquivo HTML no `-o` flag, e.g. `emcc -o hello2.js hello2.c -O3`. Você poderia então construir seu HTML personalizado completamente do zero, embora esta seja uma abordagem avançada; geralmente é mais fácil usar o modelo HTML fornecido.

* O Emscripten requer uma grande variedade de código JavaScript "cola" para lidar com alocação de memória, vazamentos de memória e uma série de outros problemas

### Chamando uma função personalizada definida em C

Se você tiver uma função definida em seu código C que deseja chamar conforme necessário do JavaScript, você pode fazer isso usando o Emscripten com a função `ccall()`, e a declaração `EMSCRIPTEN_KEEPALIVE` (que adiciona suas funções à lista de funções exportadas (consulte Por que as funções no meu código-fonte C/C++ desaparecem quando compilo para JavaScript e/ou recebo Nenhuma função para processar). Vejamos como isso funciona

1. Para começar, salve o seguinte código como `hello3.c` em um novo diretório:

```cpp
#include <stdio.h>
#include <emscripten/emscripten.h>

int main() {
    printf("Hello World\n");
    return 0;
}

#ifdef \_\_cplusplus
#define EXTERN extern "C"
#else
#define EXTERN
#endif

EXTERN EMSCRIPTEN_KEEPALIVE void myFunction(int argc, char \*\* argv) {
    printf("MyFunction Called\n");
}
```

Por padrão, o código gerado pelo Emscripten sempre chama a função `main()` e outras funções são eliminadas como código morto. Colocando `EMSCRIPTEN_KEEPALIVE` antes que um nome de função impeça que isso aconteça. Você também precisa importar a biblioteca `emscripten.h` para usar `EMSCRIPTEN_KEEPALIVE`.

**Nota:** Estamos incluindo os blocos `#ifdef` para que, se você estiver tentando incluir isso no código C++, o exemplo ainda funcione. Devido às regras de desmembramento de nomes C versus C++, isso seria quebrado, mas aqui estamos definindo-o para que seja tratado como uma função C externa se você estiver usando C++.
2. Agora adicione `html_template/shell_minimal.html` com {{ SCRIPT }}} como conteúdo neste novo diretório também, apenas por conveniência (você obviamente colocaria isso em um local central em seu ambiente de desenvolvimento real).
3. Agora vamos executar a etapa de compilação novamente. De dentro do seu diretório mais recente (e enquanto estiver dentro da janela do terminal do ambiente do compilador Emscripten), compile seu código C com o seguinte comando. (Observe que precisamos compilar com `NO_EXIT_RUNTIME`, o que é necessário caso contrário quando main() terminasse, o tempo de execução seria encerrado - necessário para a emulação C adequada, por exemplo, atexits são chamados - e não seria válido chamar o código compilado.)

```bash
emcc -o hello3.html hello3.c -O3 --shell-file html_template/shell_minimal.html -s NO\_EXIT\_RUNTIME=1 -s "EXPORTED\_RUNTIME\_METHODS=['ccall']"
```

4. Se você carregar o exemplo em seu navegador novamente, verá a mesma coisa de antes!
5. Agora precisamos executar nosso nova função `myFunction()` do JavaScript. Antes de tudo, abra seu arquivo hello3.html em um editor de texto.
6. Adicione um elemento `<button>` como mostrado abaixo, logo acima da primeira abertura da tag `<script type='text/javascript'>`.

```html
<button id="mybutton">Run myFunction</button>
```

7. Agora adicione o seguinte código no final do primeiro elemento `<script>`:

```js
document.getElementById("mybutton").addEventListener("click", () => {
  alert("check console");
  const result = Module.ccall(
    "myFunction", // name of C function
    null, // return type
    null, // argument types
    null, // arguments
  );
});
```

Isso ilustra como ccall() é usado para chamar a função exportada.

Veja também
-----------

* emscripten.org — saiba mais sobre Emscripten e sua grande variedade de opções.
* Chamando de C compilado as funções de JavaScript usando ccall/cwrap
* Por que as funções no meu código-fonte C/C++ desaparecem quando compilo para JavaScript e/ou não recebo nenhuma função para processar?
* WebAssembly na Mozilla Research
* Compilando um módulo C existente para o WebAssembly (en-US)


Conceitos do WebAssembly - WebAssembly

Conceitos do WebAssembly
========================

Este artigo explica os conceitos por trás de como o WebAssembly funciona, incluindo seus objetivos, os problemas que ele resolve e como ele roda dentro do mecanismo de renderização de um browser.

O que é WebAssembly?
--------------------

WebAssembly é um novo tipo de código que pode ser executado nos browsers modernos e fornece novas carecterísticas e maiores ganhos em performance. Ele não foi pensado incialmente para ser escrito à mão, ao contrário, foi pensado para ser um compilador-alvo eficiente para linguagens de baixo nível como C, C++, Rust, etc.

Ele possui implicações enormes para a plataforma web — ele fornece um caminho para executar códigos escritos em múltiplas linguagens na web, com velocidades próximas às das linguagens nativas com apps sendo executados na web, onde antes não era possível.

Além disso, você não precisa saber como criar código WebAssembly para tirar vantagem dele. Os módulos WebAssembly podem ser importados num app web (ou Node.js), expondo funções do WebAssembly para uso via JavaScript. Os frameworks de JavaScript poderiam usar o WebAssembly para conseguir enormes vantagens de performance e novas características enquanto disponibiliza funcionalidades aos desenvolvedores web.

Objetivos do WebAssembly
------------------------

WebAssembly está sendo criado em código aberto dentro do W3C WebAssembly Community Group com os seguintes objetivos:

* Ser rápido, eficiente e móvel — o código WebAssembly pode ser executado a velocidades próximas de nativas entre diferentes plataformas, tirando vantagem das capacidades comuns de hardware.
* Ser compreensível e debuggable — WebAssembly é uma linguagem assembly de baixo nível, mas ela tem um formato de texto compreensível para os humanos (especificação pela qual ainda está sendo finalizado) que permite que o código seja escrito, visto e debugado à mão.
* Manter a segurança — WebAssembly é especificado para ser executado num ambiente seguro e controlado. Como outros códigos web, ele reforçará as mesmas políticas de origem e permissões dos browsers.
* Não quebrar a web — WebAssembly foi pensado de maneira que ele seja executado em harmonia com outras tecnologias web, mantendo a compatibilidade retroativa.

**Nota:** WebAssembly também terá usos fora dos ambientes web e JavaScript (veja Non-web embeddings).

Como o WebAssembly se encaixa na plataforma web?
------------------------------------------------

A plataforma web pode ser dividida em duas partes:

* Uma máquina virtual (VM) que executa o código de uma aplicação Web, por exemplo códigos JavaScript que enriquecem suas aplicações.
* Um conjunto de Web APIs que um Web app pode invocar para controlar funcionalidades web browser/device (dispositivo) e fazer as coisas acontecerem (DOM, CSSOM, WebGL, IndexedDB, Web Audio API, etc.).

Historicamente, a VM tem tido permissão para carregar apenas JavaScript. Isto tem funcionado bem para nós, já que o JavaScript é poderoso o suficiente para resolver a maioria dos problemas da Web atualmente. No entanto, temos enfrentado problemas de performance, quando tentamos usar o JavaScript para tarefas mais intensivas como games em 3D, realidades virtual e aumentada, visão de computador, edição de imagens ou videos e um sem número de outros domínios que demandam performance nativa (veja Casos de uso WebAssembly para mais ideias).

Adicionalmente, o custo de baixar, parsear e compilar aplicações JavaScript muito grandes, é proibitivo. Plataformas mobile e outras de recursos restritos, podem ampliar ainda mais estes gargalos de performance.

WebAssembly é uma linguagem diferente do JavaScript, mas não foi pensada para ser sua substituta. Ao contrário, foi pensada para complementar e trabalhar lado a lado com o JavaScript, permitindo aos desenvolvedores web tirarem vantagem dos pontos fortes das duas linguagens:

* JavaScript é uma linguagem de alto nível, flexível e expressiva o suficiente para escrever aplicações web. Ela tem muitas vantagens — é dinamicamente tipada, não ncessita ser compilada e tem um enorme ecossistema que disponibiliza poderosos frameworks, bibliotecas (libs) e outros recursos.
* WebAssembly é uma linguagem de baixo nível do tipo assembly com um formato binário compacto, que é executado com performance próximo à nativa, que disponibiliza linguagens com modelos de memória de baixo nível como C++ e Rust, com uma compilação-alvo, assim podendo ser executados na web. (Note que o WebAssembly tem uma meta futura de suporte de alto nível para linguagens com modelos de memória garbage-collected.)

Com o advento do WebAssembly nos browsers, a máquina virtual a que nos referimos antes, vai carregar e executar dois tipos de código — JavaScript E WebAssembly.

Os diferentes tipos de códigos podem invocar um ao outro conforme necessário — o WebAssembly JavaScript API (en-US) encapsula código WebAssembly exportado com funções JavaScript que podem ser invocados normalmente, e código WebAssembly pode importar de forma síncrona, funções normais de JavaScript. Na verdade, a unidade básica do código WebAssembly é chamado de módulo, e módulos WebAssembly são semelhantes em vários níveis aos módulos de ES2015.

### Conceitos-chave do WebAssembly

Existem diversos conceitos-chave que precisam ser compreendidos, sobre como o WebAssembly é executado no browser. Todos estes conceitos são refletidos 1:1 na WebAssembly JavaScript API (en-US).

* **Módulo**: Representa o binário do WebAssembly que foi compilado pelo browser, em código executável pela máquina. Um módulo não tem estado e, tal qual um Blob, pode ser explicitamente compartilhado entre janelas e workers (via `postMessage()`). Um Módulo declara imports e exports, assim com um módulo ES2015.
* **Memória**: Um ArrayBuffer redimensionável que contém um array linear de bytes, lidos e escritos pelas intruções de memória de baixo nível do WebAssembly.
* **Tabela**: Um array tipado de referências redimensionável (por exemplo para funções) que, em outra situação, não poderia ser armazenado como bytes puros na Memória (por questões de segurança e portabilidade).
* **Instância**: Um Módulo pareado com todo o estado utilizado durante a execução, incluindo uma Memória, Tabela e um conjunto de valores importados. Uma Instância é como um módulo ES2015 que foi carregado em um global específico com um conjunto de importações específico.

A API JavaScript disponibiliza aos desenvolvedores a habilidade de criar módulos, memórias, tabelas e instâncias. Dada uma instância WebAssembly, o código JavaScript pode, de forma síncrona, invocar seus exports, os quais são expostos como funções normais de JavaScript. Funções arbitrárias de JavaScript também podem ser invocadas de forma síncrona pelo código WebAssembly, sendo passados nestas funções JavaScript como imports para um instância WebAssembly.

Uma vez que o JavaScript tem controle total sobre como o código WebAssembly é carregado, compilado e executado, desenvolvedores JavaScript poderiam até pensar no WebAssembly como apenas uma ferramenta do JavaScript, para geração de funções de alta performance de forma eficiente.

No futuro, módulos WebAssembly serão carregáveis assim como módulos ES2015 (usando `<script type='module'>`), o que quer dizer que o JavaScript será capaz de buscar, compilar e importar um módulo WebAssembly tão facilmente quanto um módulo ES2015.

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.

![](/pt-BR/docs/WebAssembly/Concepts/emscripten-diagram.png)

De maneira resumida, o processo funciona da seguinte maneira:

1. Emscripten primeiro alimenta o C/C++ no clang+LLVM — um maduro compilador C/C++, enviado como parte do Xcode do OSX, por exemplo.
2. Emscripten transforma o resultado compilado do clang+LLVM em um binário .wasm
3. 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.

**Nota:** Existem planos futuros para permitir o WebAssembly chamar APIs Web diretamente.

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 (en-US).

### 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 (en-US).

### 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/.

Sumário
-------

Este artigo apresentou a você uma explicação sobre o que é o WebAssembly, porque ele é tão útil, como ele se encaixa na web e como você pode se utilizar dele.

Veja também
-----------

* WebAssembly articles on Mozilla Hacks blog
* WebAssembly on Mozilla Research
* Loading and running WebAssembly code (en-US) — descubra como carregar seu próprio módulo WebAssembly numa página web.
* Using the WebAssembly JavaScript API — descubra como utilizar outras características importantes do WebAssembly JavaScript API.


Entendendo o formato textual do WebAssembly - WebAssembly

Entendendo o formato textual do WebAssembly
===========================================

Para permitir que o WebAssembly seja lido e editado por humanos, existe uma representação textual do formato binário Wasm. Este é um formulário intermediário projetado para ser exposto em editores de texto, ferramentas de desenvolvedor de navegador etc. Este artigo explica como esse formato de texto funciona, em termos de sintaxe bruta, e como ele está relacionado ao bytecode subjacente que ele representa — e os objetos wrapper que representam Wasm em JavaScript.

**Nota:** Isso pode ser um exagero se você for um desenvolvedor da Web que deseja apenas carregar um módulo Wasm em uma página e usá-lo em seu código (consulte Usando a API JavaScript WebAssembly), mas é mais útil se, por exemplo, você deseja escrever módulos Wasm para otimizar o desempenho de sua biblioteca JavaScript ou criar seu próprio compilador WebAssembly.

S-expressions
-------------

Nos formatos binário e textual, a unidade fundamental de código no WebAssembly é um módulo. No formato de texto, um módulo é representado como uma grande S-expression. As S-expressions são um formato textual muito antigo e muito simples para representar árvores e, portanto, podemos pensar em um módulo como uma árvore de nós que descreve a estrutura do módulo e seu código. Ao contrário da Abstract Syntax Tree de uma linguagem de programação, porém, a árvore do WebAssembly é bastante plana, consistindo principalmente em listas de instruções.

Primeiro, vamos ver como é uma S-expression. Cada nó na árvore vai dentro de um par de parênteses — `( ... )`. O primeiro rótulo dentro dos parênteses informa que tipo de nó é e, depois disso, há uma lista separada por espaços de atributos ou nós filhos. Isso significa a S-expression do WebAssembly:

```wasm
(module (memory 1) (func))
```

representa uma árvore com o nó raiz "module" e dois nós filhos, um nó "memory" com o atributo "1" e um nó "func". Veremos em breve o que esses nós realmente significam.

### O módulo mais simples

Vamos começar com o módulo Wasm mais simples e mais curto possível.

```wasm
(module)
```

Este módulo está totalmente vazio, mas ainda é um módulo válido.

Se convertermos nosso módulo para binário agora (consulte Convertendo o formato de texto WebAssembly para Wasm (en-US)), veremos apenas o cabeçalho do módulo de 8 bytes descrito no formato binário:

```wasm
0000000: 0061 736d              ; WASM_BINARY_MAGIC
0000004: 0100 0000              ; WASM_BINARY_VERSION
```

### Adicionando funcionalidade ao seu módulo

Ok, isso não é muito interessante, vamos adicionar algum código executável a este módulo.

Todo o código em um módulo webassembly é agrupado em funções, que possuem a seguinte estrutura de pseudocódigo:

```wasm
( func <assinatura> <locais> <corpo> )
```

* A **assinatura** declara o que a função recebe (parâmetros) e retorna (valores de retorno).
* Os **locais** são como variáveis em JavaScript, mas com tipos explícitos declarados.
* O **corpo** é apenas uma lista linear de instruções de baixo nível.

Portanto, isso é semelhante a funções em outras linguagens, mesmo que pareça diferente porque é uma S-expression.

Assinaturas e parâmetros
------------------------

A assinatura é uma sequência de declarações de tipo de parâmetro seguida por uma lista de declarações de tipo de retorno. Vale ressaltar aqui que:

* A ausência de um `(result)` significa que a função não retorna nada.
* Na iteração atual, pode haver no máximo 1 tipo de retorno, mas posteriormente isso será flexibilizado para qualquer número.

 Cada parâmetro tem um tipo explicitamente declarado; Wasm Tipos de número, Tipos de referência, Tipos de vetor.
 Os tipos de números são:

* `i32`: inteiro de 32 bits
* `i64`: inteiro de 64 bits
* `f32`: flutuante de 32 bits
* `f64`: flutuante de 64 bits

Um único parâmetro é escrito `(param i32)` e o tipo de retorno é escrito `(result i32)`, portanto, uma função binária que recebe dois inteiros de 32 bits e retorna um float de 64 bits seria escrita assim:

```wasm
(func (param i32) (param i32) (result f64) ...)
```

Após a assinatura, os locais são listados com seu tipo, por exemplo `(local i32)`. Parâmetros são basicamente apenas locais que são inicializados com o valor do argumento correspondente passado pelo chamador.

Obtendo e configurando locais e parâmetros
------------------------------------------

Locais/parâmetros podem ser lidos e escritos pelo corpo da função com as instruções `local.get` e `local.set`.

Os comandos `local.get`/`local.set` referem-se ao item a ser obtido/definido por seu índice numérico: os parâmetros são referidos primeiro, na ordem de sua declaração, seguidos pelos locais na ordem de sua declaração. Assim, dada a seguinte função:

```wasm
(func (param i32) (param f32) (local f64)
  local.get 0
  local.get 1
  local.get 2)
```

A instrução `local.get 0` obteria o parâmetro i32, `local.get 1` obteria o parâmetro f32 e `local.get 2` obteria o f64 local.

Há outro problema aqui - usar índices numéricos para se referir a itens pode ser confuso e irritante, então o formato de texto permite que você nomeie parâmetros, locais e a maioria dos outros itens simplesmente incluindo um nome prefixado por um cifrão (`$`) logo antes da declaração de tipo.

Assim, você poderia reescrever nossa assinatura anterior assim:

```wasm
(func (param $p1 i32) (param $p2 f32) (local $loc f64) …)
```

E então poderia escrever `local.get $p1` em vez de `local.get 0`, etc. (Observe que, quando este texto for convertido em binário, o binário conterá apenas o número inteiro).

Máquinas de pilha
-----------------

Antes de podermos escrever um corpo de função, temos que falar sobre mais uma coisa: **máquinas de pilha**. Embora o navegador o compile para algo mais eficiente, a execução do Wasm é definida em termos de uma máquina de pilha onde a ideia básica é que todo tipo de instrução empurra e/ou retira um certo número de valores `i32`/`i64`/`f32`/`f64` para/de uma pilha.

Por exemplo, `local.get` é definido para colocar o valor do local lido na pilha e `i32.add` empurra dois valores `i32` (ele implicitamente pega os dois valores anteriores colocados na pilha), calcula sua soma (módulo 2^32) e empurra o valor `i32` resultante.

Quando uma função é chamada, ela começa com uma pilha vazia que é gradualmente preenchida e esvaziada conforme as instruções do corpo são executadas. Por exemplo, depois de executar a seguinte função:

```wasm
(func (param $p i32)
  (result i32)
  local.get $p
  local.get $p
  i32.add)
```

A pilha contém exatamente um valor `i32` — o resultado da expressão (`$p + $p`), que é tratado por `i32.add`. O valor de retorno de uma função é apenas o valor final deixado na pilha.

As regras de validação do WebAssembly garantem que a pilha corresponda exatamente: se você declarar um `(result f32)`, a pilha deve conter exatamente um `f32` no final. Se não houver nenhum tipo de resultado, a pilha deverá estar vazia.

Nosso primeiro corpo funcional
------------------------------

Como mencionado anteriormente, o corpo da função é uma lista de instruções que são seguidas conforme a função é chamada. Juntando isso com o que já aprendemos, podemos finalmente definir um módulo contendo nossa própria função simples:

```wasm
(module
  (func (param $lhs i32) (param $rhs i32) (result i32)
    local.get $lhs
    local.get $rhs
    i32.add))
```

Esta função obtém dois parâmetros, soma-os e retorna o resultado.

Há muito mais coisas que podem ser colocadas dentro dos corpos das funções, mas começaremos simples por enquanto, e você verá muito mais exemplos à medida que avança. Para obter uma lista completa dos opcodes disponíveis, consulte a referência de semântica webassembly.org.

### Chamando a função

Nossa função não fará muito sozinha — agora precisamos chamá-la. Como fazemos isso? Como em um módulo ES, as funções Wasm devem ser explicitamente exportadas por uma instrução `export` dentro do módulo.

Como os locais, as funções são identificadas por um índice por padrão, mas por conveniência, elas podem ser nomeadas. Vamos começar fazendo isso — primeiro, adicionaremos um nome precedido por um cifrão, logo após a palavra-chave `func`:

```wasm
(func $add …)
```

Agora precisamos adicionar uma declaração de exportação — fica assim:

```wasm
(export "add" (func $add))
```

Aqui, `add` é o nome pelo qual a função será identificada em JavaScript, enquanto `$add` seleciona qual função WebAssembly dentro do módulo está sendo exportada.

Portanto, nosso módulo final (por enquanto) fica assim:

```wasm
(module
  (func $add (param $lhs i32) (param $rhs i32) (result i32)
    local.get $lhs
    local.get $rhs
    i32.add)
  (export "add" (func $add))
)
```

Se você quiser seguir o exemplo, salve nosso módulo acima em um arquivo chamado `add.wat`, então converta-o em um arquivo binário chamado `add.wasm` usando wabt (consulte Convertendo o formato de texto WebAssembly para Wasm (en-US) para detalhes).

Em seguida, instanciaremos nosso binário de forma assíncrona (consulte Carregando e executando o código WebAssembly (en-US)) e executaremos nossa função `add` em JavaScript (agora podemos encontrar `add()` na propriedade `exports` (en-US) da instância):

```js
WebAssembly.instantiateStreaming(fetch("add.wasm")).then((obj) => {
  console.log(obj.instance.exports.add(1, 2)); // "3"
});
```

**Nota:** Você pode encontrar este exemplo no GitHub como add.html (veja ao vivo também). Consulte também `WebAssembly.instantiateStreaming()` (en-US) para obter mais detalhes sobre a função instanciar.

Explorando fundamentos
----------------------

Agora que cobrimos o básico real, vamos ver alguns recursos mais avançados.

### Chamando funções de outras funções no mesmo módulo

A instrução `call` chama uma única função, dado seu índice ou nome. Por exemplo, o seguinte módulo contém duas funções — uma apenas retorna o valor 42, a outra retorna o resultado da chamada do primeiro mais um:

```wasm
(module
  (func $getAnswer (result i32)
    i32.const 42)
  (func (export "getAnswerPlus1") (result i32)
    call $getAnswer
    i32.const 1
    i32.add))
```

**Nota:** `i32.const` apenas define um inteiro de 32 bits e o coloca na pilha. Você pode trocar o `i32` por qualquer um dos outros tipos disponíveis e alterar o valor do const para o que quiser (aqui definimos o valor para `42`).

Neste exemplo, você notará uma seção `(export "getAnswerPlus1")`, declarada logo após a instrução `func` na segunda função — esta é uma forma abreviada de declarar que queremos exportar esta função e definir o nome como queremos exportá-la.

Isso é funcionalmente equivalente a incluir uma instrução de função separada fora da função, em outro lugar no módulo da mesma maneira que fizemos antes, por exemplo:

```wasm
(export "getAnswerPlus1" (func $functionName))
```

O código JavaScript para chamar nosso módulo acima se parece com:

```js
WebAssembly.instantiateStreaming(fetch("call.wasm")).then((obj) => {
  console.log(obj.instance.exports.getAnswerPlus1()); // "43"
});
```

### Importando funções do JavaScript

Já vimos JavaScript chamando funções WebAssembly, mas e o WebAssembly chamando funções JavaScript? O WebAssembly não possui nenhum conhecimento interno de JavaScript, mas possui uma maneira geral de importar funções que podem aceitar funções JavaScript ou Wasm. Vejamos um exemplo:

```wasm
(module
  (import "console" "log" (func $log (param i32)))
  (func (export "logIt")
    i32.const 13
    call $log))
```

WebAssembly tem um namespace de dois níveis, então a declaração de importação aqui está dizendo que estamos pedindo para importar a função `log` do módulo `console`. Você também pode ver que a função `logIt` exportada chama a função importada usando a instrução `call` que introduzimos acima.

As funções importadas são como funções normais: elas têm uma assinatura que a validação do WebAssembly verifica estaticamente e recebem um índice e podem ser nomeadas e chamadas.

As funções JavaScript não têm noção de assinatura, portanto qualquer função JavaScript pode ser passada, independentemente da assinatura declarada na importação. Depois que um módulo declara uma importação, o chamador de `WebAssembly.instantiate()` (en-US) deve passar um objeto de importação que tenha as propriedades correspondentes.

Para o exposto acima, precisamos de um objeto (vamos chamá-lo de `importObject`) de modo que `importObject.console.log` seja uma função JavaScript.

Isso ficaria parecido com o seguinte:

```js
const importObject = {
  console: {
    log(arg) {
      console.log(arg);
    },
  },
};

WebAssembly.instantiateStreaming(fetch("logger.wasm"), importObject).then(
  (obj) => {
    obj.instance.exports.logIt();
  },
);
```

**Nota:** Você pode encontrar este exemplo no GitHub como logger.html (veja ao vivo também).

### Declarando globais no WebAssembly

O WebAssembly tem a capacidade de criar instâncias de variáveis globais, acessíveis a partir de JavaScript e importáveis/exportáveis em uma ou mais instâncias `WebAssembly.Module` (en-US). Isso é muito útil, pois permite a vinculação dinâmica de vários módulos.

No formato de texto WebAssembly, é mais ou menos assim (consulte global.wat em nosso repositório GitHub; consulte também global.html para uma transmissão ao vivo Exemplo de JavaScript):

```wasm
(module
   (global $g (import "js" "global") (mut i32))
   (func (export "getGlobal") (result i32)
        (global.get $g))
   (func (export "incGlobal")
        (global.set $g
            (i32.add (global.get $g) (i32.const 1))))
)
```

Isso é semelhante ao que vimos antes, exceto que especificamos um valor global usando a palavra-chave `global` e também especificamos a palavra-chave `mut` junto com o tipo de dados do valor, se quisermos que ele seja mutável.

Para criar um valor equivalente usando JavaScript, você usaria o construtor `WebAssembly.Global()` (en-US):

```js
const global = new WebAssembly.Global({ value: "i32", mutable: true }, 0);
```

### Memória WebAssembly

O exemplo acima é uma função de registro terrível: ela imprime apenas um único inteiro! E se quiséssemos registrar uma string de texto? Para lidar com strings e outros tipos de dados mais complexos, o WebAssembly fornece **memory** (embora também tenhamos tipos de referência na implementação mais recente do WebAssembly). De acordo com o WebAssembly, a memória é apenas uma grande matriz de bytes que pode crescer com o tempo. O WebAssembly contém instruções como `i32.load` e `i32.store` para leitura e gravação de memória linear.

Do ponto de vista do JavaScript, é como se a memória estivesse toda dentro de um grande `ArrayBuffer` (redimensionável). Isso é literalmente tudo o que o asm.js tem para brincar (exceto que não é redimensionável; veja o asm.js modelo de programação).

Portanto, uma string é apenas uma sequência de bytes em algum lugar dentro dessa memória linear. Vamos supor que escrevemos uma string adequada de bytes na memória; como passamos essa string para JavaScript?

A chave é que o JavaScript pode criar instâncias de memória linear WebAssembly por meio da interface `WebAssembly.Memory()` (en-US) e acessar uma instância de memória existente (atualmente, você só pode ter uma por instância de módulo) usando os métodos de instância associados. As instâncias de memória têm um getter `buffer` (en-US), que retorna um `ArrayBuffer` que aponta para toda a memória linear.

As instâncias de memória também podem aumentar, por exemplo, por meio do método `Memory.grow()` (en-US) em JavaScript. Quando o crescimento ocorre, já que `ArrayBuffer`s não podem mudar de tamanho, o `ArrayBuffer` atual é separado e um novo `ArrayBuffer` é criado para apontar para a memória maior e mais nova. Isso significa que tudo o que precisamos fazer para passar uma string para JavaScript é passar o deslocamento da string na memória linear junto com alguma forma de indicar o comprimento.

Embora existam muitas maneiras de codificar o comprimento de uma string na própria string (por exemplo, strings C); para simplificar aqui, apenas passamos o deslocamento e o comprimento como parâmetros:

```wasm
(import "console" "log" (func $log (param i32) (param i32)))
```

No lado do JavaScript, podemos usar a API TextDecoder (en-US) para decodificar facilmente nossos bytes em uma string JavaScript. (Especificamos `utf8` aqui, mas muitas outras codificações são suportadas.)

```js
function consoleLogString(offset, length) {
  const bytes = new Uint8Array(memory.buffer, offset, length);
  const string = new TextDecoder("utf8").decode(bytes);
  console.log(string);
}
```

A última peça que falta do quebra-cabeça é onde `consoleLogString` obtém acesso à `memory` do WebAssembly. WebAssembly nos dá muita flexibilidade aqui: podemos criar um objeto `Memory` (en-US) em JavaScript e fazer com que o módulo WebAssembly importe a memória, ou podemos fazer com que o módulo WebAssembly crie a memória e exporte-a para JavaScript.

Para simplificar, vamos criá-lo em JavaScript e depois importá-lo para o WebAssembly. Nossa instrução `import` é escrita da seguinte forma:

```wasm
(import "js" "mem" (memory 1))
```

O `1` indica que a memória importada deve ter pelo menos 1 página de memória (o WebAssembly define uma página como 64KB).

Então vamos ver um módulo completo que imprime a string "Hi". Em um programa C compilado normal, você chamaria uma função para alocar um pouco de memória para a string, mas como estamos apenas escrevendo nosso próprio assembly aqui e possuímos toda a memória linear, podemos apenas escrever o conteúdo da string na memória global usando uma seção `data`. As seções de dados permitem que uma sequência de bytes seja escrita em um determinado deslocamento no tempo de instanciação e são semelhantes às seções `.data` em formatos executáveis nativos.

Nosso módulo Wasm final se parece com isso:

```wasm
(module
  (import "console" "log" (func $log (param i32 i32)))
  (import "js" "mem" (memory 1))
  (data (i32.const 0) "Hi")
  (func (export "writeHi")
    i32.const 0  ;; pass offset 0 to log
    i32.const 2  ;; pass length 2 to log
    call $log))
```

**Nota:** Acima, observe a sintaxe de ponto e vírgula dupla (`;;`) para permitir comentários em arquivos WebAssembly.

Agora, a partir do JavaScript, podemos criar uma memória com 1 página e passá-la. Isso resulta em "Hi" sendo impresso no console:

```js
const memory = new WebAssembly.Memory({ initial: 1 });

const importObject = {
  console: { log: consoleLogString },
  js: { mem: memory },
};

WebAssembly.instantiateStreaming(fetch("logger2.wasm"), importObject).then(
  (obj) => {
    obj.instance.exports.writeHi();
  },
);
```

**Nota:** Você pode encontrar a fonte completa no GitHub como logger2.html (também veja ao vivo).

### Tabelas WebAssembly

Para terminar este tour pelo formato de texto do WebAssembly, vamos dar uma olhada na parte mais complexa e muitas vezes confusa do WebAssembly: **tables**. As tabelas são basicamente matrizes redimensionáveis de referências que podem ser acessadas por índice do código WebAssembly.

Para ver por que as tabelas são necessárias, precisamos primeiro observar que a instrução `call` que vimos anteriormente (consulte Chamando funções de outras funções no mesmo módulo) usa um índice de função estático e, portanto, só pode chamar uma função - mas e se o callee for um valor de tempo de execução?

* Em JavaScript, vemos isso o tempo todo: funções são valores de primeira classe.
* Em C/C++, vemos isso com ponteiros de função.
* Em C++, vemos isso com funções virtuais.

O WebAssembly precisava de um tipo de instrução de chamada para conseguir isso, então demos a ela `call_indirect`, que recebe um operando de função dinâmica. O problema é que os únicos tipos que temos para dar operandos no WebAssembly são (atualmente) `i32`/`i64`/`f32`/`f64`.

WebAssembly poderia adicionar um tipo `anyfunc` ("qualquer" porque o tipo poderia conter funções de qualquer assinatura), mas infelizmente este tipo `anyfunc` não poderia ser armazenado na memória linear por razões de segurança. A memória linear expõe o conteúdo bruto de valores armazenados como bytes e isso permitiria que o conteúdo do Wasm observasse e corrompesse arbitrariamente os endereços de funções brutas, algo que não pode ser permitido na web.

A solução foi armazenar as referências de função em uma tabela e, em vez disso, passar os índices da tabela, que são apenas valores i32. O operando de `call_indirect` pode, portanto, ser um valor de índice i32.

#### Definindo uma tabela no Wasm

Então, como colocamos as funções Wasm em nossa tabela? Assim como as seções `data` podem ser usadas para inicializar regiões de memória linear com bytes, as seções `elem` podem ser usadas para inicializar regiões de tabelas com funções:

```wasm
(module
  (table 2 funcref)
  (elem (i32.const 0) $f1 $f2)
  (func $f1 (result i32)
    i32.const 42)
  (func $f2 (result i32)
    i32.const 13)
  ...
)
```

* Em `(table 2 funcref)`, o 2 é o tamanho inicial da tabela (ou seja, irá armazenar duas referências) e `funcref` declara que o tipo de elemento dessas referências é referência de função.
* As seções de funções (`func`) são como quaisquer outras funções declaradas do Wasm. Estas são as funções às quais vamos nos referir em nossa tabela (por exemplo, cada uma apenas retorna um valor constante). Observe que a ordem em que as seções são declaradas não importa aqui — você pode declarar suas funções em qualquer lugar e ainda se referir a elas em sua seção `elem`.
* A seção `elem` pode listar qualquer subconjunto das funções em um módulo, em qualquer ordem, permitindo duplicatas. Esta é uma lista das funções que devem ser referenciadas pela tabela, na ordem em que devem ser referenciadas.
* O valor `(i32.const 0)` dentro da seção `elem` é um deslocamento — isso precisa ser declarado no início da seção e especifica em qual índice na tabela as referências de função começam a ser preenchidas. Aqui especificamos 0 e um tamanho de 2 (veja acima), para que possamos preencher duas referências nos índices 0 e 1. Se quiséssemos começar a escrever nossas referências no deslocamento 1, teríamos que escrever `(i32.const 1)`, e o tamanho da tabela teria que ser 3.

**Nota:** Os elementos não inicializados recebem um valor padrão de ativação.

Em JavaScript, as chamadas equivalentes para criar tal instância de tabela seriam mais ou menos assim:

```js
function () {
  // seção da tabela
  const tbl = new WebAssembly.Table({initial: 2, element: "anyfunc"});

  // seções de função:
  const f1 = ... /\* alguma função WebAssembly importada \*/
  const f2 = ... /\* alguma função WebAssembly importada \*/

  // seção de elementos
  tbl.set(0, f1);
  tbl.set(1, f2);
};
```

#### Usando a tabela

Seguindo em frente, agora que definimos a tabela, precisamos usá-la de alguma forma. Vamos usar esta seção de código para fazer isso:

```wasm
(type $return\_i32 (func (result i32))) ;; se fosse f32, a verificação de tipo falharia
(func (export "callByIndex") (param $i i32) (result i32)
  local.get $i
  call\_indirect (type $return\_i32))
```

* O bloco `(type $return_i32 (func (result i32)))` especifica um tipo, com um nome de referência. Esse tipo é usado ao executar a verificação de tipo das chamadas de referência de função de tabela posteriormente. Aqui estamos dizendo que as referências precisam ser funções que retornam um `i32` como resultado.
* Em seguida, definimos uma função que será exportada com o nome `callByIndex`. Isso levará um `i32` como parâmetro, que recebe o nome de argumento `$i`.
* Dentro da função, adicionamos um valor à pilha — qualquer valor que seja passado como parâmetro `$i`.
* Por fim, usamos `call_indirect` para chamar uma função da tabela — ela extrai implicitamente o valor de `$i` da pilha. O resultado líquido disso é que a função `callByIndex` invoca a função `$i`'th na tabela.

Você também pode declarar o parâmetro `call_indirect` explicitamente durante a chamada do comando em vez de antes dele, assim:

```wasm
(call\_indirect (type $return\_i32) (local.get $i))
```

Em uma linguagem mais expressiva e de nível superior, como JavaScript, você pode imaginar fazer a mesma coisa com uma matriz (ou provavelmente, mais provavelmente, um objeto) contendo funções. O pseudocódigo seria algo como `tbl[i]()`.

Então, de volta à verificação de tipos. Como o WebAssembly é verificado quanto ao tipo e o `funcref` pode ser potencialmente qualquer assinatura de função, temos que fornecer a assinatura presumida do callee no callsite, portanto, incluímos o tipo `$return_i32`, para informar ao programa que uma função que retorna um `i32` é esperada. Se o receptor não tiver uma assinatura correspondente (digamos que um `f32` seja retornado), um `WebAssembly.RuntimeError` (en-US) será lançado.

Então, o que liga `call_indirect` à tabela que estamos chamando? A resposta é que há apenas uma tabela permitida agora por instância do módulo, e é isso que `call_indirect` está chamando implicitamente. No futuro, quando várias tabelas forem permitidas, também precisaremos especificar um identificador de tabela de algum tipo, nos moldes de

```wasm
call\_indirect $my\_spicy\_table (type $i32\_to\_void)
```

O módulo completo se parece com isso e pode ser encontrado em nosso arquivo de exemplo wasm-table.wat:

```wasm
(module
  (table 2 funcref)
  (func $f1 (result i32)
    i32.const 42)
  (func $f2 (result i32)
    i32.const 13)
  (elem (i32.const 0) $f1 $f2)
  (type $return\_i32 (func (result i32)))
  (func (export "callByIndex") (param $i i32) (result i32)
    local.get $i
    call\_indirect (type $return\_i32))
)
```

Nós o carregamos em uma página da Web usando o seguinte JavaScript:

```js
WebAssembly.instantiateStreaming(fetch("wasm-table.wasm")).then((obj) => {
  console.log(obj.instance.exports.callByIndex(0)); // retorna 42
  console.log(obj.instance.exports.callByIndex(1)); // retorna 13
  console.log(obj.instance.exports.callByIndex(2)); // retorna um erro, porque não há posição de índice 2 na tabela
});
```

**Nota:** Você pode encontrar este exemplo no GitHub como wasm-table.html (veja ao vivo também).

**Nota:** Assim como a memória, as tabelas também podem ser criadas a partir de JavaScript (consulte `WebAssembly.Table()` (en-US)) bem como importadas de/para outro módulo Wasm.

### Tabelas mutantes e links dinâmicos

Como o JavaScript tem acesso total às referências de função, o objeto Tabela pode sofrer mutação do JavaScript usando os métodos `grow()` (en-US), `get()` (en-US) e `set()` (en-US). E o próprio código WebAssembly é capaz de manipular tabelas usando instruções adicionadas como parte de Tipos de referência, como `table.get` e `table.set`.

Como as tabelas são mutáveis, elas podem ser usadas para implementar [esquemas de vinculação dinâmica] sofisticados de tempo de carregamento e tempo de execução (https://github.com/WebAssembly/tool-conventions/blob/main/DynamicLinking.md). Quando um programa é vinculado dinamicamente, várias instâncias compartilham a mesma memória e tabela. Isso é simétrico para um aplicativo nativo onde vários `.dll`s compilados compartilham o espaço de endereço de um único processo.

Para ver isso em ação, criaremos um único objeto de importação contendo um objeto de memória e um objeto de tabela e passaremos esse mesmo objeto de importação para várias chamadas `instantiate()` (en-US).

Nossos exemplos de `.wat` são assim:

`shared0.wat`:

```wasm
(module
  (import "js" "memory" (memory 1))
  (import "js" "table" (table 1 funcref))
  (elem (i32.const 0) $shared0func)
  (func $shared0func (result i32)
   i32.const 0
   i32.load)
)
```

`shared1.wat`:

```wasm
(module
  (import "js" "memory" (memory 1))
  (import "js" "table" (table 1 funcref))
  (type $void\_to\_i32 (func (result i32)))
  (func (export "doIt") (result i32)
   i32.const 0
   i32.const 42
   i32.store  ;; store 42 at address 0
   i32.const 0
   call\_indirect (type $void\_to\_i32))
)
```

Estes funcionam da seguinte forma:

1. A função `shared0func` é definida em `shared0.wat` e armazenada em nossa tabela importada.
2. Esta função cria uma constante contendo o valor `0`, e então usa o comando `i32.load` para carregar o valor contido no índice de memória fornecido. O índice fornecido é `0` — novamente, ele extrai implicitamente o valor anterior da pilha. Então `shared0func` carrega e retorna o valor armazenado no índice de memória `0`.
3. Em `shared1.wat`, exportamos uma função chamada `doIt` — esta função cria duas constantes contendo os valores `0` e `42`, então chama `i32.store` para armazenar um valor fornecido em um índice fornecido da memória importada. Novamente, ele extrai implicitamente esses valores da pilha, então o resultado é que ele armazena o valor `42` no índice de memória `0`,
4. Na última parte da função, criamos uma constante com valor `0`, então chamamos a função neste índice 0 da tabela, que é `shared0func`, armazenado lá anteriormente pelo bloco `elem` em `shared0.wat`.
5. Quando chamado, `shared0func` carrega o `42` que armazenamos na memória usando o comando `i32.store` em `shared1.wat`.

**Nota:** As expressões acima novamente extraem valores da pilha implicitamente, mas você pode declará-los explicitamente dentro das chamadas de comando, por exemplo:

```wasm
(i32.store (i32.const 0) (i32.const 42))
(call\_indirect (type $void\_to\_i32) (i32.const 0))
```

Depois de converter para assembly, usamos `shared0.wasm` e `shared1.wasm` em JavaScript por meio do seguinte código:

```js
const importObj = {
  js: {
    memory: new WebAssembly.Memory({ initial: 1 }),
    table: new WebAssembly.Table({ initial: 1, element: "anyfunc" }),
  },
};

Promise.all([
  WebAssembly.instantiateStreaming(fetch("shared0.wasm"), importObj),
  WebAssembly.instantiateStreaming(fetch("shared1.wasm"), importObj),
]).then((results) => {
  console.log(results[1].instance.exports.doIt()); // prints 42
});
```

Cada um dos módulos que está sendo compilado pode importar a mesma memória e objetos de tabela e, assim, compartilhar a mesma memória linear e "espaço de endereçamento" de tabela.

**Nota:** Você pode encontrar este exemplo no GitHub como shared-address-space.html (veja ao vivo também).

Operações de memória em massa
-----------------------------

As operações de memória em massa são uma adição mais recente à linguagem (por exemplo, no Firefox 79 (en-US)) — sete novas operações incorporadas são fornecidas para operações de memória em massa, como cópia e inicialização, para permitir que o WebAssembly modele funções nativas como `memcpy` e `memmove` de maneira mais eficiente e com melhor desempenho.

As novas operações são:

* `data.drop`: Descarta os dados em um segmento de dados.
* `elem.drop`: Descarta os dados em um segmento de elemento.
* `memory.copy`: Copia de uma região da memória linear para outra.
* `memory.fill`: Preenche uma região de memória linear com um determinado valor de byte.
* `memory.init`: Copia uma região de um segmento de dados.
* `table.copy`: Copia de uma região de uma tabela para outra.
* `table.init`: Copia uma região de um segmento de elemento.

**Nota:** você pode encontrar mais informações na proposta Operações de memória em massa e inicialização de segmento condicional.

Tipos
-----

### Tipos de números

Atualmente, o WebAssembly tem quatro *number types* disponíveis:

* `i32`: inteiro de 32 bits
* `i64`: inteiro de 64 bits
* `f32`: flutuante de 32 bits
* `f64`: flutuante de 64 bits
### Tipos de vetores

* `v128`: vetor de 128 bits de inteiro compactado, dados de ponto flutuante ou um único tipo de 128 bits.
### Tipos de referência

A proposta de tipos de referência (compatível com Firefox 79 (en-US)) fornece dois recursos principais:

* Um novo tipo, `externref`, que pode conter *qualquer* valor JavaScript, por exemplo, strings, referências DOM, objetos, etc. `externref` é opaco do ponto de vista do WebAssembly — um módulo Wasm não pode acessar e manipular esses valores e, em vez disso, pode apenas recebê-los e passá-los de volta. Mas isso é muito útil para permitir que os módulos Wasm chamem funções JavaScript, APIs DOM, etc., e geralmente para preparar o caminho para uma interoperabilidade mais fácil com o ambiente host. `externref` pode ser usado para tipos de valor e elementos de tabela.
* Uma série de novas instruções que permitem aos módulos Wasm manipular diretamente tabelas WebAssembly, em vez de ter que fazer isso por meio da API JavaScript.

**Nota:** A documentação wasm-bindgen contém algumas informações úteis sobre como aproveitar `externref` do Rust.

WebAssembly de vários valores
-----------------------------

Outra adição mais recente à linguagem (por exemplo, no Firefox 78 (en-US)) é o valor múltiplo do WebAssembly, o que significa que as funções do WebAssembly agora podem retornar vários valores e as sequências de instruções podem consumir e produzir vários valores de pilha.

No momento da redação deste artigo (junho de 2020), isso está em um estágio inicial e as únicas instruções de vários valores disponíveis são chamadas para funções que retornam vários valores. Por exemplo:

```wasm
(module
  (func $get\_two\_numbers (result i32 i32)
    i32.const 1
    i32.const 2
  )
  (func (export "add\_two\_numbers") (result i32)
    call $get\_two\_numbers
    i32.add
  )
)
```

Mas isso abrirá caminho para tipos de instruções mais úteis e outras coisas além. Para uma descrição útil do progresso até agora e como isso funciona, consulte Multi-Value All The Wasm! por Nick Fitzgerald.

Threads WebAssembly
-------------------

WebAssembly Threads (compatível com Firefox 79 (en-US) em diante) permite que objetos WebAssembly Memory sejam compartilhados entre várias instâncias WebAssembly em execução em Web Workers separados, da mesma forma que `SharedArrayBuffer` (en-US)s em JavaScript. Isso permite uma comunicação muito rápida entre os trabalhadores e ganhos significativos de desempenho em aplicativos da web.

A proposta de threads tem duas partes, memórias compartilhadas e acessos à memória atômica.

### Memórias compartilhadas

Conforme descrito acima, você pode criar objetos WebAssembly `Memory` (en-US) compartilhados, que podem ser transferidos entre os contextos Window e Worker usando `postMessage()` (en-US), da mesma forma que um [`SharedArrayBuffer`](/pt-BR/docs/Web/JavaScript/ Referência/Global\_Objects/SharedArrayBuffer).

No lado da API JavaScript, o objeto de inicialização do construtor `WebAssembly.Memory()` (en-US) agora tem uma propriedade `shared`, que quando definida como `true` criará uma memória compartilhada:

```js
const memory = new WebAssembly.Memory({
  initial: 10,
  maximum: 100,
  shared: true,
});
```

a propriedade `buffer` (en-US) da memória agora retornará um `SharedArrayBuffer`, em vez do `ArrayBuffer` usual:

```js
memory.buffer; // retorna SharedArrayBuffer
```

No formato de texto, você pode criar uma memória compartilhada usando a palavra-chave `shared`, assim:

```wasm
(memory 1 2 shared)
```

Ao contrário das memórias não compartilhadas, as memórias compartilhadas devem especificar um tamanho "máximo", tanto no construtor da API JavaScript quanto no formato de texto Wasm.

**Nota:** Você pode encontrar muito mais detalhes na Proposta de encadeamento para WebAssembly.

### Acessos à memória atômica

Várias novas instruções Wasm foram adicionadas e podem ser usadas para implementar recursos de nível superior, como mutexes, variáveis de condição etc. Estas instruções são permitidas em memórias não compartilhadas a partir do Firefox 80.

**Nota:** A página de suporte do Emscripten Pthreads mostra como aproveitar essa nova funcionalidade do Emscripten.

Resumo
------

Isso encerra nosso tour de alto nível pelos principais componentes do formato de texto WebAssembly e como eles são refletidos na API WebAssembly JS.

Veja também
-----------

* A principal coisa que não foi incluída é uma lista abrangente de todas as instruções que podem ocorrer em corpos de função. Veja a semântica do WebAssembly para um tratamento de cada instrução.
* Veja também a gramática do formato de texto que é implementada pelo interpretador de especificações.