Usando Blazor en aplicaciones empresariales

Blazor es un nuevo y competente framework web de Microsoft que ayuda a crear aplicaciones web interactivas y desarrolladas con la ayuda de C# y .NET en lugar de JavaScript.

Este emocionante avance ha allanado el camino a toda una nueva vista en el ámbito de la capacidad de .NET para trabajar como documentos multimedia, mientras que ofrece una solución para el desarrollo Web del lado del cliente y del lado del servidor.

Blazor ofrece dos modelos de alojamiento: Los subprogramas más destacados, que se distinguen en función del enfoque utilizado, incluyen Blazor Server y Blazor WebAssembly (Blazor WASM). Ambos modelos ofrecen ventajas específicas a la hora de crear aplicaciones empresariales escalables, tolerantes a fallos y relativamente fáciles de mantener.

En este artículo, el tema de discusión será presentado en profundidad, desde las características y ventajas de Blazor, la arquitectura de este framework, hasta su uso en la práctica. Además, las ideas de Blazor vs React, y Blazor vs Angular también serán no sólo introducidas sino comparadas para ayudar a los desarrolladores y organizaciones a hacer la selección adecuada de qué framework será el mejor para ellos.

¿Blazor Qué Es?

Blazor es un hermano de ASP .NET Core que combina «Browser» y «Razor». Utiliza el formato de instrucciones binarias de una máquina virtual basada en pila denominada WebAssembly para ejecutar código .NET en el navegador. Blazor ofrece dos tipos de modelos de alojamiento: Blazor Server y Blazor WebAssembly (Blazor WASM).

• Servidor Blazor: La aplicación se ejecuta en el lado del servidor, pero se utiliza SignalR para establecer una conexión persistente con el cliente.
• Blazor WebAssembly (WASM): En este modo, las aplicaciones se ejecutan directamente en los navegadores a través de WebAssembly dando una verdadera experiencia del lado del cliente.

¿Por qué elegir Blazor para aplicaciones empresariales?

1. Plataforma de desarrollo unificada:
   • Lenguaje único: Los desarrolladores de Blazor tienen la opción de basarse en el lenguaje C# para diseñar una aplicación no sólo en el lado del servidor, sino también en el lado del cliente, lo que simplifica la creación y reduce la necesidad de múltiples lenguajes (como JavaScript en el front-end y C# en el back-end ).
   • Ecosistema .NET: Al hacer uso de las bibliotecas, herramientas y marcos existentes a través del ecosistema .NET, los desarrolladores pueden ahorrar tiempo durante el proceso de desarrollo y ser más productivos.
2. Arquitectura basada en componentes:
   • Reutilización: La arquitectura basada en componentes de Blazor fomenta la reutilización y la modularidad. Los componentes pueden compartirse fácilmente con otras partes de la misma aplicación o entre distintos proyectos.
   • Facilidad de mantenimiento: Debido a que las interfaces de usuario están encapsuladas por componentes además de la lógica, las aplicaciones Blazor se pueden mantener y ampliar más fácilmente.
3. Rendimiento:
   • Blazor WebAssembly proporciona un gran rendimiento mediante la ejecución de código .NET en los navegadores utilizando WebAssembly que es una de las mejores opciones cuando se trata de aplicaciones offline de alta interactividad. Otra alternativa es Blazor Server con tiempos de carga más rápidos y utiliza recursos mínimos del servidor porque la lógica de la aplicación permanece en el servidor mientras se envían las actualizaciones de la interfaz de usuario a través de SignalR. Es ideal para actualizaciones de datos en tiempo real, incluidas las fuentes de datos en directo y el procesamiento del lado del servidor.
4. Productividad y herramientas:
   • Entorno de desarrollo integrado (IDE): Blazor se integra perfectamente con Visual Studio, proporcionando un entorno de desarrollo potente y familiar con funciones como IntelliSense, depuración y plantillas de proyecto.
   • Sintaxis Razor: Utiliza la sintaxis Razor para definir los componentes de interfaz de usuario, que combina el marcado HTML con el código C#, lo que resulta intuitivo para los desarrolladores ya familiarizados con ASP.NET MVC o Razor Pages.

Consideraciones arquitectónicas

1. Elección del modelo de alojamiento:
   • Servidor Blazor: Ideal para operaciones complejas del lado del servidor, actualizaciones de estadísticas en tiempo real y escenarios en los que la gestión del entorno del cliente es importante. Sin embargo, se basa en la conectividad de la comunidad sin parar y puede enfrentarse a problemas de escalabilidad debido a las barreras de ayuda del servidor.
   • Blazor WebAssembly: Adecuado para programas con alta conectividad, talentos fuera de línea, o en los que el sentido común de la faceta de cliente necesita ser eliminado del servidor Las instancias iniciales de carga pueden ser largas, pero ofrecen un rendimiento general excepcional en cuanto se montan.
2. Gestión del Estado:
   • La gestión de estado en Blazor se puede realizar utilizando varias técnicas, que consisten en parámetros en cascada, inyección de dependencia, o bibliotecas de gestión de estado de terceros que incluye Fluxor. La gestión eficaz del estado es crucial para preservar el rendimiento del trabajo y garantizar una experiencia de usuario coherente.
3. Seguridad:
   • Blazor Server tiene inherentemente un modelo más seguro porque la lógica de la aplicación se ejecuta en el servidor. En el caso de Blazor WebAssembly, la seguridad de los puntos finales de la API y la gestión de los tokens de autenticación son fundamentales para defenderse de las vulnerabilidades del lado del usuario.
   • Ambos modelos ayudan a la integración con ASP.NET Core Identity para la autenticación y autorización y proporcionan un marco de seguridad sólido para las aplicaciones empresariales.
4. Escalabilidad:
   • Servidor Blazor: La escalabilidad requiere una planificación cuidadosa, ya que cada cliente conectado continúa una conexión continua con el servidor. Las técnicas que incluyen la placa base SignalR y el servicio Azure SignalR pueden ayudar a hacer frente a la escalabilidad.
   • Blazor WebAssembly: Por defecto, es excelente en el lado del cliente, pero la API backend y los servicios deben estar diseñados para manejar una carga excesiva y peticiones concurrentes.

Modelos de alojamiento

Servidor Blazor

En Blazor Server, la aplicación se ejecuta en el servidor. Cuando un usuario interactúa con la aplicación, los eventos se envían al servidor, se procesan y las actualizaciones de la interfaz de usuario resultantes se envían de vuelta al cliente. Esto es facilitado por SignalR, que mantiene una conexión persistente entre el cliente y el servidor.

• Pros:
  • Arranque rápido – El servidor arranca rápido, ya que sólo hay que enviar un mínimo de datos al cliente.
  • Se trata de recursos y funcionalidades comunes que los servidores ofrecen a los usuarios para acceder a ellos.
  • Modelo de seguridad sencillo porque el código procede del servidor
• Cons:
  • Necesita una conexión consistente con el servidor.
  • Dado que puede ser necesario el procesamiento en el servidor, la escalabilidad es un problema.

Blazor WebAssembly

Blazor WASM ejecuta la aplicación íntegramente en el navegador. El tiempo de ejecución .NET se descarga junto con la aplicación, y el código se ejecuta en el lado del cliente.

• Pros:
  • Auténtica ejecución en el lado del cliente, lo que permite trabajar sin conexión.
  • Reducción de la carga del servidor y mejora potencial de la escalabilidad.
  • Menor latencia en las interacciones de los usuarios.
• Cons:
  • Mayor tamaño de descarga inicial en comparación con Blazor Server.
  • Acceso limitado a los recursos del servidor a menos que se utilicen las API.

Ciclo de vida de Blazor

El ciclo de vida completo de Blazor abarca lo que sucede desde el inicio hasta el cierre de una aplicación Blazor. Esta comprensión del ciclo de vida de Blazor es importante para que pueda supervisar el contenido, controlar las condiciones y asegurarse de que su aplicación funciona correctamente. Todo comienza cuando su navegador carga el primer HTML y JavaScript que el tiempo de ejecución de Blazor también ejecuta. Si utiliza Blazor WebAssembly, esto significa descargar el tiempo de ejecución .NET y las DLL de la aplicación en el lado del cliente. Una vez que todo está instalado, la aplicación del framework se inicia y comienza a renderizar los componentes raíz.

En la fase de configuración, configuramos los servicios y creamos un contenedor de inyección de dependencias. En una aplicación Blazor WebAssembly, normalmente encontrará el código de configuración, incluido el método Main, en el archivo Program.cs. La clase Startup de Blazor Server controla la configuración. Una vez que la aplicación está en funcionamiento, Blazor gestiona la interacción con el usuario y la representación de los componentes de forma eficiente. Las aplicaciones Blazor Server utilizan SignalR para la comunicación en tiempo real entre clientes y servidores. El ciclo de vida de la aplicación consta de varios estados como la inicialización, el versionado y la eliminación, lo que permite a los desarrolladores aprovechar estas etapas para ejecutar lógica personalizada. La lógica del ciclo de vida de Blazor es importante para optimizar el rendimiento, gestionar los recursos, garantizar un cambio sencillo y eficiente de los datos y proporcionar una experiencia de usuario mejorada.

Ciclo de vida de los componentes de Blazor

El ciclo de vida de los componentes de Blazor es una serie de eventos y llamadas a métodos que se producen desde que se crea un componente hasta que se desecha. En Blazor, cada componente sigue un ciclo de vida específico, dando a los desarrolladores varias oportunidades para añadir su lógica personalizada en diferentes etapas. Los principales métodos del ciclo de vida incluyen OnInitialized, OnParametersSet, OnAfterRender y Dispose.

OnInitialized: Este método se llama una vez cuando el componente se inicializa por primera vez. Se utiliza para inicializar el estado del componente y realizar cualquier lógica de inicio que no dependa de los parámetros del componente.

protected override void OnInitialized()
{
    // Initialization logic here
}

OnParametersSet: Este método se invoca cada vez que se establecen los parámetros del componente. Es útil para manejar la lógica que depende de los parámetros pasados al componente.

protected override void OnParametersSet()
{
    // Parameter handling logic here
}

OnAfterRender: Este método se llama después de que el componente haya terminado de renderizarse. Resulta útil para ejecutar lógica posterior a la renderización, como interactuar con bibliotecas JavaScript o actualizar la interfaz de usuario en función del estado del DOM.

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        // Logic to run after the first render
    }
}

Dispose: Este método se ejecuta cuando el componente se elimina de la interfaz de usuario. Se utiliza para limpiar recursos, darse de baja de eventos y realizar otras lógicas de eliminación.

public void Dispose()
{
    // Cleanup logic here
}

Al conocer la implementación del ciclo de vida de los componentes, los desarrolladores pueden gestionar bien aspectos como el estado, el rendimiento de la renderización y las interacciones con otros sistemas. La utilización adecuada de estos métodos del ciclo de vida ayuda a garantizar que los componentes se comporten de forma predecible, que los recursos se controlen eficazmente y que la aplicación funcione de forma óptima.

Configuración de una aplicación Blazor

Prerrequisitos

Para empezar con Blazor, necesitas lo siguiente:

• .NET SDK (5.0 o posterior)
• Visual Studio 2019 (16.8 o posterior) o Visual Studio Code

Creación de una aplicación Blazor Server

1. Abre Visual Studio y crea un nuevo proyecto.
2. Selecciona Blazor App y haz clic en Siguiente.
3. Configura el nombre y la ubicación del proyecto y, a continuación, haz clic en Crear.
4. Elige la plantilla Blazor Server App y haz clic en Crear.

Creación de una aplicación Blazor WebAssembly

1. Abre Visual Studio y crea un nuevo proyecto.
2. Selecciona Blazor App y haz clic en Siguiente.
3. Configura el nombre y la ubicación del proyecto y, a continuación, haz clic en Crear.
4. Elige la plantilla Blazor WebAssembly App y haz clic en Crear.

Componentes de Blazor

Las aplicaciones Blazor se crean utilizando componentes como parte fundamental del enfoque de bloques de construcción. En Blazor, un componente es un fragmento de interfaz de usuario pequeño e independiente que puede definirse en un archivo .razor. Estos componentes también pueden tener HTML, condiciones if y otros componentes incrustados dentro de ellos. Como resultado, es posible expresar interacciones de usuario más complejas y sofisticadas utilizando estos bloques de construcción.

He aquí un ejemplo sencillo de un componente Blazor:

@page "/counter"
 <h3>Counter</h3>
 <p>Current count: @currentCount</p>
 <button @onclick="IncrementCount">Click me</button> 

@code { 
private int currentCount = 0; 
private void IncrementCount() 
{ 
currentCount++; 
}
}

En este ejemplo:

• La directiva @page especifica el enrutamiento de la URL.
• El marcado HTML define la interfaz de usuario.
• El bloque @code contiene el código C# para la lógica del componente.

Vinculación de datos

Blazor admite la vinculación de datos unidireccional y bidireccional.

• Vinculación unidireccional: Vincula una propiedad del componente a un elemento de la interfaz de usuario.

<p>@message</p> 
@code { 
private string message = "Hello, Blazor!"; 
}

• Vinculación bidireccional: Vincula una propiedad a un elemento de entrada.

<input @bind="name" />
<p>You entered: @name</p> 
@code { 
private string name = ""; 
}

Gestión de eventos

Blazor facilita la gestión de eventos, como los clics en los botones.

<button @onclick="OnClick">Click me</button> 
@code { 
private void OnClick() 
{ 
// Event handling logic 
} 
}

También puedes pasar argumentos de eventos:

<input type="text" @oninput="OnInput" /> 
@code { 
private void OnInput(ChangeEventArgs e) 
{ 
string value = e.Value.ToString(); 
// Handle input change 
} 
}

Inyección de dependencia

Blazor soporta inyección de dependencias (DI) como ASP.NET Core. Puedes inyectar servicios en componentes utilizando la directiva @inject.

1. Registrar un servicio en Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<MyService>();
}

2. Inyectar el servicio en un componente:

@inject MyService myService

<p>Service Message: @myService.GetMessage()</p>

Enrutamiento

Blazor proporciona un sólido sistema de enrutamiento para navegar entre los componentes.

• Define una ruta utilizando la directiva @page en el componente:

@page "/about"
<h3>About</h3>

• Configurar rutas en App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Formularios y validación

Blazor proporciona soporte integrado para formularios y validación mediante EditForm, DataAnnotationsValidator y ValidationSummary.

1. Crea un modelo con atributos de validación:

public class UserModel
{
    [Required]
    [StringLength(100, MinimumLength = 3)]
    public string Name { get; set; }
}

2. Utiliza el modelo en un formulario:

<EditForm Model="@user" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="user.Name" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    private UserModel user = new UserModel();

    private void HandleValidSubmit()
    {
        // Form submission logic
    }
}

Autenticación y autorización

Blazor admite autenticación y autorización para proteger rutas y componentes.

1. Configura la autenticación en Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    services.AddAuthentication(options =>
    {
        options.DefaultScheme = "Cookies";
    }).AddCookie("Cookies");
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseAuthentication();
    app.UseAuthorization();
}

2. Protege las rutas mediante el componenteAuthorizeView:

<AuthorizeView>
    <Authorized>
        <p>You're logged in!</p>
    </Authorized>
    <NotAuthorized>
        <p>You are not authorized to view this content.</p>
    </NotAuthorized>
