Comment réutiliser le code métier d’une application Xamarin dans votre site web ?

Dans un précédent article, nous nous sommes posés la question de savoir si un intégrateur web pouvait designer une application Xamarin Forms.

Dans cet article, je vais plutôt m’intéresser à la question suivante : comment utiliser le code métier provenant d’une application Xamarin dans un site web ?

Un petit rappel avant d’aller plus loin

Xamarin est un framework .NET, open source et cross-platform. Il permet de développer des applications natives Android et iOS en utilisant tous les avantages de .Net et de C#. L’autre bénéfice de ce framework réside dans la possibilité de réutiliser le code métier et le code fonctionnel sur les deux plateformes. Grâce à cette approche, nous arrivons à partager le code métier (jusqu’à 70% de ce dernier) entre les plateformes. Cela nous permet donc de n’avoir que la « partie graphique » qui peut être différée selon les particularités de la plateforme.

C’est en partant de ce constat que j’ai commencé ma recherche, la problématique suivante est alors survenue : quel framework me permettrait de récupérer mon code métier ?

Quid des Frameworks pour récupérer votre code métier

Je vous présente ici la liste des différents Frameworks que j’ai testés.

• Net Core MVC : le framework pour générer des applications web et des API à l’aide du modèle de conception Model View Controller.

Voici la première solution que j’ai finalement rapidement écarté. En effet, l’architecture de mon projet était complètement différente de celle habituellement utilisée sur les applications mobiles. Ce framework n’était donc pas pertinent pour dans mon cas.

• Ooui Web Framework : la bibliothèque d’interface utilisateur multiplateforme pour .NET qui utilise les technologies web.

Pour présenter rapidement cette solution, il s’agit d’un framework permettant de transformer un projet Xamarin.Forms (attention il ne supporte pas les projets Xamarin Natif) en site Web. C’est le deuxième framework que j’ai dû mettre de côté, en effet ce projet OpenSource semble malheureusement avoir été abandonné par son fondateur.

• Uno Platform : la plateforme permettant de créer des applications natives pour mobile, desktop et WebAssembly avec C#.

Ce framework me semblait être une bonne solution, mais après m’être documenté j’ai appris qu’il s’agissait d’une surcouche à une application Xamarin.Forms. Dans notre cas, cela risque d’impacter les performances. De plus, l’application web va énormément ressembler à l’application mobile, ce qui ne répond pas forcément à l’expérience que doit avoir l’utilisateur sur le web. Pour toutes ces raisons, j’ai donc aussi mis de côté cette solution.

• Le combo vainqueur : Blazor/WebAssembly

Après ces quelques tentatives peu fructueuses, j’ai donc décidé de m’intéresser au « combo » Blazor/WebAssembly.

• Blazor est un framework d’interface utilisateur web, il est basé sur les technologies C#, Razor et HTML/CSS. Il s’exécute sur les navigateurs modernes supportant le WebAssembly.
• WebAssembly (ou wasm) est un standard proposé par le W3C pensé pour être l’assembleur du web. On obtient des meilleures performances grâce à une exécution plus efficace des instructions compilées. Ces dernières forment un IL (Intermediary Language), à la façon du CIL (Common Intermediate Language) du monde .NET.

C’est donc grâce à ce binôme, que nous devrions réussir à réutiliser le code métier de notre projet mobile sur notre site web.

Passons au test de Blazor

Pour commencer, j’ai créé une solution très simple. Elle comporte un premier projet pour le code métier et un second projet pour Blazor/WebAssembly qui possède une référence vers le premier.

Dans le projet partagé, j’ai ajouté une simple classe C# (qui fera office de ViewModel) ne contenant qu’une seule propriété publique avec un texte.

Dans le projet UI, il faut maintenant lier mon ViewModel à la vue index.razor basée sur le moteur de template Razor.  Elle sera donc familière à ceux ayant déjà utilisé Razor avec Asp.Net.

Nous allons à présent ajouter le lien vers notre ViewModel grâce à la directive @using tout en haut de la page. Puis, en bas de celle-ci, se trouve le bloc avec le code C#, le Blazor lui-même. Ce code sera exécuté directement lors du RunTime (c’est-à-dire pendant l’exécution d’application). Je crée l’instance du ViewModel dans une méthode du cycle de vie Blazor (OnInitialized), qui va s’exécuter lorsque la page sera affichée à l’écran.

Grace à Razor, je peux appeler la méthode C# directement depuis le code html.

Une fois exécuté j’obtiens le résultat suivant :

Mon premier test me confirme qu’il est bien possible de réutiliser mon code métier dans mon site web.

Pour aller plus loin, j’ai décidé de créer une seconde page accompagné de son ViewModel :

L’objectif, ici, est d’incrémenter un compteur et un message en fonction de ce dernier. Toute la logique est portée par le ViewModel et la vue ne va se charger que d’exécuter la commande exposée par le ViewModel. J’utilise donc une version simplifiée du pattern MVVM – pour Modèle Vue Vue Modèle -(sans le modèle).

Comme dans mon premier test, je lie mon ViewModel à ma vue. Sur ma page html, cette fois-ci, j’ai un bouton et deux labels.

Comme vous avez pu le remarquer, pour l’évènement clic sur le bouton j’appelle directement mon code Blazor qui fait appel au ViewModel. Pour ces 2 labels, je les ai lié directement aux propriétés du ViewModel.

Voici une capture du rendu de la page :

A présent, si je clique sur le bouton, le compteur va comme par magie s’incrémenter. Cela signifie que ma commande a bien été appelée et que la propriété du VM a également bien été incrémentée. Étrange me direz-vous dans les commentaires ! D’ailleurs, si cet article vous plaît, n’hésitez pas à mettre un pouce bleu, oups trop de vidéos YouTube.

Eh bien, je me suis dit la même chose ! Comment la vue a-t-elle été notifiée du changement de la valeur alors que je ne me suis abonné à aucun évènement OnRaisePropertieChanged ?

La réponse est simple : Blazor rafraîchit automatiquement la vue lorsque l’utilisateur interagit avec lui. Plutôt sympa non ?

Pour finir, j’ai décidé de tester l’interaction avec un élément de la page, pour simuler le cas de figure où une action aurait un impact sur la vue (afficher/masquer des éléments). Pour tester cela, j’ai ajouté une méthode qui va retourner display: none en fonction de la valeur de la propriété (nom de la propriété) du ViewModel.

Voici le résultat :

Pour conclure

Comme vous pouvez le constater, au moment où j’écris cet article, il n’existe pas de solution magique permettant de prendre votre application en Xamarin et de la transformer en site web. Blazor + wasm est une solution qui s’inscrit dans l’approche des applications natives comme Xamarin. Elle vous permettra donc de partager votre code métier entre tous les différents types de front-end. Il vous faudra cependant des connaissances en html/css et surtout connaître le moteur de template Razor.

Le projet est toujours en version bêta, il a été publié sur le GitHub de ASP.NET très récemment. Ce framework a un grand potentiel et est reconnu par Microsoft.  J’attends donc de voir la version finale pour tester son réel potentiel !