Partage de code avec Blazor et .NET MAUI

Les composants partagés de Blazor peuvent alimenter l’interface utilisateur sur les applications Web et natives, grâce à .NET MAUI.

.NET FIXE est l’avenir du développement multiplateforme avec .NET : une seule base de code partagée peut alimenter des applications natives pour mobiles et ordinateurs de bureau. Et Blazor est le choix naturel pour les applications Web modernes avec .NET, aidant les développeurs à écrire C# avant et arrière.

Nous avons entendu la promesse de .NET MAUI et de Blazor ensemble, mais dans quelle mesure est-elle réaliste ? Les développeurs Blazor peuvent-ils vraiment alimenter les applications natives avec .NET MAUI tout en utilisant des composants et des styles partagés ? La réponse est oui, jetons un coup d’œil.

Blazor à l’intérieur de .NET MAUI

.NET MAUI accueille Blazor et d’autres frameworks Web en terre natale avec une WebView moderne. BlazorWebView est un composant d’interface utilisateur intelligent, une abstraction qui sait comment saisir la WebView du navigateur sur les plates-formes correspondantes, comme iOS/Android/Windows/Mac. Les développeurs peuvent rendre l’interface utilisateur Web sur les applications mobiles/de bureau, avec tous les avantages de .NET MAUI : code multiplateforme partagé, crochets de cycle de vie des applications et accès facile à l’API de la plateforme.

Il existe des modèles pour que les développeurs commencent à utiliser Blazor avec .NET MAUI—le Application Blazor .NET MAUI pour Visual Studio ou blazer gauche pour les outils de ligne de commande. Le projet résultant met bien les choses en place : pages, partagé et wwwracine– ce sont tous des artefacts connus des développeurs Web Blazor, désormais prêts à être utilisés dans les applications .NET MAUI. La Page d’accueil héberge WebView – et c’est parti avec le routage Blazor, les composants, les mises en page et les styles.

Aussi agréable que Blazor soit dans .NET MAUI, le véritable attrait est d’inciter les développeurs Web à commencer maintenant à créer des applications natives multiplateformes. Les vrais développeurs Web .NET sont probablement déjà en train de créer/maintenir des applications Web avec Blazor. Il peut être impossible de les faire intégrer tous les actifs Blazor maintenant dans une application .NET MAUI. Ce qui est beaucoup plus réaliste, c’est de réutiliser le code Blazor dans les applications natives, tout en servant l’application Web.

Blazor à travers le Web et natif

Alors, comment Blazor et .NET MAUI coexistent-ils tout en servant leurs plateformes respectives ? Simple : rassemblez-les tous dans une seule solution et gardez les ressources communes partagées. Ce n’est pas faisable directement à partir d’un modèle Visual Studio, mais totalement réalisable si les pièces du puzzle sont décomposées. Regardons une solution :

Voici les pièces :

L’objectif est que les bits Blazor pilotent l’application Web existante comme d’habitude, mais les mêmes composants/styles éclairent l’interface utilisateur sur les applications mobiles/de bureau via .NET MAUI. La seule façon d’y parvenir est de les conserver dans un projet partagé, un Bibliothèque de classes de rasoir marche parfaitement. Les parties de l’application Blazor qui rendent réellement l’interface utilisateur (pages, dossiers partagés et wwwroot) peuvent être facilement déplacées dans le projet d’interface utilisateur partagée.

Le projet Blazor pour le Web et le projet .NET MAUI intégrant l’interface utilisateur Blazor dans les applications natives n’ont pas besoin d’avoir les éléments de rendu. Ils ont simplement besoin d’une référence à la bibliothèque d’interface utilisateur partagée, comme ceci :

Interface utilisateur partagée entre les plates-formes

Maintenant que les éléments de rendu de l’interface utilisateur sont partagés entre les projets de plate-forme Web et native, comment seraient-ils utilisés à partir de Blazor sur toutes les plates-formes ?

Tout d’abord, Blazor pour le Web et le projet .NET MAUI intégrant Blazor, ont le _Imports.razor fichier dans le dossier wwwroot – c’est ainsi que Blazor obtient toutes ses dépendances. Les références de projet/d’espace de noms de l’interface utilisateur partagée doivent être ajoutées ici :

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorForWeb.Client
@using BlazorSharedUI
@using BlazorSharedUI.Shared

Blazor pour le Web et Blazor pour .NET MAUI commencent par App.rasoir/Rasoir principal qui charge le routage/composants et le Mise en page principale– il s’agit de la structure squelette des vues Blazor. Étant donné que le dossier partagé héberge désormais le MainLayout en dehors de Blazor pour le Web et les projets .NET MAUI avec Blazor, il doit être signalé explicitement qu’il provient de l’assemblage externe de l’interface utilisateur partagée. Cela doit être fait pour les projets Web et natifs. .

@using BlazorSharedUI.Shared

<Router AppAssembly="@typeof(App).Assembly" AdditionalAssemblies="new[] { typeof(BlazorSharedUI.Shared.MainLayout).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

C’est tout. Le projet Blazor pour les applications Web continue de fonctionner comme d’habitude, en extrayant simplement l’interface utilisateur du projet d’interface utilisateur partagée. Et le projet .NET MAUI fonctionne sur iOS/Android/Windows/Mac en intégrant l’interface utilisateur Blazor via WebView, également à partir du même projet d’interface utilisateur partagée. Blazor est vraiment partout maintenant – il suffit aux développeurs de changer l’application qui est le projet de démarrage dans Visual Studio.

Styles partagés sur toutes les plateformes

Bien que tous les composants Blazor aient été déplacés vers un projet d’interface utilisateur partagée, Blazor pour le Web et le projet .NET MAUI avec Blazor conservent l’artefact de départ de toute interface utilisateur Web, le index.html fichier dans le dossier wwwroot. Ceci est chargé de fournir une structure à la vue HTML, un espace réservé pour les composants et d’extraire toutes les références JavaScript. Étant donné que tout le CSS pour le style a été déplacé vers le projet d’interface utilisateur partagée, les références CSS doivent être mises à jour en conséquence :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>BlazorForNative</title>
    <base href="https://www.telerik.com/" />
    <link rel="stylesheet" href="_content/BlazorSharedUI/css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="_content/BlazorSharedUI/css/app.css" />
    <link href="BlazorForNative.styles.css" rel="stylesheet" />
</head>

<body>
    <div class="status-bar-safe-area"></div>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>
</body>
</html>

Avec un partage app.css utilisé à partir de la bibliothèque d’interface utilisateur partagée par Blazor pour le Web et le projet .NET MAUI avec Blazor, il existe désormais un moyen simple d’appliquer des styles et d’avoir un impact global sur toutes les plates-formes.

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.btn-primary {
    color: #fff;
    background-color: red;
    border-color: #1861ac;
}

...
...       

PS Besoin de suivre pendant que vous jouez avec Blazor et .NET MAUI ? Le code source de l’article est ici.

C’est un Wrap

Blazor est naturellement le framework Web le plus excitant pour les développeurs .NET, permettant C # avant et arrière via WebAssembly. Et .NET MAUI inaugure la prochaine génération de développement multiplateforme natif sur .NET, atteignant sans effort les plateformes mobiles/de bureau à partir d’une seule base de code. Avec un composant d’interface utilisateur WebView moderne, .NET MAUI accueille Blazor en terre natale – les composants et les styles Web peuvent être rendus dans des applications natives sur iOS/Android/Windows/Mac.

Une perspective passionnante pour Blazor avec .NET MAUI est lorsque les développeurs Web peuvent réutiliser les ressources/codes Web pour atteindre les plates-formes mobiles/de bureau. Avec un peu de mélange des principaux éléments de rendu Web, une bibliothèque partagée peut héberger l’ensemble de l’interface utilisateur et des styles, à utiliser à la fois pour les applications Web et natives. Les développeurs peuvent maintenir les composants Web en un seul endroit et les réutiliser pour les applications Blazor sur le Web ou les vues Blazor à l’intérieur des applications mobiles/de bureau avec .NET MAUI.