编者按：本文为《Cube 技术解读》系列第七篇文章，作者是蚂蚁集团客户端工程师佳佑，带大家了解 Cube 卡片工具 ACT 的设计思路与演进历程。
✍🏾 Cube 技术解读系列文章：
第二篇：Cube 卡片技术栈详解
第三篇：Cube 小程序技术详解
第四篇：Cube 渲染设计的前世今生
第五篇：文本布局性能提升 60%，Inline Text 技术原理与实现
第六篇：大屏小程序探索实践
一直以来移动端技术生态中的动态化技术都是行业内的话题热点，各类应用框架也层出不穷（RN、Weex、Flutter），支付宝客户端也在业务旺盛的高性能、易投放诉求中逐步沉淀下了一套自研解决方案--Cube 卡片。
在移动端动态化应用场景中，怎样才能解放 DSL 领域内描述语言的高效生产力？怎样才能有效的降低传统移动端 Native 研发的调试成本？怎样才能贴切的整合行业内各类优秀解决方案与工具？
带着对这些问题的思考，支付宝 Cube 团队在卡片业务中摸索沉淀了连接开发 DSL 与引擎运行时的基础配套工具--Ant Cube Tool（简称 ACT）。这篇文章将尝试带着大家了解 Cube 卡片工具 ACT 的设计思路与演进历程。
技术选型
CLI
Cube 卡片的动态化方案主要是基于 JS 桥接技术，DSL 采用的是 HTML + JS + CSS 近前端技术栈的格式，行文写法上借鉴了 Vue 单模板格式。行业中前端生态内工具广泛采用的是基于 Node 环境的 CLI 形式，考虑到这种 CLI 形式轻便、灵活、易于维护，Node 生态丰富的社区资源，再加上 Node 天然的跨平台特性，Cube 卡片的基础生产工具也决定使用 Node CLI 技术栈进行建设。
IDE vs CLI
随着 Cube 卡片在业务场景中的逐步开放，越来越多拥有不同技术背景（前端、Native）的开发同学开始使用 Cube 卡片工具进行迭代研发。虽然 CLI 可以满足基本的日常开发调试诉求，但相较于传统 IDE 模式，可交互的手段（快捷键、按钮、菜单等）以及信息回馈的形式（弹窗提醒、编辑器联动、状态通知等）就会变得力不从心；然而搭建一个功能完备、灵活可靠、开箱即用的卡片桌面 IDE，不可避免的需要投入大量的研发、维护成本。得益于行业内流行的编码工具 VSCode 提供了较为完善、丰富的插件扩展能力，我们将 VSCode 插件作为 CLI 的辅助工具，补充了基于 VSCode 环境的便捷交互方式，在 IDE 与 CLI、研发投入与体验产出之间寻求到了平衡。
框架设计
ACT 作为 Cube 卡片最基础的辅助工具，承载着卡片在生产阶段最核心的研发诉求：编译、预览、调试，操作链路上需要连通源码编辑器、构建底层、设备运行时各个环节，我们采用的是基于 CS 模式的数据通信机制，核心能力将封装在 ACT 本地服务器中，由服务器提供 REST 响应接口，供桌面编码环境、设备运行环境、Web 调试环境调用。同时本地服务器中也开放了 WebSocket 连接能力，在链路节点间提供消息推送的功能，保障节点间状态同步的及时性。
有别于传统 Native 单台设备的联调体验，在 CS 模式下，ACT 可以很方便的实现多台不同平台、不同配置的设备同时进行卡片预览、调试，这对在开发阶段及时验证卡片效果跨平台的一致性将很有帮助。值得一提的是，在同一局域网环境下，Client 与 Server 的连接访问其实并没有地理位置的限制，这也使得我们在开发卡片时可以将本地的效果、信息投递给远程协作的其他同事，提高协作研发的效率；同样的，也可以方便的在云端设备平台环境中挑选合适的固件设备进行远程连接，降低了不同运行环境兼容性验证的操作成本。
核心功能
ACT 最主要的职能就是将业务开发时提供的模板信息（卡片 DSL）转换为运行时可被处理的 Dom 数据元、Css 样式集以及 JS 逻辑段，这个过程我们一般称之为编译。在获得编译产物之后，ACT 会继续向引擎运行时投递产物结果，并借助内置于运行时的 Playground 模块，为业务卡片提供真机效果预览能力。同时，通过 ACT 内置的 Devtool 应用，为正在预览的卡片附加 Element 节点、Style 样式以及 JS 断点调试能力。
工程
卡片的源码工程主要由工程配置、卡片配置、卡片模板三部分构成。其中工程配置（.act.config.json 文件）主要声明了预览模式、源码路径等基本信息；卡片配置（manifest.json 文件）包含了编译模式、产物类型、引擎配置、组件声明等信息；卡片模板（main.vue 文件）则涵盖了一个卡片最基础的布局、样式、逻辑等部分。
➜ Card tree -a
.
├── .act.config.json
├── main.vue
└── manifest.json
编译
在卡片的 DSL 描述格式中，一个基本的卡片主要包含布局结构（
