Explorer les liaisons Blazor Mobile

Il est temps de sonder la promesse des Blazor Mobile Bindings qui incitent les développeurs Web à venir créer des applications mobiles.

Blazor dévore le monde. On peut soutenir que Blazor est l'une des technologies les plus intéressantes pour les développeurs Web sur la pile .NET et permet de créer des applications Web côté client / serveur entièrement en C #. Blazor invite les développeurs dans un écosystème riche et voit des innovations continues avec des outils / performances.

Blazor n'est pas seulement pour les applications Web et a des implications claires pour le bureau / mobile. Bien qu'expérimental, Blazor Mobile Bindings suscite l'intérêt de nombreux développeurs mobiles. Les liaisons expérimentales Mobile Blazor permettent aux développeurs de créer des applications mobiles natives ou hybrides à l'aide de C # / .NET pour cibler iOS, Android et d'autres plates-formes. L'attrait est simple: utilisez la syntaxe Razor et le modèle de composant Blazor bien connu pour créer des applications mobiles.

Examinons de plus près Blazor Mobile Bindings pour créer des applications mobiles multiplateformes natives – nous allons explorer sous les couvertures pour plus de clarté et voir une application "Hello World" en action.

Démystifier les mythes

Nous commençons par essayer de dissiper une certaine confusion avec des discussions honnêtes avec les développeurs.

Q: Est-ce que nous réinventons Xamarin.Forms via Blazor?
R: Non. Les liaisons Blazor Mobile pour créer des applications natives sont une abstraction située au-dessus de la pile Mono / Xamarin. Le rendu du projet et de l'interface utilisateur est à peu près Xamarin.Forms, mais écrit avec le modèle de programmation Web de Blazor.

Q: Je suis heureux d'écrire C # / XAML en tant que développeur Xamarin … et si je l'ai fait vous ne voulez pas écrire de code Blazor?
R: Vous n'êtes pas obligé. Blazor Mobile Bindings est destiné à inviter les développeurs Web .NET dans le monde mobile natif – une autre option pour définir votre arborescence visuelle d'interface utilisateur.

Q: Cet assemblage Web est-il destiné aux applications mobiles natives?
A : Non. Il n'y a pas de WASM ici. Les liaisons Blazor Mobile sont littéralement destinées à rendre l'interface utilisateur native sur les plates-formes mobiles via l'abstraction Xamarin.Forms, juste avec le sucre syntaxique de Blazor.

Q: Comment sont les performances?
A: It est à peu près identique à Xamarin.Forms sur les tests de base. Cela pourrait s'améliorer grâce à l'utilisation de moteurs de rendu / gestionnaires d'interface utilisateur universels dans .NET MAUI, qui devrait prendre en charge C # / XAML, C # avec MVU et Blazor Mobile Bindings.

Q: Est-ce que Blazor Mobile Bindings propose beaucoup de composants d'interface utilisateur?
R: Une grande partie de l'interface utilisateur de Xamarin.Forms est déjà disponible en tant que composants Blazor, comme indiqué dans la liste ci-dessous. Il n'est pas difficile de créer des wrappers pour les contrôles personnalisés et il existe déjà plus d'une douzaine de Blazor Bindings pour Telerik UI pour Xamarin .

Q: La syntaxe de Blazor ne devient-elle pas facilement du code spaghetti?
R: Eh bien, si les développeurs ne font pas attention. Les modèles de conception recommandent de ne pas combiner l'interface utilisateur balisage et code dans le même fichier. Heureusement avec Blazor, les pages Razor peuvent être séparées de Razor.cs «code-behind» avec une convention et des classes partielles, comme illustré ci-dessous et expliqué plus en détail dans le code.

Utilisation de 'Hello World'

La majorité des applications mobiles se terminent souvent montrant une liste de choses. Ainsi, un test «Hello World» pour les liaisons Blazor Mobile pourrait consister à afficher une liste d'éléments, peut-être extraits du cloud pour ressembler à la réalité. Faisons cela.

Les développeurs recherchent souvent de fausses API pour tester leurs applications. Un de ces merveilleux services RESTful est {JSON} Placeholder – une API REST complète pour les tests / prototypes. Supposons que nous voulions récupérer une liste de messages à afficher dans notre application mobile, disponible sur https://jsonplaceholder.typicode.com/posts – des points de cookie pour les messages réels étant en latin.

Pour essayer des choses avec Blazor Mobile Bindings, nous obtiendrions le modèle de projet .NET CLI et lancerions un nouveau projet. Le projet échafaudé est à peu près un projet Xamarin.Forms avec un package NuGet supplémentaire pour les liaisons Blazor Mobile et une autre façon de démarrer l'application. La première chose à faire est de créer une classe C # simple, afin que nous puissions mapper le flux JSON provenant du service RESTful en objets, comme ceci:

 using System;
en utilisant Newtonsoft.Json;

espace de noms BlazorMobile
{
    Message de classe publique
    {
        [JsonProperty(PropertyName = "title")]
        chaîne publique Title {get; ensemble; }

        [JsonProperty(PropertyName = "body")]
        chaîne publique Body {get; ensemble; }

        [JsonProperty(PropertyName = "userId")]
        chaîne publique UserID {get; ensemble; }

        [JsonProperty(PropertyName = "id")]
        ID de chaîne publique {get; ensemble; }

        Message public () {}
    }
} 

Comme bonne pratique, nous devrions conserver les constantes au niveau du projet en un seul endroit – comme l'URL de notre service RESTful:

 using System;

espace de noms BlazorMobile
{
    Constantes de classe publique
    {
        chaîne statique publique POSTRestfulAPIEndpoint = "https://jsonplaceholder.typicode.com/posts";

        Constantes publiques () {}
    }
} 

Ensuite, nous avons besoin d'une petite classe d'aide appelée PostManager qui sait comment atteindre le point final et récupérer une collection de messages de manière asynchrone. Remarquez comment la méthode GetPosts () renvoie une ObservableCollection – cela facilite la liaison des données à notre interface utilisateur, si nécessaire. Le service JSON PlaceHolder RESTful renvoie un maximum de 100 messages par requête.

 using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
en utilisant System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
en utilisant Newtonsoft.Json;

espace de noms BlazorMobile
{
    classe publique PostManager
    {
        public ObservableCollection  MyPosts = new ObservableCollection  ();
        HttpClient myClient = new HttpClient ();

        Tâche publique async <ObservableCollection > GetPosts ()
        {
            var response = wait myClient.GetAsync (Constants.POSTRestfulAPIEndpoint);

            if (response.IsSuccessStatusCode)
            {
                var content = attendre la réponse.Content.ReadAsStringAsync ();
                MyPosts = JsonConvert.DeserializeObject <ObservableCollection > (contenu);
            }

            return MyPosts;
        }

        public PostManager ()
        {
        }
    }
} 

Regardons de plus près App.cs qui contient du code qui amorce notre application et donne accès aux événements du cycle de vie. Les développeurs Xamarin.Forms noteront la différence ici: cela emprunte à ASP.NET land et ajoute des services via l'injection de dépendances. Notre application MainPage est un espace réservé de contenu et le seul composant ajouté est HelloWorld comme ceci:

 using System;
en utilisant Microsoft.MobileBlazorBindings;
en utilisant Microsoft.Extensions.Hosting;
à l'aide de Xamarin.Essentials;
using Xamarin.Forms;

espace de noms BlazorMobile
{
    Application de classe publique: Application
    {
        Application publique ()
        {
            var hôte = MobileBlazorBindingsHost.CreateDefaultBuilder ()
                .ConfigureServices ((hostContext, services) =>
                {
                    // Enregistrez tous les services spécifiques à l'application.
                })
                .Construire();

            MainPage = nouveau ContentPage ();
            host.AddComponent  (parent: MainPage);
        }

        protection prioritaire void OnStart ()
        {
        }

        protection prioritaire void OnSleep ()
        {
        }

        protected override void OnResume ()
        {
        }
    }
} 

