Saltar al contenido

C# en la WEB: Blazor

Compartir en:

¿Alguna vez te has preguntado cómo sería tu vida si pudieras usar C# para desarrollar aplicaciones web en lugar de ese lenguaje extraño llamado JavaScript? Pues tus sueños se han hecho realidad con Blazor, el framework de Microsoft que te permite hacer exactamente eso. Con Blazor, puedes elegir entre dos tipos de aventuras: Blazor Server, en la que tu aplicación se ejecuta en el servidor y te aseguras de que tu experiencia sea segura y rápida, o Blazor WebAssembly, en la que tu aplicación se ejecuta directamente en el navegador y te aseguras de que tu experiencia sea fluida y emocionante. ¡Escoge tu camino y prepárate para conquistar el mundo del desarrollo web con C#!

Blazor Server

Blazor Server es una implementación de servidor de Blazor en la que la lógica de la aplicación se ejecuta en el servidor y las actualizaciones de la interfaz de usuario se realizan mediante el protocolo SignalR. Este enfoque proporciona un rendimiento rápido y seguro, y es adecuado para aplicaciones con una carga de trabajo de servidor significativa.

En este caso, Blazor Server, la lógica de negocio de la aplicación se ejecuta en el lado del servidor. El código C# se ejecuta en un entorno de .NET en el servidor y se utiliza para generar la interfaz de usuario dinámica de la aplicación.

El protocolo SignalR se utiliza para mantener una conexión abierta entre el cliente y el servidor y realizar actualizaciones de la interfaz de usuario en tiempo real. Cuando ocurre algún evento en la aplicación, como una acción de usuario o una actualización de datos, la interfaz de usuario se actualiza automáticamente en el cliente. Esto permite una experiencia de usuario más rápida y suave, ya que los usuarios no tienen que recargar la página para ver los cambios.

Fuente : https://learn.microsoft.com/es-es/aspnet/core/blazor/?view=aspnetcore-7.0

Este enfoque de Blazor Server es ideal para aplicaciones con una carga de trabajo de servidor significativa. Ya que toda la lógica de negocio se ejecuta en el lado del servidor, el rendimiento de la aplicación es rápido y seguro. Además, esto también significa que el código de la aplicación no se expone al cliente, lo que proporciona una mayor seguridad para la aplicación.

Es importante mencionar que Blazor Server tiene algunas limitaciones en cuanto a la funcionalidad disponible en comparación con WebAssembly, debido a la dependencia en el servidor para su ejecución, no tiene acceso a todas las características del sistema del cliente como acceso al almacenamiento local o la capacidad de descargar archivos. Sin embargo, en la mayoría de los casos, Blazor Server es una excelente opción para aplicaciones web de pequeña a mediana envergadura, que requieren un alto rendimiento y seguridad.

Blazor WebAssembly

Por otro lado, Blazor WebAssembly es una implementación cliente de Blazor en la que la aplicación se ejecuta directamente en el navegador utilizando WebAssembly. Esto significa que la aplicación se descarga y se ejecuta en el lado del cliente, permitiendo una experiencia de usuario más fluida y rápida. Sin embargo, debido a que la aplicación se ejecuta en el lado del cliente, es importante asegurarse de que se implementen medidas de seguridad adecuadas.

Blazor WebAssembly es la segunda implementación disponible del framework de Microsoft llamado Blazor. Al igual que Blazor Server, Blazor WebAssembly permite desarrollar aplicaciones web utilizando el lenguaje C# en lugar de JavaScript. Sin embargo, a diferencia de Blazor Server, en este caso la lógica de negocio de la aplicación se ejecuta directamente en el lado del cliente.

La aplicación se descarga desde el servidor y se ejecuta en el navegador utilizando la tecnología WebAssembly. WebAssembly es un estándar web que permite a los navegadores ejecutar código binario de alta performance, similar a como lo harían en una aplicación nativa. Esto significa que la aplicación se ejecuta directamente en el navegador, lo que permite una experiencia de usuario más fluida y rápida ya que no necesita realizar peticiones al servidor para actualizar la interfaz de usuario.

Sin embargo, debido a que la aplicación se ejecuta en el lado del cliente, es importante asegurarse de que se implementen medidas de seguridad adecuadas. El código de la aplicación se descarga y se ejecuta en el lado del cliente, por lo que es importante garantizar que el código no ha sido alterado o comprometido antes de su ejecución. Además, también es importante proteger la aplicación contra posibles ataques, como la inyección de código malicioso.

¡Blazor WebAssembly es como el caballo de carreras de tu aplicación web! Permite que tu aplicación corra más rápido y suavemente, ya que el código se ejecuta en el lado del cliente. Pero ten cuidado, debes asegurarte de que está seguro antes de salir a la carrera, ya que el código está corriendo directamente en el navegador del usuario. En general, es una excelente opción para aplicaciones web de mediana a alta envergadura que necesitan ser rápidas y proporcionar una experiencia de usuario fluida.

