Blazor United - Unificando o desenvolvimento Web (.NET 8)

  Hoje vou apresentar uma visão geral sobre o Blazor United e a proposta da unificação para o desenvolvimento web com Blazor para o .NET 8.

O ecossistema .NET está evoluindo dinamicamente de várias maneiras benéficas e o Blazor United é mais um passo nesta evolução.



O .NET 8 está se tornando um lançamento significativo para o Blazor, e há um grande motivo para isso.

Até o .NET 7,  usando o Blazor temos duas abordagens para criar aplicações SPA : Blazor Server e Blazor WebAssembly, e  esses dois modelos de hospedagem prevaleceram como opções para criar aplicativos Web usando o Blazor. Na prática, ambos os modelos apresentam vantagens e desvantagens.

O Blazor Server oferece uma carga inicial rápida, mas exige que a conexão do soquete esteja aberta o tempo todo, levando a erros quando surgem problemas transitórios de rede. Há também a questão da latência, com as interações da interface do usuário sendo enviadas e tratadas pelo servidor.

O Blazor WASM oferece uma experiência de latência mais baixa no navegador, mas ao custo de uma grande carga inicial. Também requer uma API da Web separada para lidar com interações com um back-end.

Mas isso parece prestes a mudar - o .NET 8 trouxe novas opções para o Blazor, e elas podem mudar o jogo completamente. A novidade chama-se Blazor United.

O Blazor United é uma poderosa combinação de Blazor e Unity, duas tecnologias que estão revolucionando a indústria de desenvolvimento web.

O Blazor é um framwork para Web que permite aos desenvolvedores criar aplicativos Web usando C# e .NET, enquanto o Unity é uma plataforma para desenvolvimento de aplicações 2D e 3D como jogos que permite aos desenvolvedores criar experiências imersivas. Ao combinar os dois, os desenvolvedores podem criar aplicativos Web que não são apenas funcionais, mas também visualmente impressionantes.

No .NET 8 a proposta é trazer renderização do lado do servidor para seus componentes Blazor.

De acordo com um protótipo inicial (apresentado habilmente por Steve Sanderson), você poderá construir seu site usando os componentes do Blazor normalmente, mas renderizá-los no servidor.

Aqui, por exemplo, está uma página de carrinho de compras:

<h3>Sua Loja</h3>

@if(Model != null){
    @foreach (var line in Model.Items)
    {
        <Item details="@line"/>
    }
}

@code {
   
    protected Details.Model Model { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Model = await Http.GetFromJsonAsync<Details.Model>("api/cart");
    }
}

Para habilitar essa “renderização do lado do servidor” dos componentes Blazor, você precisará de um pouco de configuração no arquivo Program.cs :

app.MapRazorComponents();

Com isso, em vez de confiar no WASM ou em uma conexão de soquete aberto, esse componente será renderizado no servidor e o HTML antigo simples será retornado ao navegador.

Para muitos aplicativos, especialmente os aplicativos que exibem dados (em várias formas), isso fornecerá uma abordagem simples, rápida e agradável para obter dados na tela na frente dos usuários - com o benefício de que os desenvolvedores podem criar toda a interface do usuário usando modelo de componente rico do Blazor.

Isso também significa que você poderá usar o Blazor para algumas partes do seu aplicativo e as páginas Razor ou MVC para outras.

Mas e se você quiser que parte de sua IU seja mais interativa ?

Por exemplo, você pode querer uma calculadora de postagem útil para a página do carrinho de compras. É provável que você queira que isso seja rápido e dinâmico, permitindo que os usuários experimentem diferentes opções e vejam como isso afeta o preço total em tempo real.

A proposta é que você poderá sinalizar componentes específicos para serem executados usando um dos modelos típicos de hospedagem Blazor.

<DeliveryCostCalculator rendermode="@WebComponentsRenderMode.Server"/>
Isso significa que seus usuários desfrutam desse rápido tempo de carregamento inicial (afinal, o navegador é muito eficiente na renderização de HTML!), mas ainda conseguem interagir com a DeliveryCostCalculator quando o navegador abre a conexão do soquete.

