Hoje vamos criar nossa primeira aplicação usando o Blazor.

A Microsoft anunciou recentemente o lançamento de um novo framework web – o Blazor, que eu apresentei no seguinte artigo:

• Blazor – O novo framework SPA da Microsoft

Hoje vamos configurar o ambiente de desenvolvimento do Blazor em nossa máquina e executar nossa primeira aplicação ASP.NET Core usando o Blazor e o Visual Studio 2017.

O Blazor é um novo framework para criar aplicativos do lado do cliente usando C#, Razor e HTML que são executados no navegador com o WebAssembly.

Mas o que vem a ser esse WebAssembly?

O WebAssembly (ou apenas Wasm) é uma linguagem assembly de baixo nível com um formato binário compacto, que pode ser executado nos navegadores. Como é um código binário de baixo nível, ele não pode ser lido/escrito por humanos, mas podemos compilar o código de outras linguagens para o WebAssembly para facilitar sua execução no navegador.

Ele é um subconjunto da linguagem JavaScript sendo projetado para complementar e executar ao lado do JavaScript. Ele nos permite executar código escrito em vários idiomas na Web, com velocidade quase nativa. O WebAssembly foi desenvolvido como um padrão web e é suportado por todos os principais navegadores sem plugins.

Os pré-requisitos para poder criar aplicações usando o Blazor, são:

• Instalar o .NET Core 2.1 SDK. Pegue aqui.
• Instalar a última versão do Visual Studio 2017 (15.7). Pegue aqui

Nota: o Blazor não é suportado em versões do Visual Studio anteriores à versão v15.7 e precisa do .NET Core SDK 2.1

