基于元模型的应用程序GUI迁移增量方法

0里尔大学，科学与技术学院0里尔大学计算机科学博士培养部0使用元模型的应用程序GUI迁移的增量方法0使用元模型的应用程序图形界面迁移的增量方法0博士学位0于2021年10月21日公开并进行答辩0以获得0里尔科学与技术大学博士学位0（计算机专业）0由0Benoît Verhaeghe0评审委员会组成0主席：Franck Barbier（教授 - 波城和阿多尔地区大学）0评审人：Salah Sadou（教授 - 布列塔尼南部大学）Jean-Rémy Falleri（副教授 - 波尔多大学）0导师：Nicolas Anquetil（副教授 - 里尔大学）Anne Etien（教授 - 里尔大学）0博士生共同导师：Abderrahmane Seriai（副教授 - Berger-Levrault）0里尔计算机、信号和自动化研究中心 - UMR 9189 INRIA Lille - Nord Europei0致谢0首先，我要感谢我的导师Anne Etien和NicolasAnquetil，让我有机会参与这次冒险。我还要感谢AbderrahmaneSeriai和LaurentDeruelle，他们帮助我缩小了基础研究和工业界之间的差距。感谢你们多年来的支持、鼓励和建议。我要感谢Franck Barbier、Salah Sadou和Jean-RémyFalleri，他们同意成为我的博士委员会的一部分。能够有你们在场，我感到非常荣幸，也非常感谢你们的评论和建议。我的博士论文在RMOD团队成员的特别愉快的环境下完成。特别感谢Julien、Cyril、Christopher和Guillaume，为我们提供了许多茶歇和咖啡时间。我还有机会在Berger-Levrault的研究团队工作。我要感谢Pascal、Michel、Jimmy和Julien与我一起讨论电影和政治的时间。我还有机会得到前博士生的陪伴：JB、Clement、Sophie、Vincent B.和VincentA.，他们帮助我表达了挫折和问题。Tot anostekeer！我还有机会在Bruno的家中生活，完成了我的博士论文写作。这是一次特别愉快的经历，我永远不会感谢你们让我与你们一起生活。我由衷感谢我的家人，在这个经历中一直支持着我。特别感谢我的父母和岳父母为我提供的一切，以及我的兄弟Adrien和Tristan无条件地支持我。我还要感谢我心爱的Annaëlle，因为她是我生活的一部分，与我分享了许多难忘的时刻，并在这些年里支持和鼓励着我。最重要的是，我要感谢我的祖母，她让我与她一起生活了8年。Mercimémé .iii0致Brigitte Lhomme，v0摘要0开发人员使用GUI框架来设计应用程序的图形用户界面。它允许他们重用现有的图形组件并快速构建应用程序。然而，随着移动设备和Web应用程序的普及，GUI框架以快速的速度发展：JavaFX取代了Java Swing，Angular 8取代了Angular1.4，后者曾取代了GWT（Google WebToolkit）。此外，以前的GUI框架不再受支持。这种情况迫使组织定期将其应用程序迁移到现代框架，以避免过时。为了简化应用程序的迁移，以前的研究设计了专门用于迁移项目的自动化方法。虽然它们提供了良好的结果，但很难适应其原始环境之外的其他环境。例如，在我们的工业合作伙伴Berger-Levrault，应用程序是用通用编程语言（Java/GWT）、专有的“第四代”语言（VisualBasic6、PowerBuilder）或标记语言（Silverlight）编写的。因此，需要一种语言无关的迁移方法，可以将各种GUI框架迁移到最新技术。此外，在使用这些方法进行自动迁移时，仍然需要手动修复部分迁移的应用程序。对于这些最后一步可能持续数月的大型应用程序来说，这个问题更加重要。因此，公司需要逐步迁移其应用程序，以确保在整个过程中实现端到端的持续交付。在本论文中，我们提出了一种新的增量迁移方法。它旨在允许迁移大型应用程序并确保端到端交付。它包括使用我们的自动GUI迁移工具迁移页面，修复它们，并将它们集成到混合应用程序中。为了创建我们的GUI迁移工具，我们设计了一个由多个包组成的中心元模型，表示任何GUI的可视和行为方面。我们详细介绍了我们的GUI迁移工具的多个实现，这些实现使用不同的框架提取和生成GUI。我们成功地将我们的迁移方法应用于Berger-Levrault的一个真实工业应用程序。迁移后的应用程序现在已经投入生产。我们还在多个迁移项目上验证了我们的自动GUI迁移工具，包括使用编程语言和标记语言开发的应用程序。该公司目前正在将我们的方法用于其他迁移项目中。0关键词：图形用户界面，模型驱动工程，迁移，工业vii0摘要0开发人员使用图形用户界面框架（GUI框架）来设计应用程序的图形用户界面。这使他们能够重用现有的图形组件并快速构建应用程序。然而，随着移动设备和Web应用程序的普及，GUI框架正在快速发展：JavaFX取代了Java Swing，Angular8取代了Angular 1.4，后者取代了GWT（Google WebToolkit）。此外，旧的GUI框架不再受支持。这种情况迫使组织定期将其应用程序迁移到现代框架，以避免其过时。为了简化应用程序的迁移，先前的研究已经设计出了专门用于迁移项目的自动化方法。尽管它们提供了良好的结果，但很难适应其他不同的上下文。例如，在我们的工业合作伙伴Berger-Levrault，应用程序使用通用编程语言（Java/GWT），专有的“第四代”编程语言（VisualBasic6，PowerBuilder）或标记语言（Silverlight）编写。因此，有必要采用一种独立于语言的迁移方法，以将各种图形界面迁移到最新的技术。此外，在使用这些方法进行自动迁移时，仍然需要手动修复部分迁移后的应用程序。对于大型应用程序来说，这个问题更加重要，因为这个步骤可能需要几个月的时间。因此，企业必须以增量方式迁移其应用程序，以确保在整个过程中持续向最终用户交付。在本论文中，我们提出了一种新的增量迁移方法。它旨在在保证向最终用户交付的同时迁移大型应用程序。它通过使用我们的GUI自动迁移工具迁移页面，对其进行修复并将其集成到混合应用程序中。为了创建我们的GUI迁移工具，我们设计了一个由多个包组成的GUI中间模型，表示整个GUI的视觉和行为方面。我们详细介绍了我们的GUI迁移工具的多个实现，这些实现提取和生成使用不同框架的GUI。我们已经成功地将我们的迁移方法应用于Berger-Levrault的一个工业应用程序。迁移后的应用程序现已投入生产。我们还在多个迁移项目中验证了我们的GUI自动迁移工具，其中包括使用编程语言和标记语言开发的应用程序。该公司目前正在使用我们的方法进行其他迁移项目。0关键词：图形用户界面，模型驱动工程，迁移，工业0目录01 引言 101.1 背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101.2 问题  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301.3 我们的方法概述  . . . . . . . . . . . . . . . . . . . . . 401.4 贡献  . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501.5 论文结构 . . . . . . . . . . . . . . . . . . . . . . . 501.6 发表论文列表  . . . . . . . . . . . . . . . . . . . . . . . . . 602 现状 902.1 GUI表示  . . . . . . . . . . . . . . . . . . . . . . . . . 902.2 GUI迁移 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1302.3 增量迁移 . . . . . . . . . . . . . . . . . . . . . . . . . . . 180I GUI迁移 2303 方法 2503.1 GUI术语和概念 . . . . . . . . . . . . . . . . . . . . . . . . 2503.2 方法概述 . . . . . . . . . . . . . . . . . . . . . . . . . . 3103.3 可视化代码迁移方法 . . . . . . . . . . . . . . . . . . . . 3503.4 行为代码迁移方法 . . . . . . . . . . . . . . . . . . . . . . . . 4603.5 结论 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5304 实现 5504.1 可视化代码提取 . . . . . . . . . . . . . . . . . . . . . . . . 5504.2 可视化代码生成 . . . . . . . . . . . . . . . . . . . . . . . 6104.3 行为代码提取 . . . . . . . . . . . . . . . . . . . . . . . . . 6304.4 行为代码生成 . . . . . . . . . . . . . . . . . . . . . . . . . 6804.5 结论 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7305 迁移验证 7505.1 可视化代码迁移验证 . . . . . . . . . . . . . . . . . . . . . 7505.2 行为代码迁移验证 . . . . . . . . . . . . . . . . . . . . . . . . 8305.3 讨论 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8705.4 有效性威胁 . . . . . . . . . . . . . . . . . . . . . . . . . . 9005.5 结论 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9205.6 GUI迁移结论 . . . . . . . . . . . . . . . . . . . . . . . 930II 增量迁移方法 9506 增量迁移 9706.1 增量迁移方法 . . . . . . . . . . . . . . . . . . . . . . . . . 9706.2 混合架构 . . . . . . . . . . . . . . . . . . . . . . . . . . 9906.3 实现 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10206.4 结论 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10707 增量迁移验证 10907.1 案例研究：Omaje应用 . . . . . . . . . . . . . . . . . . . 10907.2 研究问题和评估方法 . . . . . . . . . . . . . . . . . . . . . 11107.3 评估结果 . . . . . . . . . . . . . . . . . . . . . . . . . . . 11307.4 增量方法的讨论 . . . . . . . . . . . . . . . . . . . . . . . . . . 11707.5 有效性威胁 . . . . . . . . . . . . . . . . . . . . . . . . . . 11907.6 增量方法的结论 . . . . . . . . . . . . . . . . . . . . . . . . . . 12108 结论 12308.1 总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12308.2 贡献 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12408.3 未来工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1250参考文献 1290图表清单01.1 方法概述总结 . . . . . . . . . . . . . . . . . . . . . . . 402.1 KDM - UIResources类图 . . . . . . . . . . . . . . . . 1002.2 IFML - 视图元素 . . . . . . . . . . . . . . . . . . . . . 1103.1 GUI示例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2703.2 布局示例 . . . . . . . . . . . . . . . . . . . . . . . . . . 2803.3 Java到Angular的GUI迁移具体示例 . . . . . . . 3203.4 Pivot元模型 . . . . . . . . . . . . . . . . . . . . . . . . . 3303.5 我们的GUI迁移过程 . . . . . . . . . . . . . . . . . . . . . 3403.6 核心包 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3603.7 小部件包摘录 . . . . . . . . . . . . . . . . . . . . 3703.8 布局包 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3803.9 提取可视化代码的步骤 . . . . . . . . . . . . . . . . . . . . . 4003.10 生成可视化代码的子步骤 . . . . . . . . . . . . . . . . . . . 4403.11 行为包 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4703.12 提取行为代码的子步骤 . . . . . . . . . . . . . . . . . . . . 4803.13 生成行为代码的子步骤 . . . . . . . . . . . . . . . . . . . . . . 5103.14 我们的GUI详细迁移过程 . . . . . . . . . . . . . . . . . . 5404.1 列表4.6的模型转换示例 . . . . . . . . . . . . . . . . . . . . . 6704.2 Angular事件绑定功能 . . . . . . . . . . . . . . . . . . . . 7004.3 Angular中的数据绑定 . . . . . . . . . . . . . . . . . . . . . 7205.1 BLCore - GUI元模型 . . . . . . . . . . . . . . . . . . . 7605.2 页面迁移的可视化比较（Kitchensink） . . . . . . . 8105.3 用户设置页面的可视化比较（Traccar） . . . . . . . 8205.4 可视化比较（DBManager） . . . . . . . . . . . . . . . . . . 8206.1 增量迁移过程 . . . . . . . . . . . . . . . . . . . . . . . . 9806.2 混合架构 . . . . . . . . . . . . . . . . . . . . . . . . . . 10006.3 GWT和Angular混合应用的操作架构  10206.4 打包和使用已迁移的Angular页面与Web组件 10306.5 混合通信中的数据转换过程 . . . . . . . . . . . . . . . . 10707.1 模块迁移可视化代码所花费的时间 . . . . . . . . 11007.2 模块迁移行为代码所花费的时间 . . . . . . . . . 11107.3 性能评估结果 . . . . . . . . . . . . . . . . . . . . . 11608.1 布局管理器转换 . . . . . . . . . . . . . . . . . . . . . 1260表格列表02.1 现有迁移项目 . . . . . . . . . . . . . . . . . . . . . . . 1602.2 满足约束条件的混合架构 . . . . . . . . . . . . . . . 2003.1 支持提取新GUI框架的子步骤 . . . . . . . . . . . . . . 4103.2 使用已知框架提取可视化代码的子步骤 . . . . 4203.3 支持使用新GUI框架生成的子步骤 . . . . . . . . . 4403.4 使用已知框架生成可视化代码的子步骤 . 4503.5 配置新框架提取行为代码的子步骤 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 4903.6 提取应用程序行为代码的子步骤 . . . . . . . . . 5003.7 配置新框架生成行为代码的子步骤 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 5203.8 生成应用程序行为代码的子步骤 . . . . . . . . . 5205.1 案例研究描述 . . . . . . . . . . . . . . . . . . . . . . . 7605.2 应用程序描述 . . . . . . . . . . . . . . . . . . . . . . 7705.3 提取结果 . . . . . . . . . . . . . . . . . . . . . . . . . . 8005.4 手动事件处理程序提取检查结果 . . . . . . . . . . . 8505.5 自然代码 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8607.1 毫秒级通信性能 . . . . . . . . . . . . . . . . . . . . . . . . . 11407.2 秒级构建性能 . . . . . . . . . . . . . . . . . . . . . . . . . . 1150清单列表03.1 Java中的行为代码 . . . . . . . . . . . . . . . . . . . . . . . 2904.1 GXT登录视图的XML代码片段 . . . . . . . . . . . . . . . 5604.2 在Java GWT中创建用户界面 . . . . . . . . . . . . . . . . 5904.3 在Pharo Spec中构建布局和DOM . . . . . . . . . . . . . . . 6004.4 在Java GWT中创建复杂布局 . . . . . . . . . . . . . . . . 6004.5 在Java/GWT中创建事件处理程序 . . . . . . . . . . . . . . . 6504.6 操作代码示例 . . . . . . . . . . . . . . . . . . . . . . . . . . 6604.7 Java代码示例 . . . . . . . . . . . . . . . . . . . . . . . . 7004.8 从Java代码迁移的HTML代码示例，见清单4.7 . 7004.9 从Java代码迁移的TypeScript代码示例，见清单4.7 7104.10 数据绑定 - HTML部分 . . . . . . . . . . . . . . . . . . . . 7204.11 数据绑定 - TypeScript部分 . . . . . . . . . . . . . . . . . . . 720清单列表 xiii06.1 暴露（displayPhase，addDataRefresh）和未暴露（addDataRefreshEvent）方法到混合架构 .. . . . . . . 1061Berger-Levrault: https://www.berger-levrault.com/fr/0第1章 引言0目录01.1 背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101.2 问题 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301.3 我们的方法概述 . . . . . . . . . . . . . . . . . . . . . . . . . . . 401.4 贡献 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501.5 论文结构 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501.6 发表论文列表 . . . . . . . . . . . . . . . . . . . . . . . . . . . 601.1 背景0本论文是与Berger-Levrault 1进行的工业合作项目。Berger-Levrault为公共和私营利益相关者提供软件解决方案。例如，它构建管理软件、计算机化维护管理系统（CMMS）、医疗记录和护理软件、教学软件解决方案等等。一个显著的特点是该公司的增长战略。除了为客户开发新的软件系统外，Berger-Levrault还收购具有现有系统的其他公司。虽然这种策略有其优势，但也会影响软件开发。实际上，被收购的公司并不总是使用Berger-Levrault选择的编程语言。这导致使用多种编程语言和框架开发的软件系统的多样性。幸运的是，过去十年中，Berger-Levrault一直在其产品中推出创新的动态，特别是通过整合研究成果中的突破性功能。在这个意义上，成立了一个研发部门，以缩小科学界和工业界之间的差距。在Berger-Levrault进行的几个科学项目中，其中之一是一个大规模的翻新项目，旨在标准化开发。它包括0第1章 引言0将公司现有软件解决方案汇集成一个广泛且可扩展的系统，采用组件化架构[Allier等，2011年]。为了实现这个目标，进行了几个项目，目前正在进行中，并计划将来进行。微服务[Selmadji等，2020年]、微前端、软件互操作性[Amokrane等，2020年]、软件测试和软件迁移是Berger-Levrault软件翻新中的热门话题。本论文是翻新项目的一部分，涉及其应用程序的图形用户界面（GUI）的迁移。像Berger-Levrault这样的公司为其客户开发图形用户界面。GUI方便最终用户与软件系统的交互。为了构建易于使用的用户界面，开发人员使用GUI框架。框架由一组通用功能组成，帮助开发人员创建软件系统。使用GUI框架，开发人员可以访问现有的图形组件，如按钮和文本输入。它使他们能够更快地开发并降低创建GUI的成本。然而，这些GUI框架发展迅速。在过去的40年中，开发了90多个GUI框架。一方面，旧的GUI框架不再得到支持：例如，GWT的最后一个重要版本是在2009年。另一方面，现代GUI框架发展迅速：2020年有三个主要版本的Angular 3，一个主要版本和两个次要版本的React.js4，一个次要版本的Vue.js 5，以及两个主要版本的Ember.js 60已经发布了最新的GUI框架。对于公司来说，使用最现代的GUI框架是至关重要的。实际上，从最终用户的角度来看，GUI就是软件系统。因此，使用最新的GUI标准的软件系统更具吸引力，并且对于销售这些系统的公司来说是一个加分项。使用现代的GUI框架提高了代码的可重用性、开发的灵活性，并减少了错误和回归的风险。这种情况迫使公司定期更新他们的软件系统，以保持他们的客户，并避免陷入旧技术。已经提出了简化应用程序GUI迁移的方法[Fleurey etal.，2007，Sánchez Ramón et al.，2014，Robillard andKutschera，2019]。然而，每种提出的方法都专门用于使用一种特定框架的GUI迁移。对于使用多个GUI框架的公司来说，这将强制重新开发每个应用程序的迁移方法。此外，这些现有方法只执行部分GUI迁移。例如，某些方法不会自动迁移与最终用户的可能交互。因此，在交付新系统之前，剩余的代码必须手动迁移。02参见https://en.wikipedia.org/wiki/List_of_widget_toolkits3 https://angular.io/ 4 https://reactjs.org/ 5https://vuejs.org/ 6 https://emberjs.com/01.2. 问题30交付。当迁移大型应用程序时，这样的手动步骤可能需要几个月的时间。因此，在此期间开发新功能将被阻塞，最终用户将不会收到任何更新。在工业环境中，这种方法是不可接受的，因为有着交付的巨大压力。01.2 问题0本论文所涉及的工业环境使我们能够确定在支持GUI迁移时存在两个问题：支持GUI框架无关的迁移和实现增量迁移。0支持GUI框架无关的迁移。已经提出了支持GUI迁移的工具和方法[Fleurey etal.，2007，Włodarski et al.，2019，Joorabchi and Mesbah，2012，Samiret al.，2007，Shah andTilevich，2011]。它们使用元模型来表示GUI结构。然而，这些方法对于现代应用程序来说是不足够的。事实上，作者们没有将他们的迁移方法应用于多个不同的GUI框架。此外，作者们只部分地呈现了他们的GUI模型，这使得很难将他们的解决方案适应其他情境。0实现增量迁移。现有的方法通过执行部分GUI迁移来简化迁移过程。虽然它们在自动迁移应用程序GUI的重要部分方面取得了良好的结果，但开发人员必须在交付新系统给客户之前手动修复剩余的代码。在手动步骤中，旧版本的软件系统不会得到维护。因此，客户无法从错误修复和改进中受益，直到迁移过程结束。这可能需要几个月的时间。此外，系统必须根据每个国家的法律进行更新，这些法律与公司的迁移项目独立演变。因此，不维护旧软件系统是不可行的。0一种解决方案是逐步迁移应用程序。Robillard和Kutschera[2019]使用混合架构来混合JavaSwing和JavaFX。这允许在保持未迁移部分的同时迁移应用程序的一部分。虽然这种解决方案提供了GUI混合化，但它不适用于许多工业项目中使用的Web环境。Teppe[2009]提出使用自动工具迁移应用程序的一部分，测试迁移的部分，在出现问题时改进自动工具，并进行迭代。当所有部分都被迁移时，它们从源应用程序切换到迁移后的应用程序。然而，在整个迁移过程中，当在源应用程序中进行新的开发时，开发人员必须在迁移版本中复制修改。因此，在迁移过程中，开发人员必须确保维护两个应用程序。0第4章 引言01.3 我们的方法简介0为了解决上述问题，我们设计了一种简化GUI迁移的方法和元模型。该方法在图1.1中进行了总结。它以应用程序GUI作为输入，并逐步迁移GUI。0GUI应用程序第1页0第2页0第3页0第4页0一些文本0GUI中心0模型0提取生成0GUI迁移0第I部分 - 第3章，第4章和第5章0增量迁移方法0第II部分 - 第6章和第7章0混合应用程序 第1页0第2页0第3页0第4页0一些文本0原始GUI应用程序 -所有页面都是使用源框架开发的0混合应用 -0第3页是使用0目标框架0手动0使用源框架开发的页面使用目标框架开发的页面0图1.1：方法概述0为了解决第一个问题，即支持GUI框架无关的迁移，我们提出了一种高度可扩展的GUI迁移方法及其元模型。它是图1.1的核心部分。该方法包括：0• 适用于其他情境（即其他框架）的提取和生成GUI的步骤；0• 可扩展的元模型来表示要迁移的GUI；和0•实现示例，使用基于Web的框架（Java/GWT）或基于桌面的框架（Pharo/Spec）从应用程序中提取GUI，并使用基于Web的框架（TypeScript/Angular和Pharo/Seaside）或基于桌面的框架（Pharo/Spec2）生成应用程序。0为了解决第二个问题，即实现增量迁移，我们构建了一个混合架构，允许在同一个应用程序中混合使用不同的GUI框架（图1.1右侧）。我们的混合架构是一个增量迁移方法的一部分，可以逐部分（即逐页或逐模块）迁移Web应用程序。我们实现了混合架构，并在从GWT到Angular的工业迁移项目中使用它。结果表明，我们的混合架构实现了应用程序的迁移。它允许在GWT和Angular之间进行混合，而不会损失性能。