Iniciando com o Blazor

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:

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”:

001

Depois disso, escolhemos a opção “Blazor”:

002

Depois disso, o projeto está criado! Quando a gente rodar pela primeira vez, vamos ver essa telinha bonitinha aqui:

003

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.

004

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++;
}
}

view raw

Counter.cshtml

hosted with ❤ by GitHub

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 />

view raw

App.cshtml

hosted with ❤ by GitHub

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?" />

view raw

Index.cshtml

hosted with ❤ by GitHub

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 />

view raw

NewIndex.cshtml

hosted with ❤ by GitHub

Vejam que apenas chamei o componente Counter, e nós temos uma nova instância separada na Index:

005

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");
}
}
}

view raw

Program.cs

hosted with ❤ by GitHub

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>

view raw

index.html

hosted with ❤ by GitHub

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 😀

Advertisement

2 thoughts on “Iniciando com o Blazor

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s