Blazor de ASP.NET Core

  • Artículo

Le damos la bienvenida a .

Blazor es una plataforma de trabajo para la creación de interfaces de usuario web interactivas del lado cliente con Blazor:

  • Cree interfaces de usuario completamente interactivas con C# en lugar de JavaScript.
  • 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.
  • Realice la integración con plataformas de hospedaje modernas, como Docker.
  • Cree aplicaciones híbridas de escritorio y móviles con .NET y Blazor.
  • Cree interfaces de usuario completamente interactivas con C# en lugar de JavaScript.
  • 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.
  • Realice la integración con plataformas de hospedaje modernas, como Docker.

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

  • Escribe el código en C# en lugar de JavaScript.
  • Aprovechamiento del ecosistema .NET existente de bibliotecas .NET.
  • Uso compartido de la lógica de aplicación en el servidor y el cliente.
  • 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.
  • 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 Blazor.

Componentes

Las aplicaciones de Blazor se basan en Blazor. 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 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 Blazor, conocidos informalmente como Razor. 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 Razor en Visual Studio. Razor Pages y MVC también usan Razor. A diferencia de Razor Pages y MVC, que se compilan en torno a un modelo de solicitud y respuesta, los componentes se usan específicamente en la composición y la lógica de la interfaz de usuario del lado cliente.

Blazor usa etiquetas HTML naturales para la composición de la interfaz de usuario. En el siguiente marcado de Razor se muestra un componente (Dialog.razor) que presenta un cuadro de diálogo y procesa un evento cuando el usuario selecciona un botón:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

En el ejemplo anterior, OnYes es un método de C# desencadenado por el evento onclick del botón. El texto (ChildContent) y el título (Title) del cuadro de diálogo se proporciona mediante el siguiente componente que usa este componente en su interfaz de usuario.

El componente Dialog está anidado en otro componente mediante una etiqueta HTML. En el ejemplo siguiente, el componente Index (Pages/Index.razor) utiliza el componente Dialog anterior. El atributo Title de la etiqueta pasa un valor para el título en la propiedad Title del componente Dialog. El contenido del elemento <Dialog> establece el texto del componente Dialog (ChildContent). Cuando el componente Dialog se agrega al componente Index, Dialog agiliza el desarrollo con la finalización de la sintaxis y los parámetros.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

El cuadro de diálogo se representa cuando se accede al componente Index en un explorador. Cuando el usuario selecciona el botón, la consola de herramientas de desarrollo del explorador muestra el mensaje escrito por el método OnYes:

Componente Dialog representado en el explorador anidado en el interior del componente Index. La consola de herramientas de desarrollo del explorador muestra el mensaje escrito por el código C# cuando el usuario selecciona el botón Sí en la UI.

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.

Blazor Server

Blazor Server admite el hospedaje de componentes de Razor en el servidor de una aplicación de ASP.NET Core. Las actualizaciones de la interfaz de usuario se administran mediante una conexión de SignalR.

El entorno de ejecución permanece en el servidor y controla lo siguiente:

  • Ejecución del código C# de la aplicación.
  • El envío de eventos de interfaz de usuario desde el explorador al servidor.
  • La aplicación de actualizaciones de una interfaz de usuario al componente representado que devuelve el servidor.

La conexión que usa el servidor de Blazor Server para comunicarse con el explorador también se emplea para administrar las llamadas de interoperabilidad de JavaScript.

Blazor Server ejecuta código de .NET en el servidor e interactúa con Document Object Model en el cliente mediante una conexión de SignalR

Las aplicaciones Blazor Server representan el contenido de forma diferente a los modelos tradicionales para representar la interfaz de usuario en aplicaciones de ASP.NET Core mediante vistas de Razor o Razor Pages. Ambos modelos usan el lenguaje para describir el contenido HTML, pero difieren bastante en cómo se representa el marcado.

Cuando se representa una página de Razor o una vista, cada línea de código de Razor emite HTML en forma de texto. Después de la representación, el servidor desecha la instancia de la página o la vista, incluido cualquier estado que se haya producido. Cuando se produce otra solicitud de la página, toda la página se vuelve a presentar a HTML y se envía al cliente.

Blazor Server genera un gráfico de componentes que se muestran de forma similar a un código HTML o XML Document Object Model (DOM). Este gráfico de componente incluye el estado del componente contenido en propiedades y campos. Blazor evalúa el gráfico de componentes para generar una representación binaria del marcado, que se envía al cliente para su representación. Una vez realizada la conexión entre el cliente y el servidor, los elementos estáticos del componente representados previamente se reemplazan por elementos interactivos. La preprocesación del contenido en el servidor hace que la aplicación tenga más capacidad de respuesta en el cliente.

Una vez que los componentes son interactivos en el cliente, la interacción del usuario y los eventos de la aplicación desencadenan las actualizaciones de la interfaz de usuario. Cuando se produce la actualización, el gráfico de componentes se vuelve a representar y se calcula un valor diff (diferencia) de interfaz de usuario. Esta diferencia es el conjunto más pequeño de ediciones DOM necesarias para actualizar la interfaz de usuario en el cliente. La diferencia se envía al cliente en un formato binario y se aplica mediante el explorador.

