如何设计实现跨端页面搭建系统 - 跨端模块

如果无法正常显示，请先停止浏览器的去广告插件。

1. 阿⾥里里经济体搭建服务-天⻢马淘系搭建服务团队步天

2. ⽬目录个⼈人介绍经济体搭建服务介绍搭建模块的设计 QA

3. 个⼈人简介花名步天 2011年年2⽉月⼊入职阿⾥里里淘系技术部前端—互动与搭建—搭建服务团队 Start on the way 2013-2017 天猫 2011 ⼝口碑碑⽹网 • 2012 云OS • 负责天猫前端模块体系&搭建应⽤用建设负责终端识别与 CDN 缓存⽅方案 2019-now 淘系 • 2018 淘宝 • 负责淘宝搭建产品建设 • ⾯面向淘宝达⼈人、微淘装修能⼒力力及星巴克⼩小程序装修⽅方案负责⾯面向集团的搭建服务

4. 搭建展示这⾥里里的搭建主要是指⾯面向消费者端产品的搭建

5. 搭建的⽤用户是谁，解决什什么问题作为⼀一个开发者，如何提效正确的⼈人做正确的事情⼯工程⼯工具代码质量量（单测、CR）组件⽣生态提升复⽤用性能&监控&埋点

6. 搭建的⽤用户是谁，解决什什么问题将研发能⼒力力转换成运营、产品能理理解的功能正确的⼈人做正确的事情⼯工程⼯工具⾯面向⾮非技术同学的操作平台操作有历史记录物料料需要配备完善的操作指南可回滚，可灰度代码质量量（单测、CR）物料料升级版本化向前兼容可⽤用性保障提升复⽤用物料料有机会跨业务流通组件⽣生态可供搭建的物料料需要⾜足够丰富 0研发⽣生产代码性能&监控&埋点搭建产物性能保障搭建物料料⾃自动埋点

7. 搭建的名词和概念可搭建模块：交付给到运营、产品的代码（产品）⻚页⾯面搭建：从模块到⻚页⾯面的组合过程数据投放：数据的变化频率远⾼高于⻚页⾯面，所以单独提取出数据投放的概念数据可以单独发布⽣生效

8. 搭建设计 1. 模块列列表是⼀一维结构 2. 搭建的过程可以由⾮非研发同学独⽴立进⾏行行 3. 搭建结果可以跨终端访问⻚页⾯面氛围图商品优惠券导航店铺

9. 天⻢马搭建服务 • • • 服务集团⼗十⼏几个 BU • 覆盖国内、国际场景，部署覆盖亚欧美服务&上层产品覆盖阿⾥里里经济体近 30% 的员⼯工，创建⻚页⾯面数过百万 • 商家创建⻚页⾯面数则更更多制定阿⾥里里巴巴前端模块规范和提供阿⾥里里巴巴前端模块中⼼心 • 累计模块数已过万

10. 天⻢马搭建服务架构平台能⼒力力基础服务国际化⼩小程序能⼒力力搭投⼀一体阿⾥里里巴巴模块中⼼心跨国部署（亚欧美）⼩小程序后台对接统⼀一搭投界⾯面模块⽣生命周期管理理 SSR集群⼩小程序（插件）打包模型/映射管理理技术⽅方案打标多语⾔言⽅方案⼩小程序模块搭建搭投 FaaS SDK 阿⾥里里巴巴前端模块规范 OSS⽂文件跨国同步⽅方案⼩小程序源码搭建搭投海海外部署模块发布和同步资源位搭建协议⻚页⾯面&模块&资源位关联协议研发物料料研发服务模块研发套件⼯工程依赖⻚页⾯面管理理维度 json schema 数据描述协议模块构建器器 IDE ⽤用户依赖描述源码⻚页⾯面可视化研发插件⼩小程序定制脚⼿手架 webpack 数据模型研发⽂文档 imgCook https://imgcook.taobao.org/

11. 可搭建模块的定义搭建的最⼩小可⽤用单位跨终端 BU 扁平化⾯面向标准数据研发研发产物

12. 跨终端端的定义⽬目标运⾏行行环境 pc/mobile/tv/app/weex/miniapp/ssr 响应式是跨跨终端解决⽅方案的⼀一种⽐比如⼀一个出镜率⾮非常⾼高的导航模块，交互差异较⼤大

13. 扁平化 index.js index-pc.js index-tv.js index-weex.js index-es6.js index-ssr.js index-miniapp.js https://rax.js.org/

14. ⾯面向标准数据研发 { schema.json json-schema 格式重点字段 $attr：模块配置，⽐比如隐藏商品图⽚片 $theme：模块⽪皮肤配置，⽐比如换模块背景图 items：模块渲染依赖的商品数据 itemId：商品的 id 对模块的 props ⼊入参的描述 } "type": "object", "properties": { "$attr": { "type": "object", "properties": { "hidden": { "type": "boolean" } } }, "$theme": { "type": "object", "properties": { "themeColor": { "type": "string" } } }, "items": { "type": "array", "items": { "type": "object", "properties": { “itemId”: { "type": "string" } } } } }

15. 数据标准化商品模块 BU 模块schema itemId itemUrl itemTitle VO（view object）标准化标准数据模型 itemImg itemDesc UI模型 itemId itemUrl itemTitle itemImg DO（domain object）标准化商品模型系统数据源 itemPrice itemActPrice itemDesc

16. schema ⽤用途数据标准化与标准数据源进⾏行行映射（DO => VO）接⼝口数据校验⽣生成⽤用户填写数据的表单 https://github.com/alibaba/formily

