Blazor: Ejecutando C# en el navegador mediante WebAssembly

Introducción a Blazor

Microsoft nos sorprendió hace poco con una de sus nuevas apuestas: Blazor. Se trata de un framework experimental que sirve para construir SPAs utilizando C#/Razor y HTML ejecutados en el navegador. Su nombre viene de la combinación 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 así 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#.

Podéis ver una web de demostración creada con Blazor pinchando en el siguiente vínculo: https://blazor-demo.github.io/.

¿Para qué sirve WebAssembly?

WebAssembly constituye un conjunto compacto de instrucciones binarias en navegador basado en Static Single Assigment Form (SSA) optimizado para una rápida descarga y una máxima velocidad de ejecución. Todo esto permite que sea sencillo compilar código en lenguajes de alto nivel como C/C++ y que el mismo se ejecute sobre un navegador, con la seguridad de que nuestro código se va a ejecutar en un “sandbox” para prevenir acciones maliciosas en la máquina cliente.

Además, WebAssembly permite interoperabilidad con Javascript, lo cual posibilita utilizar toda la potencia de WebAssembly y la flexibilidad de Javascript en un mismo desarrollo.

Podéis hacer clic aquí si deseáis saber más acerca de WebAssembly.

.NET en el navegador

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

Proyecto desde plantilla

Blazor es una tecnología experimental, por lo que no hay ninguna plantilla de proyecto Blazor incluida en Visual Studio. Para ello será necesario:

1. Instalar el .NET Core 2.1 Preview SDK. Hay que asegurarse mediante el comando ‘dotnet–version’ que la versión instalada es superior o igual a 2.1.300-preview-008533.
2. Instalar la última preview de Visual Studio 2017 con ASP.NET y las herramientas de desarrollo web. Es posible instalar una versión preview de Visual Studio sin que ello afecte a una instalación de Visual Studio ya existente.
3. Instalar la extensión de Visual Studio “ASP.NET Core Blazor Language Service” desde el marketplace de Visual Studio.

Una vez cumplidos los requisitos, será posible crear y ejecutar un proyecto Blazor desde una plantilla de Visual Studio. Para ello, desde la preview de Visual Studio habrá que hacer lo siguiente:

1. Ir a File>New Project>Web>ASP.NET Core Web Application
2. Seleccionar en la parte superior “.NET Core” y “ASP.NET Core 2.0”

   

3. Seleccionar la plantilla de Blazor y pulsar “OK”
4. Presionar “Ctrl+F5” para ejecutar la aplicación sin el depurador, ya que hoy por hoy no es posible ejecutar la aplicación con el depurador

Para profundizar en el desarrollo, podéis acceder a documentación sobre Blazor a través de este enlace.

Beneficios

Blazor provee todos los beneficios de un framework de UI en el lado de cliente (y opcionalmente en el servidor):

• Modelo de componentes UI
• Routing
• Layout
• Formularios y validación
• Inyección de dependencias
• Interoperabilidad con javascript
• Renderizado de UI en servidor
• Live-reloading durante el desarrollo

Junto a los beneficios que otorgan otros frameworks, encontramos beneficios propios de Blazor, como son:

• Uso de librerías en .NET Estándar 2.0 o superior
• Reducción del tamaño del payload para disminuir los tiempos de descarga
• Cacheado de .NET Runtime y ensamblados
• Funcionamiento sin necesidad de ejecutar .NET en el servidor

Por último, se pueden destacar los siguientes beneficios de utilizar .NET en un navegador:

• Estabilidad y consistencia
• Uso de lenguajes modernos e innovadores
• Desarrollo con herramientas líderes, como la familia de productos Visual Studio
• Velocidad y escalabilidad
• Aprovechamiento de skills existentes para un desarrollo full-stack
• Amplia compatibilidad con navegadores (es compatible con los navegadores líderes de escritorio y móvil)

Conclusiones

Teniendo un .NET Runtime capaz de ejecutar librerías en WebAssembly, además de su interoperabilidad con Javascript, podemos comenzar a ver un nuevo horizonte en el desarrollo web, pudiendo ejecutar en entornos basados en tecnología web, como podría ser Node, y librerías que hayamos creado con un lenguaje tan potente como C#.

En resumen, el futuro del desarrollo web puede cambiar, y es que WebAssembly puede convertirse en una revolución, ya que dota a los desarrolladores de unas posibilidades enormes. Blazor es una buena muestra de ello y, aunque no llegue a convertirse en un producto final, se trata de un proyecto experimental muy interesante.

Podéis comentarnos lo que sea en info@kabel.es.

También podéis seguirnos en Twitter, LinkedIn y Facebook.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Compártelo: