SmartFeed 多端模板渲染架构体系

1. SmartFeed多端模板渲染架构体系王永⻘百度资深研发工程师

2.

3. 自我介绍 • 网名三水清 • 2013年加入百度APP团队 • 前端架构优化、工程化、Nodejs • github.com/ksky521 • js8.in

4. • 需求背景 • 架构设计与实现 • 落地和展望

5. 需求和背景

6. 背景：从PM需求说起 NA H5

7. 现在的研发流程需求设计 PM UE 模板 + 数据 RD + 交互上线评估 PM

8. 理想的流程需求搭建 PM 审核 UE 上线 RD 评估 PM 不需要研发介入可快速上线的跨端动态组件化解决方案

9. 架构设计和实现

10. 四个问题 • 如何设计一套自由搭建的组件系统？ • 拿组件拼好的模板，怎么描述？怎么跨端？ • 数据如何跟模板映射？ • 交互怎么实现？

11. 四个问题 • 如何设计一套自由搭建的组件系统？ • 拿组件拼好的模板，怎么描述？怎么跨端？ • 数据如何跟模板映射？ • 交互怎么实现？

12. 四个问题 • 如何设计一套自由搭建的组件系统？ • 拿组件拼好的模板，怎么描述？怎么跨端？ • 数据如何跟模板映射？ • 交互怎么实现？

13. 原子设计 ATOMS MOLECULES ORGANISMS TEMPLATE PAGES

14. 原子设计 ATOMS 圆⻆ MOLECULES ORGANISMS TEMPLATE 文本间距文本 wuji-uikit wuji-san 区块卡片 PAGES

15. 原子库：@baidu/wuji-uikit，提供 9 大类，36个mixins 统一编码颜色字体文本间距线条边⻆投影蒙层图标 JSON

16. 原子库：@baidu/wuji-uikit 颜色：日间、夜间、暗黑支持图标

17. 从组件到区块/卡片头部区必选内容正文区辅助信息区可选内容拓展挂件区

18. 四个问题 • 如何设计一套自由搭建的组件系统？ • 拿组件拼好的模板，怎么描述？怎么跨端？ • 数据如何跟模板映射？ • 交互怎么实现？

19. DSL 标准化的界面描述语言，结构化的数据描述 children：结构关系 Props：属性配置 div Title icon text ThreeImages image image image Source text text

20. DSL的生成模板配置平台、Sketch 设计稿 DSL div Title icon text ThreeImages image image image Source text text

21. DSL的应用生成 H5 模板

22. DSL的应用：DSL生成H5组件 DSL dsl2san Template

23. DSL的应用：DSL生成H5组件 ① 引入组件 dsl2san ② 生成模板 ③ 配置绑定

24. DSL的应用生成 NA 模板

25. Crius：NA 动态化布局引擎 CSS Box model 95% Flexbox model • 控件只有基础类型： • View：<div> • Text：<p> <span> • Image：<img/> • 样式为CSS子集，需要提前计算好 • 数据结构（模板）为 JSON

26. DSL2Crius dsl2san san-crius DOM trans Crius DSL San San 百度开源高性能组件框架 Puppeteer HTML+CSS adapter Crius Template

27. Adapter：解决双端和机型差异，提升视觉还原度，节省 UE 走查流程 Text 扩展阅读《一种简单优雅的TextView行间距适配方案》 padding-top padding-bottom

28. UI = F(DSL) H5 卡片平台可视化编辑 NA 卡片 Sketch 插件 DSL Talos 卡片将模板抽象为结构化数据DSL，由DSL驱动不同实现的组件进行拼装，最终通过解析结构化数据将⻚面渲染出来

29. 四个问题 • 如何设计一套自由搭建的组件系统？ • 拿组件拼好的模板，怎么描述？怎么跨端？ • 数据如何跟模板映射？ • 交互怎么实现？

30. 模板数据映射 JSON Schema 做描述，JSON Pointer 做映射组件 Props JSON Mirror 组件 Schema + DSL 数据库 UI Schema Data Schema 推送更新实时调取 Preprocessor UI Props 扩展阅读：JSON Schema / JSON Pointer

31. 模板数据映射流程线下配置 Server Runtime 组件原子库组件库 Schema.json 视图配置平台配置 DSL UI Schema 数据 + mirror Preprocessor 数据配置平台数据接入 Data Schema API Data 模板

32. 四个问题 • 如何设计一套自由搭建的组件系统？ • 拿组件拼好的模板，怎么描述？怎么跨端？ • 数据如何跟模板映射？ • 交互怎么实现？

33. 交互收敛可交互行为组件内置事件代理 + xpath 事件列表平台配置 Runtime 事件代理卡片事件表生成xpath 事件执行

34. 全景图视图配置平台组件管理区块管理卡片编辑用户请求数据管理和上线平台 Adapter server 卡片管理 dsl2san 数据请求数据源接入 html 无敌弹簧转换器 Template 卡片历史管理卡片版本管理编辑上线数据映射 + 权限管理模板事件绑定类型管理真机预览效果评估数据配送 Data描述 Crius Template 平台支撑数据库操作记录模板数据接口 trans-server Runtime 组件模板渲染 UI 界面

35. 落地产出和未来展望

36. 落地与产出疫情卡 NA 图文落地⻚小程序卡片 H5 NA卡有驾挂件 NA卡爱奇艺挂件互动视频 NA 高考卡 NA 专题H5⻚面

37. 未来方向实现大前端的「大一统」 San-native 小程序 H5 业务形态和多端方案 Node SSR 构建工具 DSL → 通用组件库生命周期对⻬一套DSL：组件模板语言统一 San.js 一套底层框架无极一套设计规范

38.

39.