如何设计实现跨端页面搭建系统 - 跨端模块
如果无法正常显示,请先停止浏览器的去广告插件。
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.