Ensuite, nous définissons un nouveau composant Blazor appelé PostList pour afficher uniquement le Title de chaque message provenant du flux JSON Restful. Nous décrivons essentiellement l'arborescence visuelle Xamarin.Forms, mais avec la syntaxe Razor familière et du code mélangé, pour exposer des paramètres ou créer des fonctions:

 @code
{
    [Parameter] Publier Post PostToDisplay {get; ensemble; }
} 

Revenons maintenant à notre principal composant HelloWorld . Bien que Blazor Mobile Bindings permette au balisage et au code d'être dans le même fichier, cela ne serait pas une pratique recommandée car la complexité augmente. Une manière beaucoup plus propre serait de séparer le code en deux fichiers – ce serait HelloWorld.razor et HelloWorld.razor.cs juste par convention. Tout ce que nous avons à faire est de définir une classe Partial et nous utilisons la classe 'code-behind' pour récupérer les données du service RESTful, comme ceci:

 using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
en utilisant System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
en utilisant Newtonsoft.Json;

espace de noms BlazorMobile
{
    classe partielle publique HelloWorld
    {
        public ObservableCollection  PostsToBind = new ObservableCollection  ();

        Tâche async de remplacement protégé OnInitializedAsync ()
        {
            attendre FetchData ();
            attendre base.OnInitializedAsync ();
        }

        public HelloWorld ()
        {

        }

        Tâche publique async FetchData ()
        {
            PostManager VM = nouveau PostManager ();
            PostsToBind = attendre VM.GetPosts ();
        }
    }
} 

Avec les données JSON extraites du service RESTful et disponibles en tant qu'objet de collection .NET, nous pouvons maintenant passer au balisage de l'arborescence visuelle dans le composant HelloWorld Blazor. Nous imprimons le "Hello World!" Obligatoire. puis parcourez la collection de messages – rendant le composant PostList autant de fois que le nombre de messages. Cela s'apparente à un DataTemplate dans un ListView / GridView pour les développeurs Xamarin.Forms – le modèle ou le composant est responsable du rendu du balisage visuel pour chaque élément de la collection. Pour chaque publication individuelle, nous nous assurons de définir la propriété PostToDisplay sur le composant PostList, de sorte que la publication correspondante soit disponible pour le composant en tant que paramètre.

    

        

        
            
                 @foreach (Publier chaquePost dans PostsToBind)
                {
                    
                }
            
        

    
 

Le composant Blazor enfant peut désormais gérer l'élément de publication individuel envoyé en tant que paramètre et utilise le balisage pour rendre le titre de chaque message. Le résultat final est une interface utilisateur mobile simple affichant une liste de publications avec un défilement infini, comme récupéré à partir du service RESTful, comme indiqué ci-dessous.

Conclusion

Blazor Mobile Bindings est expérimental, mais il est très prometteur. Bien que l'interface utilisateur rendue de l'application mobile puisse se ressembler, Blazor Mobile Bindings apporte un départ complet du C # / XAML traditionnel utilisé pour peindre l'arborescence visuelle dans Xamarin.Forms. Tout est un composant Blazor et toute l'interface utilisateur est native. Blazor Mobile Bindings fournit simplement une abstraction sur Xamarin.Forms, mais avec une forte inciter les développeurs Web à créer des applications mobiles multiplateformes natives. Selon les rumeurs, Blazor Mobile Bindings serait prêt pour la production avec .NET MAUI offrant des options supplémentaires pour créer des applications mobiles natives. Jusque-là, les développeurs de Blazor peuvent expérimentez et réjouissez-vous des possibilités.

PS: Cet article fait partie du génial calendrier de l'Avent 2020 C # .