Partager via


Création d’une interface utilisateur composite basée sur des microservices

Conseil / Astuce

Ce contenu est un extrait du livre électronique 'Architecture des microservices .NET pour les applications .NET conteneurisées', disponible sur .NET Docs ou en tant que PDF téléchargeable gratuitement, lisible hors ligne.

Architecture de microservices .NET pour les applications .NET conteneurisées - vignette de couverture du livre électronique.

L’architecture des microservices commence souvent par la gestion côté serveur des données et de la logique, mais, dans de nombreux cas, l’interface utilisateur est toujours gérée en tant que monolithe. Toutefois, une approche plus avancée, appelée micro frontends, consiste également à concevoir l’interface utilisateur de votre application en fonction des microservices. Cela signifie avoir une interface utilisateur composite produite par les microservices, plutôt que des microservices sur le serveur et simplement une application client monolithique qui consomme les microservices. Avec cette approche, les microservices que vous créez peuvent être complets en intégrant à la fois la logique et la représentation visuelle.

La figure 4-20 montre l’approche plus simple de la consommation de microservices à partir d’une application cliente monolithique. Bien sûr, vous pouvez avoir un service MVC ASP.NET entre la production du code HTML et javaScript. La figure est une simplification qui met en évidence que vous avez une interface utilisateur cliente unique (monolithique) consommant les microservices, qui se concentrent simplement sur la logique et les données et non sur la forme de l’interface utilisateur (HTML et JavaScript).

Diagramme d’une application d’interface utilisateur monolithique se connectant à des microservices.

Figure 4-20. Une application d’interface utilisateur monolithique consommant des microservices principaux

En revanche, une interface utilisateur composite est générée et composée avec précision par les microservices eux-mêmes. Certains microservices pilotent la forme visuelle de zones spécifiques de l’interface utilisateur. La principale différence est que vous avez des composants d’interface utilisateur client (classes TypeScript, par exemple) basés sur des modèles et que le ViewModel de l’interface utilisateur de mise en forme des données pour ces modèles provient de chaque microservice.

Au démarrage de l’application cliente, chacun des composants de l’interface utilisateur client (classes TypeScript, par exemple) s’inscrit auprès d’un microservice d’infrastructure capable de fournir des ViewModels pour un scénario donné. Si le microservice change la forme, l’interface utilisateur change également.

La figure 4-21 montre une version de cette approche d’interface utilisateur composite. Cette approche est simplifiée, car vous pouvez avoir d’autres microservices qui agrégent des parties granulaires basées sur différentes techniques. Cela dépend de la création d’une approche web traditionnelle (ASP.NET MVC) ou d’une application SPA (application monopage).

Diagramme d’une interface utilisateur composite composée de nombreux modèles d’affichage.

Figure 4-21. Exemple d’application d’interface utilisateur composite mise en forme par des microservices principaux

Chacun de ces microservices de composition d’interface utilisateur serait similaire à une petite passerelle d’API. Mais dans ce cas, chacun est responsable d’une petite zone d’interface utilisateur.

Une approche composite de l’interface utilisateur pilotée par les microservices peut être plus difficile ou moins, selon les technologies d’interface utilisateur que vous utilisez. Par exemple, vous n’utiliserez pas les mêmes techniques pour la création d’une application web traditionnelle que vous utilisez pour la création d’une application SPA ou pour une application mobile native (ce qui peut être plus difficile pour cette approche).

L’exemple d’application eShopOnContainers utilise l’approche monolithique de l’interface utilisateur pour plusieurs raisons. Tout d’abord, il s’agit d’une introduction aux microservices et aux conteneurs. Une interface utilisateur composite est plus avancée, mais nécessite également une complexité supplémentaire lors de la conception et du développement de l’interface utilisateur. Deuxièmement, eShopOnContainers fournit également une application mobile native basée sur Xamarin (non prise en charge depuis mai 2024), ce qui le rend plus complexe côté client C#.

Toutefois, nous vous encourageons à utiliser les références suivantes pour en savoir plus sur l’interface utilisateur composite basée sur les microservices.

Ressources supplémentaires