</AuthorizeView>

3. Protege las páginas utilizando el atributo [Autorize]:

@page "/secure"
@attribute [Authorize]

<h3>Secure Page</h3>

Depuración y pruebas

Blazor admite la depuración en aplicaciones Blazor Server y Blazor WASM mediante Visual Studio. Puede establecer puntos de interrupción, inspeccionar variables y recorrer el código.

• Depuración del servidor Blazor:
  • Establece puntos de interrupción en el código del servidor.
  • Ejecuta la aplicación y conecta el depurador.
• Depuración de Blazor WASM:
  • Establece puntos de interrupción en el código del lado del cliente.
  • Utiliza las herramientas de desarrollo del navegador para inspeccionar y depurar el código WebAssembly.

Blazor vs React

Lenguaje y ecosistema

• Blazor: Ha adoptado C# y actualmente depende de WebAssembly para renderizar interfaces de usuario .NET, lo que beneficia a los desarrolladores ya acostumbrados al uso de .NET. Ayuda a reutilizar código en un lado de un servicio para que lo use el otro; una clave para crear aplicaciones de servidor y otras de cliente.
• React: React permite escribir en JavaScript o TypeScript. Es un software de código abierto que cuenta con una gran comunidad que lo apoya con muchas bibliotecas y herramientas para trabajar con este sistema.

Rendimiento

• Blazor: Pueden tardar más en arrancar porque, antes de poder hacer nada, era necesario adquirir el software NET mediante descarga. Aunque se inician a cámara lenta, pueden moverse muy rápido una vez arrancan. Las aplicaciones Blazor que se ejecutan en el servidor cuando se inician se cargan más rápido, pero nunca dejan de comunicarse con el servidor.
• React: Las aplicaciones React suelen ser más rápidas en el arranque y la actualización de forma única, ya que se basan en un DOM virtual. Esto es particularmente bueno para interfaces altamente dinámicas, que pueden ser fácilmente representadas por el framework React.

Experiencia en desarrollo

• Blazor: Ofrece un proceso de desarrollo coherente utilizando herramientas y bibliotecas .NET. Blazor admite el desarrollo full-stack mediante C#, lo que facilita la integración con las aplicaciones .NET existentes.
• React: React mejora el proceso de desarrollo con una amplia gama de bibliotecas, incluyendo Redux para la gestión del estado y React Router para el manejo de rutas. La comunidad React es grande y solidaria, y ofrece mucha ayuda y materiales.

Curva de aprendizaje

• Blazor: más fácil de aprender para los desarrolladores con experiencia en .NET. La transición a Blazor es sencilla para quienes están familiarizados con C# y ASP.NET.
• React: Puede tener una curva de aprendizaje más pronunciada para los desarrolladores nuevos en JavaScript o en el desarrollo front-end. Sin embargo, la arquitectura basada en componentes es intuitiva y fácil de entender una vez familiarizado con los conceptos básicos.

Blazor vs Angular

Lenguaje y ecosistema

• Blazor: Lenguajes de programación utilizados para C# y .NET en todos los clústeres, evitando así incoherencias en la forma de escribir las distintas partes de un programa, ya que los desarrolladores codifican a partir de desarrolladores .NET. El ecosistema .NET es muy amplio en su oferta; numerosas bibliotecas y herramientas pueden dar respuesta a diversos requisitos de las aplicaciones.
• Angular: Utiliza TypeScript que da como resultado un tipado fuerte, una mayor exhaustividad del código y menos errores. En cuanto a las herramientas de utilidad, como el enrutamiento, los formularios y los clientes HTTP, Angular también cuenta con soluciones de origen, por lo que no requiere bibliotecas adicionales.

Rendimiento

