FlexNG : Outil de transformation de code Adobe Flex vers Angular 8+

Byoskill a collaboré avec la société Metrixware, dans la réalisation d’un outil de transformation automatique d’applications Adobe Flex vers des technologies plus modernes comme Angular 8.

Metrixware est un éditeur logiciel au service des Grands Comptes et ETI depuis plus de 23 ans. Metrixware accompagne les entreprises dans les projets de transformation digitale et de gestion du legacy au niveau de leurs applications cœur de métier (Banques, Assurances, Industriels, Administrations, Editeurs Logiciels, ESN …).

L’offre technologique Rapid de Metrixware s’adresse aux éditeurs logiciels et aux grands comptes pour résoudre leurs problématiques les plus critiques :

• Budgets sous contrainte
  • réduction des couts de TMA
  • gestion de l’obsolescence, des applications toxiques
• Enjeux de sécurité
  • des applications coeur de métier basées sur des socles techniques vieillissants, cibles les plus fréquentes des attaques
• Time to market
  • améliorer la capacité à innover fonctionnellement, sans bigbang
  • réaliser des opérations complexes et d’envergure

Flex est une solution de développement créée par Macromedia en 2004 puis reprise par Adobe en 2006. Elle permet de créer et de déployer des applications Internet riches (RIA) multiplateformes grâce à la technologie Flash. Son modèle de programmation fait appel à MXML (basé sur XML) et ActionScript 3.0, reposant sur ECMAScript.

La technologie Flex produit un fichier .swf intégré dans une page html. La richesse de l’interface graphique est offerte grâce à des bibliothèques de composants.

Les enjeux des projets de modernisation

Dans le cadre d’une modernisation d’application, la solution cible doit respecter les caractéristiques suivantes :

• le portage sur un socle moderne et évolutif dans temps :

• l’utilisation des frameworks et librairies reconnues (Angular ou React ou Vue)

  • la mise en place les bonnes pratiques d’architecture pour les années à venir
  • la facilitation de l’industrialisation du build et du run du produit :

• appliquer des méthodes de développement plus standards, plus reconnues par la communauté actuelle des développeurs

  • l’industrialisation des développements : outils de tests, livraisons, versioning

• l’optimisation des coûts et des délais:

• nécessité d’avoir un projet dont la conduite soit transparente, déterministe et incrémentale pour limiter les risques.

  • la réutilisation au maximum du code existant : métier et graphique
  • l’automatisation comme solution pour diminuer les coûts et les bugs

• la conduite du changement

• les interfaces graphiques doivent être préservées pour limiter le temps d’adaptation à la nouvelle version

  • les développeurs responsables de la maintenance doivent être partie intégrante du projet

La solution développée conjointement avec Metrixware

Les avantages de cette solution technique sont nombreux :

• avantage indéniable ⇒ récupération possible d’une partie du code : en effet, le langage ActionScript (ECMAScript 3) utilisé en Flash/Flex est proche du langage TypeScript (ECMAScript 5+) utilisé par Angular. La récupération et le portage du code Flex pourront être automatisés dans la mesure du possible (suivant le code original).

  • l’approche par composants (WebComponents) dans Angular diminue les coûts de migration et les risques. La migration FLEX est alors réalisée par composants et facilite ainsi la réutilisation de code.
  • les performances sont améliorées liées au fait que l’application modernisée sera plus légère que le client lourd réalisé en Flex
  • la disponibilité immédiate de ressources permet la constitution rapide d’une équipe de développeurs auprès des prestataires du client et limite les risques de dépendances.
  • _l’intégration simplifiée de maquettes HTML/_CSS pouvant être réalisées indépendamment par des spécialistes dédiés

• la gestion simplifiée de l’internationalisation

Capacités de l’outil

Passage aisé du ActionScript3 vers TypeScript

L’application Flex, développée en langage ActionScript 3, est proche du langage cible TypeScript (norme ECMAScript 5). Il est donc parfaitement envisageable de pouvoir reprendre de l’ActionScript et de le transformer (manuellement ou automatiquement) en TypeScript.

Obtention de vues HTML à partir du MXML

Des vues HTML peuvent être obtenues à partir des fichiers MXML de description FLEX. Cependant, ces vues HTML feront office uniquement de maquette car ne pourront pas intégrer la partie “contrôleurs de vue”, du fait de la différence de philosophie (et donc d’implémentation) entre les technologies Flex et Angular.

Portage de code Flex vers Angular

Le conversion des fichiers MXML / AS vers HTML / TS est automatisable du fait que les langages soient assez proches l’un de l’autre. Cependant, du fait qu’il existe naturellement des différences structurelles entre les deux technologies, cette conversion demandera souvent de nombreuses interventions manuelles (adaptations) afin de rendre fonctionnel l’ensemble.

Industrialisation

Les applications Javascript permettent facilement la mise en place des bonnes pratiques DevOps.

Cette partie peut être facilement capitalisée par la génération et l’intégration de fichiers de description CI/CD (Continuous Integration / Continuous Delivery) directement dans le code source du projet (gitlab-ci.ylm par exemple).

Avantages de la solution et limitations

Le fait que les deux langages, Flex et Typescript, soient proches l’un de l’autre (ECMAScript 3 pour l’un, ECMAScript 5+ pour l’autre) ouvre la possibilité de récupération d’une partie du code existant, notamment tout ce qui a attrait aux règles métier. Le code migré peut être facilement intégré à une application Angular structurée de manière standard, assurant ainsi la maintenabilité et l’évolutivité de l’application modernisée. La portabilité de code est, de plus, automatisable vu que ces deux langages sont basées sur des standards connus et stables.

La réutilisation de code Flex nécessite qu’il faille effectuer en amont un travail de détection du code inhérent à la technologie Flex, ne devant donc pas être récupéré et du code correspondant à du métier qui lui doit être porté en Angular.

Enfin, et c’est l’objectif final, l’IHM est entièrement réécrite en HTML5/CSS3. Cette partie, finalement relativement indépendante, pourra être traitée en amont avec des web designers spécialisés en UX/UI permettant de revoir complètement l’ergonomie de l’application, généralement bâtie sur des ergonomies vieillissantes voire inexistantes.

Epilogue

L’outillage permet d’automatiser sensiblement la transformation d’une application Flex en Angular.

Pour plus d’information ou une démonstration, contactez-moi.