BLAZOR

Blazor es un proyecto desarrollado por Microsoft creado para permitir crear SPAs únicamente usando como lenguajes de programación C# y Razor Pages, haciendo nula la necesidad de programar en JavaScript o frameworks derivados.

Blazor es un framework del equipo de Microsoft ASP.NET que permite a los desarrolladores escribir aplicaciones de una 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á inspirado en Browser + Razor (que es un motor de vistas en ASP.NET). EN esta configuració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#.

El objetivo de Microsoft es entrar de manera directa en el mundo de los SPA a través de Blazor, teniendo una curva de aprendizaje plana para los desarrolladores .NET, abstrayendo la complejidad que requiere el tener que trabajar con frameworks Javascript. En consecuencia, se construirán aplicaciones web eriquecidas usando únicamente HTML, CSS y C# en lugar de Javascript

Blazor presenta dos enfoques claramente diferenciados

• Blazor Server: se construye el DOM que se ha de enviar al cliente desde el servidor. Es el modelo más tradicional, cuyo objetivo es sustituir el modelo Web Forms .NET. su principal función es la interacción en tiempo real entre cliente y servidor a través de SignalR.

• Blazor WebAssembly: modelo SPA basado en WebAssembly, es decir, la construcción del DOM se realizara en el lado del cliente.

Tiene beneficios al ejecutar 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}.

Cuenta con los beneficios de 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.

Algunos puntos a saber sobre esta librería o framework que se deben tener en cuenta

• 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.

Esta nueva tecnología de Microsoft permite Desarrollar Aplicaciones Web usando C# y la plataforma .NET, de manera rápida y robusta, creando componentes reutilizables y separando las responsabilidades de la interfaz de usuario del resto de la aplicación.

Gracias a Blazor podrás librarte del Front-End de dos maneras:

• La maquetación con HTML y CSS: aunque es inevitable tener que hacerla, la interfaz y los layouts están completamente separados de la lógica y el modelo. Así, el equipo de desarrollo puede hacer simplemente un boceto con los elementos necesarios, y el equipo de diseño se encargará de definirla y dejarla lista en paralelo. Es más, como todo son componentes reutilizables, una vez definidos puedes reutilizarlos por toda la aplicación o en otras, sin repetir el trabajo. Una gran ventaja para todos. Existen ya en el mercado multitud de componentes predefinidos para acelerar el desarrollo, tanto comerciales como gratuitos y de código abierto.

• El lenguaje JavaScript: todo el código, la lógica, los modelos, etc. los puedes hacer en C# y aprovechado toda la potencia de la plataforma .NET. Incluso los eventos del navegador los gestionas con este lenguaje. Así que si quieres te puedes olvidar del uso de JavaScript. Además, como ambos lenguajes pueden interoperar, si quieres sacar partido al enorme ecosistema de bibliotecas JavaScript, podrás usarlas desde C#. Y al viceversa: puedes llamar a código C# desde código JavaScript preexistente. Una enorme ventaja a la hora del desarrollo web.

Además de esto, Blazor genera aplicaciones de tipo SPA (Single Page Application), sin recarga de páginas y con mayor velocidad de interacción con el usuario que las aplicaciones convencionales. Por eso te ahorras tener que aprender algún framework JavaScript como Angular, Vue.js o React.

Si vienes de tecnologías de desarrollo Web antiguas de Microsoft como ASP.NET WebForms te resultará mucho más fácil que otros frameworks, como ASP.NET MVC.

Blazor se basa en .NET Core (en breve .NET 5) y en todo el aprendizaje de estos años en ASP.NET Core, por lo que a pesar de su novedad es robusta, escalable y con un gran rendimiento. De hecho está soportada oficialmente a largo plazo por Microsoft junto con el resto de la plataforma.

Es ideal para crear aplicaciones Web de todo tipo, desde aplicaciones de gestión o corporativas, hasta un emulador de un ZX Spectrum, que puedes ejecutar desde un servidor de aplicaciones en Windows o Linux, o directamente en cualquier CDN "tonta" (no necesitas tecnologías de servidor si no quieres).

Blazor está inspirado en los modernos UI frameworks como Angular, React y Vue. Soporta todas las características necesarias para facilitar el desarrollo de SPA (single-page application). Las características soportas por Blazor son:

• Inyección de dependencias (Dependency Injection): Esto permite usar servicios por inyección dentro de los componentes.
• Diseño (Layout): podemos compartir elementos comunes de la interfaz de usuario (por ejemplo, menús) en las páginas mediante la función de diseños.
• Enrutamiento (Routing): podemos redirigir la solicitud del cliente de un componente a otro con la ayuda del enrutamiento.
• JavaScript interop: Esto permite invocar un método de C# desde JavaScript, y podemos llamar a una función JavaScript o API desde código C#.
• Volver a cargar en tiempo de compilación: durante el desarrollo de la aplicación, la página de la aplicación se vuelve a cargar en el navegador a medida que vamos desarrollándola.
• Formularios y validación: podemos crear formularios interactivos para manejar las entradas de los usuarios y aplicar técnicas de validación para manejar cualquier error en el formulario.

Bueno hasta aquí esta introducción acerca de Blazor, su características y funcionalidades. Una importante aclaración que quería remarcar aquí es que Blazor está en un marco experimental en este momento y no debería ser usado para crear aplicaciones en ambiente de producción. En una siguiente entrada, veremos cómo funciona Blazor desarrollando un ejemplo con esta tecnología. Saludos.

¿Cuáles son las ventajas de todo esto?

