Blazor: C# no Navegador

Prepare-se para o que talvez seja o recurso mais surpreendente de todas as extensões. Historicamente, uma verdade parecia imutável: no navegador, só roda JavaScript. Qualquer interatividade no lado do cliente — um botão que reage sem recarregar a página, uma lista que se atualiza na hora — precisava ser escrita em JavaScript, uma linguagem diferente do C#. O Blazor quebra essa verdade: ele permite escrever a interface interativa do seu site em C#, e essa interface roda dentro do navegador, no computador do usuário, sem uma linha de JavaScript. Como isso é possível? Graças a uma tecnologia chamada WebAssembly, que permite que código que não é JavaScript execute no navegador. Esta aula explica essa capacidade fascinante, mostra o modelo de componentes do Blazor, e o situa com honestidade — porque, embora empolgante, ele não é a escolha certa para todo caso.

O que é o WebAssembly, e por que ele muda tudo

Para entender o Blazor, primeiro o alicerce. O WebAssembly (frequentemente abreviado Wasm) é um formato de código de baixo nível que os navegadores modernos sabem executar, além do JavaScript. Ele foi criado justamente para permitir que linguagens diferentes do JavaScript rodem na web com bom desempenho. Pense nele como um "motor extra" dentro do navegador, capaz de rodar código compilado de outras linguagens. O Blazor aproveita isso: ele leva uma versão do ambiente de execução do .NET — compilada para WebAssembly — para dentro do navegador, de modo que o seu código C# execute ali, no lado do cliente, sobre esse ambiente.

Se isto lhe soa familiar, deveria: é a mesma ideia do ambiente de execução que roda seus programas .NET (que mencionamos lá no início do curso), agora rodando dentro da aba do navegador. Aquele conceito fundamental — um ambiente que executa seu código — reaparece num lugar inesperado. A consequência é profunda: você pode construir toda a interface interativa de uma aplicação web — botões, formulários, listas dinâmicas — em C#, reaproveitando a linguagem, o conhecimento e as bibliotecas que já tem, sem trocar de linguagem ao cruzar do servidor para o cliente. Uma única linguagem, do banco de dados até o botão que o usuário clica.

Componentes: a unidade do Blazor

O Blazor organiza a interface em componentes — peças reutilizáveis que combinam a marcação (HTML) e a lógica (C#) num mesmo arquivo, com a extensão .razor. É a mesma sintaxe Razor que você viu no blog, agora com interatividade rodando no navegador. Veja um componente simples, um contador que reage a cliques:

@* Contador.razor — um componente Blazor interativo *@
<h3>Contador</h3>

<p>Valor atual: @contagem</p>

@* O @onclick liga o clique do botão a um método C# — SEM JavaScript. *@
<button @onclick="Incrementar">Clique aqui</button>

@code {
    private int contagem = 0;   // o estado do componente

    private void Incrementar()  // método C# que roda NO NAVEGADOR ao clicar
    {
        contagem++;   // ao mudar o estado, o Blazor redesenha a parte da tela que mudou
    }
}

Leia o que acontece. O bloco @code contém C# puro — um campo contagem e um método Incrementar. O @onclick="Incrementar" liga o clique do botão a esse método C#. Quando o usuário clica, o Incrementar roda no navegador (via WebAssembly), incrementa a contagem, e o Blazor redesenha automaticamente a parte da tela que mudou, exibindo o novo valor. Tudo isso — o clique, a lógica, a atualização da tela — em C#, sem JavaScript. A interatividade que sempre pareceu território exclusivo de outra linguagem, você a escreve na linguagem que domina.

Os dois sabores do Blazor

Um esclarecimento importante, porque o nome "Blazor" cobre duas abordagens distintas. O Blazor WebAssembly (o foco desta aula) baixa o ambiente .NET para o navegador e roda o C# inteiramente no cliente — bom para aplicações que funcionam mesmo offline ou que aliviam o servidor, ao custo de um download inicial maior (o ambiente precisa ir junto). O Blazor Server, alternativamente, roda o C# no servidor e envia apenas as atualizações de tela ao navegador por uma conexão em tempo real — inicia mais rápido e não baixa o ambiente, mas exige conexão constante com o servidor e não funciona offline. Os componentes que você escreve são quase idênticos nos dois; o que muda é onde o código executa. Para começar, saiba que os dois existem e resolvem o mesmo problema (C# na interface) com compromissos diferentes; a escolha depende de a aplicação priorizar autonomia do cliente ou leveza de inicialização.

A honestidade necessária: quando usar (e quando não)

No espírito franco de todo o curso, preciso situar o Blazor com equilíbrio, porque o entusiasmo pela ideia não deve ofuscar o julgamento. O Blazor é uma tecnologia excelente e em ascensão, e é uma escolha muito boa quando: sua equipe já é forte em C# e quer evitar manter uma base separada de JavaScript; você está construindo uma aplicação web rica e interativa (um painel administrativo, uma ferramenta interna) e valoriza compartilhar código e modelos entre o cliente e o servidor. Por outro lado, o JavaScript e suas ferramentas ainda têm um ecossistema muito maior, uma comunidade imensa, e vantagens em certos cenários — sites públicos que exigem otimização fina para buscadores, projetos onde já há equipes de JavaScript, ou onde o download inicial do ambiente (no caso WebAssembly) seria um problema.

O Blazor não substituiu o JavaScript no mundo; ele adicionou uma opção poderosa para quem vive no ecossistema do C#. A escolha honesta não é "o Blazor é melhor", e sim "para o seu contexto — sua equipe, sua aplicação, suas prioridades — qual ferramenta serve melhor?". Conhecer o Blazor amplia suas opções; usá-lo bem é saber quando ele é a resposta certa. Essa capacidade de escolher a ferramenta com base no problema, sem se deixar levar pelo entusiasmo com a novidade, é uma marca do bom programador — a mesma maturidade que você aplicou ao escolher entre bancos de dados relacionais e de documentos.

A verdade de que só JavaScript roda no navegador deixou de valer. Graças ao WebAssembly, o Blazor permite escrever interfaces interativas em C# que executam no computador do usuário, e o modelo de componentes organiza essa interface em peças reutilizáveis que combinam marcação e lógica.

A honestidade sobre quando usá-lo é parte do valor da aula. O Blazor faz muito sentido para quem já domina C# e quer manter uma única linguagem no projeto, especialmente em aplicações internas; tem contrapartidas de tamanho inicial e de maturidade de ecossistema que pesam em outros contextos. Conhecer a ferramenta e seus limites vale mais do que adotá-la por entusiasmo.

Fontes e leituras recomendadas

• Introdução ao Blazor — a documentação oficial do Blazor, seus modelos e componentes; a base desta aula.
• Blazor WebAssembly — o modelo que roda C# no navegador via WebAssembly, detalhado.
• O que é WebAssembly — a tecnologia de base que permite código não-JavaScript rodar no navegador.
• Componentes Blazor — a unidade de construção da interface, com @code e ligação de eventos.
• Blazor Server versus WebAssembly — a comparação dos dois modelos e seus compromissos.

Exercícios

Exercício 1

Crie um projeto Blazor WebAssembly (dotnet new blazorwasm -n MeuBlazor), execute-o e explore o componente contador que já vem no modelo. Clique no botão e observe a contagem subir sem a página recarregar. Descreva o que está acontecendo "por baixo" — onde o código C# está executando?

Exercício 2

Crie um componente Contador.razor do zero, como o da aula, e adicione um segundo botão que decrementa a contagem. Confirme que ambos funcionam e que a tela se atualiza a cada clique.

<p>Valor: @contagem</p>
<button @onclick="Incrementar">+</button>
<button @onclick="Decrementar">−</button>

@code {
    private int contagem = 0;
    private void Incrementar() => contagem++;
    private void Decrementar() => contagem--;
}

Exercício 3

Explique, com suas palavras, o papel do WebAssembly na "mágica" do Blazor. Relacione-o com o conceito de ambiente de execução do .NET que você viu no início do curso — o que há de comum entre os dois?

Exercício 4

Compare o Blazor WebAssembly e o Blazor Server: onde o código C# executa em cada um, e qual é o principal compromisso (vantagem e desvantagem) de cada abordagem?

Exercício 5

Sem código: um colega afirma que "o Blazor tornou o JavaScript obsoleto". Com base na seção de honestidade da aula, responda a ele de forma equilibrada, citando um cenário em que o Blazor é uma ótima escolha e um em que o JavaScript ainda leva vantagem.