E aí pessoal! Tudo certo?
Se vocês participam de comunidades sobre .NET e tecnologias Microsoft, com certeza já devem ter ouvido falar por esses dias sobre o Blazor. Que é um framework web que funciona em qualquer navegador, e para escrever código utilizamos C#, Razor e HTML; tudo isso roda sobre o .NET com o Mono + WebAssembly e você pode ver mais sobre o Blazor aqui ou em um post do Eduardo Pires aqui.
O objetivo desse post é mostrar na prática como construir uma aplicação básica com o Blazor, desde a instalação até uma demo rodando, bora!
Instalação e configuração
Para iniciarmos com o Blazor, precisamos instalar alguns componentes, que vou listar abaixo:
- .NET Core 2.1 Preview 1 SDK, disponível aqui: https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-preview1
- Último preview do Visual Studio 2017 (15.7), disponível aqui: https://www.visualstudio.com/pt-br/vs/preview
- ASP .NET Blazor no Marketplace do Visual Studio, disponível aqui: https://marketplace.visualstudio.com/items?itemName=aspnet.blazor
Com isso tudo instalado, agora é só alegria! Vamos colocar a mão na massa!
Iniciando o projeto no Visual Studio
Como de costume, para iniciar um novo projeto, basta ir em:
Arquivo -> Novo -> Projeto, na aba “.NET Core” escolher a opção “Aplicativo Web ASP .NET Core”:
Depois disso, escolhemos a opção “Blazor”:
Depois disso, o projeto está criado! Quando a gente rodar pela primeira vez, vamos ver essa telinha bonitinha aqui:
Iniciando o projeto sem o Visual Studio
Caso você não tenha / não goste do Visual Studio, também podemos fazer um projeto Blazor da seguinte maneira:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
dotnet new blazor -o BlazorApp1
cd BlazorApp1
dotnet run
E pronto, vamos ter o mesmo resultado!
Conhecendo a estrutura
Quando criamos o projeto, além da página inicial, (Index.cshtml) também temos uma página que tem um contador (Counter.cshtml) e outra página com dados de temperatura de algumas cidades (FetchData.cshtml). Cada uma dessas páginas tem lógica em C# para exemplificar o uso do Blazor.
Olhem o código do contador escrito com Blazor; geralmente faríamos isso com JavaScript, certo? Eu diria que é uma abordagem um pouco diferente e até estranha até nos acostumarmos:
Cada arquivo “.cshtml” define um componente Blazor, que no fim das contas é uma classe que define um pedaço de página reutilizável, onde o nome da classe gerada corresponde ao nome do arquivo, falando de uma maneira bem macro.
Os membros do componente são definidos dentro do bloco @functions, onde você pode especificar campos, propriedades, métodos e lógica do componente.
Cada vez que um evento é executado no componente, como o @onclick por exemplo, o componente gera novamente sua árvore de renderização (veja mais sobre árvore de renderização aqui), então o Blazor vai comparar o novo layout com o antigo e aplicar as alterações na DOM.
Sistema de rotas
Verifiquem no exemplo acima, a diretiva @page. É ela que define que esse “pedaço de código” é uma página que as solicitações podem ser redirecionadas. Caso não houvesse esse componente, nenhuma solicitação seria redirecionada pra lá, porém poderia ser chamada por outra página como um componente.
O “cara” que define sobre as solicitações de roteamento para os componente fica no arquivo “App.cshtml“, que é mais ou menos assim:
Utilizando componentes
Podemos ver um exemplo de como utilizar componentes no arquivo Index.cshtml, onde é utilizado o componente “SurveyPrompt“, como podemos ver no exemplo a seguir:
O componente SurveyPrompt está dentro da pasta “Shared”, com o seguinte código:
Vejam que dentro do bloco @funcions foi definida uma propriedade pública com o nome Title, nesse caso ela serve para informar os parâmetros desse componente.
E olhem que legal, também podemos chamar um componente que tem uma rota, fiz uma pequena modificação no arquivo Index.cshtml:
Vejam que apenas chamei o componente Counter, e nós temos uma nova instância separada na Index:
Parâmetros em funções
Lembram que tem um método chamado “IncrementCount” lá no arquivo “Counter.cshtml“? Ele é um método void que incrementa uma variável, certo? E se eu quiser contar de 2 em 2, ou de 10 em 10, como faremos isso? Vejam no exemplo, onde o método retorna um tipo “Action” que será acionado no evento do click:
E se chamarmos a tela novamente, o contador irá contar de 2 em 2 🙂
Layout
O layout da aplicação é definido pela diretiva @layout, que fica no arquivo _ViewImports.cshtml
@layout MainLayout
Os layouts no Blazor também são construídos com componentes, e para definir o layout do aplicativo existe um componente chamado “MainLayout.cshtml” que implementa a interface “ILayoutComponent” utilizando a diretiva @implements, todas as páginas serão renderizadas dentro da variável @Body.
Reparem também que dentro do Layout uma diretiva é utilizada, a “NavMenu”, que pode ser encontrada dentro de “Shared/NavMenu.cshtml“, vejam:
Bem parecido com a “_Layout.cshtml” do ASP .NET MVC né?
A raiz do aplicativo
A raiz do aplicativo é especificada no arquivo “Program.cs” dentro do método “Main“, onde você também configura os Providers se quiser, vejam como é:
O método AddComponent define onde a nossa aplicação será renderizada, no nosso caso, será renderizado dentro de “app”. E dentro da pasta “wwwroot” temos um arquivo chamado index.html com essa tag, vejam:
E é lá que nossa aplicação irá renderizar 😀
Inicialização
Quando acontece o “bootstrap” da aplicação, o script “blazor-boot” é sobrescrito pelo seguinte código que manipula o runtime do .NET:
http://_framework/blazor.js
Por enquanto tranquilo né galera?
Fiquem ligados por aqui que logo logo vai ter mais um post falando sobre injeção de dependência e hospedagem e também vamos fazer uma todo list para exercitar!
Os exemplos de código estão disponíveis no GitHub: https://github.com/vmussak/blazor-examples
Referências
O post foi inspirado por esse conteúdo aqui:
Por hoje é só, qualquer dúvida ou sugestão, estou à disposição! Até mais 😀
2 thoughts on “Iniciando com o Blazor”