Blazor - Apresentando as atualizações no .NET 5


Hoje vou apresentar as principais atualizações do Blazor no .NET 5 com base na documentação e nos posts da equipe do Blazor.

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.  

Blazor no .NET 5

O .NET 5 vem com o Blazor incluído, para que você tenha tudo o que precisa para construir aplicações Web modernas e sofisticadas com .NET e C#.

O Blazor no .NET 5 permite a construção de interfaces de usuário Web ricas e interativas no lado do cliente para aplicativos SPA usando a plataforma .NET em vez de JavaScript. Com ASP.NET Core e Blazor, você pode construir aplicativos da Web full-stack apenas com .NET. O Blazor no .NET 5 inclui muitas atualizações e melhorias interessantes que tornarão a construção de seu próximo aplicativo Web simples e produtiva.

Neste artigo, veremos o que o Blazor no .NET 5 tem a oferecer. (Obs: Baseado no artigo original: Blazor Updates in NET 5)

As bibliotecas .NET 5

Os aplicativos Blazor WebAssembly no .NET 5 têm acesso a todas as APIs do .NET 5 com o navegador; você não está mais restrito ao .NET Standard 2.1. A funcionalidade das APIs disponíveis ainda está sujeita às limitações impostas pelo navegador (política de mesma origem, restrições de rede e sistema de arquivos, etc.), mas o .NET 5 disponibiliza muito mais APIs para você, como anotações de nulidade e baseadas em Span APIs.

Os projetos do Blazor WebAssembly incluem um analisador de compatibilidade para ajudá-lo a saber se o seu aplicativo Blazor WebAssembly tenta usar APIs .NET 5 que não são compatíveis com o navegador.

O Blazor WebAssembly no .NET 5 também usa as mesmas bibliotecas centrais usadas para cargas de trabalho do servidor no .NET 5. A unificação em uma única implementação das bibliotecas centrais do .NET faz parte da visão única do .NET para a o .NET 5 e 6. Ter uma única implementação das principais bibliotecas de estrutura fornece maior consistência para desenvolvedores de aplicativos e torna a plataforma muito mais fácil de manter.

O novo Blazor WebAssembly SDK

Toda a lógica para construir, vincular e publicar um Blazor WebAssembly agora está empacotada em um SDK do Blazor WebAssembly. Esse novo SDK substitui a funcionalidade fornecida anteriormente pelo pacote Nuget : Microsoft.AspNetCore.Components.WebAssembly.Build.

Graças ao novo SDK, o arquivo de projeto para um aplicativo Blazor WebAssembly no .NET 5 é mais simples :

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
    </PropertyGroup>
    <ItemGroup>
        <!-- Package references -->
    </ItemGroup>
</Project>

Desempenho de runtime do WebAssembly aprimorado

Os aplicativos Blazor WebAssembly executam código .NET diretamente no navegador usando um runtime .NET baseado em WebAssembly. Este runtime é baseado em um interpretador .NET IL sem qualquer suporte de compilação JIT, então geralmente ele executa o código .NET muito mais devagar do que você veria no runtime .NET baseado em JIT usado para cenários de aplicativos e servidores nativos. Para  o .NET 5, o desempenho do Blazor WebAssembly foi melhorado significativamente em várias camadas da pilha. A quantidade de melhoria de desempenho que você verá depende do tipo de código que você está executando.

Para código arbitrário com uso intensivo de CPU, o Blazor WebAssembly no .NET 5 é executado cerca de 30% mais rápido do que o Blazor WebAssembly 3.2. Esse aumento de desempenho deve-se principalmente às otimizações nas bibliotecas de framework principais e a melhorias no interpretador .NET IL. Tarefas como comparações de strings e pesquisas de dicionário geralmente são muito mais rápidas no .NET 5 no WebAssembly.

A Microsoft fez um trabalho de otimização específico para serialização e desserialização JSON no WebAssembly para acelerar todas as chamadas de API da Web do navegador. O manuseio de JSON durante a execução no WebAssembly é aproximadamente duas vezes mais rápido no .NET 5.

A Microsoft também fez várias otimizações para melhorar o desempenho da renderização de componentes do Blazor, especialmente para UI envolvendo muitos componentes, como ao usar grades de alta densidade. A renderização de componentes no Blazor WebAssembly é duas a quatro vezes mais rápida no .NET 5, dependendo do cenário específico.