• Blazor: Con Blazor WASM puede haber sobrecarga en la inicialización de la primera página, pero las interacciones posteriores del usuario son rápidas. Las aplicaciones de Blazor Server se basan en viajes de ida y vuelta al servidor, que pueden incorporar latencia, pero ofrecen una mejor respuesta en la primera carga [página].
• Angular: El uso de la compilación Ahead-of-Time (AOT) se fomenta en las aplicaciones Angular porque mejora la eficiencia de la aplicación a través de la compilación durante la construcción. Las técnicas de detección de cambios y optimización de Agular garantizan un alto rendimiento en aplicaciones complejas.

Experiencia en desarrollo

• Blazor: Conecta en una sinergia agradable con el .NET. Por ejemplo, las aplicaciones basadas en Web, RIA y móviles se desarrollan con la ayuda de herramientas .NET como Visual Studio. La integración de Blazor con las APIs y librerías .NET permite la creación más fácil de aplicaciones complejas.
• Angular: Proporciona una extensa CLI (Command Line Interface) con numerosos comandos que proporcionan plantillas estructurales muy básicas, construcciones y funcionalidad de pruebas. Esta importante fortaleza de las herramientas de Agular es que está hecho para la aplicación a gran escala.

Curva de aprendizaje

• Blazor: Aún más de lo mismo está disponible para los desarrolladores .Net, ya que parece que se desarrollan utilizando lenguajes y herramientas similares. Otros desarrolladores .NET parecen reconocer que Blazor se parece mucho a los demás. Gracias a la aplicación operativa de las tecnologías .NET, la curva de aprendizaje se amortigua.
• Angular: Está más orientado al pasado en comparación con la versión framework debido a su mayor cobertura y uso de TypeScript. No obstante, Angular tiene un sistema de documentación bien estructurado, que puede ayudar a aprender todo sobre el framework.

Conclusión

Blazor es un framework altamente transformado y desarrollado para ofrecer todo el potencial de .NET al desarrollo web. Su estructura basada en componentes junto con el lenguaje C# y .NET en toda la pila también lo convierten en una solución bastante atractiva.

Blazor vs React vs Angular: Aspectos destacados para una elección

– No se puede dejar de concluir que Blazor encajará a la perfección en este tipo de empresas y desarrolladores que dedican gran parte de su tiempo al ecosistema .NET; en la actualidad, es posible utilizar el mismo lenguaje para el desarrollo full-stack, lo que intuitivamente contribuiría positivamente a la productividad y el mantenimiento. Blazor también funciona bien para aplicaciones que requieren una fuerte interoperabilidad con los servicios backend .NET existentes.

– Para los desarrolladores que buscan una biblioteca eficiente y con una buena arquitectura para renderizar la interfaz de usuario, React puede ser una opción óptima. El fuerte apoyo de la comunidad y un vasto ecosistema hacen que React esté bien equipado para servir como una base fiable para aplicaciones más complejas y de estructura flexible. Uno de los principales puntos fuertes de React es que se basa en el concepto de componentes, ya que sus aplicaciones se dividen en partes pequeñas y reutilizables que pueden integrarse fácilmente con una amplia variedad de bibliotecas y herramientas diferentes.

– Angular es ideal para los desarrolladores o un equipo que quiere un marco con un conjunto de normas y prácticas erigido en una especie de «jardín amurallado». Angular tiene un enfoque fuertemente tipado posible con TypeScript y tiene soluciones out-of-the-box y una gran CLI que lo hace adecuado para la construcción de aplicaciones para grandes empresas. La arquitectura rígida que ofrece la herramienta junto con la extensa documentación hace que Angular funcione bien entre los equipos que valoran y utilizan convenientemente las mejores prácticas en todos los proyectos.

En conclusión, el principio de la toma de decisiones entre Blazor, React, y Angular se basa en los requisitos del proyecto, el calibre del equipo, y lo que ya está en su posesión. Los tres tienen ventajas que podrían ser lo suficientemente buenas como para considerarlas para su proyecto, teniendo en cuenta que el campo del desarrollo web ha estado cambiando rápidamente durante los últimos dos años.