Guía: Blazor aplicaciones híbridas 101

Blazor sí es una plataforma de pila completa que elimina la necesidad de llamar a JavaScript complejo al ejecutar aplicaciones web. En su lugar, todo lo que escribes está en C#. Pero otra gran cosa es que Blazor desarrollo se basa en componentes. Esto significa que puede escribir componentes pequeños con Razor sintaxis (que combina marcado HTML y código C#) y compartirlos en la aplicación o en otros proyectos que se ejecutan en la web.

Ahora, para dar un paso atrás, Blazor también es parte de ASP.NET Core. Que en sí misma es una poderosa plataforma web que le permite desarrollar aplicaciones web, API, servicios, sitios web, servicios en segundo plano, etc. Todo en C# y .NET. Reunidos, Blazor y ASP.NET Core garantizar la reutilización y el uso compartido del código entre los componentes del lado del servidor y del lado del cliente, la optimización del rendimiento, el manejo más eficiente de las solicitudes y más.

Pero la flexibilidad de Blazor no termina aquí. De hecho, se extiende a tres escenarios en los que Blazor funciona: Blazor Server (con su enfoque innovador que admite tanto un modo de servidor interactivo como un modo de representación estática, lo que permite que las aplicaciones se ejecuten en el servidor sobre el tiempo de ejecución completo de .NET) y Blazor WebAssembly (que se usa para crear aplicaciones del lado cliente directamente en el explorador en un entorno de ejecución de .NET basado en WebAssembly). La mejor parte es que Blazor Server y Blazor WebAssembly funcionan perfectamente bien en el modo de renderizado automático.

Y luego está el tercer modelo: Blazor Hybrid. Que es el tema principal aquí que se discutirá en detalle en las siguientes secciones.

Blazor híbrido es un patrón de desarrollo de Microsoft que combina tecnologías web como HTML, CSS y, opcionalmente, JavaScript con marcos de desarrollo nativos de aplicaciones móviles o de escritorio. En esencia, una aplicación híbrida Blazor se ejecutará en el lado del cliente y no tendrá acceso directo a ninguno de los recursos del servidor y de la red.

For desktop applications, Blazor Hybrid can implement frameworks like:

• .NET MAUI
• WPF
• Formularios de Windows

En este caso, Blazor componentes se insertan en contenedores de aplicaciones nativas mediante controles como Blazor WebView.

En el caso de las aplicaciones móviles que se ejecutan en iOS y Android, Blazor híbrido puede usar .NET MAUI.

Aquí, los componentes se pueden incrustar en interfaces de usuario móviles nativas mediante componentes como Blazor WebView.

Cuando tiene una aplicación híbrida Blazor, hay Razor componentes representados en un control de vista web incrustado a través de un canal de interoperabilidad local y se ejecutan de forma nativa en el dispositivo. El código Blazor aquí se carga y ejecuta rápidamente, y los componentes obtienen acceso completo a las capacidades nativas del dispositivo a través de la plataforma .NET. Pero veamos cómo funciona Blazor híbrido con diferentes marcos de aplicaciones nativas de .NET.

Blazor Hybrid + .NET MAUI

Para empezar, .NET MAUI ofrece un marco unificado para crear aplicaciones destinadas a varias plataformas, incluidas iOS, Android, macOS, Windows y más. Una gran ventaja es que cuando se usa .NET MAUI y Blazor juntos, las aplicaciones se crean con un único código base y se pueden compartir fácilmente el código y los componentes de la interfaz de usuario entre diferentes destinos (móvil, escritorio y web). De este modo, se beneficia de una experiencia de desarrollo coherente y reduce la necesidad de escribir código independiente para cada plataforma.

Sin embargo, para que Blazor componentes se integren en la interfaz de usuario nativa de cada plataforma, Blazor aplicaciones híbridas aprovechan Blazor control WebView. Funciona como un soporte de componentes Blazor, lo que le permite integrar Blazor componentes y la lógica de la interfaz de usuario sin problemas en contenedores de aplicaciones nativas y aplicaciones híbridas. Las cosas que puede hacer con el control Blazor WebView son:

• Hospede componentes Blazor que puedan coexistir con otros elementos nativos de la interfaz de usuario.
• Interactúe con Blazor componentes y pase datos entre ellos.
• Controle eventos como clics o cambios de entrada y desencadene acciones.
• Controle cosas como la inicialización, el renderizado, etc.

Blazor Hybrid + WPF

