Reutilize Razor componentes no ASP.NET Core Blazor Hybrid

Este artigo explica como criar e organizar Razor componentes para a Web e Web Views em aplicativos Blazor Hybrid.

Razor componentes funcionam em modelos de hospedagem (Blazor WebAssembly, Blazor Servere no Web View de Blazor Hybrid) e em plataformas (Android, iOS e Windows). Os modelos e plataformas de hospedagem têm recursos exclusivos que os componentes podem aproveitar, mas os componentes executados em modelos e plataformas de hospedagem devem aproveitar recursos exclusivos separadamente, o que os exemplos a seguir demonstram:

• Blazor WebAssembly suporta interoperabilidade síncrona em JavaScript (JS), que não é suportada pelo canal de comunicação de interoperabilidade estritamente assíncrono JS em Blazor Server e Web Views de apps Blazor Hybrid.
• Os componentes em um aplicativo Blazor Server podem acessar serviços que só estão disponíveis no servidor, como um contexto de banco de dados do Entity Framework.
• Os componentes de um BlazorWebView podem acessar diretamente recursos nativos de desktop e dispositivos móveis, como serviços de geolocalização. Blazor Server e Blazor WebAssembly aplicativos devem depender de interfaces de API da Web de aplicativos em servidores externos para fornecer recursos semelhantes.

Princípios de conceção

Para criar componentes Razor que possam funcionar perfeitamente em modelos e plataformas de hospedagem, siga os seguintes princípios de design:

• Coloque o código compartilhado da interface do usuário em bibliotecas de classe de Razor (RCLs), que são contêineres projetados para manter partes reutilizáveis da interface do usuário para uso em diferentes modelos e plataformas de hospedagem.
• Implementações de recursos exclusivos não devem existir em RCLs. Em vez disso, a RCL deve definir abstrações (interfaces e classes base) que os modelos e plataformas de hospedagem implementam.
• Opte por apenas recursos exclusivos por modelo ou plataforma de hospedagem. Por exemplo, o Blazor WebAssembly suporta o uso de IJSInProcessRuntime e IJSInProcessObjectReference em um componente como uma otimização, mas devem ser usados apenas com casts condicionais e implementações de fallback que dependem das abstrações universais IJSRuntime e IJSObjectReference, suportadas por todos os modelos e plataformas de hospedagem. Para obter mais informações sobre IJSInProcessRuntime, consulte Chamar Funções JavaScript a partir de Métodos .NET no ASP.NET Core Blazor. Para obter mais informações sobre IJSInProcessObjectReference, consulte chamar métodos .NET de funções JavaScript no ASP.NET Core Blazor.
• Como regra geral, use CSS para estilo HTML em componentes. O caso mais comum é de consistência na aparência de um aplicativo. Em locais onde os estilos da interface do usuário devem diferir entre modelos ou plataformas de hospedagem, use CSS para definir o estilo das diferenças.
• Se alguma parte da interface do usuário exigir conteúdo adicional ou diferente para um modelo ou plataforma de hospedagem de destino, o conteúdo poderá ser encapsulado dentro de um componente e renderizado dentro da RCL usando DynamicComponent. A interface do usuário adicional também pode ser fornecida aos componentes por meio de instâncias RenderFragment. Para obter mais informações sobre RenderFragment, consulte Fragmentos de renderização de conteúdo filho e Fragmentos de renderização para lógica reutilizável.

Organização do código do projeto

Na medida do possível, coloque código e conteúdo estático nas bibliotecas de classe Razor (RCLs). Cada modelo ou plataforma de hospedagem faz referência à RCL e registra implementações individuais na coleção de serviços do aplicativo que um componente Razor pode exigir.

Cada assembly de destino deve conter apenas o código específico para esse modelo ou plataforma de hospedagem, juntamente com o código que ajuda a inicializar o aplicativo.

Use abstrações para recursos exclusivos

O exemplo a seguir demonstra como usar uma abstração para um serviço de geolocalização através do modelo de hospedagem e da plataforma.

• Em uma biblioteca de classes Razor (RCL) usada pelo aplicativo para obter dados de geolocalização para a localização do usuário em um mapa, o componente MapComponentRazor injeta uma abstração de serviço ILocationService.
• App.Web para os projetos Blazor WebAssembly e Blazor Server implementa ILocationService como WebLocationService, utilizando chamadas de API da web para obter dados de geolocalização.
• App.Desktop para .NET MAUI, WPF e Windows Forms, implemente ILocationService como DesktopLocationService. DesktopLocationService usa recursos de dispositivo específicos da plataforma para obter dados de geolocalização.

.NET MAUI Blazor código específico da plataforma

Um padrão comum no .NET MAUI é criar implementações separadas para plataformas diferentes, como a definição de classes parciais com implementações específicas da plataforma. Por exemplo, consulte o diagrama a seguir, onde classes parciais para CameraService são implementadas em cada um dos CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cse CameraService.cs:

Onde você deseja empacotar recursos específicos da plataforma em uma biblioteca de classes que pode ser consumida por outros aplicativos, recomendamos que você siga uma abordagem semelhante à descrita no exemplo anterior e crie uma abstração para o componente Razor:

• Coloque o componente em uma biblioteca de classes Razor (RCL).
• A partir de uma biblioteca de classes .NET MAUI, faça referência à RCL e crie as implementações específicas da plataforma.
• No aplicativo de consumo, faça referência à biblioteca de classes .NET MAUI.

O exemplo a seguir demonstra os conceitos para imagens em um aplicativo que organiza fotografias:

• Uma aplicação .NET MAUIBlazor Hybrid utiliza InputPhoto de uma RCL a que faz referência.
• O aplicativo .NET MAUI também faz referência a uma biblioteca de classes .NET MAUI.
• InputPhoto no RCL injeta uma interface ICameraService, que é definida no RCL.
• CameraService implementações parciais de classe para ICameraService estão na biblioteca de classes .NET MAUI (CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs), que faz referência à RCL.

Para obter um exemplo, consulte Criar um aplicativo .NET MAUIBlazor Hybrid com um Blazor Web App.

Recursos adicionais

• Aplicativo de referência eShop (AdventureWorks): O aplicativo .NET MAUIBlazor Hybrid está na pasta src/HybridApp.
  • Para hospedagem do Azure: Azure-Samples/eShopOnAzure repositório GitHub
  • Para hospedagem geral que não seja do Azure: dotnet/eShop repositório GitHub.