Blazor - Uma breve introdução (revisão)

 Neste artigo vou apresentar o Blazor, o 'novo' framework SPA da Microsoft baseado em C# e Razor.

O Blazor (Browser + Razor) é um framework para criar a interface do usuário do lado do cliente na plataforma .NET.

Seus principais objetivos são :

  • Criar interfaces do usuário interativas avançadas usando C# em vez de JavaScript;
  • Compartilhar a lógica de aplicativo do lado do cliente e do servidor na plataforma .NET;
  • Renderizar a interface do usuário, como HTML e CSS para um amplo suporte de navegadores, incluindo navegadores móveis.

    • Usar a plataforma .NET para desenvolvimento web do lado do cliente oferece as seguintes vantagens:

    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 da plataforma .NET incorporadas aos assemblies .NET que:

    A classe do componente geralmente é gravada na forma de uma página de marcação do Razor com uma extensão de arquivo .razor.

    Os componentes no Blazor são formalmente chamados de componentes do Razor. 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 a IntelliSense. As Razor Pages e MVC também usam o Razor. Ao contrário das Razor Pages e das 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.

    A seguir temos um componente (Dialog.razor) que usa a marcação Razor e que pode ser aninhado dentro de outro componente:

    <div>
    <h1>@Title</h1>
        @ChildContent
        <button @onclick="OnYes">Sim!</button>
</div>
    @code {
    [Parameter]
    public string Title { get; set; }
        [Parameter]
    public RenderFragment ChildContent { get; set; }
        private void OnYes()
    {
        Console.WriteLine("Escreve no console em C#! 'Sim' button foi selecionado.");
    }
}

    O conteúdo do corpo 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. OnYes é um método C# disparado pelo evento onclick do botão.

    O Blazor usa marcações HTML naturais para composição de interface do usuário. Os elementos HTML especificam componentes e os atributos da marcação transmitem valores para as propriedades de um componente.

    Blazor no lado do cliente

    O Blazor no lado do cliente é uma framework Single Page Application para a criação de aplicativos Web interativos do lado do cliente com a plataforma .NET. O Blazor do lado do cliente usa padrões Web abertos sem plugins ou transpilação de código e funciona em todos os navegadores modernos, inclusive os 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.

    Nota: 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 Interoperabilidade do JavaScript (ou Interop do JavaScript). 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.

    Quando um aplicativo Blazor no lado do cliente é criado e executado em um navegador:

    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 no lado do cliente otimiza o tamanho do conteúdo para reduzir o tempo de download:

    Blazor no lado do servidor

    Os componentes Blazor desvinculam a lógica de renderização do componente da forma como as atualizações da interface do usuário são aplicadas. O Blazor no lado do servidor dá suporte à hospedagem de componentes 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 realiza o envio de eventos da interface do usuário do navegador para o servidor e executar os componentes, aplica as atualizações na interface do usuário retornadas pelo servidor ao navegador.

    A conexão usada pelo Blazor no lado do servidor para se comunicar com o navegador também é usada para manusear chamadas de interoperabilidade de JavaScript.

    Compartilhamento de código e o .NET Standard

    O Blazor implementa o .NET Standard 2.0. 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 .NET, como Blazor, .NET Framework, .NET Core, Xamarin, Mono e Unity.

    Se quiser sair na frente, você pode aprender mais sobre o Blazor em :

    E estamos conversados...

    "Por que estás abatida, ó minha alma, e por que te perturbas dentro de mim? Espera em Deus, pois ainda o louvarei, o qual é a salvação da minha face, e o meu Deus."
    Salmos 42:11

    Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

    Quer migrar para o VB .NET ?

    Quer aprender C# ??

    Quer aprender os conceitos da Programação Orientada a objetos ?

    Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

    Referências:

    José Carlos Macoratti