¿Imaginas utilizar un lenguaje de programación de back-end como .NET en el lado del cliente?

Anteriormente, cuando queríamos crear aplicaciones web que corrieran en un navegador, debíamos utilizar JavaScript como lenguaje de programación ya sea puro o utilizando algún framework como React, Angular, JQuery, entre otros. Con WebAssembly podemos utilizar otros lenguajes de programación y gracias a Blazor podemos utilizar de forma cómoda código de C# que será ejecutado en el navegador.

1. ¿Qué es Blazor?

Es un framework que nos permite crear aplicaciones web del lado del cliente usando C# como lenguaje de programación utilizando un paradigma de componentes. Estas aplicaciones se ejecutan en el lado del navegador gracias a WebAssembly.

2. ¿Qué es WebAssembly?

WebAssembly o también conocido como Wasm es un estándar web que define un formato de ensamblaje para código ejecutable en navegadores web. Esta tecnología nos permite compilar el código de otros lenguajes en WebAssembly para facilitar su ejecución en el navegador a una velocidad casi nativa. En el caso de Blazor, podremos ejecutar aplicaciones .NET en el navegador. Esto es posible porque compilamos el runtime de .NET en WebAssembly. Esto permite utilizar cualquier librería de back-end (.dll) en el front-end siempre y cuando sea compatible con .NET Standard. Sin embargo, para que Wasm pueda funcionar, el navegador debe ser compatible con este lenguaje. La mayoría de los navegadores web modernos lo son. Podemos ver la compatibilidad en el siguiente enlace: https://caniuse.com/wasm

Pero ¿Y si se deseamos utilizar JavaScript?, ¡Blazor lo tiene cubierto! Viene con interoperabilidad de JavaScript. Con JS Interop, una aplicación Blazor puede invocar funciones JavaScript desde métodos .NET y métodos .NET desde funciones JavaScript.

3. Modelos de alojamiento

Para ejecutar aplicaciones Blazor tenemos dos modos: Blazor en el lado del cliente (Blazor WebAssembly) y Blazor en el lado del servidor (Blazor Server).

• Blazor en el lado del cliente:

  En esta opción, la aplicación de Blazor corre en el navegador gracias a WebAssembly quitando esa carga al servidor. La desventaja podría ser la descarga inicial que puede ser de varios megas dependiendo de la aplicación.

• Blazor en el lado del servidor:

  Con esta opción, la aplicación de Blazor corre en el servidor web y el cliente interactúa con ella a través de una conexión de SignalR manejando de esta forma comunicación en tiempo real. Con esto se logra que el usuario interactúe con la aplicación de manera remota. Como ventaja tenemos que dispositivos con menos recursos pueden correr la aplicación sin problemas. Las limitaciones es que siempre debemos tener un servidor disponible para las interacciones con el usuario y puede haber latencia si la conexión de internet no es buena o si los recursos del servidor son limitados.

4. ¿Por qué usar Blazor?

Con Blazor podemos aprovechar todas nuestras habilidades en .NET y comenzar a trabajar en el desarrollo web con sólo un poco de trabajo y conocimiento adicional, permitiendo acelerar el proceso de desarrollo de manera significativa.

5. Creando una aplicación de Blazor

Antes de empezar a crear aplicaciones .NET, necesitamos tener descargado el .NET SDK (Software Development Kit). El link de descarga es para usuarios de MacOS aunque también están las opciones para Linux y Windows.

Una vez que lo hayamos instalado, abrimos la terminal y ejecutamos el siguiente comando:

~$ dotnet

Si la instalación se realizó correctamente, deberíamos de ver un resultado similar al siguiente:

Usage: dotnet [options]
Usage: dotnet [path-to-application]

Options:
-h|--help         Display help.
--info            Display .NET information.
--list-sdks       Display the installed SDKs.
--list-runtimes   Display the installed runtimes.

path-to-application:
The path to an application .dll file to execute.

Luego ejecutamos el siguiente comando para crear la aplicación Blazor WebAssembly llamada BlazorApp

~$ dotnet new blazorwasm -o BlazorApp --hosted

El argumento --hosted es opcional y en este caso nos crea adicionalmente un Web API en ASP.NET Core que nos permite servir datos a nuestra aplicación Blazor.

Ahora, navegamos al nuevo directorio BlazorApp creado por el comando anterior:

~$ cd BlazorApp

Luego escribimos el comando code . para abrir el directorio actual en Visual Studio Code. Este paso es opcional, podemos utilizar cualquier editor de código de nuestra preferencia.

~$ code .

Finalmente ejecutamos el comando:

~$ dotnet watch run

El comando dotnet watch run compilará e iniciará la aplicación, y luego recompilará y reiniciará la aplicación cada vez que realicemos cambios en el código. Podemos detener la aplicación en cualquier momento seleccionando Ctrl + C.

Una vez que nuestro navegador se inicie, habremos ejecutado con éxito nuestra primera aplicación Blazor.

6. Conclusión

Debemos recordar que Blazor es todavía una tecnología en desarrollo y como tal necesita evolucionar. A pesar de que está creciendo rápidamente y se está convirtiendo en una buena opción, no reemplaza a las tecnologías actuales ni quedarán obsoletas debido a Blazor, por lo que podemos seguir usándolas con tranquilidad.

Referencias:

https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-5.0
https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial