Blazor
Hay muchos enfoques para compilar aplicaciones web. Para compilar aplicaciones web muy interactivas y rápidas, normalmente se usa mucho JavaScript.
Otro enfoque es el uso del marco Blazor de Microsoft, que permite usar C# y .NET para controlar todos los problemas de desarrollo web.
¿Qué es Blazor?
Blazor es un marco para compilar páginas web con HTML, CSS y C#. Podemos definir el diseño del sitio web mediante HTML estándar y CSS. Los componentes interactivos de las páginas web se pueden administrar con código de C# que se ejecuta en un servidor o en el explorador mediante una tecnología web estándar denominada WebAssembly. Blazor nos permite definir nuestras páginas web y componentes mediante la sintaxis Razor, una combinación práctica de HTML y C#. Puede reutilizar fácilmente los componentes de Blazor dentro de otras páginas y componentes. Esta funcionalidad significa que podemos compilar y reutilizar fácilmente partes de nuestra aplicación.
¿Qué es WebAssembly?
WebAssembly es una tecnología estándar disponible en todos los exploradores modernos que permite la ejecución del código, de forma similar a JavaScript, en un explorador. Podemos usar herramientas para preparar el código de C# para usarlo en el explorador como una aplicación WebAssembly y estas herramientas se incluyen con el SDK de .NET.
Actualización instantánea de la aplicación con Recarga activa
Al desarrollar una aplicación, quiere asegurarse de que el flujo de desarrollador es rápido para que pueda ver cómo afectan los cambios a la aplicación. Puede llevar mucho tiempo realizar un cambio, guardarlo, recompilar todos los recursos y volver a implementar la aplicación en el explorador.
Puede mejorar este flujo de trabajo mediante Recarga activa. Con Recarga activa, puede aplicar un cambio a la aplicación en ejecución sin tener que reiniciarla.
Componentes de Blazor
Al crear aplicaciones con Blazor, la aplicación consta de muchos componentes, cada uno con su propia área de responsabilidad. Para crear componentes, use archivos Razor con una extensión .razor. Entonces, ¿qué es Razor?
Razor es una sintaxis de programación que combina la sintaxis HTML con código de C#. Este es un ejemplo:
<div>@product.Name</div>
@code {
Product product = new Product{ Name = "Blazor" }
}
En este ejemplo, @product.Name se resuelve en la cadena "Blazor", que luego se representa dentro de la etiqueta div. La salida representada tiene este aspecto:
<div>Blazor</div>
La parte superior del ejemplo de Razor consta de marcado HTML que el componente representará cuando se ejecute. Puede representar el valor de las expresiones de C# mediante el carácter @. Razor seguirá interpretando el código de C# después del @ hasta que identifique una etiqueta y, a continuación, continuará la representación HTML. Puede indicar explícitamente cuándo comienza y termina la expresión de C# mediante paréntesis: @(...).
Todo lo que hay dentro de @code {} contiene código de C# para definir los miembros de la clase de componente generada. Puede pensar en un archivo Razor como una manera cómoda de definir una clase de C# que define la lógica de representación HTML. Use el bloque @code para definir miembros de C# para el tipo de componente, como campos, propiedades y métodos.
Aplicación de estilos a un componente de Blazor
Los componentes de Blazor representan HTML, por lo que puede aplicar estilos a los componentes de Blazor mediante hojas de estilo CSS normales. Como alternativa, los componentes de Blazor tienen una característica denominada aislamiento CSS que permite crear reglas de estilo que solo se aplican al contenido de ese componente o página. Al crear un archivo con el mismo nombre que nuestro componente y agregar la extensión de nombre de archivo .css, Blazor reconoce este nombre como los estilos que SOLO se deben aplicar al contenido HTML en el componente correspondiente.
Los componentes de Blazor también pueden definir el contenido que se va a agregar al encabezado HTML de la página mediante una etiqueta HeadContent especial:
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Esta etiqueta style y su contenido se representan dentro de la etiqueta head de la página.
Componentes enrutables
El archivo Home.razor es un componente al que se puede navegar desde un explorador web. Contiene HTML, C# y referencias a otros componentes de Blazor. Podemos identificar este archivo como una página debido a la presencia de la directiva @page "/" en la primera línea. Esta directiva asigna la ruta "/" al componente e indica a Blazor que responda con el contenido de este archivo cuando se solicite la página predeterminada en la dirección "/".