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:

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

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

view raw

SurveyPrompt.cshtml

hosted with ❤ by GitHub

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

view raw

NewCounter.cshtml

hosted with ❤ by GitHub

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

view raw

MainLayout.cshtml

hosted with ❤ by GitHub

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:

https://blogs.msdn.microsoft.com/webdev/2018/03/22/get-started-building-net-web-apps-in-the-browser-with-blazor/

Por hoje é só, qualquer dúvida ou sugestão, estou à disposição! Até mais 😀

Pingback: Injeção de dependência com Blazor – Vinícius Mussak
Pingback: Criando uma lista de tarefas com Blazor – Vinícius Mussak

Deixe uma Resposta Cancelar resposta

Insira aqui o seu comentário...

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

Email (obrigatório) (O endereço nunca será tornado público)

Nome (obrigatório)

Site da Web

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

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

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

Cancelar

Connecting to %s

Vinícius Mussak

Software Development