¿Qué es Blazor?

Con la salida de Visual Studio 2022, Blazor se ha convertido en un caballo de batalla de Microsoft para el desarrollo de aplicaciones tipo SPA, brindando a los desarrolladores, poder combinar código HTML, CSS y el poderosísimo C#.

El ecosistema web hoy en día

El primer paso hacia el aprendizaje de Blazor, es saber, precisamente, qué es Blazor, pero, antes de responder esa pregunta, analicemos el ecosistema de las aplicaciones web hoy en día. Normalmente, cuando creamos una aplicación de servidor, también llamada backend, utilizamos alguna plataforma bastante popular, llámese Java, .NET, node.js, entre muchas otras que existen.

Esto es algo muy común hoy en día. También, es común, que se escriban aplicaciones que se ejecutarán del lado del cliente, aplicaciones que son llamativas e interactivas. Estos desarrollos, comúnmente utilizan algún framework popular, como por ejemplo, Vue, Angular, React, etcétera, pero aprender alguno de ellos, e incluso, varios de ellos conlleva una curva de aprendizaje, que puede ser algo tardada para la rapidez con la que se mueven las cosas hoy en día.

Y a final de cuentas, todos ellos, generan código JavaScript, el cual, admitámoslo, es algo lento y carece de características potentes que brindan lenguajes como C# ó Java. Aunado a esto, si recordamos los lenguajes y frameworks que se utilizan para el backend y el frontend, vemos que son completamente diferentes. Es decir, existe un déficit de utilización de tu lenguaje preferido en el lado del frontend, lo que significa, que tendrás que aprender forzosamente a trabajar con JavaScript, ya sea puro o con algún framework.

Bueno, eso se acaba con Blazor.

Definición de Blazor .NET

La definición por parte de Microsoft, nos dice que:

Blazor es un framework, para la creación de interfaces de usuario web interactivas del lado del cliente con .NET.

Microsoft Docs

¿Para qué sirve Blazor?

La respuesta, es que tenemos un nuevo framework, que nos permitirá crear Single Page Applications, pero no solo eso, sino que este nuevo framework, llamado blazor, es simple y divertido de usar, ya que podemos escribir código con C# en  lugar de JavaScript.

Las aplicaciones Blazor están basadas en componentes web reutilizables, que podemos escribir con C#, HTML y CSS. De igual forma, la lógica del cliente y servidor son escritos en el lenguaje c#, lo que te permite compartir código y bibliotecas. Y por último, es una característica de ASP.NET.

¿Qué significa Blazor?

Como dato curioso, el nombre de Blazor, es una composición de las palabras Browser y Razor, que es un lenguaje que utilizaremos en Blazor.

Modelos de hospedaje con Blazor

Blazor, es un framework web que tiene 2 sabores para elegir, es decir, dos formas en las cuales puede ser ejecutado.

La primer forma, es poder ser ejecutado del lado cliente en el explorador web, en un entorno de tiempo de ejecución .NET basado en WebAssembly ( Blazor WebAssembly).

La segunda forma, es poder ser ejecutado del lado servidor en ASP.NET Core. Independientemente del modelo de hospedaje, los modelos de la aplicación y los componentes son los mismos. A continuación, vamos a hablar sobre estos modelos de hospedaje un poco más a detalle.

¿Qué es Blazor WebAssembly?

Hablemos primero sobre Blazor WebAssembly. Para comprender este modelo de hospedaje, primero tenemos que saber qué es eso de WebAssembly.

WebAssembly, es un estándar abierto para ejecutar código binario en la mayoría de los navegadores, con un rendimiento casi nativo, y sin necesidad de instalar plugins adicionales.

Debido a que es un formato bien definido, cualquier lenguaje de programación puede definir Webassembly como objetivo de compilación.

Como resultado, hoy en día, existen alrededor de 40 lenguajes de programación de alto nivel que soportan webassembly, tales como C, C++, Python, Go, Java, PHP, C# entre otros.

Tomando en consideración lo anterior, poniendo como base WebAssembly, es posible agregar el conocido Runtime de .NET, el cual, nos permitirá ejecutar cualquier dll compatible precisamente con .NET.

Por último, Blazor es el framework que nos va  a permitir escribir código HTML, CSS Y C#, y con el cual, trabajando en conjunto con el framework .NET y WebAssembly, podremos crear experiencias del lado del cliente casi nativas. A esta experiencia, se le conoce como Blazor WebAssembly

Hablando de las características de este tipo de proyectos, podemos enumerar las siguientes:

Características de Blazor WebAssembly

