Razor vs Blazor

Razor y Blazor son dos de los marcos de interfaz de usuario web más populares para crear aplicaciones web en el entorno de desarrollo Visual Studio. Esta entrada de blog examinará las similitudes y diferencias entre estas dos tecnologías .NET basándose en su sintaxis, interacciones, ventajas e inconvenientes. También demostrará algunos casos de uso con algunos ejemplos de código.

¿Qué es Razor y Blazor en ASP.NET Core?

Razor

Razor es un lenguaje de marcado del lado del servidor que permite a los desarrolladores crear páginas web de forma dinámica utilizando HTML y código .NET incrustado del lado del servidor. Razor genera páginas web a partir de páginas Razor, archivos de plantilla de páginas web escritos con C# o VB. Las páginas Razor escritas con código VB utilizan la extensión de archivo .vbhtml, y las páginas Razor escritas con código C# utilizan la extensión de archivo .cshtml.

Las aplicaciones web ASP.NET modernas admiten Razor, y puede utilizarse en lugar del marcado ASP.NET tradicional para generar componentes de vista de aplicación.

Blazor

Blazor es un marco de aplicaciones web que permite a los desarrolladores crear aplicaciones interactivas con interfaces de cliente utilizando lenguajes de programación .NET. Las aplicaciones web creadas con Blazor son aplicaciones de una sola página (SPA) que se ejecutan dentro de un navegador web cliente (no en un servidor web). La ejecución de aplicaciones en el navegador es posible gracias a WebAssembly. WebAssembly es una biblioteca de conjuntos de instrucciones multiplataforma que se encuentra en todos los navegadores web modernos y que es capaz de ejecutar código fuente .NET.

Con Blazor, los desarrolladores pueden crear componentes web reutilizables e interactivos del lado del cliente con C#, HTML y CSS. (sin necesidad de incorporar JavaScript). Además, como estos componentes están escritos en C#, los desarrolladores tienen la flexibilidad de trasladar los detalles de implementación entre el cliente y el servidor como código fuente y bibliotecas, según sea necesario.

¿Utiliza Blazor componentes Razor?

Blazor es totalmente compatible con la sintaxis Razor. Puede crear aplicaciones Blazor utilizando todas las funciones de marcado de Razor: bucles, condicionales, etc. Considere el siguiente ejemplo.

@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach(var person in People){
    <h2>person.FirstName</h2>
}

@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach(var person in People){
    <h2>person.FirstName</h2>
}

'INSTANT VB TODO TASK: The following line could not be converted:
page "/HelloWorld" (Of h1) Example Component </h1> foreach(var person in People)
If True Then
	(Of h2) person.FirstName</h2>
End If

Conexión entre Razor y Blazor

Podemos ver claramente que existe una relación entre Blazor y Razor. Después de todo, el propio nombre de Blazor es una combinación de las palabras "navegador" y "Razor".

Razor y Blazor se utilizan para crear aplicaciones web utilizando HTML y C#. Al ser de código abierto y gratuitos, los desarrolladores pueden utilizarlos inmediatamente y sin restricciones. Al desarrollar aplicaciones web ASP.NET, utilizamos la sintaxis Razor porque es más afín a ASP.NET Core y ASP.NET MVC.

Blazor construye interfaces de usuario flexibles e interactivas a partir de uno o varios componentes escritos con la sintaxis Razor.

Es en este punto donde debemos hacer una distinción significativa con respecto a cómo se utiliza Razor en Blazor: se utiliza para construir componentes (botones, elementos de página, etc.)y no para construir páginas enteras.

Además, los archivos Razor (archivos con la extensión .chtml.) dentro de Blazor se conocen formalmente como Componentes de Razor, no como Componentes de Blazor. (aunque ambas palabras se utilizan indistintamente en muchos círculos de desarrollo).

Funcionamiento de Razor Pages y Blazor Server

Razor funciona dentro de aplicaciones MVC para servir páginas completas al navegador.

