Blazor vs Razor: The Difference Solved

Com o lançamento do .NET 6 e o ciclo de hype em torno do Blazor como uma solução para desenvolvedores de C# escreverem aplicativos Web de página única, surge a pergunta: "Qual é a diferença entre Blazor e Razor"?

Embora Blazor e Razor não sejam diretamente comparáveis, pois representam duas capacidades distintas, muitas vezes os termos para componentes Blazor e componentes Razor são amplamente usados de forma intercambiável.

Com este artigo, vou esclarecer a diferença entre Blazor vs Razor, bem como mostrar como usar cada um em Ignite UI for Blazor.  Você também criará um aplicativo .NET 6, usando o componente Card View do Ignite UI, para que possa se familiarizar com Blazor e Razor em um aplicativo real!

Try Ignite UI for Blazor

O que é Blazor

Blazor é uma estrutura da Web de código aberto gratuita, permitindo que os desenvolvedores criem interfaces de usuário interativas da Web com C#, código HTML e sintaxe Razor em vez de JavaScript. A maneira como o Blazor funciona é que ele cria aplicativos baseados em cliente com WebAssembly e aplicativos do lado do servidor com ASP.NET. O aplicativo Server se comunica com o navegador por meio de uma conexão constante usando o SignalR, enquanto o WebAssembly é executado diretamente no navegador.

Nosso blog apresenta uma visão geral detalhada do Blazor, Blazor WebAssembly e Blazor Server. Portanto, caso você queira se aprofundar, continue e leia Blazor postagem no blog Server vs. Blazor WebAssembly.

What Is Razor

Embora Blazor seja uma estrutura, Razor, ou Razor Pages, é um mecanismo de modelagem (View). A sintaxe Razor combina marcação Razor, C# e HTML para criar conteúdo dinâmico da Web. Normalmente, Razor é usado para alimentar ASP.NET MVC Views. Portanto, toda vez que você escrever uma exibição MVC, geralmente usará Razor sintaxe para associar dados à marcação. Em um aplicativo MVC, a página Razor é processada no servidor e, em seguida, enviada ao cliente como uma única página HTML.  Quando a página é atualizada no navegador, ela é reprocessada no servidor e enviada de volta ao cliente.

Razor vs Blazor: A diferença e a ligação entre eles resolvidas

Blazor é uma estrutura que aproveita os componentes Razor para produzir HTML dinâmico. A maior diferença entre Razor e Blazor é que Razor é uma linguagem de marcação com C#, enquanto Blazor é a estrutura que permite executar código C# e usar o mecanismo de exibição Razor no navegador.

E quanto aos componentes Blazor vs Razor?

Razor componentes são unidades de marcação e código que representam os elementos básicos da interface do usuário de qualquer aplicativo Blazor implementado com uma extensão .razor. Em outras palavras, Blazor usa componentes Razor para criar interfaces do usuário, o que significa que você pode escrever Razor componentes e utilizá Blazor como o modelo de hospedagem do lado do cliente para eles.

Veja como usar o Blazor e o Razor no Ignite UI

Para começar, você deve instalar o NodeJS e o Visual Studio Code em seu computador.

Passo 1 – Crie um novo projeto Blazor

Inicie o Visual Studio 2022 e clique em Criar um novo projeto na página inicial, selecione o modelo Blazor Aplicativo de Montagem da Web e clique em Avançar. Depois de fornecer um nome e uma descrição do projeto, clique em Criar.

Passo 2 – Instale Ignite UI for Blazor pacote

Clique com o botão direito do mouse na Solução ou no Projeto e selecione Gerenciar Pacotes NuGet para Solução. Em seguida, abra a guia Procurar na caixa de diálogo do gerenciador de pacotes, selecione a origem do pacote Infragistics e instale o pacote NuGet IgniteUI.Blazor.

Step 3 – Register Ignite UI for Blazor component

Abra o arquivo Program.cs e registre o Serviço Ignite UI for Blazor adicionando o seguinte após o construtor. Services.AddScoped... linha:

builder.Services.AddIgniteUIBlazor();

 

Passo 4 – Atualize o arquivo Imports.razor

Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

 

@using IgniteUI.Blazor.Controls

Etapa 5 – Atualizar o arquivo Pages/_Layout.cshtml

Adicione a Folha de Estilo no elemento<head> do arquivo \wwwroot\index.html:

<head>
	...
	<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>

 

Step 6 – Add Ignite UI for Blazor Component

Adicione um componente Ignite UI for Blazor à sua página do Razor:

<IgbCard style="width:350px">
	<IgbCardMedia>
		<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
	</IgbCardMedia>
	<IgbCardHeader>
		<h4>Jane Doe</h4>
		<h6>Professional Photographer</h6>
	</IgbCardHeader>
	<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
		Photography is a way of feeling, of touching,
		of loving. What you have caught on film is captured forever...
		it remembers little things, long after you have
		forgotten everything.</IgbCardContent>
	<IgbCardActions>
		<IgbButton>More Info</IgbButton>
	</IgbCardActions>
</IgbCard>




Step 7 – Build & Run your App

E está tudo pronto! Clique no botão Executar para criar e executar seu novo aplicativo Blazor executando a Exibição de Cartões no Ignite UI!

Building Enterprise Blazor Apps with App Builder

Agora, se você deseja reduzir significativamente o tempo de desenvolvimento, pode usar criadores de aplicativos de baixo código, como App Builder ^тм.

App Builder ^тм é uma nova plataforma de desenvolvimento low-code WYSIWYG baseada em nuvem e construtor de aplicativos de arrastar e soltar que simplifica tudo, desde o design até o código. O principal objetivo do software é eliminar a complexidade por trás do design da interface do usuário e da criação de aplicativos, ao mesmo tempo em que permite que você e toda a equipe de desenvolvimento se concentrem na experiência de domínio para a lógica de negócios. Você pode criar seu aplicativo de negócios no Blazor (e Angular) muito mais rápido do que antes, sem codificação manual. Além disso, você tem a opção de baixar seu projeto como um arquivo zip ou publicá-lo no GitHub.

[View:https://youtu.be/WSQ38lLacH4:578:348]

Em comparação com outras ferramentas low-code no mercado, o principal diferencial é que App Builder ^тм é apoiado por um sistema de design, componentes de interface do usuário reais e mais de 60+ controles de interface do usuário. Uma das melhores coisas sobre isso é que o App Builder gera código pronto para produção em Blazor (e Angular) em um clique, permitindo que você inspecione o código e visualize facilmente a aparência do seu aplicativo Blazor (ou aplicativo Angular). E se você pensar em todos os componentes completos necessários para criar aplicativos de negócios modernos – como grades de dados, gráficos, interface do usuário do Swagger, controles de interface do usuário, opções de personalização, temas, marca e muito mais – é isso que o software WYSIWYG de arrastar e soltar App Builder ^тм também oferece.

Recentemente, publicamos um tutorial abrangente para ajudá-lo a criar aplicativos Blazor com App Builder e gerar seu código Blazor em menos de 10 minutos. Então, você pode pular direto para este Blazor guia passo a passo.