ASP.NET Core Blazor

Boas vindas ao Blazor!

O Blazor é uma estrutura para criar uma interface do usuário web interativa do lado do cliente com o .NET:

  • Crie interfaces do usuário interativas avançadas usando C# em vez de JavaScript.
  • Compartilhe a lógica de aplicativo do lado do cliente e do servidor gravada no .NET.
  • Renderize a interface do usuário, como HTML e CSS para suporte amplo de navegadores, incluindo navegadores móveis.
  • Integre-se a plataformas de hospedagem modernas, como o Docker.
  • Crie aplicativos móveis e de área de trabalho híbrida com .NET e Blazor.
  • Crie interfaces do usuário interativas avançadas usando C# em vez de JavaScript.
  • Compartilhe a lógica de aplicativo do lado do cliente e do servidor gravada no .NET.
  • Renderize a interface do usuário, como HTML e CSS para suporte amplo de navegadores, incluindo navegadores móveis.
  • Integre-se a plataformas de hospedagem modernas, como o Docker.

Usar o .NET para desenvolvimento web do lado do cliente oferece as seguintes vantagens:

  • escreva o código em C# em vez de JavaScript.
  • Aproveite o ecossistema .NET existente das bibliotecas .NET.
  • Compartilhe a lógica de aplicativo entre o servidor e o cliente.
  • Beneficie-se com o desempenho, confiabilidade e segurança do .NET.
  • Mantenha-se produtivo no Windows, Linux ou macOS com um ambiente de desenvolvimento, como o Visual Studio ou o Visual Studio Code.
  • Crie um conjunto comum de linguagens, estruturas e ferramentas que são estáveis, com recursos avançados e fáceis de usar.

Observação

Para obter um tutorial de início rápido Blazor, consulte Criar seu primeiro aplicativo Blazor.

Componentes

Os aplicativos Blazor se baseiam em componentes. Um componente no Blazor é um elemento da interface do usuário, como uma página, uma caixa de diálogo ou um formulário de entrada de dados.

Os componentes são classes C# do .NET incorporadas a assemblies .NET que:

  • Definem a lógica de renderização da interface de usuário flexível.
  • Tratam eventos do usuário.
  • Podem ser aninhados e reutilizados.
  • Podem ser compartilhados e distribuído como bibliotecas de classes Razor ou pacotes do NuGet.

A classe do componente geralmente é gravada na forma de uma página de marcação do Razor com uma extensão de arquivo .razor. Componentes em Blazor são chamados formalmente de componentes Razor, e informalmente como componentes Blazor. O Razor é uma sintaxe para a combinação de marcação HTML com o código C# projetada para melhorar a produtividade do desenvolvedor. O Razor permite que você alterne entre a marcação HTML e C# no mesmo arquivo com suporte para programação com IntelliSense no Visual Studio. Razor Pages e MVC também usam Razor. Ao contrário de Razor Pages e MVC, que são criadas ao redor de um modelo de solicitação/resposta, os componentes são usados especificamente para composição e lógica da interface do usuário do lado do cliente.

O Blazor usa marcações HTML naturais para composição de interface do usuário. A seguinte marcação Razor demonstra um componente (Dialog.razor) que exibe uma caixa de diálogo e processa um evento quando o usuário seleciona um botão:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

No exemplo anterior, OnYes é um método C# disparado pelo evento onclick do botão. O texto da caixa de diálogo (ChildContent) e o título (Title) são fornecidos pelo componente que usa esse componente em sua interface do usuário.

O componente Dialog está aninhado em outro componente usando uma marca HTML. No exemplo a seguir, o componente Index (Pages/Index.razor) usa o componente Dialog anterior. O atributo Title da marca passa um valor para o título para a propriedade Title do componente Dialog. O texto do componente Dialog (ChildContent) é definido pelo conteúdo do elemento <Dialog>. Quando o componente Dialog é adicionado ao componente Index, o IntelliSense no Visual Studio acelera o desenvolvimento com o preenchimento de sintaxe e de parâmetro.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

A caixa de diálogo é renderizada quando o componente Index é acessado em um navegador. Quando o botão é selecionado pelo usuário, o console de ferramentas para desenvolvedores do navegador mostra a mensagem gravada pelo método OnYes:

Componente de caixa de diálogo renderizado no navegador aninhado dentro do componente de Índice. O console de ferramentas de para desenvolvedores do navegador mostra a mensagem gravada pelo código C# quando o usuário seleciona o botão Sim! na interface do usuário.

Os componentes são renderizados em uma representação na memória do Modelo de Objeto do Documento (DOM) do navegador chamada árvore de renderização, que é usada para atualizar a interface do usuário de maneira flexível e eficiente.

Blazor Server

O Blazor Server dá suporte para hospedar os componentes do Razor no servidor em um aplicativo ASP.NET Core. As atualizações da interface do usuário são tratadas por uma conexão SignalR.

O runtime permanece no servidor e processa:

  • A execução do código C# do aplicativo.
  • O envio de eventos de interface do usuário do navegador para o servidor.
  • A aplicação das atualizações de interface do usuário a um componente renderizado que são enviadas novamente pelo servidor.

A conexão usada pelo Blazor Server para se comunicar com o navegador também é usada para processar as chamadas de interoperabilidade do JavaScript.

Blazor Server executa o código do .NET no servidor e interagem com o Modelo de Objeto do Documento no cliente por uma conexão do SignalR

As aplicativos Blazor Server renderizam conteúdo de maneira diferente dos modelos tradicionais para renderizar a interface do usuário em aplicativos ASP.NET Core usando exibições Razor ou páginas Razor. Ambos os modelos usam a linguagem Razor para descrever conteúdo HTML para renderização, mas eles diferem significativamente na forma como a marcação é renderizada.

Quando uma Razor Page ou exibição é renderizada, cada linha de código Razor emite HTML no formulário de texto. Após a renderização, o servidor descarta a página ou a instância de exibição, incluindo qualquer estado que foi produzido. Quando outra solicitação para a página ocorre, toda a página é renderizada novamente para a HTML e enviada ao cliente.

Blazor Server produz um grafo de componentes para exibição semelhante a um HTML ou DOM (Modelo de Objeto do Documento) do XML. O grafo de componente inclui o estado mantido em propriedades e campos. Blazor avalia o grafo de componente para produzir uma representação binária da marcação, que é enviada ao cliente para renderização. Após a conexão ser feita entre o cliente e o servidor, os elementos pré-renderizados estáticos do componente são substituídos por elementos interativos. A pré-renderização do conteúdo no servidor faz com que o aplicativo pareça mais responsivo no cliente.

Depois que os componentes são interativos no cliente, as atualizações da interface do usuário são disparadas pela interação do usuário e por eventos de aplicativo. Quando ocorre uma atualização, o grafo do componente é renderizado novamente e uma diff (diferença) da interface do usuário é calculada. Essa diff é o menor conjunto de edições do DOM necessárias para atualizar a interface do usuário no cliente. A diff é enviada ao cliente em um formato binário e aplicada pelo navegador.

Um componente é descartado depois que o usuário navega para longe dele.

Blazor WebAssembly

O Blazor WebAssembly é uma estrutura de SPA (aplicativo de página única) para criar aplicativos Web do lado do cliente interativos com o .NET. Blazor WebAssembly usa padrões da Web abertos sem plug-ins ou recompilação de código em outras linguagens. Blazor WebAssembly funciona em todos os navegadores da Web modernos, incluindo os navegadores móveis.

A execução do código do .NET em navegadores da Web é possibilitada por WebAssembly (abreviado como wasm). O WebAssembly é um formato de código de bytes compacto, otimizado para download rápido e máxima velocidade de execução. O WebAssembly é um padrão aberto da Web compatível com navegadores da Web sem plug-ins.

