Introducción a Blazor

Introducción  a Blazor

Hoy en este post les quería comentar un poco más sobre esta nueva tecnología Blazor, y la cual ya había comentado en un post anterior nuestro colaborador desde Estados Unidos Diego Gravisaco en este post .

Cuando hablamos de aplicaciones Web tenemos dos partes: cliente y servidor. Cuando nos enfocamos en el lado del cliente de la aplicación web, la mayoría de los desarrollos es usando lo que se llaman UI Frameworks, por ejemplo Angular o React, los cuales usan JavaScript o TypeScript. Cuando hablamos de la creación de la aplicación del lado del servidor, la misma es creada por ejemplo usando un framework como .NET, y  un lenguaje como C#,. Basado en esto,  podemos decir aquí  que estamos moviéndonos entre dos diferentes frameworks para poder realizar nuestra aplicación web para desarrollar la parte del servidor y la parte cliente, y esto puede resultar un poco engorroso. En este movimiento entre diferentes frameworks y lenguajes y desde el punto de vista del desarrollador, esto puede involucrar una mayor curva de aprendizaje para el El y tiempo.

Ahora que nos trae de nuevo Blazor, la posibilidad de escribir nuestra parte cliente de la aplicación web usando C#. O sea que podemos crear una moderna aplicación Web del tipo SPA (Single-Page Application) solo con este framework y usando como lenguaje únicamente C# y poder correrla en el browser.

Antes de continuar con esta tecnología me gustaría dejarles aquí debajo los requerimientos técnicos necesarios para trabajar con Blazor.

Requerimiento Técnicos

  • C#
  • ASP.NET Core
  • Entity Framework Core
  • ADO.NET

Y deberíamos instalar el siguiente software para empezar el desarrollo con Blazor

  • .NET Core 2.1 SDK
  • Visual Studio Code
  • Visual Studio 2017 v15.7 o mayor
  • ASP.NET Core Blazor Language Services  (extensión)

Que es Blazor ?

Blazor es un .NET web framework (open source) que permite desarrollar la parte cliente de aplicaciones web utilizando C#/Razor y HTML. Las aplicaciones desarrolladas utilizando esta tecnología, pueden correr en cualquier navegador con la ayuda de WebAssembly. Un poco más adelante en este post explicaré que es WebAssembly.

Los desarrolladores que han creado aplicaciones del tipo ASP.NET MVC recordarán que han utilizado Razor  (como view engine) al trabajar con las páginas HTML. El nombre de Blazor viene de la combinación de browser y Razor.

Que es WebAssembly ?

Un poco antes en este post había comentado que Blazor utilizaba WebAssembly para ejecutar la aplicación en cualquier browser. Bien, WebAssembly es un lenguaje de bajo nivel, compacto (de tamaño mínimo) y un eficiente tiempo de carga.  Es posible compilar el código desde otros lenguaje de alto nivel como C# en WebAssembly para facilitar su ejecución en el navegador. WebAssembly es un subconjunto de JavaScript, lo que significa que puede correr JavaScript. Esto habilitaría correr código de lenguajes de alto nivel en el browser a una alta velocidad. Aparte de esto WebAssembly corre los binarios .NET en el navegador usando Mono. O sea que mientras ejecutamos una aplicación Blazor, Mono en tiempo de ejecución lo compila a WebAssembly en el Browser. WebAssembly es soportado por la mayoría de los navegadores.

Cómo hace Blazor para correr en el Browser ?

Bueno como veíamos anteriormente, Blazor se ejecuta en el navegador con la ayuda de WebAssembly. Cuando compilamos y corremos una aplicación Blazor se suceden una secuencia de eventos:

  1. Los archivos de código de C#/Razor son compilados como .NET assemblies.
  2. El navegador descarga el archivo blazor.webassembly.js
  3. El archivo blazor-boot.json es descargado en el navegador. Este archivo contiene el punto de entrada de la aplicación (entry point) y la referencia a todos los .NET assemblies que serán cargados en el navegador.
  4. El Mono .NET runtime es descargado en el navegador.
  5. Blazor usa la librería Mono JavaScript, mono.js,  para arrancar el mono.wasm (Mono runtime) en WebAssembly.
  6. Al final, mono.wasm descarga, utilizando el navegador las bibliotecas de enlaces dinámicos (DLL) para la aplicación y el framework de .NET.

Esto parece un poco engorroso, pero en un próximo post con un ejemplo concreto veremos como funciona en acción.

Porque deberíamos usar Blazor ?

  • Nos permite desarrollar tanto la parte cliente y servidor de nuestras aplicaciones utilizando solo un lenguaje C#
  • Podemos usar las API y herramientas .NET que ya existen para crear aplicaciones web ricas.
  • Nos permite utilizar el lenguaje moderno C#, lo que facilita el desarrollo.
  • Si ya estamos utilizando la plataforma .NET, entonces la curva de aprendizaje para Blazor es casi nula, ya que el único requisito para comenzar es entender el lenguaje C#.
  • Blazor es compatible tanto con Visual Studio 2017 como con Visual Studio Code. Esto proporciona una excelente experiencia de desarrollo .NET en múltiples plataformas, incluyendo Linux, Windows y Mac.

Características de Blazor

Blazor esta 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 esta 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 como funciona Blazor desarrollando un ejemplo con esta tecnología. Saludos.

 

 

 

 

 

 

 

 

The following two tabs change content below.
Admin

Admin

Administrador de Dotnetuy, con más de 20 años de experiencia en el mundo de la informática y el desarrollo de software en diferentes lenguajes, trabajando en backend y frontend, desde sus primeros pasos con clipper cuando comenzaba la década de los 90’s , y continuando con pascal, C, C++, Visual basic, y multiples gestores de bases de datos hasta hoy en día con C# y todas las técnologias relacionadas con .NET.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *