Etiqueta: csharp

Unit of Work con Dapper

Como mencioné en el post anterior, recientemente comencé a utilizar Dapper para algunos proyectos en mi trabajo y a causa de ellos tuve la necesidad de migrar algunas operaciones al otro sistema y para ello se deben sincronizar datos entre los dos sistemas.

Contexto

Estos datos que necesitaba sincronizar son listas pero existen algunas que dependen de otra lista, por ejemplo, si se tratara de un punto de venta es probable tengamos entidades como Caja y ésta dependería de Sucursal.

Bajo éste escenario el procedimiento a seguir es el siguiente:

  1. Se tienen dos sistemas a sincronizar (S1 y S2)
  2. Se creará una aplicación de consola que recabará las listas de S1 y las enviará a S2
  3. S2 contará con un WebApi para recibir las listas enviadas por S1

Bien ahora, desde el punto de vista de S2 tenemos los siguientes escenarios:

  1. El elemento recibido es nuevo y hay que registrarlo
  2. El elemento ya existe y se debe actualizar en S2

Desglosando el Problema

Como mencioné anteriormente, hay listas que dependen de otra y esto nos genera un caso “especial” ya que si se agregan elementos nuevos a una lista que tiene dependencias y estas mismas aun no se han registrado esto genera un conflicto en S2 al tratar de registrar el elemento recibido.

Ejemplo: Supongamos que en S1 existen las entidades Sucursal y Caja, se entiende que la caja pertenece a alguna sucursal, dicho en otras palabras, la caja depende de la sucursal, esto implica que para poder registrar una caja ya debe estar registrada la sucursal a la que pertenece, entonces: ¿Qué pasaría si recibimos una caja de una sucursal nueva y aun no se registra la sucursal?, obviamente esto es un error que se soluciona de dos formas:

  1. Asegurarnos de que la sincronización dé prioridad a las listas que tengan dependencias.
  2. Si el elemento recibido tiene una dependencia que no existe, la dependencia se registra “en blanco” y al recibir la lista de la que depende se actualizaría la dependencia “en blanco”.

Para éste caso donde la sincronización será automática no creo conveniente seguir el camino de la opción número 1 ya que si el sistema crece podríamos toparnos con referencias circulares (cosa que ya me ha pasado anteriormente) y esto provocaría otro problema, así que opté por seguir la opción número 2.

Patrón Unit of Work

Ahora que he decidido registrar las dependencias “en blanco” necesito hacer las inserciones de las dependencias en una transacción y para ello utilizaré el patrón UnitOfWork y para ello usare la siguiente clase:

C#
public class UnitOfWork : IDisposable
{
    public IDbConnection Connection { get; }
    public IDbTransaction Transaction { get; }

    public UnitOfWork()
    {
        Connection = Repository.GetConnection();
        Connection.Open();
        Transaction = Connection.BeginTransaction();
    }

    public void Commit() => Transaction.Commit();
    public void Rollback() => Transaction.Rollback();

    public void Dispose()
    {
        Transaction?.Dispose();
        Connection?.Dispose();
    }
}

Esta clase será la encargada crear la conexión a la base de datos y de hacer commit o rollback a la transacción.

A continuación les muestro como usar la clase UnitOfWork:

C#
public static Result<long?> InsertCaja(CajaRequest request)
{
    using (var unit = new UnitOfWork())
    {
        try
        {
            Result<long?> result = InsertCajaInterna(request, unit.Connection, unit.Transaction);
            unit.Commit();
            return result;
        }
        catch (Exception ex)
        {
            unit.Rollback();
            log.Error($"Message: {ex.Message} | InnerException: {ex.InnerException} | StackTrace: {ex.StackTrace}");
            return Result<long?>.Fail("Ocurrio un error al registrar la caja");
        }
    }
}

Como se puede ver creé una función “Interna” pasando como parámetros tanto la conexión como la transacción, de esta manera todas las operaciones de base de datos se harán en conjunto.

NOTA: Estoy utilizando la clase Result para manejar las respuestas de las operaciones, su código es el siguiente:

C#
public class Result
{
    protected Result() { }

    public bool Success { get; protected set; }
    public string Message { get; protected set; }

    public static Result Ok(string message = "") =>
        new Result { Success = true, Message = message };

    public static Result Fail(string message) =>
        new Result { Success = false, Message = message };
}

public class Result<T> : Result
{
    public T Data { get; set; } = default;

    public static Result<T> Ok(T data, string message = "")
        => new Result<T> { Success = true, Message = message, Data = data };

    public new static Result<T> Fail(string message)
        => new Result<T> { Success = false, Message = message, Data = default };
}

A continuación te muestro el código de la función InsertCajaInterna:

C#
private static Result<long?> InsertCajaInterna(CajaRequest request, IDbConnection con, IDbTransaction trx)
{
    long? sucursalId = null;

    // Se obtiene la sucursal
    sucursalId = con.ExecuteScalar<long?>(
        "SELECT SucursalId FROM Sucursal WHERE IdExterno = @IdExternoSucursal"
        , new { IdExternoSucursal = request.sucursalId }, trx);

    // Si no existe la sucursal se registra en blanco
    if (!sucursalId.HasValue)
    {
        Result<long?> resultSucursal = InsertSucursalInterna(new SucursalRequest
            { idExterno = request.sucursalId, IsEmptiInsert = true }, con, trx);

        sucursalId = resultSucursal.Data;

        if (!sucursalId.HasValue)
            return Result<long?>.Fail("No se pudo identificar la sucursal");
    }

    // Se valida si existe una caja con el mismo IdExterno
    Result<long?> cajaId = con.ExecuteScalar<long?>("SELECT CajaId FROM Caja WHERE IdExterno = @IdExterno",
        new { IdExterno = request.idExterno }, trx);

    if (!cajaId.HasValue)
    {
        // Se inserta la caja nueva
        cajaId = con.ExecuteScalar<long?>(
            "INSERT INTO Caja (IdExterno, NombreCaja, SucursalId) " +
            " VALUES (@IdExterno, UPPER(@NombreCaja), @SucursalId); " +
            "SELECT SCOPE_IDENTITY();"
            , new
            {
                IdExterno = request.idExterno,
                NombreCaja = request.nombreCaja,
                SucursalId = sucursalId.Value
            }, trx);
    }
    else
    {
        // Se actualiza la caja existente
        con.Execute(
            "UPDATE Caja SET NombreCaja = UPPER(@NombreCaja), SucursalId = @SucursalId " +
            "WHERE IdExterno = @IdExterno "
            , new
            {
                IdExterno = request.idExterno,
                NombreCaja = request.nombreCaja,
                SucursalId = sucursalId.Value
            }, trx);
    }

    log.Info($"CajaId: {cajaId} | Nombre: '{request.nombreCaja}' | SucursalId: {sucursalId} | IdExterno: {request.idExterno}");

    return Result<long?>.Ok(cajaId, "Caja registrada correctamente");
}

De esta manera he conseguido insertar la caja y su dependencia en una transacción para mantener la integridad de los datos.

¿Cuándo usar Unit of Work?

  1. Cuando se requieren múltiples operaciones dependientes entre sí.
  2. Procesos de negocio complejos.

Conclusión

Implementar el patrón Unit of Work con Dapper no es obligatorio, pero existen escenarios donde se requiere que múltiples operaciones se ejecuten en conjunto, y es aquí donde se vuelve una pieza clave para mantener la integridad de los datos.

Usando Dapper con C# y SQL Server

Recientemente en mi trabajo iniciamos el desarrollo de una aplicación donde varios desarrolladores íbamos a estar trabajando al mismo tiempo, cada quien en módulos diferentes. Y como suele pasar esto implica cambios constantes en la base de datos.

Si has trabajado con Entity Framework en equipo, probablemente ya te has topado con el problema de que el DbContext empieza a desincronizarse, migraciones que chocan, modelos que ya no representan la realidad de la base de datos y terminas perdiendo tiempo en cosas que no deberían ser problema.

Así que decidí buscar una alternativa más simple, más directa y que no presentara este problema. Ahí fue donde me encontré con Dapper.

¿Qué es Dapper?

