Blazor pour .NET MAUI : quoi, comment et quand

.NET MAUI promet de rendre le développement natif beaucoup plus facile, surtout si vous savez déjà comment créer pour le Web.

Si vous utilisez ou envisagez d'utiliser Blazor, vous envisagez probablement de créer des applications Web.

Mais avec .NET MAUI, vous pourrez bientôt utiliser cette application Web et l'exécuter également sur Android, iOS, Windows ou MacOS.

Qu'est-ce que .NET MAUI ?

.NET Multi-platform App UI (MAUI) est un framework multiplateforme, actuellement en développement chez Microsoft. Il vous permet de créer des applications multiplateformes avec une base de code partagée pouvant s'exécuter de manière native sur Android, iOS, macOS et Windows.

Prêt à l'emploi, .NET MAUI prend en charge la liaison de données ; API multiplateformes pour accéder aux fonctionnalités natives de l'appareil telles que le GPS, l'accéléromètre, la batterie et les états du réseau ; un moteur de mise en page (pour concevoir des pages) et une fonctionnalité graphique multiplateforme (pour dessiner, peindre des formes et des images).

La promesse de .NET MAUI est que vous pourrez créer une seule application et la faire fonctionner sur les quatre systèmes d'exploitation. Mais cela va encore plus loin lorsque vous ajoutez Blazor au mélange.

Blazor et .NET MAUI ?

Vous pouvez créer l'interface utilisateur de votre application .NET MAUI de deux manières principales : XAML et Blazor.

Si vous avez déjà créé des applications WPF, ou même (oserais-je le mentionner) des applications Silverlight, vous connaissez XAML. Il s'agit d'un langage de balisage propriétaire, de Microsoft, permettant de créer une interface utilisateur utilisée depuis plusieurs années sous diverses formes.

De nature déclarative, il offre un moyen de composer votre interface utilisateur à l'aide de balisage et de faire en sorte que cette interface utilisateur réagisse aux modifications des données sous-jacentes.

Mais XAML n'est pas la seule option pour .NET MAUI – vous pouvez également utiliser Blazor.

En pratique, cela signifie que vous pouvez créer une application Web hybride Blazor à l'aide de composants Razor, HTML et CSS qui s'exécuteront, de manière native, sur ces quatre systèmes d'exploitation.

C'est pour qui ?

Cette possibilité de créer une application native avec une interface utilisateur écrite en HTML et CSS en fait une option particulièrement utile si vous êtes déjà à l'aise avec la création pour le Web. Cela signifie que vous pouvez utiliser toutes vos connaissances, compétences et expériences existantes et les transformer en création d'une application native.

À ce stade précoce, il semble qu'il existe trois cas d'utilisation principaux pour l'adoption de .NET MAUI (avec Blazor).

• En tant que développeur Web/Blazor, pour prendre votreapplication Blazor existanteet exécutez-le nativement sur mobile et ordinateur
• En tant que développeur web/Blazor, pour faire untoute nouvelle application nativeen utilisant vos compétences existantes
• En tant que développeur de bureau, pour utiliser Blazor pour tout ou partie de votre application, en apportant potentiellement des composants Blazor de la communauté et/ou de toute application Web existante à laquelle vous avez accès

Comment fonctionnent les applications hybrides Blazor ?

.NET MAUI est livré avec un contrôle pratique appeléBlazorWebView.

Le nom ici peut être un peu trompeur, car il donne l'impression que vous exécutez toujours votre application Blazor en tant qu'application Web, en quelque sorte déconnectée du matériel natif de l'appareil sur lequel vous l'exécutez.

En réalité, alors queBlazorWebViewvous permet en effet d'héberger votre application Web Blazor dans une application .NET MAUI, l'application ne s'exécute pas sur WebAssembly (comme vous pourriez le supposer au départ) ou sur une autre technologie basée sur un navigateur.

Vous n'avez pas besoin d'un serveur Web ou d'un autre moyen pour héberger votre application.

Votre application hybride .NET Blazor s'exécutera à 100 % en mode natif, sur l'appareil, non via HTTP et non contenue dans le bac à sable du navigateur (ce à quoi vous êtes généralement limité lors de l'exécution d'une application Web).

En effet, la seule partie "web" de votre application est l'interface utilisateur, qui est construite à l'aide de HTML et CSS et rendue dans un contrôle de vue Web. Tout votre code, votre application et votre logique métier s'exécutent localement sur l'appareil.

En conséquence, Blazor avec .NET MAUI offre un moyen pratique de créer votre application, en utilisant des paradigmes, des outils et une expérience de conception familiers, tout en offrant les avantages de l'exécution d'une application native (y compris l'accès aux API natives telles que les API GPS et d'accéléromètre pour l'appareil natif).

Comment utilisez-vous BlazorWebView ?

Vous aurez besoin d'un projet .NET MAUI.

Ensuite, vous pouvez déclarer une instance deBlazorWebViewcontrôle, pointant vers le composant Razor que vous souhaitez rendre.

<b :BlazorWebView PageHôte="wwwroot/index.html">
    <b :BlazorWebView.RootComponents>
        <b :Composant racine Sélecteur="#application" Type de composant="{x :Tapez local :Principal}" />
    </b :BlazorWebView.RootComponents>
</b :BlazorWebView>

Dans cet exemple, nous essayons de rendre unPrincipalcomposant (situé dans l'application client MAUI).

Vous pouvez avoir plus d'unBlazorWebViewouvrant la possibilité de créer une application .NET MAUI qui utilise Blazor pour certaines mais pas la totalité de votre interface utilisateur (utilisant potentiellement plusieursBlazorWebViewcontrôles pour restituer divers composants à plusieurs endroits dans votre application .NET MAUI).

Partage de composants entre les clients Web et natifs

Vous avez également la possibilité de rendre les composants définis dans une bibliothèque de classes Razor.

Avec cela, vous pouvez créer des composants partagés qui sont définis dans une bibliothèque de classes Razor, puis utilisés par les clients Blazor Server/WASM et .NET MAUI.

Dans cet exemple, nous avons une application Blazor Server (qui s'appuie sur ASP.NET et s'exécute via .NET sur le serveur Web) et une application .NET MAUI (s'exécutant sur la version spécifique à l'appareil et à la plate-forme du framework .NET), toutes deux capables pour rendre les composants de la bibliothèque de classes Razor partagée.

Gérer les différences entre les différentes plates-formes

C'est bien beau, mais que se passe-t-il si vous devez modifier le fonctionnement de votre application, en fonction de la plate-forme sur laquelle vous l'exécutez ?

Par exemple, supposons que vous vouliez afficher un bouton pour permettre aux utilisateurs de prendre une photo à l'aide de l'appareil photo sur iOS et Android, mais pas sur Windows ou MacOS.

Dans ce scénario, vous pouvez effectuer des appels à partir d'un composant Razor situé dans votre application .NET MAUI pour vérifier sur quel système d'exploitation l'application s'exécute actuellement.

bourdonnerAfficherBoutonCaméra=Système opérateur.EstAndroid() ||Système opérateur.IsIOS();

Vous pouvez ensuite restituer des parties de votre interface utilisateur en fonction de ces fonctionnalités de plate-forme.

@si(AfficherBoutonCaméra){
	
}

Vous devrez déterminer où placer votre code d'application

Une chose que vous devrez prendre en compte, lors de la création d'une application .NET MAUI Blazor, est de savoir où définir vos composants.

Si vous créez une application .NET MAUI sans obligation d'exécution sur le Web, c'est assez simple. Mais si vous essayez de partager des composants entre Blazor Server/WASM et .NET MAUI, vous devrez réfléchir un peu aux parties de votre application qui doivent être partagées et à celles qui doivent être plus spécifiques à la plate-forme.

Par exemple, le code conditionnel ci-dessus (pour afficher un bouton de caméra) doit vraiment vivre dans une application client .NET MAUI, car c'est là que vous pouvez détecter le système d'exploitation sous-jacent.

Essayez de savoir si vous utilisez Android dans une application Blazor WASM et vous serez probablement déçu !

Cela peut vous amener à vous demander comment gérer l'interface utilisateur conditionnelle dans un composant partagé. Par exemple, si vous aviez un composant partagé dans une bibliothèque de classes Razor et que vous deviez utiliser une logique conditionnelle pour modifier son apparence ou son comportement en fonction de la plate-forme sous-jacente.

L'astuce consiste à pousser cette logique plus haut, dans un composant qui s'exécute dans l'application .NET MAUI, et à la laisser transmettre un paramètre au composant partagé, qui peut alors déterminer son propre destin.

Ici, nous laisserions lePrincipaldans l'application .NET MAUI, vérifiez la plate-forme sur laquelle nous fonctionnons, puis transmettez ces informations (en tant que paramètre) au partageGaleriecomposant.

Main.razor (client MAUI)

<Galerie EnableCameraButton="@enableCamera" />

@code{
	privé bourdonneractiverCaméra= 
}

Gallery.razor (bibliothèque de classes Razor)

@if (EnableCameraButton) {<bouton>Prendre une photo</bouton>}

@code{

    [Paramètre]
    Publique bourdonnerEnableCameraButton{ avoir; ensemble; }

}

Cela soulève la question suivante : que se passe-t-il si quelqu'un clique sur le bouton ? Ensuite, nous voudrions invoquer l'API native pour lancer réellement la caméra sur l'appareil.

Nous ne pouvons pas mettre ce type de code dans le composant partagé, mais nous pouvons envoyer un signal lorsque le bouton "Prendre une photo" est cliqué.

Pour cela, nous pouvons utiliser unRappel d'événementpour signaler que le bouton a été cliqué.

Gallery.razor (bibliothèque de classes Razor)

@if (EnableCameraButton) {<bouton @sur clic="CaméraBoutonClique">Prendre une photo</bouton>}

@code{

    [Paramètre]
    Publique bourdonnerEnableCameraButton{ avoir; ensemble; }

    [Paramètre]
    PubliqueBouton de caméra de rappel d'événement cliqué{ avoir; ensemble; }

}

Nous pouvons ensuite réagir à cet événement dans l'application .NET MAUI.

Main.razor (client MAUI)

<Galerie EnableCameraButton="@enableCamera" CaméraBoutonClique="@Ouvrir la caméra" />

@code{
    privé bourdonneractiverCaméra= vrai;

    annuler Ouvrir la caméra()
    {
        
    }
}

Avec cette approche, nous avons réussi à conserver uniquement le code qui a du sens pour les appareils natifs dans l'application .NET MAUI et nous avons quand même réussi à utiliser un composant partagé (à partir d'une bibliothèque de classes Razor).

Quand .NET MAUI arrive-t-il ?

Au moment de la rédaction, .NET MAUI Preview 13 est disponible pour une utilisation avec Visual Studio 2022 Preview (17.2 Preview 1).

Selon lefeuille de route officiellenous pouvons nous attendre à une version GA (disponibilité générale) de MAUI pour .NET 6 au deuxième trimestre 2022, avec une version .NET 7 à suivre au quatrième trimestre 2022.