AQ 多端的工程实践

1. AQ多端的工程实践 AQ 从 0-1 的建设历程 & 前端跨端研发的工程实践颜一波（竹雨）蚂蚁终端体验科技大会

2. 关于自己花名：竹雨团队：蚂蚁集团 – 数字医疗健康事业部 – 前端体验技术职位：前端技术专家 & AQ核心开发

3. /01 前端技术演进 /02 跨端研发面临挑战从0-1的发展历程，产品技术栈的多样化、研发流程的协形态和前端技术架构发展同、以及用户体验的一致性，都对前端研发提出了挑战 /03 如何解决 /04 未来思考跨端框架PAUL、标准化卡跨端渲染新趋势与交互片渲染与微件的架构实践模式的探索方向

4. /01 前端技术演进 AQ从0-1的发展历程、产品形态和前端技术架构演进

5. AQ产品发展核心节点 2024/72025/62025/72025/11 支付宝“健康管家”上线AQ APP Android 上线AQ APP IOS及PC端上线AQ APP国际版 AQ 实现全平台覆盖

6. AQ前端技术 Native 应用（APP） H5 （React）（IOS、 Android、 HarmonyOS）PC （React） NativeCube 对话中“ 泡”的 UI表现形态卡片（Card） H5 （React）（IOS、 Android）（Native的Web技术渲染引擎）跨端（H5、Cube、 MiniApp）

7. AQ对话页渲染表达 MarkdownMarkdownXCard 1个+20+100 流式文本渲染流式文本 + 小组件渲染负责结构化、可交互的内容渲染

8. AQ对话页渲染表达 MarkdownMarkdownXCard 1个+20+100 流式文本渲染流式文本 + 小组件渲染负责结构化、可交互的内容渲染

9. /02 跨端研发面临挑战随着AQ产品从单H5应用到H5、APP、PC多应用场景，工程研发面临着相当的复杂性。技术栈的多样化、研发流程的协同、以及用户体验的一致性，都对前端研发提出了挑战

10. · 卡片动态化卡与宿主应偶，实现独卡需求需要同时开发 PC、H5、App三端的卡发布解，在跨技术栈的情况下，开发、独如果提升研发效率部署的能关重要 Card · 多端一致性向PC、H5、App三端的卡，需要构建卡数据协议，确保渲染致性多端卡片（Card）研发面临挑战套标准的 · 多形态渲染对字版、多语、主题化、分享态这些业务场景，卡渲染需要同时适配

11. /03 如何解决跨端研发、标准化卡片渲染以及微件的架构实践

12. 1、卡片动态化 Micro Frondends Card Widget（微件）

13. 1、卡片动态化 Micro Frondends Card Widget（微件）

14. 2、多端一致性 · 卡片渲染模式「流式渲染」：Markdown + 组件流式输出渲染「非流式渲染」：完整的卡片数据结构进行渲染 · 卡片协议模型「templateId」：卡片模版Id 「templateData」：卡片业务数据「templateInfo」：卡片版本信息,支持动态化渲染协议示例

15. 3、卡片多形态卡片上下文（Context）国际版大字版主题色分享态

16. 4、跨端研发效率卡片应用跨端研发「一份代码, 多端构建」传统的多端开发模式，需要针对三端开发3套代码， Paul 是在向多端研发提效命题下出现的跨技术栈资产解决案，Paul会根据源码动成H5、 Miniapp、Native 卡三种产物，实现了“ 份源码，多技术栈产物”，提升前端研发效率

17. PAUL的核心能力 1、支付宝小程序DSL 以支付宝小程序为基础语法，降低业务研发成本 2、开发脚手架完整的研发构建流程与工具链 4、跨端资产产物自动生成Cube、Miniapp、H5多端资产 3、标签扩展能力 extension-component支持自定义标签扩展 5、组件复用 Paul DSL Component实现组件级代码复用

18. LUI-API AQ + PAUl 「结合业务研发场景」 Extensions-Component 封装统卡调 API，磨平卡在多套运时环境的差异，提供致的能调接扩展RichText（富本）、Lottie（动画）等跨端标签，满医疗的复杂业务需求国际化能力无障碍适配对在PAUL基础框架之上，针对AQ的特殊需求，进了深度的定制与扩展，打造了更贴合业务场景的跨端解决案内置i18n国际化持，接配置平台实现多语案管理和动态切换能内置速接字模式和主题切换实现，持快

19. 卡片跨栈微件微件 × 跨端（H5 + Native + PC）临的个整体需求，但跨栈和微件其实是两个独不耦合的命题，可以独案，并。按照上述。然得到满求解决并落地后，跨栈微件需两个命题都独跨栈微件是现在 AI 卡

20. AQ对话渲染容器 Native + H5 + PC 对话式微前端（Conversational Micro- Frontends）」的宿主容器。从通信层到运时，再到容器渲染层，最后到宿主容器。

21. /04 未来展望跨端渲染的新趋势与UI交互模式的新探索

22. Html渲染 + 生成式UI（UI Scheme + Raw Html） MarkdownMarkdown ++ 个性化 MarkdownXUI Scheme ++ CardRaw Html

23. Thanks