• En primer lugar, todos los recursos son descargados al navegador.
• Esto significa, que los archivos htmls, css y javascript, si es que existen, son descargados al navegador.
• Adicionalmente, también son descargados el .net runtime, y cada uno de los archivos de la aplicación ó bibliotecas de clases que requiera la aplicación.
• El runtime .net se ejecuta sobre web assembly, y esto nos proporciona un entorno en el cual, una vez se descarga la aplicación, no es necesaria una conexión a internet.

Beneficios de Blazor WebAssembly

• Tenemos un rendimiento casi nativo.
• Al ser descargados los recursos al navegador, se puede trabajar fuera de línea, si es que llegamos a perder la conexión a internet.
• No es necesario un servidor, ya que podemos generar los archivos estáticos, y trabajar directamente con ellos.
• En este tipo de aplicaciones, también se utilizan los recursos del lado del cliente
• Es posible ejecutar estas aplicaciones en todos los navegadores modernos.

Desventajas de Blazor WebAssembly

Si tuviéramos que enumerar algunos contras de blazor webassembly, serían los siguientes.

• Al ser el navegador el que ejecuta toda la aplicación, estamos restringidos a sus capacidades.
• Al ser descargado el Runtime .NET y todas las bibliotecas de clases al mismo, esto provoca que exista un mayor tiempo en la descarga de los recursos.
• Al ser descargada toda la información al navegador, no sería conveniente almacenar información sensible como contraseñas en este tipo de aplicaciones

¿Qué es Blazor Server (También conocido como Blazor Server Side)?

El segundo modelo de hospedaje, se llama Blazor Server.

Características de Blazor Server

• En este modelo, los recursos son procesados por el servidor, y no se descarga ningún tipo de componente .NET, ni el runtime .NET.
• Va más enfocado en crear clientes ligeros, es decir, aplicaciones pequeñas que se descarguen rápidamente al navegador.
• La conexión con el servidor en tiempo real, se realiza a través de una conexión SignalR, con el uso de web sockets.
• Por último, gracias a que se ejecuta en el servidor, se tiene acceso al framework asp.net completo.

Beneficios de utilizar Blazor Server

Los principales beneficios de este esquema, son que

• Se realiza una descarga pequeña.
• Se tiene acceso al framework asp.net completo.
• No se requiere WebAssembly en el navegador, por lo que los navegadores antiguos puede ejecutar este tipo de aplicaciones también.
• Podemos acceder a bases de datos y almacenar claves de una forma más segura.

Desventajas de utilizar Blazor Server

Pero también tenemos algunas desventajas.

• Primero, no tenemos un soporte a conexiones fuera de línea, es decir, siempre tendremos que tener una conexión activa a internet.
• De igual forma, necesitaremos sí o sí, un servidor ASP.NET Core para ejecutar la aplicación.
• Y también, al necesitar de una conexión constante al servidor, la aplicación será menos rápida que Blazor Webassembly. Con esto no quiero decir que la aplicación se ejecutará lentamente, puede que ni siquiera notemos la diferencia de velocidad, pero siempre una aplicación Blazor WebAssembly se ejecutará más rápido que una aplicación  tipo Blazor Server.

A continuación enumero algunas preguntas comunes respecto a Blazor:

¿Se puede utilizar Blazor con Visual Studio 2019?

La respuesta es que sí, es posible utilizar Blazor desde Visual Studio 2019, y no solo eso, sino que Visual Studio 2022 está equipado con todavía mejores características para trabajar con él, como por ejemplo, Hot Reload.

¿Qué es mejor? ¿Blazor o Angular o Vue o React?

Esta es una pregunta que me hacen a menudo, y la respuesta es que cada uno tiene sus beneficios y desventajas. Por ejemplo, hay ocasiones en las cuales, debido a las restricciones de WebAssembly, no es posible realizar algunas tareas con Blazor, por lo que hay que recurrir al uso de JavaScript (Se está mejorando WebAssembly para resolver estas restricciones). El diferenciador podría ser, que Blazor WebAssembly, tiene un rendimiento casi nativo, lo que no tienen frameworks basados en JavaScript.

¿Debería aprender Blazor si ya sé programar con Angular, Vue o React?

Esto depende totalmente del tipo de proyecto con el que trabajes en tu día a día. Si ya tienes experiencia programando con un framework JavaScript, entonces no tiene caso que aprendas Blazor, a menos que sea por diversión, o para proyectos personales. Por otra parte, si tienes experiencia desarrollando aplicaciones .NET con por ejemplo, Xamarin o .NET MAUI, entonces podría ser una excelente oportunidad para aprender Blazor.

¿Dónde encuentro el mejor curso de Blazor en español, con Visual Studio 2022?

En estos momentos, me encuentro montando el mejor curso de Blazor en español, ya que en él, introduzco desde las bases, para ir avanzando a través de la creación de pequeños proyectos.