Comparação da arquitetura do ASP.NET Web Forms e do Blazor

Embora o ASP.NET Web Forms e o Blazor tenham muitos conceitos semelhantes, há diferenças em como eles funcionam. Este capítulo examina o funcionamento interno e as arquiteturas do ASP.NET Web Forms e do Blazor.

Web Forms do ASP.NET

A estrutura do ASP.NET Web Forms é baseada em uma arquitetura centrada em página. Cada solicitação HTTP para um local no aplicativo é uma página separada à qual o ASP.NET responde. À medida que as páginas são solicitadas, o conteúdo do navegador é substituído pelos resultados da página solicitada.

As páginas são formadas pelos seguintes componentes:

• Marcação HTML
• Código em C# ou Visual Basic
• Uma classe code-behind que contém recursos lógicos e de manipulação de eventos
• Controles

Os controles são unidades reutilizáveis da interface do usuário da Web que podem ser colocadas e interagidas programaticamente em uma página. As páginas são compostas de arquivos que terminam com .aspx contendo marcação, controles e algum código. As classes code-behind estão em arquivos com o mesmo nome base e uma extensão .aspx.cs ou .aspx.vb, dependendo da linguagem de programação usada. Curiosamente, o servidor Web interpreta o conteúdo dos arquivos .aspx e os compila sempre que eles são alterados. Essa recompilação ocorre mesmo se o servidor Web já estiver em execução.

Os controles podem ser criados com marcação e entregues como controles de usuário. Um controle de usuário deriva da classe UserControl e tem uma estrutura semelhante à Página. A marcação para controles de usuário é armazenada em um arquivo .ascx. Uma classe code-behind que acompanha reside em um arquivo .ascx.cs ou .ascx.vb. Os controles também podem ser criados completamente com código, herdando da classe base WebControl ou CompositeControl.

As páginas também têm um ciclo de vida extenso do evento. Cada página gera eventos para os eventos de inicialização, carregamento, pré-geração e descarregamento que ocorrem à medida que o runtime ASP.NET executa o código da página para cada solicitação.

Controles em uma página normalmente de post-back para a mesma página que apresentou o controle e que carregam junto com eles uma carga de um campo de formulário oculto chamado ViewState. O campo ViewState contém informações sobre o estado dos controles no momento em que eles foram renderizados e apresentados na página, permitindo que o runtime ASP.NET compare e identifique as alterações no conteúdo enviado ao servidor.

Blazor

Blazor é uma estrutura de interface do usuário da Web do lado do cliente semelhante à estrutura de front-end do JavaScript, como Angular ou React. O Blazor manipula as interações do usuário e renderiza as atualizações de interface do usuário necessárias. O Blazornão é baseado em um modelo de solicitação de resposta. As interações do usuário são tratadas como eventos que não estão no contexto de nenhuma solicitação HTTP específica.

Os aplicativos do Blazor consistem em um ou mais componentes raiz que são renderizados em uma página HTML.

Como o usuário especifica onde os componentes devem ser renderizados e como os componentes são conectados para interações do usuário é específico do modelo de hospedagem.

Os componentes do Blazor são classes do .NET que representam uma parte de interface do usuário reutilizável. Cada componente mantém seu próprio estado e especifica sua própria lógica de renderização, que pode incluir a renderização de outros componentes. Os componentes especificam manipuladores de eventos para interações específicas do usuário para atualizar o estado do componente.

Depois que um componente manipula um evento, o Blazor renderiza o componente e controla o que foi alterado na saída renderizada. Os componentes não são renderizados diretamente para o DOM (Modelo de Objeto de Documento). Em vez disso, eles são renderizados para uma representação na memória do DOM chamada de RenderTree para que o Blazor possa acompanhar as alterações. O Blazor compara a saída renderizada recentemente com a saída anterior para calcular uma diferença de interface do usuário que ela aplica com eficiência ao DOM.

Os componentes também podem indicar manualmente que devem ser renderizados se o estado deles for alterado fora de um evento normal de interface do usuário. O Blazor usa um SynchronizationContext para impor um único thread lógico de execução. Os métodos de ciclo de vida de um componente e quaisquer retornos de chamada de evento gerados pelo Blazor são executados neste SynchronizationContext.