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:
| @page "/counter" | |
| <h1>Counter</h1> | |
| <p>Current count: @currentCount</p> | |
| <button @onclick(IncrementCount)>Click me</button> | |
| @functions { | |
| int currentCount = 0; | |
| void IncrementCount() | |
| { | |
| currentCount++; | |
| } | |
| } |
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:
| <!– | |
| Configuring this here is temporary. Later we'll move the app config | |
| into Program.cs, and it won't be necessary to specify AppAssembly. | |
| –> | |
| <Router AppAssembly=typeof(Program).Assembly /> |
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:
| @page "/" | |
| <h1>Hello, world!</h1> | |
| Welcome to your new app. | |
| <SurveyPrompt Title="How is Blazor working for you?" /> |
O componente SurveyPrompt está dentro da pasta “Shared”, com o seguinte código:
| <div class="alert alert-survey" role="alert"> | |
| <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> | |
| <strong>@Title</strong> | |
| Please take our | |
| <a target="_blank" class="alert-link" href="https://go.microsoft.com/fwlink/?linkid=870381"> | |
| brief survey | |
| </a> | |
| and tell us what you think. | |
| </div> | |
| @functions | |
| { | |
| public string Title { get; set; } | |
| } |
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:
| @page "/" | |
| <h1>Hello, world!</h1> | |
| Welcome to your new app. | |
| <SurveyPrompt Title="How is Blazor working for you?"/> | |
| <Counter /> |
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:
| @page "/counter" | |
| <h1>Counter</h1> | |
| <p>Current count: @currentCount</p> | |
| <button @onclick(IncrementCount(2))>Click me</button> | |
| @functions { | |
| int currentCount = 0; | |
| Action IncrementCount(int a) | |
| { | |
| return () => | |
| { | |
| currentCount = currentCount + a; | |
| }; | |
| } | |
| } |
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:
| @implements ILayoutComponent | |
| <div class='container-fluid'> | |
| <div class='row'> | |
| <div class='col-sm-3'> | |
| <NavMenu /> | |
| </div> | |
| <div class='col-sm-9'> | |
| @Body | |
| </div> | |
| </div> | |
| </div> | |
| @functions { | |
| public RenderFragment Body { get; set; } | |
| } |
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 é:
| using Microsoft.AspNetCore.Blazor.Browser.Rendering; | |
| using Microsoft.AspNetCore.Blazor.Browser.Services; | |
| namespace BlazorExample | |
| { | |
| class Program | |
| { | |
| static void Main(string[] args) | |
| { | |
| var serviceProvider = new BrowserServiceProvider(configure => | |
| { | |
| // Add any custom services here | |
| }); | |
| new BrowserRenderer(serviceProvider).AddComponent<App>("app"); | |
| } | |
| } | |
| } |
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:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>BlazorExample</title> | |
| <base href="/" /> | |
| <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="css/site.css" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <app>Loading…</app> | |
| <script src="css/bootstrap/bootstrap-native.min.js"></script> | |
| <script type="blazor-boot"></script> | |
| </body> | |
| </html> |
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”