Características generales de Blazor

   Después de esta lección aprenderás a:

  • Conocer las tecnolgías que anteceden a .Net Core y Blazor.
  • Conocer la razón de ser de Blazor
  • Identificar el aporte que ofrece Blazor para un Frontend.
  • Comprender su utilidad en el diseño de SPA
  • Entender el significado de componente.
  • Reconocer la arquitectura de acceso a datos.
  • Identificar el proceso de acceso a datos en formato JSON.

Cursos Institucionales.
El Aprendizaje Hecho Fácil. ¡Disfrútalo!

LOGO BLAZOR - EASY TO MAKE

¿Porqué Blazor?


Fuente: Microsoft

Teconologías antecesoras 

Los marcos web basados en NET, incluidos los formularios web ASP.NET, históricamente han tenido una cosa en común: se representan en el servidor. En las aplicaciones web representadas por el servidor, el explorador realiza una solicitud al servidor, que ejecuta parte del código (código .NET en ASP.NET aplicaciones) para producir una respuesta. Esa respuesta se envía de vuelta al navegador para que la maneje. En este modelo, el navegador se utiliza como un motor de renderizado delgado. El arduo trabajo de producir la interfaz de usuario, ejecutar la lógica empresarial y administrar el estado se produce en el servidor.

Sin embargo, los navegadores se han convertido en plataformas versátiles. Implementan un número cada vez mayor de estándares web abiertos que otorgan acceso a las capacidades de la máquina del usuario. ¿Por qué no aprovechar la potencia de cálculo, el almacenamiento, la memoria y otros recursos del dispositivo cliente? Las interacciones de la interfaz de usuario, en particular, pueden beneficiarse de una sensación más rica e interactiva cuando se manejan al menos parcial o completamente del lado del cliente. La lógica y los datos que deben manejarse en el servidor aún se pueden manejar del lado del servidor. Se pueden usar llamadas a la API web o incluso protocolos en tiempo real, como WebSockets. Estos beneficios están disponibles para los desarrolladores web de forma gratuita si están dispuestos a escribir JavaScript. Los marcos de interfaz de usuario del lado del cliente, como Angular, React y Vue, simplifican el desarrollo web del lado del cliente y han crecido en popularidad. Desarrolladores de formularios web también pueden beneficiarse de aprovechar el cliente, e incluso tener un soporte listo para usar con marcos javascript integrados como ASP.NET AJAX.

Pero unir dos plataformas y ecosistemas diferentes (.NET y JavaScript) tiene un costo. Se requiere experiencia en dos mundos paralelos con diferentes lenguajes, marcos y herramientas. El código y la lógica no se pueden compartir fácilmente entre el cliente y el servidor, lo que resulta en duplicación y sobrecarga de ingeniería. También puede ser difícil mantenerse al día con el ecosistema de JavaScript, que tiene un historial de evolución a una velocidad vertiginosa. El marco front-end y las preferencias de herramientas de compilación cambian rápidamente. La misma rotación inquieta ha ocurrido con marcos de front-end como jQuery, Knockout, Angular, React y Vue. Pero dado el monopolio del navegador de JavaScript, había pocas opciones en el asunto. Es decir, ¡hasta que la comunidad web se unió y causó un milagro!

WebAssembly satisface una necesidad

En 2015, los principales proveedores de navegadores unieron fuerzas en un Grupo comunitario del W3C para crear un nuevo estándar web abierto llamado WebAssembly. WebAssembly es un código de bytes para la Web. Si puede compilar su código en WebAssembly, puede ejecutarse en cualquier navegador en cualquier plataforma a una velocidad casi nativa. Los esfuerzos iniciales se centraron en C/C++. El resultado fue una demostración dramática de la ejecución de motores gráficos 3D nativos directamente en el navegador sin complementos. Desde entonces, WebAssembly ha sido estandarizado e implementado por todos los principales navegadores.

El trabajo para ejecutar .NET en WebAssembly se anunció a fines de 2017 y se lanzó en 2020, incluido el soporte en .NET 5 y versiones posteriores. La capacidad de ejecutar código .NET directamente en el explorador permite el desarrollo web de pila completa con .NET.

Blazor: desarrollo web full-stack con .NET

Por sí sola, la capacidad de ejecutar código .NET en un explorador no proporciona una experiencia de extremo a extremo para crear aplicaciones web del lado cliente. Ahí es donde entra Blazor. Blazor es un marco de interfaz de usuario web del lado del cliente basado en C# en lugar de JavaScript. Blazor puede ejecutarse directamente en el navegador a través de WebAssembly. No se requieren complementos de navegador. Alternativamente, las aplicaciones Blazor pueden ejecutarse en el lado del servidor en .NET y manejar todas las interacciones del usuario a través de una conexión en tiempo real con el navegador.

Blazor tiene una excelente compatibilidad con herramientas en Visual Studio y Visual Studio Code. El marco también incluye un modelo completo de componentes de interfaz de usuario y tiene instalaciones integradas para:

  • Formularios y validación
  • Inyección de dependencia
  • Enrutamiento del lado del cliente
  • Diseños
  • Depuración en el navegador
  • Interoperabilidad de JavaScript

En resumen, el mundo del diseño web avanza a pasos agigantados. El incremento de sitios dedicados al e-commerce ha incrementado las exigencias y necesidades de los usuarios, aún más con la evolución de aplicaciones móviles. Además el diseño de la ‘experiencia de usuario’ en relación con el Frontend o presentación y despliegue de las aplicaciones en la red ahora exige rapidez, elegancia y mucha practicidad.

Razones para usar Blazor

  1. Diseñar interfaces de usuario interactivas y enriquecidas con C # + Razor.
  2. El uso de JavaScript es opcional.
  3. Brinda manejo a la lógica de la aplicación tanto del lado del servidor como del cliente.
  4. Puede renderizar la interfaz de usuario como HTML y CSS para una amplia compatibilidad con los navegadores, incluidos los navegadores móviles.
  5. Integre con plataformas de alojamiento modernas, como Docker .

Lado del cliente
Ofrece grandes beneficio y utilidades como:

  1. Usa a fondo las bibliotecas y librerías de .Net clasificadas en:(Microsof)
    1. De las clases específicas de la plataforma: tienen acceso a todas las API en una plataforma determinada (por ejemplo, .NET Framework, Xamarin iOS).
    2. De las clases portátiles: tienen acceso a un subconjunto de API y pueden ser utilizadas por aplicaciones y bibliotecas que se dirigen a múltiples plataformas.
    3. De la clase .NET Standard: son una fusión del concepto de biblioteca portátil y específico de la plataforma en un solo modelo que proporciona lo mejor de ambos.
  2. Es posible compartir toda la lógica entre el Cliente-Servidor
  3. Alto nivel de rendimiento y seguridad.
  4. Diseño sobre y para variados marcos y herramientas.

   SIGNIFICADO DEL NOMBRE ‘BLAZOR’

Blazor inició probándose para crear aplicaciones SPA con C# y Razor. De ahí su nombre, una combinación de WebAssembly + Razor

Componentes de Blazor


Al igual que Angular y otros marcos de trabajo, Blazor basa el diseño de las interfaces y su funcionalidad en componentes.

Los componentes de Blazor forman parte de la interfaz del usuario, tales como página, cuadros de diálogo, formulario de captura de información o credenciales, etc.

Todos los componentes de Blazor correponden a clases las cuales se integran en ensamblados:

Los ensamblados en .net  componen las unidades base de una implementación— archivos .exe, .dll —controlando las versiones, reutilización, permisos de seguridad.

Corresponden a la colección de tipos y recursos que se crean para modelamiento en grupos y unidades lógicas brindando toda la funcionalidad en el diseño.

Los componentes en Blazor facilitan:

  1. El anidamiento y reuso.
  2. Manejo de eventos de usuario.
  3. Compartirse y distribuirse como bibliotecas de clase tipo Razor o Nuget.
  4. Definir la lógica de la interfaz de usuario.
  5. Flexibilizar el diseño del Frontend.

Los componentes en Blazor se escriben en forma de página de marcado Razor (tendrá su presentación más adelante de este curso).

Razor es una sintaxis y tipo de marcado para incrustar código basado en .Net, como C#, dentro del HTML de una página.

Su sintaxis es equivalente a los marcos de trabajo más populares para el diseño de páginas SPA, tales como React, VueJs, Svelte, Angular, JavaScript, entre otros.

