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:

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:

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:

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 😀

Anúncios

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 )

Google+ photo

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

Imagem do Twitter

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

Facebook photo

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

w

Connecting to %s