A tabela abaixo mostra a melhoria de desempenho do Blazor WebAssembly para diferentes implementações de um grid:

  Grid Rápido Tabela Plana Grid Complexo
3.2.0 162ms 490ms 1920ms
5.0 Preview 8 62ms 291ms 1050ms
5.0 RC1 52ms 255ms 780m
Melhora 3.1x 1.9x 2.5x

Virtualização

Você pode otimizar ainda mais sua IU do Blazor Web, aproveitando o novo suporte integrado para virtualização que é uma técnica para limitar o número de componentes renderizados apenas para aqueles que estão visíveis no momento, como quando você tem uma longa lista ou tabela com muitos itens e apenas um pequeno subconjunto é visível a qualquer momento.

O Blazor no .NET 5 adiciona um novo componente Virtualize que pode ser usado para adicionar virtualização facilmente aos seus componentes.

Uma lista típica ou um componente baseado em tabela pode usar um loop foreach da linguagem C# para renderizar cada item na lista ou cada linha na tabela, assim:

@foreach (var cliente in clientes)
{
<tr>
    <td>@cliente.Nome</td>
    <td>@cliente.Email</td>
    <td>@cliente.Telefone</td>
</tr>
}

Conforme o tamanho da lista aumenta, renderizar todas as linhas da tabela dessa forma pode demorar um pouco, resultando em um atraso perceptível na interface do usuário.

Em vez disso, você pode substituir o loop foreach pelo componente Virtualize, que apenas renderiza as linhas que estão visíveis no momento.

<Virtualize Items="clientes" ItemSize="40" Context="cliente">
   <tr>
    <td>@cliente.Nome</td>
    <td>@cliente.Email</td>
    <td>@cliente.Telefone</td>
</tr>
</Virtualize>

O componente Virtualize calcula quantos itens renderizar com base na altura do contêiner e no tamanho dos itens renderizados em pixels. Você especifica como renderizar cada item usando o modelo ItemContent ou com conteúdo filho. Se os itens renderizados ficarem ligeiramente fora do tamanho especificado, o componente Virtualize ajusta o número de itens renderizados com base na saída renderizada anteriormente.

Se você não quiser carregar todos os itens na memória, você pode especificar um ItemsProvider, como mostrado abaixo:

<Virtualize ItemsProvider="CarregaClientes" ItemSize="40" Context="cliente">
   <tr>
    <td>@cliente.Nome</td>
    <td>@cliente.Email</td>
    <td>@cliente.Telefone</td>
</tr>
</Virtualize>

Um provedor de itens é um método delegado que recupera de maneira assíncrona os itens solicitados sob demanda.

O provedor de itens recebe um ItemsProviderRequest, que especifica o número necessário de itens começando em um índice inicial específico e então recupera os itens solicitados de um banco de dados ou outro serviço e os retorna como um ItemsProviderResult <TItem> junto com uma contagem do número total de itens disponíveis.

O provedor de itens pode escolher recuperar os itens com cada solicitação ou armazená-los em cache para que estejam prontamente disponíveis.

async ValueTask<ItemsProviderResult<Cliente>> CarregaClientes(ItemsProviderRequest request)
{
    var numClientes = Math.Min(request.Count, totalClientes - request.StartIndex);
    var clientes = await ClientesService.GetClientesAsync(request.StartIndex, numClientes, request.CancellationToken);
    return new ItemsProviderResult<Cliente>(clientes, totalClientes);
}

Como a solicitação de itens de uma fonte de dados pode demorar um pouco, você também tem a opção de renderizar um espaço reservado até que o item esteja disponível.

<Virtualize ItemsProvider="CarregaClientes" ItemSize="40" Context="cliente">
    <ItemContent>
        <tr>
           <td>@cliente.Nome</td>
            <td>@cliente.Email</td>
            <td>@cliente.Telefone</td>
        </tr>
    </ItemContent>
    <Placeholder>
        <tr>
            <td>carregando...</td>
        </tr>
    </Placeholder>
</Virtualize>

Pré-renderização para Blazor WebAssembly

Pré-renderizar seu aplicativo Blazor no servidor pode acelerar significativamente o tempo de carregamento percebido de seu aplicativo. A pré-renderização funciona renderizando a IU no servidor em resposta à primeira solicitação.

A pré-renderização também é ótima para otimização de mecanismo de pesquisa (SEO), pois torna seu aplicativo mais fácil de rastrear e indexar.