Ahora aprende a identificar los componentes en Blazor en la siguiente lección.

  En general, los componentes de Blazor permiten el diseño de la lógica y composición de la interfaz de usuario del lado del cliente.

Acceso a los datos


RESTful AL RESCATE

Aunque el tema de datos con Blazor y .Net se profundizará en el nivel II avanzado, demos una mirada a la esencia de todo sistema de información: el acceso a las fuentes de datos o SRDBM (Sistemas de administración de Bases de Datos Relacionales) .

BLAZOR - MODELO DATOS - REST - EASY TO MAKE

En general las aplicaciones Blazor WebAssembly hacen uso de los servicios web RESTful para los datos. Como se observa en la ilustración, RESTful y HTTPClient trabajan para la gestión y obtención de datos en el servidor y en la DBS de la aplicación.

RESTfulRepresentational State Transfer, es un patrón de arquitectura que define la interfaz entre sistemas que utilizan el protocolo HTTP y que permite obtener datos o indicar la ejecución CRUD— Create, Read, Update y Delete — o más comúnmente operación de mantenimiento de datos en formato XMLJSON.

Rest utiliza los verbos POST, GET, PUT, DELETE.

En una aplicación .Net Core con Blazor, se accede a la fuente de datos haciendo uso del protocolo HttpClient. De esta manera los datos son serializados.

Serialización es un concepto que permite convertir cualquier objeto a texto, transportarlos y reconvertirlos nuevamente en ese objeto. Así, se codifica un objeto en un medio de almacenamiento en formato de bytes o en un formato legible como XML o JSON.
JSON es un formato de datos que permite el intercambio de datos en un explorador de internet. Su gran poder está en la facilidad de lectura del formato y alta velocidad para serializar/deserializar.

Ejemplo despliegue de datos JSON


Como parte del SDK de Blazor, tenemos una de las plantillas predefinidas con el archivo en formato JSON  weather.jsonSu implementación se desarrolla en el componente

Proceso de lectura y despliegue

BLAZOR - MODELO DATOS - SDK JSON 1 - EASY TO MAKE

En la ilustración se observa la aplicación en ejecución dentro del navegador. El despliegue del componente FetchData.razor puede hacerse de dos maneras:

  1. Desde el link del menú principal, opción Counter.
  2. Agregando su llamada con la etiqueta   que agregamos al archivo Index o el que se requiera.

En la imagen se aplican las dos opciones.

Análisis del componente
En todo componente Blazor, encontraremos de entrada la directiva @page "/fetchdata" que facilita el enrutamiento del componente al momento de su solicitud. Lo que nos interesa en este ejemplo es la siguiente directiva: @inject
@page "/fetchdata"
@inject HttpClient Http 
Esta directiva está requiriendo de Blazor que inyecté dependencia a la instancia del objeto HttpClient en el objeto Http. Observa ahora el siguiente código/lógica en C# como parte de la funcionalidad del componente:
@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>
        ("sample-data/weather.json");
    } 

Ahora se ha declarado una matriz de objetos  WeatherForecast[] forecasts; creando la variable objeto forecasts para su instanciación.

¿Cómo se obtienen los datos de la fuente o archivo JSON? Utilizamos el método GetFromJsonAsync de la clase Httppara solicitar o requerir (GET) el recurso ubicado en "sample-data/weather.json" del proyecto y así devolver la matriz con los metadatos los cuales se asignarán a la propiedad matriz <WeatherForecast[]> y así pueda representar la matriz en en componente que desplegaremos en la página Index, como se observa en la siguiente ilustración:

BLAZOR - MODELO DATOS - SDK JSON 2 - EASY TO MAKE

  Se debe adicionar al proyecto el paquete Nuget System.Net.Http.Json Además, configurar la inyección de dependencia HttpClient en el archivo del proyecto Program.cs como se observa en el siguiente código:
builder.Services.AddScoped(x => 
new HttpClient() { BaseAddress = 
new Uri(builder.HostEnvironment.BaseAddress) }); 

   Desarrollaremos código en laboratorios de inyección de dependencias y diseño de una API, en el curso avanzado Blazor nivel II.

APLICA YA! - Easy To MakeEasy interactivo. ¡Inténtalo!


Afina tus conocimientos con el siguiente repaso interactivo. Puedes repasar o regresas al soporte teórico las veces que necesites.