Dapper es un micro ORM desarrollado por el equipo de Stack Overflow que diferencia de Entity Framework, aquí no hay magia pesada ni abstracciones complejas, escribes tu SQL y Dapper se encarga de mapear los resultados a tus objetos.

¿Por qué decidí usarlo?

En mi caso, lo que necesitaba era:

  • Evitar problemas de sincronización entre modelo y base de datos
  • Tener control total sobre las consultas
  • Algo rápido de implementar
  • Que funcionara bien trabajando en equipo

Aplicación de Control Gastos

Para probar Dapper decidí hacer una aplicación ultra sencilla para registrar gastos ya que necesitaba aprender a usarlo antes de implementarlo en un proyecto en mi trabajo.

Instalación

Nada complicado, como cualquier paquete de NuGet:

Install-Package Dapper

Y para SQL Server:

dotnet add package Microsoft.Data.SqlClient

Configuración básica

Yo normalmente manejo una clase base para obtener la conexión, algo así:

C#
public class BaseRepository
{
    private readonly IConfiguration _configuration;

    public BaseRepository(IConfiguration configuration)
    {
        _configuration = configuration;
    }

    protected SqlConnection GetConnection()
    {
        return new SqlConnection(_configuration.GetConnectionString("DefaultConnection"));
    }
}

Esto me permite reutilizar la conexión en todos mis repositorios.

Modelo de ejemplo

C#
public class Usuario
{
    public int Id { get; set; }
    public string Nombre { get; set; }
    public string Email { get; set; }
}

SELECT

Aquí es donde Dapper brilla por su simplicidad.

C#
public Usuario[] GetUsuarios()
{
    using var con = GetConnection();

    return con.Query<Usuario>("SELECT * FROM Usuarios")
              .ToArray();
}

Con parámetros:

C#
public Usuario? GetUsuarioById(int id)
{
    using var con = GetConnection();

    return con.QueryFirstOrDefault<Usuario>(
        "SELECT * FROM Usuarios WHERE Id = @Id",
        new { Id = id });
}

INSERT

C#
public void InsertUsuario(Usuario usuario)
{
    using var con = GetConnection();

    con.Execute(
        "INSERT INTO Usuarios (Nombre, Email) VALUES (@Nombre, @Email)",
        usuario);
}

UPDATE

C#
public void UpdateUsuario(Usuario usuario)
{
    using var con = GetConnection();

    con.Execute(
        @"UPDATE Usuarios 
          SET Nombre = @Nombre, Email = @Email 
          WHERE Id = @Id",
        usuario);
}

DELETE

C#
public void DeleteUsuario(int id)
{
    using var con = GetConnection();

    con.Execute(
        "DELETE FROM Usuarios WHERE Id = @Id",
        new { Id = id });
}

Transacciones

Aquí es donde ya se pone interesante, porque puedes hacer exactamente lo que necesitas sin pelearte con el ORM.

En uno de mis repositorios, por ejemplo, manejo algo así:

  • Inserto una cuenta
  • Si tiene saldo inicial, inserto también un movimiento
  • Todo dentro de una transacción

Ejemplo simplificado:

C#
using var con = GetConnection();
con.Open();

using var trx = con.BeginTransaction();

try
{
    var cuentaId = con.ExecuteScalar<long>(
        @"INSERT INTO Cuentas (Nombre) 
          VALUES (@Nombre);
          SELECT SCOPE_IDENTITY();",
        new { Nombre = "Cuenta demo" },
        trx);

    con.Execute(
        @"INSERT INTO Movimientos (CuentaId, Importe)
          VALUES (@CuentaId, @Importe)",
        new { CuentaId = cuentaId, Importe = 100 },
        trx);

    trx.Commit();
}
catch
{
    trx.Rollback();
    throw;
}

Este tipo de control es justo lo que estaba buscando.

Ventajas

Después de usarlo en algunos proyectos en mi día a día, estas fueron las principales ventajas:

  • Menos fricción trabajando en equipo
  • No dependes de migraciones
  • Código más predecible
  • Mejor rendimiento
  • Debug mucho más sencillo

¿Reemplaza a Entity Framework?

No necesariamente, Entity Framework sigue siendo muy útil en muchos escenarios, sobre todo cuando:

  • No quieres escribir SQL
  • Tu modelo es muy estable
  • Necesitas rapidez para prototipar

Pero en escenarios como el mío (muchos cambios y varios desarrolladores), creo Dapper se siente mucho más cómodo.

Conclusión

En mi caso, Dapper no solo resolvió un problema que me representaría usar Entity Framework sino que me ayudó a mejorar el flujo de trabajo al no tener que sincronizar mi base de datos con el modelo. Aunque no descarto la idea de usar Entity Framework pero será en una etapa donde los cambios en la base de datos no sean tan recurrentes como ahora.

Arquitectura Multicapa Simplificada para aplicaciones .NET

En mi trabajo surgió la necesidad de migrar una aplicación relativamente grande que estaba construida con ASP.NET MVC 5 + DevExtreme. Yo también había participado en el desarrollo de dicha aplicación y la verdad es que conforme fue creciendo me fui dando cuenta de que tal ves el camino que habíamos elegido no era el correcto, MVC nos estaba generando controladores gigantescos incluso cuando toda la lógica de negocio estaba en la base de datos, ya que aunque usábamos repositorios para el acceso a datos, todo el sistema estaba basado en procedimientos almacenados y los repositorios solo se encargaban de llamarlos.

Entonces, al presentarse la necesidad de crear una nueva versión del mismo sistema vi que Blazor Server era una buena opción, ya que echaba de menos la característica que ofrecía WebForms de poder ordenar las vistas en carpetas y Blazor Server nos permitía hacerlo, ademas otra necesidad principal que teníamos es que el sistema nuevo debía ser responsivo y se optó por usar MudBlazor.

Cómo nació la idea de la arquitectura

Necesitaba una arquitectura que cumpliera con tres requisitos muy concretos:

  • Que fuera ordenada
  • Que fuera fácil de mantener
  • Que no fuera difícil de implementar

Así que me dedique un tiempo a investigar distintas arquitecturas de software como DDD o Core-Driven pero no me terminaban de convencer. Pero si me dieron una idea de como conseguir lo que necesitaba.

La Arquitectura Multicapa Simplificada

Supongamos que la aplicación que vamos a migrar se llama Rocket, la arquitectura se basa en cuatro capas que estarían en proyectos separados:

Rocket.Core     → Modelos, DTOs, Requests/Responses y clases compartidas
Rocket.Data → Repositorios y acceso a base de datos
Rocket.Services → Lógica de negocio y orquestación
Rocket.Web → Capa de presentación (Blazor Server)

La idea es simple, cada capa tiene una responsabilidad clara y la única capa que puede relacionarse con las demás(que de hecho debe estar relacionada) es Core.

Cómo se comunican las capas

La relación es directa y limpia:

UI (Rocket.Web)

Servicios (Rocket.Services)

Repositorios (Rocket.Data)

Base de datos
-----------------------------
Rocket.Core → Consumido por todas las capas

Rocket.Core

Esta capa esta compuesta de al menos los siguientes namespaces

Rocket.Core
- Rocket.Core.Dtos → Clases para transferir datos
- Rocket.Core.IO → Datos de entrada y salida de los servicios

Una característica que me pareció necesaria al momento de diseñar esta arquitectura es que estuviera desacoplada de la capa de presentación, ya que anteriormente tuve la experiencia de que se había desarrollado un sistema con WebForms y después se nos solicito crear WebAPIs que expusieran algunas funcionalidades del sistema.

Por esta razón agregue un Result Wrapper que me ayude separar la capa de servicios de la capa de presentacion y en caso de ser necesario exponer funcionalidades con WebAPIs solo se consumen los servicios y ¡listo!.

Result
--------------
Success:bool → Indica si la operación fue exitosa
Message:string → Mensaje que se mostrará al usuario
Data:T (Opcional) → Objeto con la respuesta que devuelve el servicio

El código de la clase Result es el siguiente:

C#
namespace Rocket.Core.IO;

public class Result
{
    protected Result() { }
    public bool Success { get; protected set; }
    public string Message { get; protected set; }

    public static Result Ok(string message = "") =>
        new() { Success = true, Message = message };

    public static Result Fail(string message) =>
        new() { Success = false, Message = message };
}

public class Result<T>() : Result where T : BaseResponse?
{
    public T? Data { get; set; }

    public static Result<T> Ok(T data, string message = "")
        => new Result<T> { Success = true, Message = message, Data = data };

    public new static Result<T> Fail(string message)
        => new Result<T> { Success = false, Message = message, Data = default };
}

Rocket.Data

Esta capa es la encargada del acceso a datos, aquí se encuentran los repositorios que usarán los servicios junto con el ORM que se deseé utilizar, en mi caso actualmente uso Dapper pero podría ser cualquier otro, y esta capa se compone de al menos el siguiente namespace:

Rocket.Data
- Rocket.Data.Repositories → Aquí estarían todos los repositorios que requiera nuestra aplicación

Rocket.Services

Para mi esta es la capa más importante ya que aquí tendríamos las reglas de negocio, validaciones, cálculos, etc.

Esta capa estaría compuesto por al menos los siguientes namespaces:

Rocket.Services → Aquí estarían los servicios de nuestra aplicación, por ejemplo: ClientesService, PagosService, etc.

La firma típica de los métodos de cada servicio serian algo parecido a lo siguiente:

C#
public Result<TResponse> Metodo(TRequest request);

// Ejemplo
public Result<LoginResponse> Login(LoginRequest request);

De esta forma, en caso de ser necesario agregar un parámetro nuevo a la función simplemente se define una propiedad en la clase Request y se haría lo mismo para agregar un campo más en la respuesta pero en la clase Response correspondiente.

Un punto importante

Aunque ésta arquitectura permite usar interfaces para los servicios y repositorios actualmente solo agregué clases concretas ya que donde trabajo no usamos pruebas unitarias y me topé con un poco de resistencia a incluirlas.

Rocket.Web

Esta es la capa de presentación, en mi caso es una aplicación Blazor Server pero bien podría ser una aplicación MAUI o un WebAPI pero lo importante es que este proyecto no debe contener lógica de negocio, solo se encarga de la interacción del usuario con nuestra aplicación.

Conclusión

Esta arquitectura multicapa simplificada nació de una necesidad de mantener orden en un sistema relativamente grande sin caer en complejidad innecesaria. Actualmente es la forma en que estructuró las aplicaciones .NET porque ofrece un equilibrio entre claridad, simplicidad y capacidad de crecimiento.

Creando un filtro booleano personalizado para MudDataGrid (BooleanFilterColumn)

En uno de mis proyectos recientes desarrollados con .NET 9 y MudBlazor, me encontré con la necesidad de mejorar los filtros que ofrece MudDataGrid. Si bien el componente ya trae una base sólida, para columnas booleanas quería algo más práctico y visual, algo similar a lo que vemos en sistemas administrativos profesionales.

Por eso construí un componente personalizado llamado BooleanFilterColumn, que me permite seleccionar rápidamente entre Todos, Activo o Inactivo, usando un pequeño popover con checkboxes.

En este artículo te cuento por qué lo hice, cómo funciona y cómo puedes utilizarlo tú también.

¿Por qué crear un filtro booleano personalizado?

MudBlazor permite aplicar filtros personalizados, pero para las columnas booleanas normalmente solo tenemos opciones binarias o expresiones. Yo quería algo más intuitivo:

  • Un botón de filtro con el icono que cambia según si hay filtros aplicados.
  • Un popover con checkboxes para seleccionar:
    • Todos
    • Activos
    • Inactivos
  • Aplicar o limpiar el filtro con un solo clic.
  • Soporte para personalizar textos (por ejemplo: “Activo”, “Inactivo”, “Todos”, etc.)

El resultado fue este componente Razor:

