WebAssembly

Vou dedicar esse artigo para explicar mais a fundo, o que é e como funciona o WebAssembly. WebAssembly é um recurso dos Browsers modernos, e através do qual é possível rodarmos nossas aplicações Blazor (client-side) no Browser.

O exemplo utilizado nos testes deste artigo foi criado seguindo as orientações desse outro artigo aqui.

WASM

O WebAssembly também é conhecido por WASM, que é simplesmente uma forma “abreviada” de se referenciar à tecnologia.

A ideia do WebAssembly, como você pode ler no site oficial (https://webassembly.org), é ser um formato de instrução binária dentro do Browser. Ou seja, é uma forma de viabilizar a execução de código compilado pelos Browsers.

O WebAssembly suporta nativamente linguagens como C e C++. Porém já existe a portabilidade de frameworks como o Java e o Mono (versão do .net pra Linux).

Padrão

Os padrões que definem o WebAssembly são desenvolvidos e definidos por um Grupo no W3C. Nesse Grupo temos representantes das empresas por trás dos principais Browsers do Mercado. Encontre mais informações sobre esse grupo aqui:

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

A versão 1.0 do WebAssembly já é suportada na versão mais recente dos 4 principais Browsers do Mercado: FireFox, Chrome, Safari e Edge. Isso incluí as suas respectivas versões Mobile.

Eficiência e Performance

Quando falamos do Browser executando código compilado, estamos falando de execução de código binário, que irá utilizar diretamente os recursos do hardware, para ter o máximo de eficiência e performance.

Vários testes nos mostram que uma aplicação rodando via WebAssembly é bem mais performática do que rodando em JavaScript.

A diferença é que no caso do JavaScript, o browser precisa interpretar o código antes de executá-lo. Essa fase de interpretação do código não existe no WebAssembly, tornando-o bem mais rápido.

Segurança

Uma aplicação WebAssembly está dentro do mesmo sandbox que uma aplicação JavaScript. Isso significa que a sua aplicação WebAssembly estará sujeita às mesmas políticas e permissões de segurança do Browser em que está rodando.

Blazor

Como você pode ver em detalhes nesse artigo, o Blazor é um Framework Web para o desenvolvimento de aplicações SPA (Single Page Application), que pode ser executado de duas formas: client-side e server-side.

O modo client-side roda no WebAssembly, através de uma versão otimizada do Mono. https://www.mono-project.com.

Um Projeto Blazor precisa ter como target o .NETStandard. Isso garante que o código e dependências utilizadas no projeto serão compatíveis com o Mono portado para o WebAssembly.

Na prática

Na prática, quando executamos a aplicação, o Browser prepara o ambiente do WebAssembly com Mono para o Blazor, através do script blazor.webassembly.js, que está referenciado no index.html do projeto. Veja a Figura 1.

Figura 1: Referência ao script blazor.webassembly.js no index.html

Um Teste interessante para se fazer é abrir uma aplicação Blazor no Chrome, e analisar o que o browser carrega na Aba Network. Veja na Figura 2, que primeiro é feito o download dos arquivos CSS e JavaScript que a aplicação depende.

Figura 2: Todos arquivos baixados por uma aplicação Blazor client-side

Um dos arquivos JavaScript baixados é o já mencionado blazor.webassembly.js. Esse é o cara responsável por preparar o Mono no WebAssembly do seu browser.

Em seguida, o que temos é o download das DLLs da aplicação, que foram compiladas pelo Visual Studio. Pode parecer estranho, mas é isso mesmo, o WebAssembly/Mono irá executar DLLs escritas em C#.

Todos os arquivos baixados, incluindo as DLLs, estão sujeitos aos mecanismos de cache do seu Browser, para evitar downloads desnecessários.

Nessas DLLs temos todos os componentes da aplicação, incluindo àqueles que respondem a rotas. Esses componentes irão gerar o HTML necessário para o browser exibir, tudo em memória e sem fazer acesso nenhum ao servidor.

Faça um teste e clique na opção de Menu Counter. Veja no Network, que a única requisição feita é do favicon.ico, que retorna um 304 Not Modified. Confira na Figura 3.

Figura 3: Prova que uma página Blazor roda dentro do browser

Inspecionando

Se você inspecionar qualquer elemento dessa página, verá o HTML que o componente gerou e foi renderizado no Browser, como mostra a Figura 4.

Figura 4: Inspecionando o HTML

E o mais interessante é o que você vai encontrar na aba Sources. Veja, como mostra a Figura 5, que com exceção do index.html e alguns arquivos JavaScript e CSS, todo o resto do código se encontra abaixo do Node wasm.

Figura 5: Inspecionando o código wasm

Veja que aí temos dezenas de arquivos que começam com a palavra wasm. Essas são representações textuais do código binário (linear assembly bytecode), que será executado pelo WebAssembly.

Para saber mais sobre isso, dê uma olhada nessa documentação aqui:

https://webassembly.org/docs/text-format/.

Concluindo

Como você pode ver, o WebAssembly é uma mudança enorme no paradigma de desenvolvimento de aplicações Web client-side.

E com o Blazor, o WebAssembly é a realização da ideia que sempre tivemos, de executar código C# no Browser. E melhor ainda, usando recurso nativo do browser, sem a necessidade de nenhum plugin!

Grande Abraço e até o próximo!