Dot.Blog

C#, XAML, WinUI, WPF, Android, MAUI, IoT, IA, ChatGPT, Prompt Engineering

MVU et Comet sous MAUI

Je vous ai déjà présenté le pattern MVU vs MVVM, en voici une utilisation originale au travers d’un toolkit MAUI particulier : Comet !

MVU


Qu’est-ce que MVU ? C’est un pattern alternatif à MVVM pour découper le code d’une application. Son principe est résumé par le schéma ci-dessous :



 

On y retrouve 3 intervenants comme sous MVVM mais les rôles sont un peu différent et le ViewModel cède sa place au « Update » dont le fonctionnement n’est pas du tout le même. Mais plutôt qu’une longue redite, je vous invite à lire ou relire l’article complet que j’ai publié au sujet de MVU comparé à MVVM : https://www.e-naxos.com/Blog/post/MAUI-MVU-vs-MVVM.aspx

Comet ?

Comet est une façon particulière d'écrire des interfaces utilisateur multiplateformes. Basé sur .NET MAUI , il suit le pattern MVU et effectue les bindings automatiquement ! Il remplace XAML puisque Comet s’écrit en C# tout en bénéficiant du Hot Reload et autres avantages de MAUI. Comet lui-même est un toolkit écrit en C#.

Le guide démarrage se situe ici : https://github.com/dotnet/Comet/wiki/Getting-Started 



Particularités

Comet s’écrit donc en C# et non en XAML, c’est la première particularité notable. Selon une syntaxe « fluent ». Le deuxième point d’intérêt est l’utilisation d’attributs comme « [Body] » pour dire que ce qui suit est le descriptif visuel d’une page par exemple. Enfin le troisième point est qu’une partie importante des bindings se fait de façon automatique ce qui accélère l’écriture du code et simplifie sa maintenance.

Définition d’une vue Comet :

public class MyPage : View {
    [Body]
    View body () => new Text("Hello World");
}

On peut aussi déclarer la vue directement dans le constructeur de celle-ci :

public class MyPage : View {
    public MyPage() {
        Body = body;
    }
    View body () => new Text("Hello World");
}

Hot Reload

L'utilisation de Hot Reload est le moyen le plus rapide de développer une interface utilisateur, en l’absence bien entendu d’un designer visuel comme pour VB (1991), Delphi (1995), Silverlight (2007), WPF (2006)  ou WinRT (2012), UWP (2015), WinUI (2022). Il faut donc aimer les interfaces écrites à la main par code et n’avoir gardé aucune nostalgie du RAD pourtant inventé il y a 30 ans maintenant… Des fois le progrès est une régression, les éditeurs misant sur l’ignorance des jeunes ingénieurs.

Vous avez compris que je ne suis pas un fan de Comet, non pour des raisons de qualité intrinsèques du produit mais bien parce qu’écrire des UI en code est pour moi une hérésie et une régression technologique insupportable. Toutefois Comet, n’est pas pire sur ce plan que les Xamarin.Forms ou MAUI, et c’est pourquoi je vous le présente car code pour code la façon d’écrire du Comet paraîtra peut-être plus agréables à certains que XAML. Sinon, on a déjà un excellent produit qui s’écrit par code, ce que j’attends et qui ne vient pas c’est le designer visuel de Silverlight et non un système de code de plus. Bref, c’est mon avis, je vous le livre comme ça (après tout c’est mon blog 😊).

Donc pour bénéficier du Hot Reload la configuration est assez simple et ne nécessite que quelques étapes :

Installez l'extension Visual Studio Comet.Reload à partir de Releases (ou Comet pour .NET Mobile si vous utilisez Visual Studio Code)

Installez le modèle de projet Comet disponible sur NuGet.

Ajoutez ce court extrait à votre AppDelegate.cs et/ou MainActivity.cs, ou équivalent.

#if DEBUG
Comet.Reload.Init();
#endif

Les Etats

Comet se base non sur des propriétés mais sur des Etats créés depuis une classe générique State<T>.

Pour ajouter une propriété entière à une vue il faut donc déclarer :

class MyPage : View {
    readonly State<int> clickCount = 1;
}

View devient alors « consciente » de l'état « clickCount ». Lorsque l'état change, la liaison de données se met automatiquement à jour ou reconstruit la vue si nécessaire.

On peut bien entendu construire des états plus complexes à tel point qu’un état peut contenir tout le nécessaire pour gérer une vue, et reprend alors ce qui seraient les propriétés d’un ViewModel en MVVM.

Plateformes prises en compte

Comet prend en compte : Windows, Android, iOS, macOS et Blazor.

Cette liste est déjà assez complète et pourra évoluer avec le temps.

L’état de Comet

Oui, il faut en parler. Dans quel état se trouve Comet lui-même ?

Soyons clairs, Comet est au moment où j’écris ce papier considéré comme étant un POC (Proof Of Concept). Il ne dispose d’aucun soutien officiel de Microsoft et on l’utilise à ses risques et périls comme l’indique son repository GitHub. Mais peut-être que lorsque vous lirez ces lignes les choses auront changé et qu'une version officielle sera disponible. Vérifiez sur le github du projet vous aurez une information à jour !


Conclusion

Comet peut être une façon d’écrire des UI différemment tout en restant en code. On est loin d’un designer visuel qui changerait réellement la donne. Faire du Comet ou du XAML c’est donc une affaire de goût mais aussi de prise de risque. XAML est supporté à 100% depuis des lustres par Microsoft et appartient de plein droit à l’environnement MAUI, Comet est un POC sans existence officielle.

Mais même si le concept ne m’attire pas, pas plus que MVU par rapport à MVVM, je pense qu’on doit tous rester l’esprit ouvert et au moins faire l’effort de regarder ces approches différentes. Rester en éveil est essentiel. JCVD dirait qu’il faut rester aware. Il a raison depuis le départ ! 😊 


Faites des heureux, partagez l'article !
blog comments powered by Disqus