O código WebAssembly pode acessar a funcionalidade completa do navegador por meio de JavaScript, chamado de Interoperabilidade do JavaScript, geralmente abreviada como Interop do JavaScript ou Interop do JS. O código .NET executado por meio da WebAssembly no navegador é executado na área restrita do JavaScript do navegador com as proteções que a área restrita oferece contra ações mal intencionadas no computador cliente.

Blazor WebAssembly executa o código do .NET no navegador com WebAssembly.

Quando um aplicativo Blazor WebAssembly é criado e executado em um navegador:

  • Os arquivos de código C# e do Razor são compilados em assemblies do .NET.
  • Os assemblies e o runtime do .NET são baixados no navegador.
  • O Blazor WebAssembly inicializa o runtime do .NET e o configura para carregar os assemblies no aplicativo. O runtime Blazor WebAssembly usa a interoperabilidade de JavaScript para manipular as chamadas de API do navegador e as manipulações DOM.

O tamanho do aplicativo publicado, seu tamanho de payload, é um fator de desempenho crítico para a utilidade do aplicativo. Um aplicativo grande leva um tempo relativamente longo para baixar para um navegador, o que afeta a experiência do usuário. O Blazor WebAssembly otimiza o tamanho do conteúdo para reduzir os tempos de download:

  • O código não utilizado é retirado do aplicativo quando publicado pelo Trimmer de linguagem intermediária (IL).
  • As respostas HTTP são compactadas.
  • O runtime do .NET e os assemblies são armazenados em cache no navegador.

Blazor Hybrid

Aplicativos híbridos usam uma combinação de tecnologias nativas e da Web. Um aplicativo Blazor Hybrid usa Blazor em um aplicativo cliente nativo. Os componentes Razor são executados nativamente no processo do .NET e renderizam a interface do usuário da Web em um controle Web View inserido usando um canal de interoperabilidade local. WebAssembly não é usado em aplicativos híbridos. Os aplicativos híbridos abrangem as seguintes tecnologias:

  • .NET Multi-platform App UI (.NET MAUI): uma estrutura multiplataforma para criar aplicativos móveis e de área de trabalho nativos com C# e XAM.
  • Windows Presentation Foundation (WPF): uma estrutura de interface do usuário que é independente de resolução e usa um mecanismo de renderização baseado em vetor, criado para aproveitar o hardware gráfico moderno.
  • Windows Forms: uma estrutura de interface do usuário que cria aplicativos cliente da área de trabalho avançados para Windows. A plataforma de desenvolvimento Windows Forms dá suporte a uma ampla gama de recursos de desenvolvimento do aplicativo, incluindo controles, grafos, associação de dados e entrada de usuário.

Para obter mais informações sobre como criar aplicativos Blazor Hybrid com as estruturas anteriores, consulte os seguintes artigos:

Interoperabilidade do JavaScript

Para aplicativos que exigem bibliotecas JavaScript e acesso a APIs do navegador de terceiros, os componentes interoperam com o JavaScript. Os componentes são capazes de usar qualquer biblioteca ou API que o JavaScript possa usar. O código C# pode chamar o código JavaScript, e o código JavaScript pode chamar o código C#.

Compartilhamento de código e o .NET Standard

Blazor implementa o .NET Standard, que permite Blazor que os projetos façam referência a bibliotecas que estejam em conformidade com as especificações do .NET Standard. O .NET Standard é uma especificação formal das APIs do .NET que são comuns entre as implementações do .NET. As bibliotecas de classe do .NET Standard podem ser compartilhadas entre diferentes plataformas do .NET, como Blazor, .NET Framework, .NET Core, Xamarin, Mono e Unity.

As APIs que não são aplicáveis em um navegador da Web (por exemplo, para acessar o sistema de arquivos, abrir um soquete e threading) geram a PlatformNotSupportedException.

Recursos adicionais