Se desecha un componente después de que el usuario salga de él.

Blazor WebAssembly

Blazor WebAssembly es un Blazor WebAssembly para compilar aplicaciones web interactivas del lado cliente con. NET. Blazor WebAssembly usa estándares web abiertos sin complementos o recompilación de código en otros lenguajes. Blazor WebAssembly funciona en todos los exploradores web modernos, incluidos los exploradores para dispositivos móviles.

La ejecución de código .NET dentro de exploradores web se consigue mediante WebAssembly (abreviado como ). WebAssembly es un formato de código de bytes compacto optimizado para descargas rápidas y una velocidad de ejecución máxima. WebAssembly es un estándar web abierto y se admite en exploradores web sin complementos.

El código de WebAssembly puede acceder a toda la funcionalidad del explorador mediante JavaScript, denominada interoperabilidad de JavaScript, que a menudo se abrevia como interoperabilidad JavaScript o interoperabilidad JS. El código de .NET que se ejecuta a través de WebAssembly en el explorador se ejecuta a su vez en el espacio aislado de JavaScript del explorador con las protecciones que proporciona dicho espacio aislado contra acciones malintencionadas en la máquina cliente.

Blazor WebAssembly ejecuta código de .NET en el explorador con WebAssembly.

Cuando se compila y ejecuta una aplicación de Blazor WebAssembly en un explorador:

  • Los archivos de código C# y los archivos de Razor se compilan en ensamblados de .NET.
  • Los ensamblados y el runtime de .NET se descargan en el explorador.
  • Blazor WebAssembly arranca el entorno de ejecución .NET y lo configura para cargar los ensamblados de la aplicación. El entorno de ejecución de Blazor WebAssembly emplea la interoperabilidad de JavaScript para gestionar la manipulación de DOM y las llamadas API del explorador.

El tamaño de la aplicación publicada, su tamaño de carga, es un factor de rendimiento crítico para la facilidad de uso de una aplicación. Una aplicación grande tarda un tiempo relativamente largo en descargarse en un explorador, lo que repercute en la experiencia del usuario. Blazor WebAssembly optimiza el tamaño de carga para reducir los tiempos de descarga:

  • Se ha quitado el código sin usar de la aplicación cuando se publica mediante el recortador del lenguaje intermedio (IL).
  • Las respuestas HTTP se comprimen.
  • El entorno de ejecución .NET y los ensamblados se almacenan en caché en el explorador.

Blazor Hybrid

Las aplicaciones híbridas usan una combinación de tecnologías nativas y web. Una aplicación Blazor Hybrid usa Blazor en una aplicación cliente nativa. Los componentes de Razor se ejecutan de forma nativa en el proceso de .NET y representan la interfaz de usuario web en un control Web View incrustado mediante un canal de interoperabilidad local. WebAssembly no se usa en aplicaciones híbridas. Las aplicaciones híbridas abarcan las siguientes tecnologías:

  • .NET Multi-platform App UI (.NET MAUI): es un marco multiplataforma para crear aplicaciones móviles y de escritorio nativas con C# y XAML.
  • Windows Presentation Foundation (WPF): marco de interfaz de usuario que es independiente de la resolución y usa un motor de representación basado en vectores, creado para aprovechar las ventajas del hardware de gráficos moderno.
  • Windows Forms: marco de interfaz de usuario que crea aplicaciones cliente enriquecidas de escritorio para Windows. La plataforma de desarrollo Windows Forms admite un amplio conjunto de características de desarrollo de aplicaciones, incluidos controles, gráficos, enlace de datos y entrada del usuario.

Para obtener más información sobre cómo crear aplicaciones Blazor Hybrid con los marcos anteriores, consulte los artículos siguientes:

Interoperabilidad de JavaScript

En el caso de aplicaciones que necesitan bibliotecas de JavaScript de terceros y acceso a las API de explorador, los componentes interoperan con JavaScript. Los componentes pueden usar cualquier biblioteca o API que pueda utilizar JavaScript. El código de C# puede llamar a código de JavaScript y, a su vez, el código de JavaScript puede llamar al código de C#.

Uso compartido de código y .NET Standard

Blazor implementa Blazor, que permite a los proyectos de Blazor hacer referencia a las bibliotecas que cumplen con las especificaciones de ese estándar. .NET Standard es una especificación formal de las API de .NET comunes entre las implementaciones de .NET. Las bibliotecas de clase .NET Standard pueden compartirse a través de diferentes plataformas .NET, como Blazor, .NET Framework, .NET Core, Xamarin, Mono y Unity.

Las API que no pueden aplicarse dentro de un explorador web (por ejemplo, para acceder al sistema de archivos, abrir un socket y ejecutar subprocesos) generan una excepción PlatformNotSupportedException.

Recursos adicionales