Otra forma de crear aplicaciones híbridas Blazor es con WPF, un marco de interfaz de usuario de pila completa con herramientas completas y un ecosistema enriquecido, lo que le permite desarrollar aplicaciones de escritorio ricas en características. Aquí, puede usar las amplias capacidades que ofrece WPF y garantizar la capacidad de respuesta y los proyectos de escritorio visualmente atractivos, al tiempo que integra componentes Blazor en aplicaciones nuevas o existentes.

Lo más emocionante aquí es que utiliza el control WebView2 que le permite incrustar HTML, CSS y JavaScript en sus aplicaciones nativas. Sin embargo, también puede usar BlazorWebView para WPF, lo que proporciona una manera sencilla de insertar contenido Blazor dentro de las aplicaciones de escritorio de Windows.

Blazor Hybrid + Windows Forms

Blazor híbrido también proporciona BlazorWebView para este marco. Básicamente, el control BlazorWebView actúa como un puente entre Blazor componentes y la aplicación de Windows Forms que está compilando. Es clave para el proceso, ya que proporciona un contenedor para hospedar componentes Razor dentro de la interfaz de usuario de Windows Forms, lo que les permite representarse en una vista web incrustada mientras aprovechan todas las capacidades nativas del sistema operativo Windows. Dado que Blazor componentes se hospedan en BlazorWebView, pueden comunicarse con código nativo de Windows Forms mediante mecanismos de interoperabilidad. Esto permite cosas como el intercambio de datos, el manejo de eventos y otros, lo que lo hace ideal para una amplia gama de escenarios de escritorio.

A estas alturas, ya deberías haber entendido cómo funciona Blazor híbrido y qué es una aplicación Blazor híbrida. Ahora, pasemos a las ventajas y desventajas que puede traer.

Blazor Hybrid Advantages:

• Se trata de rendimiento, flexibilidad y velocidad.
• Blazor Hybrid apps run using the .NET runtime natively on target platforms.
• Blazor Las aplicaciones híbridas se pueden ejecutar sin conexión una vez descargadas (por el contrario, los componentes representados para el modelo de hospedaje de Blazor Server no se pueden ejecutar cuando no hay conexión con el servidor).
• Permite descargar la mayor parte o la totalidad del procesamiento a los clientes. De esta manera, la aplicación procesa una cantidad significativa de datos con mayor facilidad.
• Puede usar conocimientos de back-end o de .NET C# para desarrollar la interfaz de usuario de front-end de la aplicación.
• Permite el acceso completo a las capacidades nativas de la API de cliente, con Razor componentes que se ejecutan directamente en la aplicación nativa.
• Capacidad para crear aplicaciones que tengan acceso a las características y capacidades nativas de la plataforma.

Blazor Hybrid Disadvantages:

