Como funciona o Blazor
O Blazor oferece muitos recursos para ajudar você a começar e entregar rapidamente seu próximo projeto de aplicativo Web. Vamos fazer um tour pelos principais recursos do Blazor para ajudar você a decidir se deve usar o Blazor em seu próximo grande aplicativo Web.
Componentes do Blazor
Os aplicativos Blazor são criados a partir de componentes. Um componente Blazor é uma parte reutilizável da interface do usuário da Web. Um componente Blazor encapsula sua lógica de renderização e de manipulação de eventos da interface do usuário. O Blazor inclui vários componentes incorporados para manipulação de formulários, validação de entrada do usuário, exibição de grandes conjuntos de dados, autenticação e autorização. Os desenvolvedores também podem criar e compartilhar seus próprios componentes personalizados, e muitos componentes Blazor predefinidos estão disponíveis no ecossistema do Blazor.
Usar tecnologias padrão da Web
Você cria componentes Blazor usando a sintaxe Razor, uma mistura conveniente de HTML, CSS e C#. Um arquivo Razor contém HTML simples e, em seguida, C# para definir qualquer lógica de renderização, como para condicionais, fluxo de controle e avaliação de expressões. Os arquivos Razor são então compilados em classes C# que encapsulam a lógica de renderização do componente. Como os componentes Blazor criados no Razor são apenas classes C#, você pode chamar códigos .NET arbitrários a partir de seus componentes.
Manipulação de eventos da interface do usuário e vinculação de dados
Os componentes Blazor interativos podem lidar com interações padrão da interface do usuário da Web usando manipuladores de eventos C#. Os componentes podem atualizar seu estado em resposta a eventos da interface do usuário e ajustar sua renderização de acordo. O Blazor também inclui suporte para vinculação bidirecional de dados a elementos da interface do usuário como uma forma de manter o estado do componente em sincronia com os elementos da interface do usuário.
O exemplo a seguir é um componente simples de contador do Blazor implementado em Razor. A maior parte do conteúdo é HTML, enquanto o bloco @code contém C#. Toda vez que o botão é pressionado, o método IncrementCount C# é chamado, o que incrementa o campo currentCount e, em seguida, o componente renderiza o valor atualizado:
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Renderização no servidor e no lado do cliente
O Blazor dá suporte à renderização de componentes no lado do servidor e do cliente para lidar com várias arquiteturas de interface do usuário da Web. Os componentes renderizados a partir do servidor podem acessar os recursos do servidor, como bancos de dados e serviços de back-end. Por padrão, os componentes Blazor são renderizados estaticamente a partir do servidor, gerando um HTML em resposta às solicitações.
Você também pode configurar os componentes do servidor para serem interativos, de modo que eles possam manipular eventos arbitrários da interface do usuário, manter o estado entre as interações e renderizar atualizações dinamicamente. Os componentes interativos do servidor tratam das interações e atualizações da interface do usuário por meio de uma conexão WebSocket com o navegador.
Como alternativa, os componentes Blazor podem ser renderizados interativamente a partir do cliente. O componente é baixado para o cliente e executado no navegador por meio do WebAssembly. Os componentes interativos do WebAssembly podem acessar os recursos do cliente por meio da plataforma Web, como armazenamento local e hardware, e podem até mesmo funcionar offline após o download.
Você pode optar por renderizar diferentes componentes do servidor ou do cliente no mesmo aplicativo. Muitas páginas do seu aplicativo podem não necessitar de interatividade e podem ser renderizadas de forma estática a partir do servidor. Enquanto outras partes mais interativas do seu aplicativo podem ser gerenciadas a partir do servidor ou do cliente. Você pode decidir qual modo de renderização de componentes usar em tempo de design ou no runtime. Com o Blazor, você tem a flexibilidade de criar a arquitetura do aplicativo Web ideal para o seu cenário.
Usando o Blazor para criar uma pizzaria
A interface do usuário do aplicativo da pizzaria se divide em vários componentes reutilizáveis: um layout de página com uma barra de navegação, páginas individuais, um catálogo e um editor de pizzas, um componente de pedido e assim por diante. O Blazor dá suporte integrado a muitos desses componentes, como componentes para formulários e validação. Muitas das páginas do aplicativo podem ser manipuladas a partir do servidor usando renderização estática no lado do servidor, de modo que o site esteja, em sua maior parte, sem estado e pronto para ser dimensionado. Quando é necessária mais interatividade, os componentes se tornam interativos aplicando um modo de renderização interativo. Para descarregar o trabalho do servidor, os componentes interativos são renderizados no cliente por meio do WebAssembly. Ao construir todo o aplicativo com uma única pilha de desenvolvimento Web, o aplicativo é rapidamente finalizado e logo os pedidos de pizza começam a chegar.