Fuente: https://learn.microsoft.com/es-es/aspnet/core/blazor/?view=aspnetcore-7.0

Ejemplos

Aquí tenéis algún ejemplo:

<h1>Todo List</h1>
<ul>
    @foreach (var item in items)
    {
        <li>@item</li>
    }
</ul>
<input type="text" bind="newItem" placeholder="Add a new item" />
<button class="btn btn-primary" onclick="@AddItem">Add</button>
@code {
    private string newItem;
    private List<string> items = new List<string>();
    private void AddItem()
    {
        items.Add(newItem);
        newItem = "";
    }
}

Y en Javascript:

<h1>Todo List</h1>
<ul id="item-list"></ul>
<input type="text" id="new-item" placeholder="Add a new item">
<button id="add-button" class="btn btn-primary">Add</button>
<script>
    var items = [];
    var newItem = document.getElementById("new-item");
    var addButton = document.getElementById("add-button");
    var itemList = document.getElementById("item-list");
    addButton.addEventListener("click", function(){
        items.push(newItem.value);
        newItem.value = "";
        renderList();
    });
    function renderList(){
        itemList.innerHTML = "";
        for(var i=0; i < items.length; i++){
            var li = document.createElement("li");
            li.innerHTML = items[i];
            itemList.appendChild(li);
        }
    }
</script>

Quizás en un ejemplo tan simple parezca lo mismo, pero cuando la cosa se complica es cuando Blazor brilla. Sin contar que dispones de todas las librerías de .NET para hacer lo que quieras, y dado que estas se ejecutan en el server (en el caso de Blazor server), puedes aprovechar innumerables ventajas de el ecosistema Microsoft.

Si tu Backend es ASP.Net core, las cosas se vuelven tremendamente sencillas, el código prácticamente no cambia, todo tu trabajo de Backend puede ser aprovechado en las clases del front ¿No es magnífico?

Aquí tenéis otro ejemplo con una clase:

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Username</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var user in users)
        {
            <tr>
                <td>@user.id</td>
                <td>@user.name</td>
                <td>@user.username</td>
                <td>@user.email</td>
            </tr>
        }
    </tbody>
</table>
@code {
    private List<User> users;
    protected override async Task OnInitializedAsync()
    {
        var httpClient = new HttpClient();
        var response = await httpClient.GetAsync("https://jsonplaceholder.typicode.com/users");
        users = JsonSerializer.Deserialize<List<User>>(await response.Content.ReadAsStringAsync(), new JsonSerializerOptions { PropertyNameCaseInsensitive = true });
    }
    private class User
    {
        public int id { get; set; }
        public string name { get; set; }
        public string username { get; set; }
        public string email { get; set; }
    }
}

Conclusión

En general, Blazor ofrece una gran ventaja al permitir a los desarrolladores escribir código en C# en lugar de JavaScript. Esto significa que los desarrolladores pueden aprovechar sus conocimientos existentes de C# para crear aplicaciones web, lo que puede ahorrar tiempo y esfuerzo. Además, Blazor es compatible con una amplia variedad de herramientas y bibliotecas existentes de .NET, lo que facilita aún más el desarrollo de aplicaciones web.

¿Qué modelo de hospedaje Blazor debo elegir? Fuente : https://learn.microsoft.com/es-es/aspnet/core/blazor/hosting-models?view=aspnetcore-7.0

Blazor es un framework relativamente nuevo y todavía está evolucionando, pero ha ganado una gran popularidad en la comunidad de desarrollo de .NET debido a su capacidad para permitir a los desarrolladores crear aplicaciones web utilizando C# en lugar de JavaScript.

Blazor ofrece varias ventajas importantes. Una de las más destacadas es la capacidad de reutilizar código existente escrito en C# en lugar de tener que aprender un lenguaje de programación completamente nuevo. También ofrece una experiencia de desarrollo similar a la de desarrollar aplicaciones de escritorio o móviles, lo que significa que los desarrolladores pueden aprovechar sus habilidades existentes y herramientas para desarrollar aplicaciones web.

Resumiendo, Blazor es un framework de Microsoft para desarrollar aplicaciones web con C#. Ofrece dos enfoques diferentes: Blazor Server, que se ejecuta en el servidor y proporciona una experiencia segura y rápida, y Blazor WebAssembly, que se ejecuta directamente en el navegador y proporciona una experiencia de usuario más fluida. Ambos enfoques ofrecen la ventaja de poder escribir código en C# en lugar de JavaScript y son compatibles con una amplia variedad de herramientas y bibliotecas existentes de .NET.


Juan Ibero

Inmerso en la Evolución Tecnológica. Ingeniero Informático especializado en la gestión segura de entornos TI e industriales, con un profundo énfasis en seguridad, arquitectura y programación. Siempre aprendiendo, siempre explorando.

Compartir en:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *