7.AQ 多端的工程实践-竹雨.pdf

《7.AQ 多端的工程实践-竹雨.pdf》由会员分享，可在线阅读，更多相关《7.AQ 多端的工程实践-竹雨.pdf（23页珍藏版）》请在三个皮匠报告上搜索。

1、AQ多端的工程实践AQ 从 0-1 的建设历程&前端跨端研发的工程实践蚂蚁终端体验科技大会颜一波（竹雨）花名：竹雨团队：蚂蚁集团 数字医疗健康事业部 前端体验技术职位：前端技术专家&AQ核心开发关于自己/01/02/03前端技术演进 跨端研发面临挑战如何解决 从0-1的发展历程，产品形态和前端技术架构发展技术栈的多样化、研发流程的协同、以及用户体验的一致性，都对前端研发提出了挑战 跨端框架PAUL、标准化卡片渲染与微件的架构实践/04未来思考 跨端渲染新趋势与交互模式的探索方向/01前端技术演进AQ从0-1的发展历程、产品形态和前端技术架构演进AQ产品发展核心节点2024/72025/6202

2、5/72025/11支付宝“健康管家”上线AQ APP Android 上线AQ APP IOS及PC端上线AQ 实现全平台覆盖AQ APP国际版AQ前端技术H5（React）PC（React）跨端（H5、Cube、MiniApp）应用（APP）卡片（Card）Native（IOS、Android）H5（React）Native（IOS、Android、HarmonyOS）Cube（Native的Web技术渲染引擎）对话中“泡”的UI表现形态流式文本渲染MarkdownMarkdownXCard流式文本+小组件渲染负责结构化、可交互的内容渲染AQ对话页渲染表达1个+20+100流式文本渲染Ma

3、rkdownMarkdownXCard流式文本+小组件渲染负责结构化、可交互的内容渲染AQ对话页渲染表达1个+20+100/02跨端研发面临挑战随着AQ产品从单H5应用到H5、APP、PC多应用场景，工程研发面临着相当的复杂性。技术栈的多样化、研发流程的协同、以及用户体验的一致性，都对前端研发提出了挑战多端卡片（Card）研发面临挑战Card 卡片动态化 多形态渲染 跨端研发效率 多端一致性卡与宿主应发布解偶，实现独开发、独部署的能卡 需 求 需 要 同 时 开 发PC、H5、App三端的卡，在跨技术栈的情况下，如果提升研发效率关重要向PC、H5、App三端的卡，需要构建套标准的卡数据协议，确

4、保渲染致性对字版、多语、主题化、分享态这些业务场景，卡渲染需要同时适配/03如何解决 跨端研发、标准化卡片渲染以及微件的架构实践1、卡片动态化Micro FrondendsCard Widget（微件）1、卡片动态化Micro FrondendsCard Widget（微件）2、多端一致性协议示例 卡片渲染模式流式渲染：Markdown+组件流式输出渲染非流式渲染：完整的卡片数据结构进行渲染 卡片协议模型templateId：卡片模版IdtemplateData：卡片业务数据templateInfo：卡片版本信息,支持动态化渲染3、卡片多形态国际版大字版主题色分享态卡片上下文（Context）

5、4、跨端研发效率卡片应用跨端研发一份代码,多端构建传统的多端开发模式，需要针对三端开发3套代码，Paul是在向多端研发提效命题下出现的跨技术栈资产解决案，Paul会根据源码动成H5、Miniapp、Native卡三种产物，实现了“份源码，多技术栈产物”，提升前端研发效率PAUL的核心能力1、支付宝小程序DSL以支付宝小程序为基础语法，降低业务研发成本3、标签扩展能力extension-component支持自定义标签扩展2、开发脚手架完整的研发构建流程与工具链4、跨端资产产物自动生成Cube、Miniapp、H5多端资产5、组件复用Paul DSL Component实现组件级代码复用AQ+P

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