Razor Pages en acción

Cuando un usuario pulsa un botón o un enlace, el navegador envía una petición al servidor, que accede a la base de datos, recupera el .cshtml Razor Views (o la página Razor)El navegador se encarga de mezclar los datos y las marcas, y devuelve todo el contenido al navegador. (volver a renderizar toda la página).

Blazor, por su parte, permite crear una página web completa utilizando una serie de componentes más pequeños escritos en sintaxis Razor.

Blazor en acción

Esto ilustra el funcionamiento de Blazor WebAssembly (Blazor WASM).

La primera llamada a su aplicación Blazor WASM devuelve el programa completo, incluidos todos los componentes que ha definido, de forma muy similar a una aplicación de página única creada con JavaScript.

Ahora que el navegador tiene acceso a estos elementos, puede mostrarlos, ocultarlos y actualizarlos en respuesta a información y eventos.

De esta forma, las aplicaciones Blazor son más similares a las aplicaciones que desarrollarías utilizando una librería/framework JavaScript "contemporáneo" como Vue o Angular. Las aplicaciones Blazor realizan llamadas de red a un backend mientras se ejecutan en el navegador para recuperar y enviar datos.

Ahora, vamos a discutir algunos pros y contras de la aplicación Blazor y el motor Razor View.

Ventajas e inconvenientes de Blazor y Razor

Cuando se trata de crear aplicaciones web interactivas basadas en el marco .NET, Blazor y Razor gozan de gran popularidad. Estas tecnologías ofrecen una novedosa transición desde la utilización de C# como lenguaje de programación principal para proyectos estándar de JavaScript.

He aquí algunas ventajas e inconvenientes en los que pensar a la hora de crear una aplicación web utilizando Razor o Blazor.

Ventajas de Blazor

• Blazor del lado del cliente ejecuta código .NET directamente en el navegador mediante WebAssembly (haciéndolo más rápido y menos derrochador del ancho de banda de la red=.) y proporciona contenidos web dinámicos.
• Utiliza la misma sintaxis y lógica que los lenguajes del lado del servidor, por lo que es compatible con todas las bibliotecas y herramientas .NET.

Inconvenientes de Blazor

• Existen herramientas .NET y soporte de depuración limitados para la ejecución de aplicaciones .NET del lado del cliente utilizando Blazor.
• Las ventajas de rendimiento de Blazor del lado del cliente no están presentes en la implementación del lado del servidor.

Beneficios de la maquinilla de afeitar

• Razor permite la lógica (condicional) inserción de código C# en páginas web.
• Razor es muy flexible y puede utilizarse para crear una amplia gama de aplicaciones.
• La estructura de Razor está bien organizada.

Inconvenientes de Razor

• JavaScript es necesario para implementar interacciones dinámicas del lado del cliente.
• Múltiples páginas independientes pueden ser difíciles de gestionar y mantener con Razor.

Conclusión

Razor puede manejar la lógica de la API y las plantillas del lado del servidor, pero no puede manejar la lógica del lado del cliente que no esté basada en JavaScript. Blazor permite a los programadores manejar tanto las funciones del cliente como las del servidor con sólo C#. Razor es una sintaxis de marcado para plantillas. Incorpora código del lado del servidor en el HTML. Blazor, por otro lado, es un marco SPA que puede ejecutarse en Blazor WebAssembly o en el servidor Blazor, dependiendo de la situación.

IronPDF proporciona la forma más sencilla de crear, leer, actualizar y manipular archivos PDF tanto en Razor y Blazor aplicaciones. IronPDF forma parte de Iron Suite de Iron Software que consta de cinco bibliotecas útiles que es útil para la creación de aplicaciones web Razor o Blazor que con Excel, PDF, códigos de barras, códigos QR, y las imágenes.

La Plancha Suite está disponible gratuitamente para uso personal. Para obtener más información sobre la obtención de una licencia comercial, haga clic en aquí.