Bueno, ya por solo sustituir Javascript por C# por el lado cliente, puede aportarnos ventajas interesantes. Aparte de ser C# un lenguaje muy superior, también es posible utilizar bibliotecas .NET existentes, compartir código entre cliente y servidor o utilizar entornos muy potentes como Visual Studio durante la fase de desarrollo.

Lo que si que hay que tener en cuenta es que provocará que la primera carga de la aplicación sea más lenta, aunque la memoria caché nos ayudaría en eso. Aunque nos alejemos del ecosistema Javascript (sabiendo que es muy grande), también es cierto que desde Blazor es posible interoperar con bibliotecas JS existentes.

VENTAJAS

Por el lado positivo, la carga inicial sería mucho más rápida ya que no hay nada que descargar desde el cliente. También, como el código se ejecutaría en el servidor, podríamos usar todo tipo de bibliotecas y componentes para .NET.

DESVENTAJA

Por el lado negativo, es que el hecho de que cada evento en el UI deba de ser enviado y procesador por el servidor, añade una latencia que no todas las aplicaciones podrán soportar sin destrozar su usabilidad. Además, el mantenimiento del estado en memoria podría limitar las opciones de escalabilidad de los sistemas.

Conclusion: Blazor es un framework del que seguro que vamos a oír hablar bastante en el futuro y con mucha razón. Aunque aún está empezando a funcionar y quedan bastantes cosas por pulir, desde Dotnetsafer te recomendamos no perderlo de vista porque las expectativas realmente son altas.

¿Cómo se estructuran las aplicaciones en Blazor?

La forma de estructurar una aplicación Blazor se parece mucho a otros frameworks SPA. Muy a vista de pájaro, consiste en un Razor Component raíz, que normalmente aloja el sistema de routing. Éste se encargará de analizar los cambios en las rutas del navegador para mostrar las páginas de la aplicación.

Las páginas, que también se implementan como Razor Components, pueden utilizar dentro, a su vez, otros componentes, que pueden estar compuestos a su vez por otros componentes, y así hasta el infinito. Lo único que hace diferente a una página de un componente es que ésta incluye la directiva @page para indicar al sistema de routing cómo puede ser localizada (algo bastante similar a como lo hacemos al desarrollar con Razor Pages en MVC).

Por tanto, para crear la interfaz de una aplicación Blazor, lo único que tendremos que hacer es implementar Componentes Razor. Aparte, claro está, tendremos que implementar otro tipo de clases y estructuras habituales: servicios de aplicación, acceso a datos, lógica de negocio, etc., que pueden ser utilizadas desde los archivos .razor gracias a la inyección de dependencias.

¿Que tiene por dentro un Componente Blazor?

Pues si has utilizado alguna vez Blazor Pages o MVC, es muy parecida a lo que ya conoces para el desarrollo de páginas o vistas.Por ejemplo, el siguiente código podría ser un Componente Blazor que actúa como página y que en su interior utiliza otro componente:

Fíjate en que con la directiva @page indicamos al sistema de routing mediante qué ruta debe ser accesible el contenido. Ya en su interior, podemos observar que utilizamos un Componente Blazor llamado <Multiplication>, que mostrará tablas de multiplicar. Puedes ver el funcionamiento en la animación anterior.

A continuación, veamos el código del componente <Multiplication>, definido en el archivo Multiplication.razor de la siguiente forma:

En este componente destacan varios aspectos:

• El uso de sintaxis Blazor, esa mezcla de HTML y C# que encontramos a lo largo del contenido: expresiones de salida tipo @var o @(var) para mostrar valores de variables, o incluso los clásicos bucles @for para mostrar listas o colecciones.

• La existencia del bloque @code para definir miembros e implementar comportamientos en C#, que podría asimilarse a un típico view-model en otros frameworks MVVM.

• El uso de la directiva @bind para bindear el valor actual del desplegable a la propiedad Number, que además actúa como parámetro para que las páginas o componentes que lo utilicen puedan establecerlo (nosotros lo habíamos hecho con el valor "1" desde la página).

• Podemos ver también el uso de @onclick para asociar eventos "click" del DOM a handlers escritos en C# en la sección @code.


Sintaxis de Blazor

Blazor admite C# y usa el @ símbolo para realizar la transición de HTML a C#. Blazor evalúa las expresiones de C# y las representa en la salida HTML.Cuando un @ símbolo va seguido de una palabra clave Blazor reservada, pasa a marcado específico de Blazor. En caso contrario, realiza la transición a C# simple.

Para escapar un @ símbolo en Blazor el marcado, use un segundo @ símbolo:

• CSHTML: <p> @@Username </p>

El código aparecerá en HTML con un solo símbolo @:

• HTML: <p> @Username </p>

El contenido y los atributos HTML que tienen direcciones de correo electrónico no tratan el símbolo @ como un carácter de transición. Las direcciones de correo electrónico del ejemplo siguiente no se tocan mediante Blazor el análisis:

• CSHTML: <a href="mailto:Support@contoso.com"> Support@contoso.com </a>

Aplicaciones al mejoramiento con el uso con blazor

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

• Layout
• Routing
• Formularios y validación
• Inyección de dependencias
• Modelo de componentes UI
• Renderizado de UI en servidor
• Interoperabilidad con Javascript
• 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
• Funcionamiento sin necesidad de ejecutar .NET en el servidor
• Reducción del tamaño del payload para disminuir los tiempos de descarga

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

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

Este es un pequeño ejemplo del uso de BLAZOR, a continuación se les mostrara una imagen de como es la aplicación.

Aqui dejaremos un peqeño botón de descargar de nuestro archivo alojado en Google Drive por si desean descargarlo y probarlo ustedes mismos.

¡ DESCARGA !