Easy To Make

DESDE CERO-- .NET CORE + ANGULAR - EASY TO MAKE

Blazor | El poderoso Framework para diseño de SPA.

TIEMPO DE LECTURA - EASY TO MAKE   Tiempo de lectura: 15 min.  TIEMPO DE LECTURA - EASY TO MAKE   Nivel: Básico, Intermedio.


BLAZOR EL PODEROSO FRAMEWORK PARA DISEÑO DE SPA - Douglas Adams

“Piensa más, diseña menos”

— Douglas Adams

LOGO BLAZOR - EASY TO MAKE

¿Porqué Blazor? Características


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.

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

Componentes en 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.

Los componentes con Blazor los comprenderemos mejor estudiando el lenguaje de marcado Razor. Para esto, debemos dividir el concepto en 3 bloques:

  1. Directivas.
  2. Marcado.
  3. Código o Lógica.

El siguiente ejemplo podremos encontrarlo en una de las plantillas del SDK de Blazor. Observa la estructura o bloques que conforman un componente con extensión Razor:

/UN EJEMPLO CLÁSICO

NOMBRE DEL ARCHIVO/COMPONENTE ubicado en la carpeta del proyecto 'pages'
Pages/Contador.razor.

BLOQUE N° 1 : DIRECTIVAS
------------------------
    @page "/contador"

BLOQUE N° 2 : MARCADO
------------------------

<h1>Contador</h1>
<p>Llevando la cuenta: @ActualContador</p>
<button class="btn btn-primary" @onclick="Incrementador"> ¡Clic aquí! </button>

BLOQUE N° 3 : CÓDIGO O LÓGICA
------------------------------

@code {
    private int ActualContador = 0;

    [Parameter]
    public int IncrementoContador { get; set; } = 2;

    private void Incrementador()
    {
        ActualContador += IncrementoContador;
    }
}  

Como detalle importante, observa el bloque N° 3. ¡Es código en C#!. No hemos utilizado JavaScript para hacer posible el incremento del contador sin recargar la página.

  En el bloque de la lógica— iniciado con @code — definimos parámetros y valores vinculados a datos de nuestro modelo. Utiliza el atributo [Parameters] para gestionar apropiadamente los parámetros personalizables de entrada.

 Para una explicación detallada del código:  Componentes en Blazor.
Curso gratuito: Desde cero: .NET Core + Blazor paso a paso, nivel I

Y te preguntarás… ¿Cómo despliego la funcionalidad de ese componente en Blazor? Fácil: con solo citar la etiqueta en tu página html. Observa esto en el siguiente ejemplo:
DIRECTIVA QUE LLAMA AL RAIZ DE LA APP, Index, 
la cual se encuentra almacenada en la carpeta pages.
Pages / Index.razor
@page "/"

<h1>Estamos en la página Index (Home)</h1>

Bienvenidos a Blazor!

<SurveyPrompt Title="Ahora llamado al componente..." />

<Contador />  

Se ha agregado el elemento  <Contador />   al final de la página Index. Así, desplegaremos el componente Contador…. sin actualizar la página!

Ventajas de Blazor


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 .
  6. Curva de aprendizaje:
    ¡Blazor tiene una curva prácticamente plana¡. Si has usado Angular, lo detectarás de inmediato. Y he aquí una de las razones:
    Combina la sintaxis del poderoso C# en lugar de TypeScript— esto deja de un lado JavaScript —y la sencilla sintaxis de Razor.
  7. Integración: Integra por default vario paquetes Nuget al crear la primera aplicación de arrancada, con todos los elementos sustanciales y todo de modo preciso y fluido con el resto del proyecto .Net.
  8. Manejo de formularios: Blazor cuenta con un mecanismo mucho más sencillo y descomplicado para la gestión de datos y validaciones en un formulario web que Angular y otros Frameworks.
  9. Enrutamiento: Blazor genera el enrutamiento basado en el motor previo del mismo proyecto .Net. Es decir, la implementación de enrutamiento está lista para su uso.
  10. Compilador: Se apoya directamente en el compilador de C# y Razor, generando archivos tipo .dll.
  11. DOM: Blazor actualiza automáticamente el DOM o estructura de la aplicación.

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.

¿Y el manejo de los datos?


Blazor saca partido al momento de la interacción entre la interfaz de usuario y una API: ¡El Modelo de datos lo tiene a mano en su proyecto! En la siguiente ilustración se muestra esta versatilidad.

BLAZOR - MODELO DATOS - REST - EASY TO MAKE

Así, la API y Blazor Client hacen referencia y tienen a mano las librerías o bibliotecas de Clase, en este caso, el modelo de datos generalmente ubicado en la carpeta propia de patrones de diseño Model como sucede con el patrón MVC, que por igual se puede usar en .Net Core.

 Conocer más de la conexión a datos en el curso introductorio .Net Core + Blazor paso a paso, nivel I

Dejar un comentario