Domina tu Arquitectura y Utiliza los Frameworks como Herramientas - Blazor

"Blazor permite a los desarrolladores crear interfaces de usuario web interactivas utilizando C# en lugar de JavaScript, cerrando la brecha entre el desarrollo del lado del cliente y del servidor."
 --Steve Sanderson


Ahora pasaremos a hablar del Framework Blazor. Blazor es un framework para la construcción de aplicaciones web que permite trabajar tanto en el cliente como en el servidor utilizando C#. Esto significa que en Blazor no es necesario recurrir a JavaScript, jQuery o TypeScript, aunque ofrece una interoperabilidad eficiente para casos donde se necesite invocar funciones JavaScript o jQuery.

Existen dos modalidades de trabajo con Blazor:

  • Blazor Server: Utilizado en este proyecto, ejecuta los componentes en el servidor, manejando la actualización de la interfaz de usuario, el manejo de eventos y las llamadas a JavaScript a través de una conexión SignalR utilizando el protocolo WebSockets.

  • Blazor WebAssembly: Ejecuta los componentes en el cliente, específicamente en el navegador. Aquí, los componentes, sus dependencias y el runtime de .NET se descargan al navegador, permitiendo que la actualización de la interfaz de usuario y el manejo de eventos ocurran en el mismo hilo de ejecución del navegador.


Cada modelo de Blazor tiene sus propios enfoques, ventajas y desventajas, y la elección entre ellos depende del contexto y las necesidades específicas del proyecto.

Trabajar con Blazor ha sido una experiencia fantástica, especialmente como entusiasta de C#, ya que permite construir aplicaciones web sin depender significativamente de JavaScript, jQuery o Ajax, algo que fue necesario en Razor y MVC.

En Blazor, el paradigma cambia y ya no se trabaja con Páginas o Vistas, sino con Componentes. Las componentes tienen extensión .razor, combinando HTML y C# de manera similar a las páginas Razor y las vistas MVC, pero con la posibilidad de encapsular toda la lógica C# en el bloque @code. Este bloque permite crear clases, variables, manejar eventos, definir parámetros y controlar el ciclo de vida de las componentes.

Ejemplo de una componente Razor:


En la imagen se ve como se combina el HTML con C# para producir la componente dinámica que se desea y además en el bloque @code se define el código C# del lado del servidor.

Las componentes Razor también pueden ser totalmente estáticas si solo contienen código HTML. 

Para aquellos que prefieren separar las secciones de código, es posible trasladar la parte @code a un archivo .cs asociado a la componente .razor.

Las componentes Razor pueden contener otras componentes (hijas) y comunicarse con ellas mediante parámetros, mientras que las componentes hijas pueden comunicarse con sus componentes padre a través de servicios que gestionan el estado en memoria.

Para obtener datos en una componente Razor, es común implementar eventos del ciclo de vida como OnInitialized o OnInitializedAsync y llamar a una clase controladora que obtenga la información del modelo, similar a un servicio REST, obteniendo la información en formato JSON.

Ejemplo de un controlador:

[Route("landing")]
[ApiController]
public class LandingController : Controller {
  private readonly IPresenterHelper presenterHelper;
  private readonly IUserState userState;

  public LandingController(IPresenterHelper presenterHelper, IUserState userState) {
      this.presenterHelper = presenterHelper;
      this.userState = userState;
  }

  [HttpGet]
  public async Task<ActionResult<string[]>> GetUserTypes() {
      return await Task.Run(() => GetUserTypeSync()).ConfigureAwait(false);
  }
}
Acá la forma de llamar al controlador:

 userTypes = await HttpClient.GetFromJsonAsync<string[]>(NavigationManager.BaseUri + "landing");

Al igual que en MVC, se puede crear una clase helper para obtener la información del componente Presenters. En Blazor se manejan:

  • Componentes: Tienen el rol de vistas.
  • Controladores: Obtienen la información del modelo, pero las componentes solicitan la información a los controladores.
  • Modelos: Contienen la información y se utilizan para el data binding con las componentes.
La aplicación construida en Blazor mantiene el mismo look and feel que en otros frameworks y para construirla fue necesario aplicar los siguientes conceptos:
  • Intercomunicación entre componentes mediante parámetros y servicios.
  • Interoperabilidad con jQuery para inicializar componentes específicos como Slick.
  • Uso de controles diseñados para Blazor (e.g., EditForm, InputSelect).
  • Manejo de validación. Similar pero con diferencias respecto a Razor y MVC.

Comparado con Razor y MVC

  • Se reutilizó el 70% del código de las páginas .cshtml, se hizo adaptación para usar los controles de Blazor y se modificó la forma de hacer en enlazado de información.
  • Solo se requirió el 1% del código en jQuery (la llamada a la configuración del control Slick), cumpliendo con la promesa de Blazor de hacer todo en C#.

Conexión con la Arquitectura Establecida

La integración de Blazor con la arquitectura establecida se muestra a continuación: 

En el esquema, el componente Main actúa como el punto de entrada de la aplicación, donde se hace la inyección de dependencias y por ello es que se muestra que tiene dependencia con varias componentes. En Blazor, este componente Main corresponde a los archivos Program.cs y Startup.cs. 

Nota: En .NET 8 ya solo figura el archivo Program.cs. 

Lo interesante aquí es notar como la vista implementada con Blazor, depende únicamente del componente Presenters.

Aquí está el video de la aplicación construida con Blazor:

Doy los créditos de las imagenes usadas de Blazor, de la documentación de Microsoft:

https://learn.microsoft.com/en-us/training/modules/build-blazor-todo-list/2-data-binding

Para continuar con Angular da click aquí o utiliza los enlaces de abajo para navegar por las diferentes secciones de este artículo.