Blazor de ASP.NET Core

Le damos la bienvenida a Blazor.

Blazor es un marco web de front-end de .NET que admite la representación del lado servidor y la interactividad del cliente en un único modelo de programación:

• Cree interfaces de usuario interactivas enriquecidas con C#.
• Comparta la lógica de aplicación del lado cliente y servidor escrita con .NET.
• Represente la interfaz de usuario como HTML y CSS para la compatibilidad con todos los exploradores, incluidos los móviles.
• Cree aplicaciones híbridas de escritorio y móviles con .NET y Blazor.

El uso de .NET para el desarrollo web en el lado cliente ofrece las siguientes ventajas:

• Escritura de código en C#, lo que puede mejorar la productividad en el desarrollo y el mantenimiento de aplicaciones.
• Aprovechamiento del ecosistema .NET existente de bibliotecas .NET.
• Beneficios de rendimiento, confiabilidad y seguridad de .NET.
• Mantenga la productividad en Windows, Linux o macOS con un entorno de desarrollo, como Visual Studio o Visual Studio Code. Realice la integración con plataformas de hospedaje modernas, como Docker.
• Compile sobre un conjunto común de lenguajes, marcos y herramientas que son estables, completos y fáciles de usar.

Nota:

Para ver un tutorial de inicio rápido de Blazor, consulte Compilación de la primera aplicación Blazor.

Componentes

Las aplicaciones de Blazor se basan en componentes. En Blazor, un componente es un elemento de la interfaz de usuario, como una página, un cuadro de diálogo o un formulario de entrada de datos.

Los componentes son clases C# de .NET integradas en ensamblados de .NET que:

• Definen la lógica de representación de la interfaz de usuario flexible.
• Controlan acciones del usuario.
• Se pueden anidar y reutilizar.
• Se pueden compartir y distribuir como bibliotecas de clases de Razor o paquetes NuGet.

La clase del componente normalmente se escribe en forma de página de marcado de Razor con la extensión de nombre de archivo .razor. Formalmente se hace referencia a los componentes de Blazor como componentes de Razor, conocidos informalmente como componentes de Blazor. Razor es una sintaxis para combinar marcado HTML con código de C# diseñada para aumentar la productividad del desarrollador. Razor le permite cambiar entre marcado HTML y C# en el mismo archivo gracias a la compatibilidad de programación de IntelliSense en Visual Studio.

Blazor usa etiquetas HTML naturales para la composición de la interfaz de usuario. El siguiente marcado de Razor muestra un componente que incrementa un contador cuando el usuario selecciona un botón.

<PageTitle>Counter</PageTitle>

<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++;
    }
}

Los componentes se representan en una representación en memoria del elemento Document Object Model (DOM) del explorador denominado árbol de representación, que se usa para actualizar la interfaz de usuario de manera eficaz y flexible.

Compilación de una aplicación web de pila completa con Blazor

Las aplicaciones web de Blazor proporcionan una arquitectura basada en componentes con representación del lado servidor e interactividad completa del lado cliente en una única solución, donde puede cambiar entre los modos de representación del lado servidor y del lado cliente, e incluso mezclarlos en la misma página.

Blazor Web Apps puede proporcionar rápidamente una interfaz de usuario al explorador mediante la representación estática del contenido HTML desde el servidor en respuesta a las solicitudes. La página se carga con rapidez porque la representación de la interfaz de usuario se realiza rápidamente en el servidor sin necesidad de descargar un lote grande de JavaScript. Blazor también puede mejorar aún más la experiencia del usuario con varias mejoras progresivas en la representación del servidor, como la navegación mejorada con publicaciones de formularios y la representación en streaming de contenido generado de forma asincrónica.

Blazor admite la representación interactiva del lado del servidor (SSR interactiva), donde la interacción con la interfaz de usuario se controla desde el servidor a través de una conexión en tiempo real con el explorador. La representación interactiva del lado del servidor permite una experiencia de usuario enriquecida como la que cabría esperar de una aplicación cliente, pero sin necesidad de crear puntos de conexión de API para acceder a los recursos del servidor. El contenido de página de las páginas interactivas se representa previamente, donde el contenido del servidor se genera inicialmente y se envía al cliente sin habilitar controladores de eventos para controles representados. El servidor genera la interfaz de usuario HTML de la página lo antes posible en respuesta a la solicitud inicial, lo que hace que la aplicación se sienta más sensible a los usuarios.

Las aplicaciones web de Blazor admiten la interactividad con la representación del lado del cliente (CSR) que se basa en un entorno de ejecución de .NET creado con WebAssembly que puede descargar con la aplicación. Cuando se ejecuta Blazor en WebAssembly, el código de .NET puede acceder a toda la funcionalidad del explorador e interoperar con JavaScript. El código de .NET se ejecuta en el espacio aislado de seguridad del explorador con la protección que proporciona el espacio aislado frente a acciones malintencionadas en la máquina cliente.

Las aplicaciones de Blazor se pueden ejecutar íntegramente en WebAssembly en el explorador sin la intervención de un servidor. Para una aplicación de Blazor WebAssembly independiente, los recursos se implementan como archivos estáticos en un servidor o servicio web que puede servir contenido estático a clientes. Una vez descargadas, las aplicaciones independientes de Blazor WebAssembly se pueden almacenar en caché y ejecutar sin conexión como una aplicación web progresiva (PWA).

Compilación de una aplicación cliente nativa con Blazor Hybrid

Blazor Hybrid permite usar componentes de Razor en una aplicación cliente nativa con una combinación de tecnologías nativas y web para plataformas web, móviles y de escritorio. El código se ejecuta de forma nativa en el proceso de .NET y representa la interfaz de usuario web en un control Web View insertado por medio de un canal de interoperabilidad local. WebAssembly no se usa en aplicaciones híbridas. Las aplicaciones híbridas se crean con .NET Multi-platform App UI (.NET MAUI), que es un marco multiplataforma para crear aplicaciones móviles y de escritorio nativas con C# y XAML.

Blazor Hybrid admite Windows Presentation Foundation (WPF) y Windows Forms para la transición de aplicaciones de una tecnología anterior a .NET MAUI.

Pasos siguientes

Tutorial de Blazor: Compile su primera aplicación BlazorPlataformas admitidas de Blazor de ASP.NET