No Blazor, um componente é uma classe .NET, que você pode escrever diretamente (por exemplo, como uma classe C#) ou mais comumente na forma de uma página Razor (ou seja, um arquivo .cshtml).

Quando você cria um novo projeto, o Blazor oferece as principais funcionalidades que a maioria dos aplicativos precisa. Isso inclui:

• Layouts
• Roteamento
• Injeção de dependência
• Lazy loading ou carregamento lento (isto é, carregar partes do aplicativo sob demanda à medida que o usuário navega)
• Testes unitários

Tudo isso é opcional; você usa se quiser.

Se você estiver no Linux ou no Mac, pode criar uma aplicação Blazor na linha de comando:

dotnet new blazor -o BlazorApp1
cd BlazorApp1
dotnet run

Nota: antes você tem que instalar os templates para o Blazor:

dotnet new --install "Microsoft.AspNetCore.Blazor.Templates"

Para ver a lista de templates disponíveis, acesse: https://dotnetnew.azurewebsites.net/.

Iniciando o desenvolvimento com Blazor

A primeira coisa a fazer para iniciar o desenvolvimento com Blazor, é instalar a “ASP.NET Core Blazor Language Services extension”, que você pode obter neste link aqui.

Depois de fazer o download e instalar o pacote, você verá a mensagem abaixo:

Após esse procedimento, abra o VS 2017 Community e selecione File -> New Project;

Selecione .NET Core e o template ASP .NET Core Web Application, informe o nome Blazor_Demo e clique em “OK“;

Na próxima janela selecione o template Blazor e clique em “OK“:

Na janela Solution Explorer podemos ver a estrutura do projeto criado conforme mostra a imagem a seguir:

Temos uma pasta Pages, onde incluiremos as views da nossa aplicação, que serão renderizadas no navegador.

Executando o projeto iremos obter no navegador o seguinte resultado:

Vemos na página inicial o menu lateral esquerdo com três opções: Home, Counter e Fetch Data (igual a template do Angular).

Cada uma dessas páginas é a implementação dos arquivos Razor contido na pasta Pages:

• Index.cshtml
• Counter.cshtml
• FetchData.cshtml

E cada um desses arquivos implementa um componente Blazor que é compilado e executado no lado do cliente no navegador.

Na opção Counter, a página exibe um Button(Click me) que ao ser clicado, incrementa o contador:

Assim, cada vez que o botão for clicado, o contador é incrementado sem uma atualização de página. Normalmente, esse tipo de comportamento do lado do cliente é tratado via JavaScript; mas aqui, ele é implementado em C# e .NET pelo componente Counter.

Vamos dar uma olhada na implementação do componente Counter no arquivo Counter.cshtml:

A interface do usuário para o componente Counter é definida usando código HTML normal.

A lógica de renderização dinâmica (por exemplo, loops, condicionais, expressões) é adicionada usando uma sintaxe do C# incorporada, chamada Razor. A marcação HTML e a lógica de renderização C# são convertidas em uma classe de componente no momento da criação. O nome da classe .NET gerada corresponde ao nome do arquivo.

Os membros da classe do componente são definidos em um bloco @functions. No bloco @functions, o estado do componente (propriedades, campos) e os métodos podem ser especificados para tratamento de eventos ou para definir outra lógica de componentes. Esses membros podem ser usados como parte da lógica de renderização do componente e para manipular eventos.

Quando o botão da página for clicado, o manipulador onclick registrado do componente Counter é chamado (o método IncrementCount) e o componente Counter regenera sua árvore de renderização. O Blazor compara a nova árvore de renderização com a anterior e aplica quaisquer modificações no navegador Document Object Model (DOM). A contagem exibida é então atualizada.

Vamos alterar o código do arquivo Counter.cshtml conforme a figura abaixo:

Executando novamente agora iremos obter:

Usando componentes

Depois que um componente é definido, o componente pode ser usado para implementar outros componentes. A marcação para usar um componente se parece com uma tag HTML, em que o nome da tag é o tipo de componente.

Abra o arquivo Index.cshtml e inclua a tag para incluir o componente Counter nesta página:

Execute novamente a aplicação e agora observe a página para a opção Home:

Usando parâmetros de componentes

Os componentes também podem ter parâmetros, que são definidos usando propriedades privadas na classe de componentes decorada com o atributo [Parameter]. Use atributos para especificar argumentos para um componente na marcação.

Vamos agora atualizar o componente Counter para ter uma propriedade IncrementaQuantidade, cujo valor padrão seja igual a 1.

Abra o arquivo Counter.cshtml e altere o código conforme abaixo:

Após isso, abra o arquivo Index.cshtml e altere a quantidade de incremento do Counter para 10, definindo um atributo que corresponda ao nome da propriedade do componente para IncrementaQuantidade.

Executando novamente veremos o parâmetro em ação:

Roteamento para componentes

A diretiva @page na parte superior do arquivo Counter.cshtml especifica que esse componente é uma página para a qual as solicitações podem ser roteadas. Especificamente, o componente Counter manipula requisições enviadas para /counter.

Sem a diretiva @page, o componente não manipularia solicitações roteadas, mas o componente ainda poderia ser usado por outros componentes.

Injeção de dependência

Os serviços registrados com o provedor de serviços do aplicativo estão disponíveis para os componentes por meio de injeção de dependência (DI). Os serviços podem ser injetados em um componente usando a diretiva @inject.

Dê uma olhada na implementação do componente FetchData em FetchData.cshtml. A diretiva @inject é usada para injetar uma instância HttpClient no componente.

O componente FetchData usa o HttpClient injetado para recuperar dados JSON do servidor quando o componente é inicializado.

Nos bastidores, o HttpClient fornecido pelo runtime do Blazor é implementado usando interop JavaScript para chamar a API de busca do navegador subjacente para enviar a requisição (a partir de C#, é possível chamar qualquer biblioteca JavaScript ou API do navegador).

Os dados recuperados são desserializados na variável C# forecasts como uma matriz de objetos do WeatherForecast.

A seguir, um laço foreach é usado para renderizar cada instância de forecast como uma linha na tabela:

E é assim que funciona a nossa primeira aplicação Blazor.

Aguarde mais artigos sobre o Blazor em breve.