Introdução ao ASP.NET Core Blazor

Bem-vindo ao Blazor !

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

  • Crie UIs interativas ricas 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 de 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 com Visual Studio no Windows, Linux e macOS.
  • Crie um conjunto comum de linguagens, estruturas e ferramentas que são estáveis, com recursos avançados e fáceis de usar.

Componentes

Blazor os aplicativos são baseados em componentes. Um componente no Blazor é um elemento da interface do usuário, como uma página, caixa de diálogo ou formulário de entrada de dados.

Os componentes são classes C# do .NET criadas em assemblies do .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.
  • Pode ser compartilhado e distribuído como Razor bibliotecas de classes ou pacotes NuGet.

A classe de componente geralmente é escrita na forma de uma página Razor de marcação com uma extensão .razor de arquivo. Os Blazor componentes no são formalmente chamados de Razor componentes. Razor é uma sintaxe para combinar marcação HTML com código C# projetado para produtividade do desenvolvedor. Razor permite alternar entre a marcação HTML e o C# no mesmo arquivo com suporte à programação do IntelliSense Visual Studio. Razor Pages e MVC também usam Razor . Ao contrário de Pages e MVC, que são criados em torno de um modelo de solicitação/resposta, os componentes são usados especificamente para lógica e composição da interface do usuário Razor do lado do cliente.

Blazor usa marcas HTML naturais para composição da interface do usuário. A marcação a seguir 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 do botão onclick . O texto () e o título () da caixa de diálogo ChildContent Title são fornecidos pelo seguinte componente que usa esse componente em sua interface do usuário.

O Dialog componente é aninhado dentro de outro componente usando uma marca HTML. No exemplo a seguir, o Index componente ( Pages/Index.razor ) usa o Dialog componente anterior. O atributo da marca Title passa um valor para o título para a Dialog Propriedade do componente Title . O Dialog texto do componente ( ChildContent ) é definido pelo conteúdo do <Dialog> elemento. Quando o Dialog componente é adicionado ao Index componente, o IntelliSense no Visual Studio agiliza o desenvolvimento com a conclusão da sintaxe e do 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 Index componente é acessado em um navegador. Quando o botão é selecionado pelo usuário, o console de ferramentas de desenvolvedor do navegador mostra a mensagem escrita pelo OnYes método:

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

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

Blazor WebAssembly

Blazor WebAssembly o é uma estrutura de Spa (aplicativo de página única) para a criação de aplicativos Web do lado do cliente interativos com o .net. Blazor WebAssembly usa padrões abertos da Web sem plugins ou recompilando código em outras linguagens. Blazor WebAssembly funciona em todos os navegadores da Web modernos, incluindo navegadores móveis.

A execução de código .NET dentro de navegadores da Web é possibilitada pelo Webassembly (abreviado 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, chamada interoperabilidade javaScript, geralmente abreviada para interoperabilidade javaScript ou interoperabilidade 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 .NET no navegador com WebAssembly.

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

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

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

  • O código nãoutilado é removido do aplicativo quando ele é publicado pelo Il (Intermediate Language) Trimmer.
  • As respostas HTTP são compactadas.
  • O runtime do .NET e os assemblies são armazenados em cache no navegador.
  • O código não utilizado é retirado do aplicativo quando publicado pelo Vinculador 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 Server

Blazor desacopla a lógica de renderização de componentes de como as atualizações da interface do usuário são aplicadas. Blazor Server fornece suporte para hospedar Razor componentes no servidor em um ASP.NET Core. As atualizações da interface do usuário são tratadas em uma SignalR conexão.

O runtime permanece no servidor e lida com:

  • Executando o código C# do aplicativo.
  • Enviar eventos de interface do usuário do navegador para o servidor.
  • Aplicar atualizações de interface do usuário ao componente renderizado que é enviado de volta pelo servidor.

A conexão usada pelo Blazor Server para se comunicar com o navegador também é usada para lidar com chamadas de interop javaScript.

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

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 no código JavaScripte o código JavaScript pode chamar no código C#.

Compartilhamento de código e o .NET Standard

Blazor implementa o .net Standard, que permite que os Blazor projetos referenciem bibliotecas que estão em conformidade com .net Standard especificações. O .NET Standard é uma especificação formal das APIs do .NET que são comuns entre as implementações do .NET. .NET Standard bibliotecas de classe podem ser compartilhadas entre diferentes plataformas .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