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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!– | |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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 é:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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”