Funcionamiento de Blazor
Blazor proporciona muchas características que te ayudarán a empezar a trabajar y entregar rápidamente tu siguiente proyecto de aplicación web. Vamos a recorrer las principales funcionalidades de Blazor para ayudarte a decidir si debes usar Blazor para tu siguiente magnífica aplicación web.
Componentes de Blazor
Las aplicaciones Blazor se crean a partir de componentes. Un componente Blazor es una parte reutilizable de la interfaz de usuario web. Un componente Blazor encapsula tanto su lógica de representación como de control de eventos de interfaz de usuario. Blazor incluye varios componentes integrados para el control de formularios, validación de entrada de usuario, visualización de grandes conjuntos de datos, autenticación y autorización. Los desarrolladores también pueden compilar y compartir sus propios componentes personalizados y muchos componentes de Blazor precompilados están disponibles en el ecosistema de Blazor.
Uso de tecnologías web estándar
Puedes crear componentes de Blazor mediante la sintaxis de Razor, una combinación cómoda de HTML, CSS y C#. Un archivo Razor contiene HTML sin formato y, a continuación, C# para definir cualquier lógica de representación, como para condicionales, flujo de control y evaluación de expresiones. A continuación, los archivos Razor se compilan en clases C# que encapsulan la lógica de representación del componente. Dado que los componentes de Blazor creados en Razor son solo clases de C#, puedes usar código arbitrario de .NET desde los componentes.
Control de eventos de la interfaz de usuario y enlace de datos
Los componentes interactivos de Blazor pueden controlar las interacciones estándar de la interfaz de usuario web mediante controladores de eventos de C#. Los componentes pueden actualizar su estado en respuesta a los eventos de la interfaz de usuario y ajustar su representación en consecuencia. Blazor también incluye compatibilidad con el enlace de datos bidireccional a elementos de la interfaz de usuario como una manera de mantener el estado del componente sincronizado con los elementos de la interfaz de usuario.
El ejemplo siguiente es un sencillo componente de contador Blazor implementado en Razor. La mayoría del contenido es HTML, mientras que el bloque @code contiene C#. Cada vez que se presiona el botón, se invoca el método de C# IncrementCount, que incrementa el campo currentCount y, a continuación, el componente representa el valor actualizado:
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Representación del servidor y del lado cliente
Blazor admite la representación de componentes tanto del servidor como del lado cliente para controlar diversas arquitecturas de interfaz de usuario web. Los componentes representados desde el servidor pueden acceder a los recursos del servidor, como bases de datos y servicios back-end. De forma predeterminada, los componentes de Blazor se representan estáticamente desde el servidor, generando HTML en respuesta a las solicitudes.
También puedes configurar componentes de servidor para que sean interactivos, y que así puedan controlar eventos arbitrarios de interfaz de usuario, mantener el estado entre interacciones y representar actualizaciones dinámicamente. Los componentes de servidor interactivos controlan las interacciones de la interfaz de usuario y las actualizaciones a través de una conexión de WebSocket con el explorador.
Como alternativa, los componentes de Blazor se pueden representar de forma interactiva desde el cliente. El componente se descarga en el cliente y se ejecuta desde el explorador a través de WebAssembly. Los componentes interactivos de WebAssembly pueden acceder a los recursos de cliente a través de la plataforma web, como el almacenamiento local y el hardware, e incluso pueden funcionar sin conexión una vez descargados.
Puedes optar por representar distintos componentes desde el servidor o el cliente dentro de la misma aplicación. Muchas de las páginas de la aplicación podrían no requerir ninguna interactividad en absoluto y se pueden representar estáticamente desde el servidor. No obstante, otras partes más interactivas de la aplicación se pueden controlar desde el servidor o el cliente. Puedes decidir qué modo de representación de componente usar en tiempo de diseño o tiempo de ejecución. Con Blazor, tienes la flexibilidad de crear la arquitectura de la aplicación web adecuada para tu escenario.
Uso de Blazor para crear una pizzería
La interfaz de usuario de la aplicación de la pizzería se divide en muchos componentes reutilizables: un diseño de página con una barra de navegación, páginas individuales, un catálogo de pizzas y un editor, un componente de pedido, etc. Blazor proporciona compatibilidad de compilación para muchos de estos componentes, como por ejemplo componentes para formularios y validación. Muchas de las páginas de la aplicación se pueden controlar desde el servidor mediante la representación estática del lado servidor para que el sitio esté principalmente sin estado y esté listo para escalarse. Cuando se necesita más interactividad, los componentes se hacen interactivos aplicando un modo de representación interactivo. Para descargar el trabajo desde el servidor, los componentes interactivos se representan en el cliente a través de WebAssembly. Al compilar toda la aplicación con una sola pila de desarrollo web, la aplicación se reúne rápidamente y pronto los pedidos de pizza fluyen.