• A veces, es posible que tenga que ejecutar código administrado (C#) y nativo, lo que puede dar lugar a sobrecargas de rendimiento.
• Aunque Blazor aplicaciones híbridas se compilan en uno o varios recursos de implementación independientes, los recursos suelen proporcionarse a los clientes a través de una tienda de aplicaciones de terceros.
• Blazor Las aplicaciones híbridas requieren un instalador y un mecanismo de implementación específico de la plataforma.
• Puede haber limitaciones en términos de características y API específicas de la plataforma.
• Es posible que tenga que invertir más tiempo en aprender a integrar correctamente Blazor con la plataforma de destino.
• Cuando hay limitaciones o problemas con el control WebView, esto puede poner en peligro la funcionalidad y el rendimiento de toda la aplicación.

Componentes

Evite crear componentes monolíticos enormes. En su lugar, intente combinar componentes pequeños y concisos para crear otros más grandes que puedan manejar casos más complejos. Además, en los componentes, esfuércese por centrarse en visualizar el modelo en vistas e interactuar con las entradas del usuario. Considere la posibilidad de delegar el procesamiento específico del dominio a un servicio externo. De este modo, se aumentará la capacidad de mantenimiento y se simplificará la implementación de pruebas automatizadas. Si planea lanzar la aplicación híbrida no solo como una aplicación móvil o de escritorio, sino también como una aplicación web, aísle Razor componentes y clases compartidas en un proyecto de biblioteca de clases Razor y haga referencia a él desde el proyecto MAUI.

El enlace de datos

Debe ser mejor que la interacción entre los componentes se realice mediante el enlace de datos. No se recomiendan los diseños que utilizan las directivas "@ref" para obtener la referencia de un componente y, a continuación, utilizar las propiedades y los métodos de ese componente, excepto en algunos escenarios, como los componentes de diálogo. Por ejemplo, si desea seleccionar inicialmente una opción determinada en una lista desplegable, no llame al método de selección de la lista desplegable. En su lugar, implemente una variable de campo que indique la opción seleccionada y vincule bidireccionalmente esa variable de campo a la lista desplegable.

Enrutamiento

Si también lo está lanzando como una aplicación web, debe considerar el diseño de enrutamiento de URL que use directivas "@page". Por ejemplo, si está creando una página para buscar una lista, incluya las palabras clave de búsqueda en la cadena de consulta de la dirección URL para permitir escenarios de uso compartido de vínculos.

Form Validation

Se recomienda que la validación del formulario se implemente en función de "EditForm" y "EditorContext" de Blazor. Blazor proporciona un mecanismo de validación de formularios declarativos mediante el componente "DataAnnotaionValidator", basado en atributos que anotan el modelo, por lo que es bueno usarlo. Alternativamente, también están disponibles otras bibliotecas de validación de formularios de terceros.

dependencias

Las clases de servicio individuales deben simplificarse en virtud del principio de responsabilidad única. Sin embargo, para ello será necesario que muchas clases de servicio trabajen juntas. En este caso, se recomienda que los contenedores "DI (inserción de dependencias)" se utilicen activamente para resolver dependencias entre servicios. Delegar la responsabilidad de generar objetos de servicio al contenedor de inserción de dependencias aumentará enormemente la capacidad de mantenimiento y la productividad.

Además, al usar la funcionalidad nativa de la plataforma, debe abstraer la funcionalidad en interfaces, implementar clases concretas que implementen esa interfaz para cada plataforma e insertarlas y usarlas en componentes a través del contenedor de inserción de dependencias. La inserción de dependencias no es solo para conectar simulacros en pruebas unitarias.

Gestión del Estado

El estado de la interfaz de usuario específico del componente, como el estado abierto/cerrado de un componente de acordeón, debe administrarse a través de variables o propiedades de campo de componente. Si la aplicación también se publica como una aplicación web, considere la posibilidad de usar parámetros de consulta de URL para guardar el estado de la interfaz de usuario. Hablando de la administración de estados globales, como compartir temas de combinación de colores en todos los componentes de la interfaz de usuario, será útil usar parámetros en cascada. El modelo de nivel de dominio se manejará mejor a través de la inserción de dependencias convirtiéndolo en una clase de servicio. Por supuesto, hay varias otras bibliotecas de administración de estado global que puede considerar usar.

Autenticación y autorización

No implemente la autenticación y la autorización usted mismo. En su lugar, utilice las bibliotecas confiables existentes. Para la infraestructura de autenticación, considere la posibilidad de usar un servicio denominado "ID como servicio" en lugar de depender de su propia implementación. Al implementar la autorización mediante el protocolo OAuth para la integración con servicios web externos, especialmente para aplicaciones móviles o de escritorio, asegúrese de evitar que se roben códigos de autorización debido al registro duplicado de esquemas personalizados, como el uso de PKCE.

Pruebas automatizadas

Incluso para el desarrollo de aplicaciones híbridas, las pruebas automatizadas son esenciales para el desarrollo sostenible del software y el crecimiento del producto. Aislar el procesamiento específico del dominio en clases de servicio hace que las pruebas automatizadas sean más fáciles de implementar y mantener. Las pruebas unitarias también se pueden implementar para el dominio de la interfaz de usuario mediante bibliotecas de terceros, como bUnit. Si la aplicación también se va a lanzar como una aplicación web, también se pueden realizar pruebas de extremo a extremo basadas en el conocimiento del desarrollo de aplicaciones web mediante el uso de herramientas de terceros como Playwright.

Integración con ASP.NET Core API

ASP.NET Core es la misma plataforma .NET que la aplicación Blazor híbrida, por lo que la combinación de estas aplicaciones nos permite desarrollar aplicaciones fuertemente tipadas, seguras y eficientes, como compartir clases de transferencia de datos. La comunicación bidireccional en tiempo real basada en WebSocket (conocida como SignalR) o gRPC se puede implementar fácilmente, así como la API REST.

Integración con JavaScript

A través de la función de interoperabilidad de JavaScript de Blazor, las implementaciones de interfaz de usuario que son difíciles de lograr solo con Blazor se pueden realizar utilizando JavaScript. Afortunadamente, los desarrolladores no necesariamente tienen que escribir JavaScript ellos mismos, que ya se puede distribuir como una biblioteca de terceros como un paquete NuGet. También es posible utilizar bibliotecas de JavaScript conocidas dentro de WebView para trabajar en conjunto con Blazor.

Integración con Blazor WebAssembly

Si la aplicación también se va a publicar como una aplicación web, se puede publicar como PWA y funcionar sin conexión si se puede publicar en el modelo de aplicación Blazor WebAssembly.

Ignite UI es una biblioteca completa de cientos de componentes de interfaz de usuario para cada uno de los principales marcos web. Incluye las cuadrículas más rápidas del mercado, gráficos de alto rendimiento optimizados para la velocidad y el rendimiento, y cualquier otro control que necesite para la experiencia de creación de aplicaciones más completa. Cuando se trata de Ignite UI for Blazor en particular, está capacitado para crear aplicaciones web ricas en funciones utilizando un conjunto rápido de componentes y características. Estos incluyen cuadrícula de datos, cuadrícula dinámica, cuadrícula jerárquica y más; cualquier gráfico que necesite: Área, Circular, Financiero, etc., además de controles únicos como Stepper, Dock Manager y muchos otros.

Primeros pasos con Ignite UI y Blazor híbrido

En esta sección, le mostraremos cómo crear y ejecutar una aplicación híbrida Blazor con .NET MAUI y Ignite UI for Blazor y mostraremos un ejemplo completo de Blazor híbrido al final. Tenga en cuenta que la aplicación híbrida Blazor-MAUI se puede desarrollar en distribuciones de Windows, macOS o Linux. Sin embargo, para el propósito de este artículo, describiremos solo un escenario basado en Windows.

Prerequisites:

• .NET SDK 8 or above
• La versión más reciente de Visual Studio 2022 o superior, con las siguientes cargas de trabajo:
• .NET Multi-platform App UI development
• ASP.NET y desarrollo web

Step 1: Create a new ".NET MAUI Blazor Hybrid App" project in Visual Studio.

Paso 2: Proporcione un nombre y una ubicación del proyecto y, después de hacerlo, haga clic en Crear.

Paso 3: En Visual Studio, abra el administrador de paquetes NuGet seleccionando Proyecto → Administrar paquetes NuGet. Busque e instale el paquete NuGet IgniteUI.Blazor.

Step 4: Register Ignite UI for Blazor

En primer lugar, tendrás que abrir el archivo MauiProgram.cs y registrar el servicio Ignite UI for Blazor llamando al constructor. Services.AddIgniteUIBlazor función. A continuación, agregue IgniteUI. Blazor. Controla el espacio de nombres en el archivo_Imports.razor.

@using IgniteUI.Blazor.Controls

Una vez listo, añade la hoja de estilo en el elemento <head> del archivo wwwroot/index.html:

<head> <link rel="stylesheet" href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" /> </head>

Para continuar y agregar la referencia de script al archivo wwwroot/index.html, haga lo siguiente:

<script src="_content/IgniteUI.Blazor/app.bundle.js"></script> <script src="_framework/blazor.webview.js" autostart="false"></script>

Paso 5: Adición Ignite UI for Blazor componentes

Así es como se hace:

<IgbCard style="width:350px"> <IgbCardMedia> <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" /> </IgbCardMedia> <IgbCardHeader> <h4>Jane Doe</h4> <h6>Professional Photographer</h6> </IgbCardHeader> <IgbCardContent>Hola! Soy Jane, fotógrafa y cineasta. La fotografía es una forma de sentir, de tocar, de amar. Lo que has captado en la película queda capturado para siempre... recuerda pequeñas cosas, mucho después de que lo hayas olvidado todo.</IgbCardContent> <IgbCardActions> <IgbButton>More Info</IgbButton> </IgbCardActions> </IgbCard>

Y así es como se crea una aplicación de Blazor.NET MAUI para Windows.

Dado que Blazor se está convirtiendo en uno de los marcos más populares y utilizados para el desarrollo de aplicaciones web de hoy en día, es esencial saber ir más allá de lo básico. Es por eso que puede ir y explorar las guías adicionales que se enumeran a continuación, para que pueda profundizar su comprensión y mejorar su experiencia en el desarrollo Blazor. Profundice en temas avanzados, domine las mejores prácticas y manténgase actualizado.

• Blazor Essentials: Tu guía paso a paso
• Guía: Construyendo la cuadrícula de Blazor perfecta
• Ignite UI for Blazor - .NET MAUI Blazor App Help Documentation