Introducción a ASP.NET Core BlazorIntroduction to ASP.NET Core Blazor

Por Daniel Roth y Luke LathamBy Daniel Roth and Luke Latham

Le damos la bienvenida a Blazor.Welcome to Blazor!

Blazor es una plataforma de trabajo para la creación de interfaces de usuario web interactivas del lado cliente con .NET: is a framework for building interactive client-side web UI with .NET:

  • Cree interfaces de usuario completamente interactivas con C# en lugar de JavaScript.Create rich interactive UIs using C# instead of JavaScript.
  • Comparta la lógica de aplicación del lado cliente y servidor escrita con .NET.Share server-side and client-side app logic written in .NET.
  • Represente la interfaz de usuario como HTML y CSS para la compatibilidad con todos los exploradores, incluidos los móviles.Render the UI as HTML and CSS for wide browser support, including mobile browsers.

El uso de .NET para el desarrollo web en el lado cliente ofrece las siguientes ventajas:Using .NET for client-side web development offers the following advantages:

  • Escribe el código en C# en lugar de JavaScript.Write code in C# instead of JavaScript.
  • Aprovechamiento del ecosistema y las bibliotecas .NET existentes.Leverage the existing .NET ecosystem of .NET libraries.
  • Uso compartido de la lógica de aplicación en el servidor y el cliente.Share app logic across server and client.
  • Beneficios de rendimiento, confiabilidad y seguridad de .NET.Benefit from .NET's performance, reliability, and security.
  • Mantenga la productividad con Visual Studio en Windows, Linux y macOS.Stay productive with Visual Studio on Windows, Linux, and macOS.
  • Compile sobre un conjunto común de lenguajes, marcos y herramientas que son estables, completos y fáciles de usar.Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

ComponentesComponents

Las aplicaciones de Blazor se basan en componentes.Blazor apps are based on components. 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.A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Los componentes son clases de .NET compiladas en ensamblados de .NET que:Components are .NET classes built into .NET assemblies that:

La clase del componente se escribe normalmente en forma de una página de marcado de Razor con una extensión de archivo .razor.The component class is usually written in the form of a Razor markup page with a .razor file extension. Se hace referencia a los componentes de Blazor como componentes de Razor.Components in Blazor are formally referred to as Razor components. Razor es una sintaxis para combinar marcado HTML con código de C# diseñada para aumentar la productividad del desarrollador.Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor le permite cambiar entre marcado HTML y C# en el mismo archivo gracias a la compatibilidad con IntelliSense.Razor allows you to switch between HTML markup and C# in the same file with IntelliSense support. Razor Pages y MVC también usan Razor.Razor Pages and MVC also use 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.Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

El siguiente marcado de Razor muestra un componente (Dialog.razor), que se puede anidar dentro de otro componente:The following Razor markup demonstrates a component (Dialog.razor), which can be nested within another component:

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

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

El contenido del cuerpo (ChildContent) y el título (Title) del cuadro de diálogo los proporciona el componente que usa este componente en su interfaz de usuario.The dialog's body content (ChildContent) and title (Title) are provided by the component that uses this component in its UI. OnYes es un método de C# desencadenado por el evento onclick del botón.OnYes is a C# method triggered by the button's onclick event.

Blazor usa etiquetas HTML naturales para la composición de la interfaz de usuario. uses natural HTML tags for UI composition. Los elementos HTML especifican componentes y los atributos de la etiqueta pasan valores a las propiedades del componente.HTML elements specify components, and a tag's attributes pass values to a component's properties.

En el ejemplo siguiente, el componente Index utiliza el componente Dialog.In the following example, the Index component uses the Dialog component. ChildContent y Title se establecen mediante los atributos y el contenido del elemento <Dialog>.ChildContent and Title are set by the attributes and content of the <Dialog> element.

Index.razor:Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

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

El cuadro de diálogo se representa cuando se accede al elemento principal (Index.razor) en un explorador:The dialog is rendered when the parent (Index.razor) is accessed in a browser:

Componente Dialog representado en el explorador

Cuando este componente se usa en la aplicación, IntelliSense en Visual Studio y Visual Studio Code acelera el desarrollo con la finalización de parámetros y sintaxis.When this component is used in the app, IntelliSense in Visual Studio and Visual Studio Code speeds development with syntax and parameter completion.

Los componentes se representan en una representación en memoria de la especificación Document Object Model (DOM) del explorador llamada árbol de representación, que se usa para actualizar la interfaz de usuario de una manera eficaz y flexible.Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

Blazor WebAssembly WebAssembly

Importante

BlazorWebAssembly de Blazor en versión preliminarBlazor WebAssembly in preview

Blazor Server se admite en ASP.NET Core 3.0.Blazor Server is supported in ASP.NET Core 3.0. Blazor WebAssembly está en versión preliminar para ASP.NET Core 3.1.Blazor WebAssembly is in preview for ASP.NET Core 3.1.

Blazor WebAssembly es una plataforma de trabajo de aplicaciones de página única para la creación de aplicaciones web interactivas del lado cliente con. NET. WebAssembly is a single-page app framework for building interactive client-side web apps with .NET. Blazor WebAssembly usa estándares web abiertos sin complementos ni transpilación de código, y funciona en todos los exploradores web modernos, incluidos los exploradores para dispositivos móviles. WebAssembly uses open web standards without plugins or code transpilation and works in all modern web browsers, including mobile browsers.

La ejecución de código .NET dentro de exploradores web se consigue mediante WebAssembly (abreviado como wasm).Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly es un formato de código de bytes compacto optimizado para descargas rápidas y una velocidad de ejecución máxima.WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly es un estándar web abierto y se admite en exploradores web sin complementos.WebAssembly is an open web standard and supported in web browsers without plugins.

El código de WebAssembly puede acceder a toda la funcionalidad del explorador mediante la interoperabilidad de JavaScript .WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability (or JavaScript interop). 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..NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

WebAssembly de Blazor ejecuta código de .NET en el explorador con WebAssembly.Blazor WebAssembly runs .NET code in the browser with WebAssembly.

Cuando se compila y ejecuta una aplicación de Blazor WebAssembly en un explorador:When a Blazor WebAssembly app is built and run in a browser:

  • Los archivos de código de C# y los archivos de Razor se compilan en ensamblados de .NET.C# code files and Razor files are compiled into .NET assemblies.
  • Los ensamblados y el entorno de ejecución de .NET se descargan en el explorador.The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor WebAssembly arranca el entorno de ejecución de .NET y lo configura para cargar los ensamblados de la aplicación. WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. 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.The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

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.The size of the published app, its payload size, is a critical performance factor for an app's useability. Una aplicación grande tarda un tiempo relativamente largo en descargarse en un explorador, lo que repercute en la experiencia del usuario.A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optimiza el tamaño de carga para reducir los tiempos de descarga: WebAssembly optimizes payload size to reduce download times:

  • Se ha quitado el código sin usar de la aplicación cuando se publica mediante el enlazador del lenguaje intermedio (IL).Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • Las respuestas HTTP se comprimen.HTTP responses are compressed.
  • El entorno de ejecución .NET y los ensamblados se almacenan en caché en el explorador.The .NET runtime and assemblies are cached in the browser.

Servidor de BlazorBlazor Server

Blazor separa la lógica de representación de componentes del modo en el que se aplican las actualizaciones de la interfaz de usuario. decouples component rendering logic from how UI updates are applied. El servidor de Blazor admite el hospedaje de componentes de Razor en el servidor en una aplicación de ASP.NET Core.Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. Las actualizaciones de la interfaz de usuario se controlan mediante una conexión de SignalR.UI updates are handled over a SignalR connection.

El entorno de ejecución controla el envío de eventos de la interfaz de usuario del explorador al servidor y, después de ejecutar los componentes, vuelve a aplicar al explorador las actualizaciones de la interfaz de usuario enviadas por el servidor.The runtime handles sending UI events from the browser to the server and applies UI updates sent by the server back to the browser after running the components.

La conexión que usa el servidor de Blazor para comunicarse con el explorador también se emplea para controlar las llamadas de interoperabilidad de JavaScript.The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

El servidor Blazor ejecuta código de .NET en el servidor e interactúa con Document Object Model en el cliente mediante una conexión de SignalR.Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection

Interoperabilidad de JavaScriptJavaScript interop

En el caso de aplicaciones que necesitan bibliotecas de JavaScript de terceros y acceso a las API de explorador, los componentes interoperan con JavaScript.For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Los componentes pueden usar cualquier biblioteca o API que pueda utilizar JavaScript.Components are capable of using any library or API that JavaScript is able to use. El código de C# puede llamar a código JavaScript y, a su vez, el código JavaScript puede llamar a código de C#.C# code can call into JavaScript code, and JavaScript code can call into C# code. Para obtener más información, vea los artículos siguientes:For more information, see the following articles:

Uso compartido de código y .NET StandardCode sharing and .NET Standard

Blazor implementa .NET Standard 2.0. implements .NET Standard 2.0. .NET Standard es una especificación formal de las API de .NET comunes entre las implementaciones de .NET..NET Standard is a formal specification of .NET APIs that are common across .NET implementations. 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..NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and 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.APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

Recursos adicionalesAdditional resources