Se você optar por usar o WASM, o navegador exibirá a página inicial e carregará o Blazor WASM em segundo plano para tornar o componente interativo.

Se você quiser marcar “páginas” inteiras como interativas, a demonstração de Steve mostra um exemplo usando este atributo:
@page "/Cart"
@attribute [ComponentRenderMode(WebComponentRenderMode.Server)]

Outra melhoria incluida no .NET 8 é a capacidade de transmitir HTML do servidor (para o cliente) conforme ele se torna disponível.

Tomemos, por exemplo, um componente que mostra informações enquanto carrega dados:

@if (cards == null) {
<h3>Loading...</h3>
}
else {
    foreach(var card in cards) {
        <KanbanCard Card="card" />
    }
}

Com a nova abordagem de SSR (renderização do lado do servidor) que acabamos de ver, esse estado de carregamento nunca seria mostrado pois todo o componente seria executado no servidor e esperaria que os dados fossem completamente carregados antes de retornar qualquer coisa ao cliente.

A renderização de streaming resolve esse problema e garante que a marcação estrutural da página e a IU de carregamento sejam enviadas primeiro ao navegador.

Quando os dados terminarem de carregar, a nova IU (para a lista de cartões) será enviada ao navegador e renderizada no lugar da IU de "carregando".

Quais as vantagens que o Blazor ?

Desenvolvimento multiplataforma: O Blazor United permite que os desenvolvedores criem aplicativos Web que podem ser executados em diferentes plataformas, incluindo desktops, dispositivos móveis e consoles de jogos. Isso significa que os desenvolvedores podem criar um único aplicativo que pode ser acessado por usuários em diferentes dispositivos sem a necessidade de criar versões separadas do aplicativo.

Interface de usuário avançada: Unity fornece aos desenvolvedores uma ampla gama de ferramentas e recursos que permitem criar interfaces de usuário imersivas e interativas. Com o Blazor United, os desenvolvedores podem aproveitar essas ferramentas para criar aplicativos da Web que oferecem uma experiência de usuário rica e envolvente.

Alto desempenho: Blazor United usa WebAssembly, um formato binário que permite aplicativos Web de alto desempenho. Isso significa que os aplicativos criados com o Blazor United são rápidos e responsivos, proporcionando aos usuários uma experiência perfeita.

Ambiente de desenvolvimento familiar: Blazor United usa C# e .NET, que são amplamente usados na indústria de desenvolvimento. Isso significa que os desenvolvedores familiarizados com essas tecnologias podem se familiarizar rapidamente com o Blazor United, reduzindo a curva de aprendizado e permitindo que sejam produtivos desde o início.

Flexibilidade: o Blazor United oferece aos desenvolvedores a flexibilidade de criar aplicativos da Web que atendam às suas necessidades específicas. Com acesso a uma ampla variedade de ferramentas e recursos, os desenvolvedores podem personalizar seus aplicativos para atender às necessidades exclusivas de seus usuários.

Exemplos de aplicações com Blazor

Jogos: com o poder do Unity, os desenvolvedores podem criar jogos baseados na Web que podem ser reproduzidos em diferentes dispositivos. Isso abre todo um novo mundo de possibilidades para os desenvolvedores de jogos, que agora podem criar jogos baseados na Web que oferecem um alto nível de interatividade e envolvimento.

Realidade virtual: o Blazor United pode ser usado para criar aplicativos de realidade virtual que podem ser executados em diferentes dispositivos. Isso significa que os desenvolvedores podem criar experiências de realidade virtual que podem ser acessadas por usuários em diferentes dispositivos sem a necessidade de hardware especializado.

Educação: o Blazor United pode ser usado para criar aplicativos educacionais que oferecem uma experiência de aprendizado imersiva e interativa. Aproveitando o poder do Unity, os desenvolvedores podem criar aplicativos que simulam cenários do mundo real e oferecem uma forma de aprendizado mais envolvente e eficaz.

Lembrando que tudo isso ainda esta em preview com previsão para lançamento em novembro de 2023 e até muita coisa pode mudar.

E estamos conversados ...

Referências:

José Carlos Macoratti