Componentes Blazor

Nesse artigo vamos falar um pouco sobre os Componentes Blazor. Para isso vamos utilizar uma aplicação Blazor já existente. Qualquer dúvida dê uma olhada nesse artigo, que mostra como criar um novo projeto Blazor usando o template do Visual Studio.

Componente

Assim como outros Frameworks Web, o Blazor é um Framework baseado em Componentes. Isso significa que praticamente todos os elementos que compõe uma aplicação Blazor, são Componentes.

Um Componente nada mais é do que uma “parte” de uma interface de usuário. Podendo ser toda uma página, um pequeno fragmento, um diálogo ou um formulário. Ou seja, qualquer elemento que no final será renderizado como uma interface de usuário é um componente da sua aplicação Blazor.

Diferente dos outros Frameworks Web, onde os componentes são escritos em HTML e JavaScript, um componente Blazor é escrito em HTML e C#. Um componente Blazor é escrito em um arquivo com extensão .razor. Veja na Figura 1 que em nossa aplicação de exemplo temos três componentes na pasta Pages.

Figura 1: Componentes da Aplicação de Exemplo

Abra o componente Counter.razor e veja, como mostra a Figura 2, que um componente pode ser composto de três blocos de código.

Figura 2: Estrutura de um componente

O primeiro bloco de código é a área onde temos as diretivas do componente. Existem várias diretivas em um componente, que realizam diversas tarefas como importar outros namespaces, indicar uma herança, injetar serviços, definir rotas, entre outros.

Nesse exemplo temos uma única diretiva @page, que define a rota para a qual esse componente irá responder. Veja mais sobre rotas nesse outro artigo aqui.

O segundo bloco de código contém a estrutura HTML que será renderizada pelo componente. Além de HTML, nós também podemos combinar código C# para se comunicar com o terceiro bloco.

O terceiro bloco de código é chamado de @code, onde temos código C#, responsável pela lógica do nosso componente. Veja que nesse exemplo temos um atributo e um método. O atributo é renderizado no HTML dentro da tag <p>, e o método é chamado pelo botão HTML.

Toda vez que o usuário clicar no botão, o método é executado, e o atributo incrementado em 1. Automaticamente o HTML é modificado para o usuário. Faça um teste executando a aplicação.

Compilação e Execução

Quando compilamos a nossa aplicação, o componente (HTML+C#) é convertido em uma classe .NET. O nome dessa classe é o mesmo nome do arquivo .razor. O código C# do bloco @code são os membros da classe (atributos, propriedades, métodos).

As DLLs resultantes da compilação do nosso projeto são baixadas pelo browser, para serem executadas por uma versão do Mono, dentro do WebAssembly do Browser. (Dedicarei um artigo para detalhar como isso funciona).

Quando a aplicação é executada, os Componentes são renderizados em memória, numa representação do DOM (Document Object Model), chamada de render tree. Isso é usado para atualizar a UI da forma mais flexível e eficiente possível.

Sendo assim, quando o botão de componente Counter é clicado, ocorre o seguinte:

  1. O componente executa o método IncrementCount registrado no evento @onclick do botão
  2. O método executa o código que incrementa em 1 o atributo currentCount.
  3. O componente recria a sua árvore de renderização (render tree)
  4. Essa nova árvore de renderização é então comparada com a anterior
  5. Apenas as diferenças encontradas entre as duas árvores são aplicadas ao DOM

Reutilizando Componentes

Componentes podem responder a rotas como já vimos, mas eles também podem ser reutilizados dentro de outros componentes.

Faça o seguinte teste: abra o componente Index.razor, e no final do seu HTML inclua o componente Counter, como mostra a Figura 3.

Figura 3: Reutilizando um componente dentro de outro componente

Execute a sua aplicação e veja que o mesmo componente que reponde à rota \counter, também é renderizado dentro do componente Index.razor. Figura 4.

Figura 4: Componente Counter renderizado dentro do Componente Index

O Próprio Index já renderiza um outro componente, chamado SurveyPrompt, que apresenta uma mensagem com um Link para responder uma pesquisa do Blazor.

Aproveitando, se assim como eu, você está gostando do Blazor, responda essa pesquisa e de seu Feedback para a Microsoft. Isso com certeza ajudará a evoluir o Framework.

Voltando ao assunto principal, saiba que a declaração da rota de um componente é opcional. Podemos criar componentes que não respondem à nenhuma rota, e que simplesmente são reutilizados em outros componentes da aplicação.

Todo o modelo de reutilização que já temos no .NET pode ser aplicado aos componentes Blazor. Podemos criar componentes em projetos separados e reutilizá-los referenciando esses projetos na nossa Solução. Ou ainda, podemos publicar nossos componentes em pacotes nuget, e reutilizá-los em diferentes projetos.

Como você deve ter percebido, o componente SurveyPrompt tem um atributo HTML chamado Title. Isso é um Parâmetro do componente. Nós vamos explorar os parâmetros de componentes mais a fundo no próximo artigo.

Grande Abraço e até o próximo!

4 comentários em “Componentes Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s