Au cours des 4 dernières années, j'ai travaillé avec l'équipe de migration de la DRIT sur le problème de la migration des interfaces utilisateur graphiques (GUI). Nous avons publié plusieurs articles et avons réussi à migrer des applications basées sur différents frameworks GUI. Aujourd'hui, nous allons voir ensemble comment nous réalisons un si grand projet. En bref, je vous présenterai l'ingénierie dirigée par les modèles et la méta-modélisation que nous avons réalisée pour les interfaces graphiques.
L'ingénierie dirigée par les modèles est une bonne solution lorsque vous souhaitez effectuer une analyse d'une application. Elle consiste essentiellement à représenter une application avec un niveau d'abstraction plus élevé que le code. Je suis presque sûr que vous connaissez la qualité des logiciels SonarQube. Ces logiciels analysent votre base de code à l'aide d'un analyseur et créent un modèle pour récupérer des informations telles que l'odeur du code, la vulnérabilité, etc.
Pour migrer Berger-Levrault, nous appliquons un type d'analyse similaire. Nous effectuons d'abord une extraction des applications pour rassembler les concepts abstraits tels que les classes, les méthodes, les invocations de méthodes. Ensuite, nous récupérons à partir de ces concepts l'interface graphique définie pour chaque application. Mais... Quels sont les concepts nécessaires pour représenter une interface graphique ?
Concepts de l'interface utilisateur graphique : Qu'est-ce qui compose une interface utilisateur graphique ?
Une interface utilisateur graphique peut être divisée en trois parties principales : visuelle, comportementale et métier. Chaque partie a sa responsabilité et, lors de la migration d'une application, nécessite un travail spécifique.
- Code visuel décrit l'aspect visuel de l'interface graphique. Il contient les éléments visuels de l'interface. Il définit les caractéristiques inhérentes des composants, comme la possibilité de cliquer dessus, leur couleur et leur taille. Il décrit également la position de ces composants par rapport aux autres (disposition).
- Code comportemental définit le flux d'action/navigation qui est exécuté lorsqu'un utilisateur interagit avec l'interface graphique. Il est également possible que les actions soient automatiquement déclenchées à la suite d'une sortie.
- Code d'affaires est spécifique à une application. Elle comprend les règles de l'application, l'adresse du serveur distant et les données spécifiques à l'application.
Représentation du code visuel 🖥️
Le premier travail que nous avons mené pour migrer les applications était de représenter le code visuel de toute interface graphique. Comme nous travaillons principalement sur des applications web, nous avons jeté un coup d'oeil à w3schoolsqui est une référence mondiale pour apprendre le HTML. Il décrit les principaux composants HTML et leurs attributs. Il nous permet de construire une belle représentation de ce qu'est une interface graphique.
Le noyau vise à représenter les principaux éléments de l'interface graphique. L'élément central est le Widget. Il représente un élément visuel de l'interface graphique : un bouton, un texte, un panneau ou un ensemble de champs. Comme vous pouvez le voir, un Widget peut être un Container. Le conteneur a pour but de représenter un widget qui peut en contenir un autre. C'est par exemple le cas du panneau. Les widgets peuvent avoir plusieurs attributs. Les attributs configurent l'aspect visuel d'un widget : couleur, largeur, hauteur, etc.
En plus du noyau, nous avons représenté plusieurs concepts de widgets et de mise en page. Les widgets visent à obtenir une représentation précise de l'interface graphique et la mise en page nous permet de représenter les positions des widgets. Au total, nous avons défini plus de 100 concepts pour représenter l'application de Berger-Levrault. Et nous continuons à en ajouter de nouveaux.
Représentation du code comportemental ⚙️
La deuxième étape est la représentation du code comportemental. Le code comportemental est le code exécuté lorsque les utilisateurs finaux interagissent avec l'interface graphique. et modifie ou obtient des informations de la partie visuelle. Ainsi, nous identifions deux catégories de code comportemental : les événements et la manipulation de l'interface utilisateur.
- Les événements correspondent aux interractions que les utilisateurs finaux peuvent effectuer. Il y a : cliquer, modifier, soumettre, etc.
- Manipulation de l'interface utilisateur correspond au code exécuté et qui modifie l'interface utilisateur.
Pour représenter le code comportemental, nous avons également créé un package comportemental. Comme vous pouvez le voir, il comprend la partie événements (côté droit) et la partie Manipulation de l'interface utilisateur (côté gauche). Pour les événements, nous avons défini : click, change, error, submit complete, et submit. Pour la partie UIManipulation, nous définissons l'action d'ouverture de popup ou de dialogue, la navigation vers une autre page web, et l'accès à un attribut d'un Widget.
Représentation du code de l'entreprise ⚖️
Enfin, nous avons dû représenter le code métier. Le code métier comprend les données manipulées par l'application ainsi que les services du backend. Ici, nous ne présentons que la représentation des données.
Pour le code métier, le concept principal est le DTO. Le DTO, ou objet de transfert de données, représente des données qui peuvent être sérialisées et transférées vers le backend ou facilement manipulées par le front-end. Le DTO peut être une collection de DTO, un dictionnaire de DTO, une primitive ou un Business Type. Les Business Types sont ceux qui sont manipulés dans notre application GWT : CampagneDTO, UserDTO, etc. La compréhension de ces données est essentielle pour la migration. Grâce à elles, nous pouvons recréer les DTO dans la langue cible.
En conclusion
Nous avons créé une visualisation de l'ensemble de ces paquets. Vous pouvez Téléchargez-le ici. Nous avons maintenant une représentation complète de l'interface graphique. Plusieurs questions sont encore en suspens ! Comment extraire un modèle à partir du code source ? Comment générer l'application cible ? Comment utiliser ce modèle pour obtenir de belles métriques sur le code ? Et identifier un nouveau type d'odeur de code ? Ou créer une meilleure ligne de produits ? Tout d'abord, nous pouvons apprendre à utiliser les outils suivants modèles grâce à Moose ou MoDisco. Ensuite, proposons de nouvelles idées dans la zone de commentaires ou contactez-nous avec de grandes idées !
