Blazor: Qué es y características

¿Qué es Blazor?

Blazor es un framework del equipo de Microsoft ASP.NET que permite a los desarrolladores escribir aplicaciones de una sola página (SPA) sin JavaScript. Tiene la opción de ser ejecutado en el navegador del cliente o de ejecutarse en el servidor.

Incluye todo lo necesario para poder construir aplicaciones SPA potentes como:

• Componentes
• Implementación de componentes basada en MVVM
• Bindings
• Routing
• Inyección de dependencias
• Gestión de errores
• Plantillas para la UI
• Herramientas de compilación
• Herramientas de depuración

El framework está construido en .NET que se ejecuta en el navegador a través de WebAssembly, y se basa en HTML, CSS y otras tecnologías web estándar. Blazor apunta en tiempo de ejecución a Mono WebAssembly, permitiendo así que .NET se ejecute en el navegador del cliente. El nombre está inspirando en Browser + Razor (que es un motor de vistas en ASP.NET). En esta configuración, los recursos de la aplicación, incluyendo los archivos .dll, se entregan al cliente y se ejecutan en el tiempo de ejecución de Mono WebAssembly. Esto es lo que hace posible la transición de JavaScript a C#. Pero…

¿Qué es WebAssembly?

WebAssembly (abreviado “Wasm“) es un conjunto de instrucciones diseñadas para ejecutarse en cualquier host capaz de interpretar esas instrucciones, o compilarlas en código máquina nativo y ejecutarlas.

Wasm es un conjunto de instrucciones con un formato binario específico. Por lo tanto, cualquier host (hardware o software) que se adhiera a esta especificación es capaz de leer los binarios y ejecutarlos, ya sea interpretando o compilando directamente al lenguaje de máquina específico del dispositivo.

Wasm es similar al conjunto de instrucciones comunes (Lenguaje Intermedio Común) al que el código fuente .NET compila. Al igual que .NET, Wasm puede generarse a partir de lenguajes superiores como C#. Blazor no requiere que .NET esté instalado en el cliente para funcionar a través de WebAssembly.

Client-Side Rendering

Este es el modelo de hospedaje que suele ser el que más interés despierta, y por una buena razón. Este modelo ofrece un competidor directo a los SPA de JavaScript como Angular, Vue, y React.

Usando WebAssembly, somos capaces de escribir nuestra lógica de UI usando C# y no JavaScript.

Una versión del tiempo de ejecución de Mono .NET, compilada para WebAssembly, se descarga en el navegador del cliente junto con las DLLs de la aplicación y cualquier dependencia. Una vez que todo está en el navegador, el tiempo de ejecución de Mono se arranca, y éste, a su vez, carga y ejecuta las DLLs de la aplicación Blazor.

Vale, pero, ¿cuál es el tamaño de la descarga necesaria para ejecutar de este modo? Alrededor de 2.4mb en las primeras versiones de Blazor, que no está nada mal, considerando que hay un tiempo de ejecución .NET descargado en el navegador. Esto es mucho cuando se compara con algunos frameworks de JavaScript. Con las siguientes versiones de WebAssembly, el equipo espera reducir ese tamaño significativamente. El primer prototipo de Blazor usó un tiempo de ejecución .NET muy compacto, que compiló a sólo 60k de código de WebAssembly.

Con la última versión de Blazor se ha implementado Lazy Loading lo cual permite que se cargue bajo demanda sólo los ensamblados con la parte de la aplicación que estamos utilizando en ese momento, con lo que se va a aligerar este peso inicial del que hablamos. Además, estos ensamblados, una vez cargados, se quedan en memoria para que si fuese necesario utilizarse posteriormente, no sea necesario que se descarguen de nuevo.

Beneficios de ejecutar Blazor en Cliente

• Se compila a archivos estáticos, lo que significa que, no hay necesidad de un tiempo de ejecución .NET en el servidor
• El trabajo se descarga del servidor al cliente
• Las aplicaciones se pueden ejecutar en un estado offline
• Se comparte código, por ejemplo, los objetos de C# pueden ser compartidos entre el cliente y el servidor fácilmente para nuestras llamadas al Server y Cliente

Inconvenientes de ejecutar Blazor en Cliente

• Carga útil. Ahora mismo, si creas un nuevo proyecto Blazor y no usas la última versión que acaba de salir, tiene cierto peso en mb. Con la nueva versión, usando Lazy Loading, se espera ir reduciendo este peso, aunque puede ser mayor que el de otros frameworks de JS.
• Tiempo de carga. Debido al tamaño de la descarga, los dispositivos con conexiones deficientes pueden experimentar tiempos de carga iniciales más largos.
• Tiempo de ejecución restringido. Las aplicaciones tienen que operar en el sandbox del navegador y están sujetas a las mismas restricciones de seguridad que cualquier aplicación JavaScript, es decir, tenemos C# pero no podemos hacer todo lo que se puede hacer con este lenguaje, nos vemos restringidos a lo mismo que cualquier framework JS.

Caso de uso ideal

Blazor WebAssembly está construido para ser un competidor directo de los frameworks modernos de JavaScript. Por lo tanto, en cualquier lugar donde se busque usar uno de esos frameworks, se podría considerar el uso de Blazor.

También es importante señalar que el uso de Blazor WebAssembly no requiere el uso de .NET en el servidor. Lo que significa que si tienes un backend escrito en Node, PHP o Rails puedes usar Blazor como frontend sin problemas ya que Blazor WebAssembly compila en archivos estáticos.

Server-Side Rendering

En este modelo, la aplicación Blazor se ejecuta en el servidor sobre el tiempo de ejecución completo de .NET Core. Cuando el usuario carga la aplicación se descarga un pequeño archivo JavaScript que establece una conexión en tiempo real y bidireccional SignalR con el servidor. Cualquier interacción que el usuario tenga con la aplicación se transmite de nuevo al servidor a través de la conexión SignalR para que el servidor la procese. Una vez que el servidor ha terminado, cualquier actualización de la interfaz de usuario se transmite de nuevo al cliente y se aplica al DOM.

Todas esas interacciones y actualizaciones de UI son constantemente enviadas de ida y vuelta al servidor, esto puede parecer bastante pesado en un principio. El equipo de Blazor hizo algunas pruebas de carga en el servidor para comprobar el rendimiento y estos fueron los resultados.

Prueba 1 - Instancia estándar D1 v2 en Azure (1vCPU y 3.5GB de memoria)

La aplicación podría manejar más de 5000 usuarios activos simultáneos sin ninguna degradación visible en el rendimiento.

Prueba 2 - Instancia estándar D3 v2 en Azure (4vCPU & 14GB de memoria)

La aplicación podría manejar más de 20.000 usuarios activos simultáneos sin ninguna degradación visible en el rendimiento. Estas son cifras bastante buenas. Lo principal que descubrieron es que la memoria y la latencia son los principales cuellos de botella de las aplicaciones de Blazor Server. Si la latencia superaba los 200ms, el rendimiento se veía afectado.

Beneficios de ejecutar Blazor Server

• Se ejecuta en el tiempo de ejecución completo del núcleo de .NET
• Ciclo de desarrollo rápido
• Pequeño tamaño de descarga inicial
• El código se mantiene en el servidor y no se descarga al cliente

Inconvenientes de ejecutar Blazor Server

• No funciona bien en ambientes de alta latencia
• No funciona offline siempre se requiere una conexión constante al servidor
• Gran demanda de recursos en el servidor

Caso de uso ideal

Blazor Server puede ser usado para muchos escenarios, pero donde hay poca latencia y pocos problemas de conectividad es en aplicaciones de intranet o aplicaciones de cara al público de baja demanda.

¿Cómo es el código Blazor?

Un ejemplo sencillo para que veas cómo es el código de Blazor sería el siguiente:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

En el ejemplo anterior tenemos un contador que se va a ir incrementando a cada pulsación del botón.

Los componentes Blazor se implementan en archivos *.cshtml usando una combinación de C# y HTML.
La interfaz de usuario de un componente se define usando HTML mientras que la lógica de representación dinámica como bucles, condicionales, expresiones, etc. se añaden usando una sintaxis de C# incrustada.

En el bloque @functions, podemos definir todas las propiedades que se utilizan en la vista, y los métodos se vinculan con el control como un evento. Cuando se compila una aplicación Blazor, el HTML y la lógica de renderizado de C# se convierten en una clase componente, y el nombre de la clase generada coincide con el nombre del archivo. Pero…

¿Qué es un Blazor Component?

Un componente es un trozo autónomo de interfaz de usuario, como una página, un diálogo o un formulario. Las aplicaciones de Blazor se crean utilizando componentes que son flexibles, ligeros y que pueden anidarse, reutilizarse y compartirse entre proyectos. Un componente es el elemento base de la aplicación Blazor, es decir, cada página se considera como un componente en Blazor.

¿Qué herramientas puedo usar para programar Blazor?

Puedes trabajar con Blazor desde cualquier S.O. (Windows, Linux o Mac) al utilizar .NET Core que es multiplataforma. Como IDE puedes utilizar Visual Studio, o Visual Studio Code o cualquier otro IDE en el que te sientas cómodo, eres totalmente libre de elegir el que más se adapte a tus conocimientos. Usando Visual Studio tenemos la ventaja de que viene ya preparado para trabajar con Blazor y siempre nos ayuda con el uso de plantillas, intellisense, debugging integrado…

¿Qué es lo bueno de Blazor?

Tener un mismo lenguaje para el Back y para el Front hace que podamos desarrollar más rápido y con menos errores, te conviertes en desarrollador FullStack, aunque siempre necesitarás conocer HTML, CSS, JavaScript, pero es un gran avance.

