Blazor es un nuevo framework open-source creado por el gigante de Redmond Microsoft que viene incluido de forma oficial en la nueva version de .NET Core 3.0 para desarrollar Single Page Applicactions (SPA), utilizando Razor y C#. Su nombre proviene de las palabras “Browser” y “Razor”, este framework se ejecuta mediante estándares web, por lo que no será necesario utilizar ningún plugin ni realizar ninguna “transpilación” para que funcione, esto es posible porque todo el código se ejecuta en el navegador mediante un .NET Runtime implementado en WebAssembly.

¿En qué se diferencia Blazor de otras herramientas como Silverlight? Blazor se basa en HTML, CSS y otras tecnologías estándar de la web. Es un framework SPA moderno inspirado por otros frameworks ya existentes, como React, Angular y Vue, por lo que se trata de una herramienta muy potente para el desarrollo de frontales web con la potencia de C#.

Para la ejecución de Blazor en el navegador, se ha de llevar a cabo el desarrollo de un .NET Runtime (Mono) que funcione sobre WebAssembly (para navegadores antiguos sobre asm.js).

Esto es lo que ocurre al construir y ejecutar una aplicación en un navegador:

1. El código en C#/Razor es compilado en ensamblados de .NET.
2. Los ensamblados y el .NET Runtime son descargados por el navegador.
3. Blazor utiliza Jasvascript para lanzar el .NET Runtime y configurarlo para cargar los ensamblados referenciados.
4. La manipulación del DOM y las llamadas a la API del navegador son gestionadas por Blazor en tiempo de ejecución mediante la interoperabilidad con Javascript.

.

Explicando el framework

Inicialmente era un proyecto separado independiente en GitHub, pero finalmente Microsoft decidió integrarlo en ASP. NET Core 3.0. Éste nos brinda toda la potencia para construir aplicaciones web de tipo SPA capaces de ejecutar en cualquier navegador moderno que incluyen dentro del propio framework, inyección de dependencias, enrutamiento, componentes, seguridad, gestión de estado y errores, incluso interoperabilidad con JavaScript.

Como vimos en la instalación existen dos modelos de aplicaciones Blazor: Aplicaciones Blazor de servidor

En este modelo, basado en la plantilla blazorserver, las aplicaciones que se muestran en el navegador del usuario se comunican con el servidor mediante SignalR Core, de cara al usuario, toda la interacción en la IU sucede en el navegador, aunque en realidad la renderización de la página y la lógica de respuesta es ejecutada en el servidor de back-end.

Instalación de las herramientas

Antes de empezar, necesitamos en nuestro entorno de desarrollo la última versión de .NET Core 3.0 SDK, y las plantillas Blazor que se instalan con el siguiente comando desde la CLI:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview9* 

Al finalizar, vemos las plantillas con prefijo Blazor que sirven para crear aplicaciones tanto del lado servidor (blazorserver), como lado cliente (blazorwasm), debe quedar como muestra la siguiente imagen:

En la lista vemos las 2 plantillas disponibles para crear aplicaciones Blazor:

1. Blazor Server App (blazorserver): Esta plantilla genera una aplicación Blazor que se comunica entre el navegador del usuario y el servidor .Net Core en back-end.
2. Blazor WebAssembly (blazorwasm): Esta plantilla crea una aplicación cliente Blazor, que funciona totalmente en el navegador del usuario mediante una tecnología llamada WebAssembly.

Para desarrollar con Blazor, podemos elegir Visual Studio Code que no requiere configuración adicional o Visual Studio 2019 que necesita añadir las extensiones desde el MarketPlace.