背??景随着应用DinamicX（简称DX，下同）技术的场景和团队越来越复杂和广泛，需要持续保障DX的核心竞争力，支持团队级协同开发，助力复杂的业务场景越来越强。之前的DX开发是基于模板平台，其核心是基于开源Monaco编辑器（驱动VScode的开源代码编辑器）定制开发的前端项目。模板平台虽然在过去一定程度上满足了业务发展的需求，但其编辑体验、调试体验和性能保障越来越难以满足开发者的要求。面对以上问题，从DX业务研发需求来看，我们需要一个从创建、开发、编译、调试到发布的全研发周期保障的一站式开发环境。基于以上考虑，我们需要一个IDE来保证技术方案的选择和设计贯穿整个研发周期。与模板平台等编辑器不同，IDE提供完整的开发周期支持。目前业界主流的VSCode不仅提供了丰富的API进行扩展，还包括极其丰富的插件市场，可以通过开发VSCode插件提供DXIDE。VSCode生态模板平台运行于web环境，受浏览器限制。IDE在本地环境中运行。丰富易扩展，环境可控，兼容性好。编辑器可用于提供丰富的编辑支持，其LSPAPI除部分API（调用堆栈、快速修复、显示所有引用、动态计算表达式、内联值计算、类继承关系、符号表）不支持外，以及提供丰富的文档编辑、补全等功能；与纯编辑器相比，IDE提供了完整的开发周期支持，包括项目系统、代码历史上下文理解、调试、与其他功能结合（如脚手架、编译等）、应用开发周期管理、平台相关内容（如Swift、Kotlin、Faas）等等。虽然VSCode提供了很多能力和扩展，包括但不限于文件树和菜单、工程系统、编辑器和语言服务（智能感知）、调试服务、更好的集成构建和开发生命周期管理、平台工具等。但是，还有对于开发者来说，在交互层面上仍然存在很多局限和不便。同时，源于阿里巴巴经济体内部的IDE框架——OpenSumi框架（Alibaba&Ant自研IDE研发框架，已开源），不仅100%兼容VSCodeAPI，同时也扩展了很多API，提供了丰富的UI自定义支持，大大简化了自定义插件的交互开发，所以我们最终选择了OpenSumi作为IDE的技术选择。OpenSumi自定义扩展如上，下图简单说明OpenSumi对自定义视图的支持。结合以上发展目标和技术选型，我们有如下设计。IDE一般分为以下几个层次：1IDE容器（CLI）如上，我们使用基于OpenSumi框架的IDE基础，它不仅兼容VSCode生态，还提供了很多API和其他扩展，形成一个ide-framework。然后通过登录状态、前端开发工作台等针对经济场景的定制，打包构建最终交付产品O2。对于我们来说，就是开发兼容VSCodeAPI的OpenSumi插件，并将插件安装到O2上，实现最终的产品交付。考虑到命令行调用和代码复用的原因，我们设计了一个基于Node.js的CLI来支持创建模板、编译模板、发布模板等许多基本功能，这里也有两级层次。即提供通用调试服务，静态文件服务的utbd-devtools，以及基于utbd-devtools的各种CLI/IDE插件（通过DaemonInterface与utbd-devtools交互）。2.底层能力这里抽象了一些与模板开发没有直接关系的公共服务，包括调试协议（通道）、数据存储和持久化、单例对象管理池、Git服务、数据埋点服务。3基础服务（模板开发）下面介绍模板开发所需的一些基础服务。从编辑来看，主要是自定义DSL下的代码智能感知。核心是一方面实时分析源码的语法树结构，结合DSL本身（和属性）的约束和规范判断每个树节点是否合法等，结合VSCode自身提供的语言服务器协议，实现最终的代码智能感知。从DX的角度，我们需要考虑如下DSL分析：xml：main.xml，描述视图的结构和风格，对其分析有成熟的解决方案；json：包括event_chain.json和mock.json，用于描述事件链和mock数据，对其解析有成熟的方案；expression：基于模板设置的数据源（data），开发者可以用表达式的形式描述属性，如：这里的imageUrl和visibility属性是通过表达式写的，表达式不仅可以用在XML中，也可以用在事件链中文件。表达式语法是TypeScript语法的简化版本。通过编写antlr4语法文件（Lexer.g4和Parser.g4），可以使用antlr4ts工具自动生成对应的Lexer.ts、Parser.ts、ParserListener.ts和ParserVisitor。ts文件用于后续的AST分析。在分析了DSL的AST之后，通过元数据的约束（平台约束控件、表达式、原子能力等），结合VSCodeLSP下支持的代码智能感知API，我们可以实现包括补全、浮动文档、诊断，代码开发支持，包括跳转定义，代码格式化，折叠，高亮等。4特征开发和研发模型组装我们根据研发模型包含一个工作流，工作流可以分为多个阶段（准备阶段，创建阶段，编辑阶段、调试阶段、测试阶段、发布阶段），每个阶段包括多个Feature的层级关系（比如创建阶段包括创建项目和创建模板）最终通过Feature的开发组装成一个DevelopPattern.5在研发模型扩展的实践中，不仅有各种研发模型的需求，也有很多基于研发模型的自定义扩展因为各种原因，比如消息业务领域基于DX模型的脚本扩展，菜鸟而CBU有基于DX模式的Container构建扩展。为此，我们还设计了研发模式扩展插件，允许插件对上述研发模式进行自定义和扩展，以满足各自的需求。IDE功能及使用本文仅介绍DX研发模式相关功能。功能区图创建阶段创建阶段包括DX项目和模板。创建项目并设置GitlabToken（只需一次，以便自动创建Gitlab项目）点击CreateProjectEntry选择研发模式（这里应该是DX）配置参数，创建项目创建模板【NewTemplate】点击Create模板入口配置参数，创建模板【克隆模板】在编辑阶段选中需要克隆的模板对应的cola.build右键克隆模板导入模板，其中包括通过搜索模板关键字。搜索结果可以直接打开（比如本地已有），也可以选择导入。导入时，我们可以选择导入单个模板，也可以通过应用名称+业务名称检索所有相关模板一起导入。在模板导入过程中，会逐一查询每个模板的所有版本号和对应的内容，并将这些内容作为Git记录提交。对于正式版本号，会打上类似：release/templatename/templateversion的标签。模板依赖管理目前IDE不支持编译基础组件，只支持引用基础组件。如果需要编辑基础组件，需要在模板平台上操作，然后在本地更新元数据获取最新版本号，然后更新依赖生效。这是因为我们希望以后可以用Template标签代替Import，在IDE中都支持Template相关的编辑、引用和编译。所以这里只包含基础组件的依赖管理和批量版本变更。对于基础组件的依赖管理，其实就是可视化编辑cola.build中的dependencies字段。批量改版适用于基础组件被一组模板引用，批量更新这些引用模板对引用的基础组件的版本依赖描述（源代码）。通过选择预发布，我们还可以更新源代码，同时，参考模板会被批量预发布。与批量修改基础组件依赖类似，IDE也支持批量修改Slot引用。这里的代码帮助主要包括事件链格式化、表达式格式化、本地文件搜索和代码示例搜索。其中，本地文件搜索可以通过简单的规则准确搜索到文件如s/s/m可以匹配到：sub_main/src/mock.json。代码示例搜索可以通过关键字在当前Aone代码库（Gitlab）上搜索参考，比如@getEngineStorage结合event_chain.json，了解getEngineStorage在时间链中的具体使用。这里的表达式支持主要作用是实现表达式的一键格式化。这里的事件链可视化，主要是将事件链所描述的原子能力的调用和传递进行可视化展示。目前，它支持多种传输关系，包括显式传输和隐式（表达式）传输。点击节点或边也可以自动选择相应的代码区域。CodeIntellisense代码补全：支持main.xml中的控件名称、属性、属性值；event_chain.json中的原子能力名称、原子能力参数、事件链节点；表达式（名称/数据字段/事件链名称）等；浮动文档：支持main.xml中的控件名和属性名；event_chain.json中的原子能力名称和原子能力参数；表达式名称；代码诊断：包括main.xml中的控件名、属性名和属性值；event_chain.json中的原子能力名称（暂时不支持原子能力参数，主要是平台约束不完善）；表达式名称；跳转到定义：主要是跳转到mock.json（即数据表达格式，来自main.xml或event_chain.json）和event_chain.json（来自main.xml）；代码格式化：包括main.xml格式化、event_chain.json格式化、表达式格式化；代码折叠：包括main.xml、event_chain.json、mock.json和表达式折叠；代码高亮：主要是指表达式名称的高亮。调试阶段的预览主要包括调试服务扫码、预览页面模板预览和业务容器多模板预览。开发者通过扫码连接调试服务。当有设备连接时，会编译当前选中模板的变化，产品会实时推送到手机端并生效。在没有连接设备的情况下，会实时编译模板变化，编译后的产品会以二维码的形式展示出来，可以直接扫描预览。预览页面模板预览与之前的模板平台相同。业务容器多模板预览的核心是解决预览页面预览中的一些问题，包括对自定义组件支持不够好，只能预览单个模板，数据mock不真实等。使用此功能，开发人员可以在模板页面上包含IDE中的任何DXPreview模板文件。代码修改成功同步到设备后，刷新页面重新渲染模板即可生效。这还包括通过Command+Shift+P调出命令面板，切换预览模板快速切换到指定模板的功能（仅在预览页面预览下有效）。ViewreviewViewreview主要用于排查布局显示问题，如节点缺失、属性值不等等。假设已经通过扫码连接调试服务，下同，不再赘述。在IDE上，打开启用视图审核开关设备端渲染DX模板在IDE中选择一条视图审核记录（也支持模糊搜索）打开对应模板的main.xml文件点击main.xml中的某个标签自动展开三棵树，在设备端高亮相应的视图。点击展开树节点，或者展开树节点的属性节点，会自动选中相应的源代码。表达式回放表达式回放主要用于解决复杂的表达式执行问题。在IDE上，开启表达式播放开关设备端渲染DX模板在IDE上选择一个表达式播放记录（也支持模糊搜索）点击播放按钮可以看到整个表达式执行的时序选择一个已经执行过的节点，你可以看到它的执行上下文。事件链回放事件链回放主要用于排查事件链的执行问题。在IDE中开启事件链回放开关设备端渲染DX模板在IDE中选择一个事件链回放记录（也支持模糊搜索）点击回放按钮可以看到整个事件链执行的时序选择一个有被执行了，可以看到它执行的上下文。设备管理主要用于与iOS模拟器（Mac上）深度集成，让开发者即使没有iOS设备或设备厂商没有可用的包，也可以方便地安装和使用IDE的各种功能测试。发布阶段模板发布选择要发布的模板（支持搜索）选择要发布的分支填写发布描述，选择一些配置项（检查版本冲突主要是为了防止模板平台更新一些版本号；pre-提交变更可以让开发者快速修改和验证变更（尤其是简单的模板变更）；跳过Git检查，不检查是否有要提交的内容，尤其是当开发者需要发布另一个分支，而当前分支做的变更不需要提交pre-release用于配置是否正式发布）发布后可以发布的结果弹窗也会提示开发者这里面生成了哪个版本号，产品cdn地址等发布。模板历史版本查询包括：模板url复制、模板zip下载、模板预览、发布信息、源代码查看、代码Diff、内容回滚、Diff链接分享（供CR使用）等。这里批量内置会完成构建-在双端产品中，构建Android端需要的presetTemplateInfos.json。这里的设置主要是GitlabToken的配置，以及基于GitDiff模板发布的Diff基线配置。IDE进化的思考针对以往模板平台的不足，我们实现了从编辑器到IDE的转变，显着提升了开发者的研发体验。面向未来，我们有以下进化思路：扩展应用场景/团队1IDE直接受益于工程支持，开发者可以在一个工作空间内为相关业务开发一套模板；代码托管在Gitlab，多人协作，提交历史，回滚，搜索，CR，数据统计，直连群代码服务；更简单的批量模板管理，如批量修改基础组件依赖、批量发布、批量内置等；标准高级语言编辑（补全、文档、诊断、跳转、格式化、折叠、高亮等）的代码智能感知体验，涵盖main.xml、表达式、事件链等。不仅如此，对于事件chain，IDE还提供排序、一键折叠和可视化预览；为了更好的预览体验，开发者可以结合IDE的业务容器预览，直接在当前业务容器中动态替换模板（IDE中的模板修改编译立即生效）；丰富的故障排除工具箱，针对视图异常的故障排除，IDE提供了视图审查和源代码关联，可以建立动态源代码和实际视图结构（属性）的双向关联；对于复杂的表达式执行问题，IDE提供表达式回放，跟踪表达式AST、输入输出、上下文的结构和执行顺序；针对事件链执行中的复杂问题，IDE提供事件链回放，跟踪事件链中原子能力、输入输出和上下文之间的执行顺序；更好的模拟器集成，Mac上的IDE与iOS模拟器深度集成，开发者可以快速安装/激活应用程序，连接调试服务和预览页面。2IDEPotentialBenefitsDXIDE提供了研发模型层级的扩展，DX衍生出来的技术方案可以方便的集成到IDE中；目前我们正在与研发体验CoE团队在移动组层面探讨客户研发绩效的衡量模型和指标，基于IDE对研发过程的多维细粒度感知，我们将有机会帮助团队衡量研发绩效并进一步改善研发体验。3IDE使用成本开发者需要安装O2和DXIDE插件，然后会有自动化的脚本、工具和命令来保证环境满足要求；存在模板迁移成本问题，目前IDE支持基于搜索关键词（或ID）的单模板导入，以及基于app&biz导入的一套业务模板，一键将需要的模板迁移到DX项目；技术迭代目前，IDE已经实现了DX工程化和研发全生命周期支持，包括优秀的代码编辑体验、众多问题排查方法和丰富的解决研发痛点的工具箱，我们将在接下来的几个方面进行技术迭代未来。1完成现有设计，补充AndroidSDK中的viewreview功能。性能方面，提供编辑期Linter、运行期实时性能采集、发布期Benchmark、运维期性能仪表板等数据，提升模板性能。在兼容性方面，开发者可以通过开放手机中台等设备服务，快速预览在不同设备上的渲染效果和表现。2技术演进与探索目前的技术架构下，开发者按需安装IDE和插件，存在接入成本高的问题。通过远程部署IDE，开发人员使用Web连接远程服务，不仅可以避免安装成本，还可以方便共享工作空间等。过去，客户端业务开发往往是客户端和服务器分离的。更快的迭代速度要求以业务为中心的端云集成开发具有更大的价值，而FaaS本身的日益成熟也使得客户端开发后端逻辑更加方便可行。IDE作为统一的编程平面，可以更好地支持集成工程下的前后端逻辑（页面）开发，加速业务价值的交付；目前行业主流生态越来越多地使用声明式UI，无论是技术进步还是技术同学的成长，我们都应该更多地拥抱这个趋势。探索DXDSL和声明式UI（JetpackCompose、SwiftUI、Flutter、ArkUI）的组合。通过升级DSL，结合JetpackCompose/SwiftUI/Flutter，搭配分析、解析、编译、执行等工具链，开发者可以更贴近原生（Friendly）开发跨平台业务。