La reutilización de código: podemos referenciar la misma librería desde cliente y servidor. Si tienes un modelo de datos que lo usas en servidor para tu API para conectarte a una BD puedes utilizarlo también en cliente sin tener que duplicarlo en JS con la posibilidad de que cometas errores o que no esté actualizado cuando hagas cambios.

Si utilizamos la versión en cliente, utilizamos el navegador para ejecutar la aplicación. Con lo que mucha carga de trabajo del servidor la delegamos en el cliente y ahorramos trabajo a nuestros servidores, pudiendo ser más livianos, pudiendo dar servicio a más clientes con los mismos recursos. Los cambios en el DOM son muy rápidos dado que se utiliza un DOM virtual, como en React, y sólo se repintan los cambios.

Interoperabilidad con JavaScript: ejecución desde C

Mientras que WebAssembly tiene el potencial de acabar con nuestra dependencia de JavaScript, éste no va a desaparecer ya. Todavía hay muchas cosas que WebAssembly no puede hacer. Si estás ejecutando Blazor del lado del servidor, no tienes WebAssembly. Entonces, ¿cómo manejamos este problema?

La respuesta es interoperar con JavaScript. Cuando no podemos hacer lo que necesitamos usando sólo código .NET, podemos usar la abstracción IJSRuntime para hacer llamadas a funciones de JavaScript. Incluso podemos hacer que las funciones JavaScript hagan llamadas a nuestro código C#.

Por poner unos ejemplos muy básicos, para llamar a JavaScript desde C# se puede hacer con un código como el siguiente:

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<div @ref="divElement">Text during render</div>

@code {
    private ElementReference divElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync(
                "setElementText", divElement, "Text after render");
        }
    }
}

En el cual vamos a cambiar el texto del div después de que se produzca el primer renderizado de la página

Y para llamar a C# desde JavaScript sería algo como lo siguiente:

Blazor:

<button type="button" class="btn btn-primary"
        onclick="exampleJsFunctions.returnArrayAsyncJs()">
    Trigger .NET static method ReturnArrayAsync
</button>

@code {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

JavaScript:

window.exampleJsFunctions = {  
  returnArrayAsyncJs: function () {
    DotNet.invokeMethodAsync('BlazorWebAssemblySample', 'ReturnArrayAsync')
      .then(data => {
        data.push(4);
          console.log(data);
      });
  }
};

Lo cual debería, una vez ejecutado, mostrar por consola del navegador lo siguiente:

Array(4) [ 1, 2, 3, 4 ]

¿Sustituirá Blazor a JavaScript?

Blazor es una alternativa a JavaScript, soporta muchas de las características estándar del navegador que se usan en las aplicaciones web, pero no todas. En los casos en que Blazor no soporta una característica, puede ser necesaria una pequeña cantidad de código JavaScript para lograr los requisitos de tu aplicación web pero ya hemos visto que se puede hacer con InterOp.

Si Blazor algún día será capaz de reemplazar completamente a JavaScript está por verse, pero al menos tenemos esta alternativa a los frameworks Angular, React o Vue.

¿Puedo usar componentes BootStrap?

Si queremos, podemos crear componentes Blazor de BootStrap, encapsulando estos componentes tanto en lo referente a su código HTML como a todo lo relativo a JS de dicho componente, creando tu propio componente Blazor para por ejemplo un Grid BootStrap, pero te recomiendo que antes de ponerte a hacer esto revises lo que te muestro en el punto siguiente, porque seguramente ya se la haya ocurrido a alguien y ya lo tengas funcionando Plug&Play.

Recursos

Blazor ya lleva un tiempo entre nosotros y la comunidad ha desarrollado un sinfín de componentes, gratuitos y de pago, la mayoría de las necesidades que puedas tener van a estar cubiertas, si bien es cierto que al ser tan nuevo no vas a tener la cantidad y variedad que puedas tener en JavaScript.

Para lo mencionado anteriormente de BootStrap con una simple búsqueda en Google podemos encontrar los siguientes:

• https://blazorise.com/docs/usage/bootstrap/

• https://github.com/chanan/BlazorStrap

Como compendio de recursos, tanto para componentes como para ejemplos de aplicaciones te recomiendo que le des un vistazo al siguiente enlace:

• https://github.com/AdrienTorris/awesome-blazor

Conclusiones

Podemos usar Blazor desde ya siendo desarrolladores de C#, puesto que vamos a aprovechar todo lo que conocemos de dicho lenguaje. En cambio, si vienes de otros frameworks SPA, tendrás que ir viendo las equivalencias entre tu conocimiento de dicho framework y Blazor, pero los conceptos son bastante parecidos con lo que la curva de aprendizaje no debe de ser elevada.

El conocimiento que tengas de JavaScript te va a venir muy bien, puede ser que te encuentres con la necesidad de reutilizar algún componente concreto que no encuentres en Blazor y con Interop podrás hacerlo fácilmente.