Reutilización de componentes Razor en ASP.NET Core Blazor Hybrid

En este artículo se explica cómo crear y organizar componentes Razor para la web y Web Views en aplicaciones Blazor Hybrid.

Los componentes Razor funcionan en todos los modelos de hospedaje (Blazor WebAssembly, Blazor Server y en el Web View de Blazor Hybrid) y en todas las plataformas (Android, iOS y Windows). Los modelos y plataformas de hospedaje tienen funcionalidades únicas que los componentes pueden aprovechar, pero los componentes que se ejecutan en modelos y plataformas de hospedaje deben aprovechar las funcionalidades únicas por separado, lo que demuestran los siguientes ejemplos:

• Blazor WebAssembly admite la interoperabilidad sincrónica de JavaScript (JS), que no es compatible con el canal de comunicación de interoperabilidad de JS estrictamente asincrónico en Blazor Server y Web Views de aplicaciones Blazor Hybrid.
• Los componentes de una aplicación Blazor Server pueden acceder a los servicios que solo están disponibles en el servidor, como un contexto de base de datos de Entity Framework.
• Los componentes de BlazorWebView pueden acceder directamente a las características nativas de escritorio y dispositivos móviles, como los servicios de geolocalización. Las aplicaciones Blazor Server y Blazor WebAssembly deben basarse en interfaces de API web de aplicaciones en servidores externos para proporcionar características similares.

Principios de diseño

Para crear componentes Razor que puedan funcionar sin problemas en modelos y plataformas de hospedaje, siga los siguientes principios de diseño:

• Coloque código de interfaz de usuario compartido en bibliotecas de clases Razor (RCL), que son contenedores diseñados para mantener partes reutilizables de la interfaz de usuario para su uso en diferentes modelos y plataformas de hospedaje.
• Las implementaciones de características únicas no deben existir en las RCL. En su lugar, la RCL debe definir abstracciones (interfaces y clases base) que implementen los modelos y plataformas de hospedaje.
• Participe solo por características únicas por modelo o plataforma de hospedaje. Por ejemplo, Blazor WebAssembly admite el uso de IJSInProcessRuntime y IJSInProcessObjectReference en un componente como una optimización, pero solo se usa con una implementación de conversión condicional y reserva que se basa en las abstracciones universal IJSRuntime y IJSObjectReference que admiten todos los modelos y plataformas de hospedaje. Para más información sobre IJSInProcessRuntime, consulte Llamada a métodos de funciones de JavaScript en Blazor de ASP.NET Core. Para más información sobre IJSInProcessObjectReference, consulte Llamada a métodos de funciones de JavaScript en Blazor de ASP.NET Core.
• Como regla general, use CSS para aplicar estilos HTML en componentes. El caso más común es para la coherencia en la apariencia de una aplicación. En los lugares donde los estilos de la interfaz de usuario deben diferir entre los modelos o las plataformas de hospedaje, utilice CSS para aplicar estilo a las diferencias.
• Si alguna parte de la interfaz de usuario requiere contenido adicional o diferente para un modelo o plataforma de hospedaje de destino, el contenido se puede encapsular dentro de un componente y representarse dentro de RCL mediante DynamicComponent. También se puede proporcionar una interfaz de usuario adicional a los componentes a través de instancias RenderFragment. Para obtener más información sobre RenderFragment, consulte Fragmentos de representación de contenido secundario y Representar fragmentos para la lógica de representación reutilizable.

Organización de código del proyecto

Tanto como sea posible, coloque el código y el contenido estático en las bibliotecas de clases de Razor (RCL). Cada modelo o plataforma de hospedaje hace referencia a la RCL y registra implementaciones individuales en la colección de servicios de la aplicación que podría requerir un componente Razor.

Cada ensamblado de destino debe contener solo el código específico de ese modelo o plataforma de hospedaje junto con el código que ayuda a iniciar la aplicación.

Uso de abstracciones para características únicas

En el ejemplo siguiente se muestra cómo usar una abstracción para un servicio de geolocalización por modelo y plataforma de hospedaje.

• En una biblioteca de clases Razor (RCL) usada por la aplicación para obtener datos de geolocalización para la ubicación del usuario en un mapa, el componente MapComponentRazor inserta una abstracción de servicio ILocationService.
• App.Web para proyectos Blazor WebAssembly y Blazor Server implementa ILocationService como WebLocationService, que utiliza llamadas a la API web para obtener datos de geolocalización.
• App.Desktop para .NET MAUI, WPF y Windows Forms, implementa ILocationService como DesktopLocationService. DesktopLocationService usa características de dispositivo específicas de la plataforma para obtener datos de geolocalización.

Código específico de la plataforma .NET MAUIBlazor

Un patrón común en .NET MAUI es crear implementaciones independientes para distintas plataformas, como definir clases parciales con implementaciones específicas de la plataforma. Por ejemplo, vea el diagrama siguiente, donde se implementan clases parciales para CameraService en cada una de las clases CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs y CameraService.cs:

Cuando quiera empaquetar características específicas de la plataforma en una biblioteca de clases que puedan consumir otras aplicaciones, se recomienda seguir un enfoque similar al descrito en el ejemplo anterior y crear una abstracción para el componente Razor:

• Coloque el componente en una biblioteca de clases Razor (RCL).
• Desde una biblioteca de clases .NET MAUI, haga referencia a la RCL y cree las implementaciones específicas de la plataforma.
• Dentro de la aplicación de consumo, haga referencia a la biblioteca de clases .NET MAUI.

En el ejemplo siguiente se muestran los conceptos de las imágenes de una aplicación que organiza fotografías:

• Una aplicación .NET MAUIBlazor Hybrid usa InputPhoto de una RCL a la que hace referencia.
• La aplicación .NET MAUI también hace referencia a una biblioteca de clases .NET MAUI.
• InputPhoto en la RCL inserta una interfaz ICameraService, que se define en la RCL.
• Las implementaciones de clase parcial CameraService para ICameraService se encuentran en la biblioteca de clases .NET MAUI (CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs), que hace referencia a la RCL.

Para obtener un ejemplo, consulta Compilación de una aplicación .NET MAUIBlazor Hybrid con un objeto Blazor Web App.

Recursos adicionales

• Aplicación de referencia de eShop (AdventureWorks): la aplicación .NET MAUIBlazor Hybrid está en la carpeta src/HybridApp.
  • Para el hospedaje de Azure: Azure-Samples/eShopOnAzure repositorio de GitHub
  • Para el hospedaje general que no es de Azure: dotnet/eShop repositorio de GitHub.