17. 如何编写模块代码解耦具体的使⽤用场景需要什什么格式的数据 — schema.json 模拟⼊入参 — mock.json 得到结果 — Mod import { createElement } from 'rax'; import View from 'rax-view'; import Text from 'rax-text'; export default function Mod(props) { let defaultTheme = { themeColor: '#fff' }; let defaultAttr = { hidden: false }; let { items = [], $theme: {themeColor} = defaultTheme, $attr: {hidden} = defaultAttr, } = props; return ( <View className="mod" style={{ backgroundColor: themeColor }}> { hidden !== 'true' ? <Text>欢迎使⽤用天⻢马模块！</Text> : null } <View className="keys"> { items.map(element => { return (<Text>{element.key}</Text>); }) } </View> </View> ); 模块即函数 }

18. 如何研发模块研发⽂文档模块组件 sourcemap 多端构建代码扫描资源发布 schema编辑器器在线调试搭建物料料整合⼯工作流开发者脚⼿手架构建器器 PC app webview Rax Mobile ⼩小程序构建插件端⼯工程规范

19. 如何管理理模块研发审核管理理搭投访问新建⻚页⾯面模块发布版本模块圈选访问⻚页⾯面搭建⻚页⾯面渲染服务请求HTML⽂文档投放数据投放系统请求数据限定可⽤用模块审核版本管理理渲染研发套件模块中心搭建平台管理员搭建平台运营终端渲染

20. 如何运⾏行行模块服务端渲染模块列列表模块A SSR 输出 assets combo 模块C ⻚页⾯面容器器数据请求合并数据请求客户端⻚页⾯面容器器模块B 容灾打底分⻚页/分屏列列表渲染滚动容器器模块模块初始化多维渲染 CDN 多端缓存请求收敛容灾渲染服务模板渲染依赖计算/资源拼接存储

21. 模块的依赖分析每个模块单独打包的背景某次活动，有100+的模块，需要1000+⻚页⾯面模块在某个时间段批量量升级短时间⼤大量量批量量构建发布⽣生效在⼯工程上可操作度较低数据驱动⻚页⾯面展示，并且只加载⽤用到的模块提前进⾏行行⻚页⾯面构建，webpack 分包动态性不不⾜足模块A 模块A 模块C 模块B 模块D 模块B 模块C 模块C 模块A 模块D 模块B 模块D ⾸首屏线 {{include([moduleList])}} # 修改 seed.json 升级 {{seed(seed.json)}} require( [firstScreenMods], callback )

22. 模块的构建每个模块单独打包 { "modules": { "@ali/pmod-ark-butian-test/index": { "requires": [ "@ali/rax-pkg-rax/index", "@ali/rax-pkg-rax-view/index", "@ali/rax-pkg-rax-text/index" ] } }, "packages": { "@ali/rax-pkg-rax": { "path": "//g.alicdn.com/rax-pkg/rax/1.0.15/", }, "@ali/rax-pkg-rax-view": { "path": "//g.alicdn.com/rax-pkg/rax-view/1.0.1/", }, "@ali/rax-pkg-rax-text": { "path": "//g.alicdn.com/rax-pkg/rax-text/1.0.2/", }, “@ali/pmod-module-test”: { "path": "//g.alicdn.com/pmod/module-test/0.0.9/", } } 所有 package.json ⾥里里的 dependencies 默认 external 依赖关系存储到 seed.json 中由 loader 解析依赖关系，并加载从⻚页⾯面视⻆角同个组件取最⾼高版本，只加载⼀一次可以基于这份 seed 进⾏行行动态加载 }

23. 模块的应⽤用 native bundle 渲染服务 js loader 同步 assets uris g.alicdn.com/mui/demo/??run.js,index.js SSR HTML结构 seed.json 发CDN js loader 异步 js/css combo uris 浏览器器 package.json webpack assets bundle ⼩小程序容器器⼩小程序bundle 发npm npm包

24. 与社区⽅方案的对⽐比天⻢马搭建模块社区组件⽅方案构建规范 cmd/umd/未构建版本（发布到npm）⻚页⾯面级打包，组件不不需要构建依赖声明 package.json dependecies package.json dependencies 依赖分析 seed.json webpack dependecy 运⾏行行时⾃自研 js loader webpack ⾃自动⽣生成动态加载⽅方案 require(dependencies, Callback?) require.async(dependencies, Callback?) require.ensure(dependencies, Callback?) require(dependencies, Callback?) dynamic import exports 名称 @ali/${gitGroupName}-${gitName}/index webpack ⾃自动⽣生成 id schema格式 json-schema，保持和集团 formily ⽅方案⼀一直⽆无限制 mock 天⻢马 mock 数据存储在 src/mock.json  对应组件依赖的 props 模拟数据⽆无限制

25. 跨终端的缓存⽅方案 CDN 解析 user-agent 缓存副本对应访问 phone ⼿手机浏览器器访问 tm ⾮非阿⾥里里系app ⼿手机天猫 tb pad 天猫⼿手机淘宝渲染引擎代码标识 device + name + type os + name + version app + name + version browser + name + version pad 淘宝

26. 未来展望 webpack 5 带来的动态化能⼒力力多个 webpack ⼯工程之间可以相互依赖模块级打包⼯工程复杂度版本合并策略略服务端渲染独⽴立配置

27. 未来展望 CDN 就是我们的 npm webpack 移植到浏览器器端在浏览器器中实现 React Angular 编译远程⽂文件系统实时构建 Rax 包管理理能⼒力力 Vue https://github.com/pigcan/blog/issues/22

28. 欢迎加⼊入淘系前端招聘关键词：搭建 / 极客 / 前端⼯工程 / Node.js / web 标准 / 性能 / 提效投递简历：butian.wth@alibaba-inc.com 官⽅方 blog：https://fed.taobao.org/ 知乎专栏：https://zhuanlan.zhihu.com/tmallf2e

29. Q & A

30.