[C#] BooleanFilterColumn.razor
@typeparam T

<MudIconButton OnClick="@(() => _open = true)" Icon="@_icon" Size="Size.Small" />
<MudOverlay Visible="@_open" OnClick="@(() => _open = false)" />
<MudPopover Open="@_open" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" Class="px-4 py-2">
    <MudStack Spacing="0">
        <MudCheckBox T="bool" Label="@AllText" Size="Size.Small"
                     Value="@_selectAll"
                     ValueChanged="@SelectAllChanged" />
        <MudStack Spacing="0">
            <MudCheckBox T="bool" Label="@TrueText"
                         Value="@_selectedValues.Contains(true)"
                         ValueChanged="@(v => ValueChanged(v, true))"
                         Size="Size.Small" />
            <MudCheckBox T="bool" Label="@FalseText"
                         Value="@_selectedValues.Contains(false)"
                         ValueChanged="@(v => ValueChanged(v, false))"
                         Size="Size.Small" />
        </MudStack>
        <MudStack Row="true">
            <MudButton OnClick="Clear">@ClearButtonText</MudButton>
            <MudSpacer/>
            <MudButton Color="Color.Primary" OnClick="Apply">@ApplyButtonText</MudButton>
        </MudStack>
    </MudStack>
</MudPopover>

@code {
    [Parameter] public IEnumerable<T> Items { get; set; } = Enumerable.Empty<T>();
    [Parameter] public Func<T, bool?> ValueSelector { get; set; } = default!;
    [Parameter] public FilterContext<T> Context { get; set; } = default!;
    [Parameter] public string ApplyButtonText { get; set; } = "Apply";
    [Parameter] public string AllText { get; set; } = "All";
    [Parameter] public string ClearButtonText { get; set; } = "Clear";
    [Parameter] public string TrueText { get; set; } = "True";
    [Parameter] public string FalseText { get; set; } = "False";

    private bool _open;
    private bool _selectAll = true;
    private string _icon = Icons.Material.Outlined.FilterAlt;

    private HashSet<bool> _selectedValues = new();
    private FilterDefinition<T>? _filterDefinition;

    protected override void OnParametersSet()
    {
        if (_selectAll)
            _selectedValues = new HashSet<bool> { true, false };

        _filterDefinition ??= new FilterDefinition<T>
        {
            FilterFunction = x =>
            {
                var val = ValueSelector(x);
                return val is not null && _selectedValues.Contains(val.Value);
            }
        };
    }

    private void SelectAllChanged(bool value)
    {
        _selectAll = value;
        if (value)
            _selectedValues = new HashSet<bool> { true, false };
        else
            _selectedValues.Clear();
    }

    private void ValueChanged(bool value, bool val)
    {
        if (value)
            _selectedValues.Add(val);
        else
            _selectedValues.Remove(val);

        _selectAll = _selectedValues.Count == 2;
    }

    private async Task Clear()
    {
        _selectedValues.Clear();
        _selectAll = false;
        _icon = Icons.Material.Outlined.FilterAlt;
        if (_filterDefinition is not null)
            await Context.Actions.ClearFilterAsync(_filterDefinition);
        _open = false;
    }

    private async Task Apply()
    {
        _icon = _selectedValues.Count == 2
            ? Icons.Material.Outlined.FilterAlt
            : Icons.Material.Filled.FilterAlt;

        if (_filterDefinition is not null)
            await Context.Actions.ApplyFilterAsync(_filterDefinition);

        _open = false;
    }
}

¿Cómo funciona internamente?

  • Recibe una lista de items (Items) provenientes del contexto de filtrado de MudDataGrid.
  • Extrae los valores booleanos distintos (true/false) utilizando ValueSelector.
  • Muestra tres opciones:
    • Todos
    • TrueText
    • FalseText
  • Actualiza el ícono dependiendo del estado del filtro.
  • Construye un FilterDefinition<T> personalizado y lo aplica usando:
await Context.Actions.ApplyFilterAsync(_filterDefinition);

Además, todo vive dentro de un MudPopover, usando MudCheckBox para representar las opciones.

Ejemplo de uso: BooleanFilterColumn

Así es como lo estoy usando actualmente en una columna booleana (por ejemplo, “Activo”)

<PropertyColumn Property="x => x.Activo" Title="Activo">
    <CellTemplate>
        <MudCheckBox Value="@context.Item.Activo" ReadOnly="true"/>
    </CellTemplate>
    <FilterTemplate>
        <BooleanFilterColumn T="Rubro"
                             Items="context.Items"
                             ValueSelector="x => x.Activo"
                             Context="context"
                             AllText="Todos"
                             ApplyButtonText="Aplicar"
                             ClearButtonText="Limpiar"
                             TrueText="ACTIVO"
                             FalseText="INACTIVO" />
    </FilterTemplate>
</PropertyColumn>

Con eso, el usuario tiene un filtro booleano más claro y fácil de usar.

Conclusión

Este filtro ha sido un gran agregado a mi MudDataGrid, haciéndolo más amigable y funcional para columnas booleanas. Si también estás creando aplicaciones administrativas con MudBlazor, probablemente te sea muy útil tener un filtro tan visual y práctico.

Componentes para Blazor

Recientemente, en mi trabajo tomamos la decisión de rehacer un sistema desarrollado con ASP.NET MVC 5 debido a su alta acumulación de deuda técnica. Aunque gran parte de esa deuda se debía a que el desarrollo inicial estuvo orientado a resolver necesidades operativas inmediatas (lo cual fue una buena decisión en su momento), con el tiempo quedó claro que MVC no era la mejor opción para un sistema de ese tamaño.

Como parte del proyecto, se me encomendó buscar alternativas para la nueva versión del sistema. Inicialmente, pensé en usar WebForms para organizar mejor las vistas, pero descubrí que ya no es soportado por las versiones más recientes de .NET. Sin embargo, en mi investigación me topé con Blazor, una tecnología que no solo es moderna, sino que también permite construir componentes reutilizables y organizados, algo similar a lo que buscaba.

El reto con los Grids y Componentes

El sistema original utilizaba componentes de DevExpress y SyncFusion. Aunque DevExpress nos facilitaba un desarrollo ágil, no cumplía con un requerimiento clave: los grids no eran responsivos, algo crítico dado que el sistema debía ser accesible desde dispositivos móviles. Por ello, complementamos con los grids de SyncFusion, que sí ofrecían este soporte.

Con Blazor seleccionado como base para el desarrollo, la siguiente tarea fue buscar una librería de componentes que permitiera construir una aplicación web moderna y responsiva, sin sacrificar funcionalidad ni estética. Este artículo detalla las opciones que evalué y la elección final.

Librerías de componentes para Blazor

Durante mi análisis, encontré varias opciones interesantes. Aquí presento una lista de las principales librerías disponibles, junto con algunas notas relevantes:

DevExpress (De pago): Conocido por su robustez y herramientas avanzadas, aunque con un costo elevado.

Telerik (De pago): Amplia colección de componentes con soporte profesional.

SyncFusion (De pago / Community): Excelente soporte para grids responsivos, además de una licencia gratuita para pequeñas empresas y desarrolladores individuales.

SemanticUI (Gratuita): Diseño limpio y moderno, aunque requiere integración adicional para ciertos casos.

FomaticUI (Gratuita): Un fork de SemanticUI con mejoras, como un componente DatePicker.

jQWidgets (De pago): Basado en jQuery, ideal para quienes ya estén familiarizados con esa tecnología.

Radzen (De pago / Community): Compatible con Blazor Server y WASM, con licencia gratuita limitada.

MudBlazor (Gratuita): Ofrece componentes modernos y responsivos, con una curva de aprendizaje accesible.

Blazorise (De pago / Community): Soporte para múltiples frameworks CSS, ideal para proyectos personalizados.

FluentUI (Gratuita): Basado en los principios de diseño de Microsoft, ideal para aplicaciones con estilo Office.

MudBlazor – La Elección Final

Después de evaluar varias opciones, nos decidimos por MudBlazor. Esta librería destacó por su facilidad para replicar el layout del sistema anterior y por las características responsivas de su grid. Por defecto, el grid de MudBlazor ajusta su comportamiento en pantallas pequeñas, permitiendo un desplazamiento vertical en lugar de horizontal, justo lo que necesitábamos para mejorar la experiencia en dispositivos móviles.