Os aplicativos do Blazor Server já têm suporte para pré-renderização por meio da tag helper do componente. O modelo de projeto do Blazor Server é configurado por padrão para pré-renderizar o aplicativo inteiro da página Pages/_Host.cshtml usando o componente de tag helper.

<component type="typeof(App)" render-mode="ServerPrerendered" />

O assistente de tag do componente renderiza o componente Blazor especificado na página ou visualização. Anteriormente, o assistente de tag do componente era compatível apenas com os seguintes modos de renderização:

ServerPrerendered: Pré-processa o componente em HTML estático e inclui um marcador para um aplicativo Blazor Server para uso posterior para tornar o componente interativo quando carregado no navegador.

Server: Renderiza um marcador para um aplicativo Blazor Server usar para incluir um componente interativo quando carregado no navegador. O componente não é pré-renderizado.

Static: Transforma o componente em HTML estático. O componente não é interativo.

No .NET 5, a tag helper de componente agora oferece suporte a dois modos de renderização adicionais para pré-renderizar um componente de um aplicativo Blazor WebAssembly:

WebAssemblyPrerendered: Pré-processa o componente em HTML estático e inclui um marcador para um aplicativo Blazor WebAssembly para uso posterior para tornar o componente interativo quando carregado no navegador.

WebAssembly: renderiza um marcador para um aplicativo Blazor WebAssembly usar para incluir um componente interativo quando carregado no navegador. O componente não é pré-renderizado.

Para configurar a pré-renderização em um aplicativo Blazor WebAssembly, primeiro você precisa hospedar o aplicativo em um aplicativo ASP.NET Core.

Em seguida, substitua o arquivo index.html estático padrão no projeto do cliente por um arquivo _Host.cshtml no projeto do servidor e atualize a lógica de inicialização do servidor para voltar para a nova página em vez de index.html (semelhante a como o modelo do Blazor Server é configuração).

Depois de fazer isso, você pode pré-renderizar o componente raiz do aplicativo assim:

<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

Além de melhorar drasticamente o tempo de carregamento percebido de um aplicativo Blazor WebAssembly, você também pode usar a tag helper de componente com os novos modos de renderização para adicionar vários componentes em diferentes páginas e visualizações. Você não precisa configurar esses componentes como componentes raiz no aplicativo ou adicionar suas próprias marcas de mercado na página - o framework cuida disso para você.

Você também pode passar parâmetros para a tag helper do componente ao usar os modos de renderização baseados em WebAssembly se os parâmetros forem serializáveis.

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" param-IncrementAmount="10" />

Os parâmetros devem ser serializáveis para que possam ser transferidos para o cliente e usados para inicializar o componente no navegador. Você também precisará ter certeza de criar seus componentes para que eles possam ser executados normalmente no lado do servidor, sem acesso ao navegador.

Isolamento CSS

O Blazor agora suporta isolamento CSS, onde você pode definir estilos que têm como escopo um determinado componente. O Blazor aplica estilos específicos de componente apenas a esse componente, sem poluir os estilos globais e sem afetar os componentes filhos.

Os estilos CSS específicos do componente facilitam o raciocínio sobre os estilos em seu aplicativo e evitam efeitos colaterais não intencionais conforme os estilos são adicionados, atualizados e compostos de várias fontes.

Você define estilos específicos do componente em um arquivo .razor.css que corresponde ao nome do arquivo .razor para o componente. Por exemplo, digamos que você tenha um arquivo MeuComponente.razor componente.

<h1>Meu Componente</h1>
<ul class="cool-list">
    <li>Item1</li>
    <li>Item2</li>
</ul>

Você pode então definir um arquivo de estilo MeuComponente.razor.css com os estilos para MeuComponente:

h1 {
    font-family: 'Comic Sans MS'
}
.cool-list li {
    color: red;
}

Os estilos em MeuComponente.razor.css são aplicados apenas à saída renderizada de MeuComponente; os elementos h1 renderizados por outros componentes, por exemplo, não são afetados.

Para escrever um seletor em estilos específicos de componentes que afetam os componentes filhos, use o combinator :: deep .

.parent :: deep .child {
     cor red;
}

Usando o combinador :: deep, apenas o seletor de classe .parent tem como escopo o componente; o seletor de classe .child não tem escopo e corresponde ao conteúdo de componentes filho.

O Blazor atinge o isolamento CSS reescrevendo os seletores CSS como parte da construção para que eles correspondam apenas à marcação renderizada pelo componente, e, adiciona atributos específicos do componente à saída renderizada e atualiza os seletores CSS para exigir esses atributos.

O Blazor então agrupa os arquivos CSS reescritos e disponibiliza o pacote para o aplicativo como um ativo da Web estático no caminho [NOME DA BIBLIOTECA].styles.css.

Embora o Blazor não suporte nativamente pré-processadores CSS como Sass ou Less, você ainda pode integrar pré-processadores CSS com projetos Blazor para gerar estilos específicos de componentes antes de serem reescritos como parte do sistema de compilação do Blazor.

Lazy Loading

O carregamento lento(Lazy Loading) permite que você melhore o tempo de carregamento do seu aplicativo Blazor WebAssembly adiando o download de alguns assemblies até que sejam necessários. Para muitos aplicativos, o carregamento lento de diferentes partes do aplicativo não é necessário.

O .NET IL que compõe os assemblies .NET é muito compacto, especialmente quando está compactado. Você pode se surpreender com a quantidade de código que precisa escrever em seu aplicativo antes que isso afete significativamente o tamanho do aplicativo.

O tamanho do download de um aplicativo Blazor WebAssembly é geralmente dominado pelo tamanho do runtime e das bibliotecas de principais do framework, que o Blazor apara agressivamente para remover o código não utilizado. O carregamento lento pode ser útil se o aplicativo Blazor WebAssembly ficar excepcionalmente grande ou se você tiver partes do aplicativo com grandes dependências que não são usadas em outro lugar e não podem ser reduzidas de forma razoável por meio do corte de IL.

Normalmente, o Blazor baixa e carrega todas as dependências do aplicativo quando é carregado pela primeira vez. Para atrasar o carregamento de um conjunto .NET, você o adiciona ao grupo de itens BlazorWebAssemblyLazyLoad em seu arquivo de projeto:

<BlazorWebAssemblyLazyLoad Include="Lib1.dll" />

Os assemblies marcados para carregamento lento devem ser carregados explicitamente pelo aplicativo antes de serem usados. Para fazer o carregamento lento de assemblies em tempo de execução, use o serviço LazyAssemblyLoader:

@inject LazyAssemblyLoader LazyAssemblyLoader

@code {
    var assemblies = await LazyAssemblyLoader.LoadAssembliesAsync(new string[] {"Lib1.dll"});
}

Freqüentemente, os assembles precisam ser carregados quando o usuário navega para uma página específica. O componente Router tem um novo evento OnNavigateAsync que é disparado em cada navegação de página e pode ser usado para realizar o carregamento lento de assemblies para uma rota específica.

Você também pode carregar lentamente a página inteira de uma rota, passando todos os assemblies carregados como assemblies adicionais para o Router.

A seguir temos um exemplo completo de integração do carregamento lento com o componente Router :

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@inject LazyAssemblyLoader LazyAssemblyLoader

<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="@lazyLoadedAssemblies" OnNavigateAsync="@OnNavigateAsync">
    <Navigating>
        <div>
            <p>Loading the requested page...</p>
        </div>
    </Navigating>
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new List<Assembly>();

    private async Task OnNavigateAsync(NavigationContext args)
    {
        if (args.Path.EndsWith("/page1"))
        {
            var assemblies = await LazyAssemblyLoader.LoadAssembliesAsync(new string[] { "Lib1.dll" });
            lazyLoadedAssemblies.AddRange(assemblies);
        }
    }
}

Menos JavaScript, mais C#

O objetivo do Blazor é permitir a construção de interfaces de usuário na Web interativas ricas com .NET, mas às vezes você ainda precisa de algum JavaScript. Isso pode ser porque você deseja reutilizar uma biblioteca existente ou porque o Blazor ainda não expõe um recurso de navegador nativo de que você precisa.

O Blazor oferece suporte à interoperabilidade JavaScript, onde você pode chamar qualquer código JavaScript de seu código .NET, mas escrever código de interoperabilidade JavaScript com Blazor deve ser raro. No .NET 5, a Microsoft adicionou alguns novos recursos integrados que reduzem ou eliminam a quantidade de código de interoperabilidade JavaScript necessária para alguns cenários comuns:

- Definir o foco da IU

Às vezes, você precisa definir o foco em um elemento de interface do usuário programaticamente. O Blazor no .NET 5 agora tem um método conveniente em ElementReference para definir o foco da IU nesse elemento.

<button @onclick = "() => textInput.FocusAsync()"> Definir o foco </button>
<input @ ref = "textInput" />

- Upload de arquivo

O Blazor agora oferece um componente InputFile para lidar com uploads de arquivos. O componente InputFile é baseado em uma entrada HTML do tipo “file”. Por padrão, você pode fazer upload de arquivos únicos ou pode adicionar o atributo “multiple” para ativar o suporte para vários arquivos.

Quando um ou mais arquivos são selecionados para upload, o componente InputFile dispara um evento OnChange e passa um InputFileChangeEventArgs que fornece acesso à lista de arquivos selecionados e detalhes sobre cada arquivo.

<InputFile OnChange="OnInputFileChange" multiple />

Para ler um arquivo, você chama OpenReadStream no arquivo e lê a partir do fluxo retornado. Em um aplicativo Blazor WebAssembly, ele lê o arquivo na memória do cliente. Em um aplicativo Blazor Server, o arquivo é transmitido para o servidor e lido na memória do servidor. O Blazor também fornece um método de conveniência ToImageFileAsync para redimensionar arquivos de imagens antes de serem carregados.

O código de exemplo abaixo mostra como redimensionar e reformatar imagens selecionadas pelo usuário como arquivos PNG de 100x100 pixels. O código de exemplo então carrega as imagens redimensionadas e as exibe como URLs de dados.

<div class="image-list">

@foreach (var imageDataUrl in imageDataUrls)
{
    <img src="@imageDataUrl" />
}
</div>
@code {
    ElementReference textInput;    
    IList<string> imageDataUrls = new List<string>();    
    async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        var imageFiles = e.Files.Where(file => file.Type.StartsWith("image/"));        
        var format = "image/png";
        foreach (var imageFile in imageFiles)
        {
            var resizedImageFile = await imageFile.ToImageFileAsync(format, 100, 100);
            var buffer = new byte[resizedImageFile.Size];
            await resizedImageFile.OpenReadStream().ReadAsync(buffer);
            var imageDataUrl = $"data:{format};base64,{Convert.ToBase64String(buffer)}";
            imageDataUrls.Add(imageDataUrl);
        }
    }
}

Influenciando o Head HTML

Use os novos componentes Tile, Link e Meta para definir via código o título de uma página e adicionar dinamicamente link e meta tags ao cabeçalho HTML em um aplicativo Blazor. Para usar esses componentes, adicione uma referência aos pacotes Microsoft.AspNetCore.Components.WebExtensions

O exemplo a seguir define via código o título da página para mostrar o número de notificações de usuário não lidas e também atualiza o ícone da página a:

@if (unreadNotificationsCount > 0)
{
    var title = $"Notifications ({unreadNotificationsCount})";
    <Title Value="title"></Title>
    <Link rel="icon" href="icon-unread.ico" />
}

Local Storage protegido

Em aplicativos do Blazor Server, você pode querer manter o estado do aplicativo no armazenamento local ou de sessão para que o aplicativo possa hidratá-lo posteriormente, se necessário. Ao armazenar o estado do aplicativo no navegador do usuário, você também precisa garantir que ele não foi adulterado.

O Blazor no .NET 5 ajuda a resolver esse problema fornecendo dois novos serviços: ProtectedLocalStorage e ProtectedSessionStorage.

Esses serviços ajudam a armazenar o estado no armazenamento local e de sessão, respectivamente, e cuidam da proteção dos dados armazenados usando as APIs de proteção de dados ASP.NET Core.

Para usar os novos serviços, basta injetar um deles em suas implementações de componentes:

@inject ProtectedLocalStorage LocalStorage
@inject ProtectedSessionStorage SessionStorage

Você pode então obter, definir e excluir o estado de forma assíncrona.

Private assíncrono Task IncrementCount ()
{
     esperar LocalStorage.SetAsync ("count", ++ currentCount);
}

Gerenciando o estado do aplicativo no Blazor

O Blazor WebAssembly e o Blazor Server têm algumas diferenças importantes em como lidam com o estado do aplicativo.

Em um aplicativo Blazor WebAssembly, todo o estado do aplicativo reside no navegador do dispositivo cliente. Se o navegador estiver em execução, o estado do aplicativo estará disponível na memória.

Os aplicativos do Blazor Server, no entanto, mantêm todo o estado do aplicativo para todos os usuários conectados no servidor. Se a conexão do navegador com o servidor for perdida, a IU não funcionará. Se o processo do servidor ficar inativo, todo o estado do aplicativo mantido na memória será perdido, a menos que tenha sido persistido de outra forma. Uma abordagem comum para persistir o estado do aplicativo é aproveitar o armazenamento local disponível no navegador do usuário.

O novo suporte de armazenamento local protegido (local storage) e de sessão no .NET 5 torna muito mais fácil a persistência do estado do aplicativo dos aplicativos do Blazor Server.

Isolamento de JavaScript e referências de objeto

Quando você precisa escrever algum JavaScript para seu aplicativo Blazor, o Blazor agora permite que você isole seu JavaScript como módulos JavaScript padrão. Isso tem alguns benefícios: o JavaScript importado não polui mais o namespace global e os consumidores de sua biblioteca e componentes não precisam mais importar manualmente o JavaScript relacionado.

Por exemplo, o seguinte módulo JavaScript exporta uma função JavaScript simples para mostrar um prompt do navegador:

export function showPrompt(message) {
    return prompt(message, 'Digite algo aqui');
}

Você pode adicionar este módulo JavaScript à sua biblioteca .NET como um ativo da Web estático (wwwroot/exemploJsInterop.js) usando o Razor SDK e, a seguir, importar o módulo para o seu código .NET usando o serviço IJSRuntime:

var module = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MeusComponentes/exemploJsInterop.js");

O identificador de importação é um identificador especial usado especificamente para importar o módulo JavaScript especificado. Você especifica o módulo usando seu caminho de ativo da Web estático estável: _content/[NOME DA BIBLIOTECA]/[PATH UNDER WWWROOT].

O IJSRuntime importa o módulo como um IJSObjectReference, que representa uma referência a um objeto JavaScript do código .NET. Você pode então usar IJSObjectReference para invocar funções JavaScript exportadas do módulo:

public async ValueTask<string> Prompt(string message)
{
    return await module.InvokeAsync<string>("showPrompt", message);
}

Melhorias na depuração

A depuração do Blazor WebAssembly foi significativamente aprimorada no .NET 5. Iniciar um aplicativo Blazor WebAssembly para depuração agora é muito mais rápido e confiável. O depurador agora quebra exceções não tratadas em seu código. A Microsoft habilitou o suporte para depuração em dependências externas.

O proxy de depuração Blazor WebAssembly também foi movido para seu próprio processo para permitir o trabalho futuro de suporte à depuração de aplicativos Blazor WebAssembly executados em ambientes remotos como Docker, Windows Subsystem for Linux e Codespaces.

Ver atualizações de IU mais rápidas com dotnet watch

Ao criar IUs, você precisa ser capaz de ver suas alterações o mais rápido possível. O .NET 5 facilita isso com algumas melhorias interessantes para a ferramenta de observação dotnet. Quando você executa o dotnet watch run em um projeto, ele observa seus arquivos em busca de alterações no código e, em seguida, reconstrói e reinicia o aplicativo para que você possa ver os resultados de suas alterações rapidamente.

Novo no .NET 5, o dotnet watch inicia seu navegador padrão para você assim que o aplicativo é iniciado e atualiza automaticamente o navegador conforme você faz alterações. Isso significa que você pode abrir seu projeto Blazor (ou qualquer projeto ASP.NET Core) em seu editor de texto favorito, executar dotnet watch run uma vez e, em seguida, focar nas alterações de código enquanto o conjunto de ferramentas lida com a reconstrução, reinicialização e recarregamento do aplicativo.

Mais brindes do Blazor

Embora este artigo resuma a maioria dos novos recursos principais do Blazor no .NET 5, ainda há muitos outros aprimoramentos e aprimoramentos menores do Blazor para verificar.

Essas melhorias incluem:

-Suporte a IAsyncDisposable
-Instanciação do componente Blazor de controle
-Novo componente InputRadio
-Suporte para parâmetros de rota abrangentes
-Suporte para eventos de alternância
-Sobrecarga de InvokeAsync sem parâmetros em EventCallback
-Melhorias na reconexão do Blazor Server
-Pré-renderização para aplicativos Blazor WebAssembly

Muitos desses recursos e melhorias vieram da comunidade entusiasmada de contribuidores de código aberto.

Assim o Blazor evolui a cada dia agregando recursos e otimizações.

E estamos conversados...

"Mas, não vos alegreis porque se vos sujeitem os espíritos; alegrai-vos antes por estarem os vossos nomes escritos nos céus."
Lucas 10:20

Referências:


José Carlos Macoratti