有赞多端研发体系的探索与实践

何⽂俊 有赞 前端架构师
 CONTENT 1 关于有赞
2 多端体系探索
⽬录
3 ⾃研之路
4 实践与优化
5 多端体系思考
S

 关于有赞
Part 1 多端的起源
关于有赞

有赞：
是⼀家主要从事零售科技SaaS服务的企业，
帮助商家进⾏⽹上开店、社交营销、
提⾼留存复购，拓展全渠道新零售业务的公司。
渠道的多样性

1:n H5

字节

快⼿
研发的内⼼

爸爸 😐 爸爸! 爸爸！爸爸！

👶 👶
👶 👶
研发⾯临的挑战
研发的内⼼

爸爸 😭 爸爸! 爸爸！爸爸！

👶 👶
👶 👶
 多端体系探索
Part 2 列出需求，开始招标
寻求解决⽅案 - 筛选

要求 方案

基于VUE DSL Chameleon Taro

上⼿成本低、基建好迁移

mpvue WePY
跨端⽀持度好
微信/⽀付宝/QQ/百度...
Kbone Megalo

社区活跃度⾼
售后有保障
寻求解决⽅案 - 筛选

要求 方案

VUE⼦集 Chameleon
上⼿成本低、基建好迁移

mpvue
框架进⼊稳定期
⽅便后续做个性化扩展
Kbone
实践 - mpvue

实践项⽬： 微商城

端： 微信

历史包袱： 重

开发流程 ❌
实践 - mpvue

现状

200+
场景数:

场景多 ⽆法渐进
实践 - chameleon

现状

200+
场景数:

场景多 ⽆法渐进
 ⾃研之路
Part 3 做⼀个贴合业务的多端框架
⾃研 - 设计步骤

预期的框架能⼒ 能处理的业务、技术边界 设计出满⾜能⼒与边界的架构

能⼒ 边界 架构
⾃研 - 能⼒

能⼒ 边界 架构

{
具备多端输出能⼒，如⽀付宝/微信/QQ/H5

逻辑、展现、⼯程化、研发流程的⼀致性

端的扩展，外部系统可接⼊性
⾃研 - 能⼒

能⼒ 边界 架构
⾃研 - 能⼒

能⼒ 边界 架构
⾃研 - 业务场景拆分
业务组件 基础组件

slider tee-view tee-image

tee-view tee-text
footer
tee-image tee-button
⾃研 - 编译流程
核⼼编译流程: 从VUE DSL到⼩程序原⽣语法的转换

{ }
js

AXML ACSS
.vue template
JSON JS

style
⾃研 - AST简述

抽象语法树（Abstract Syntax Tree，AST）是源代码的抽象语法结构的树状表示

⾃研 - AST代码转换

code => tree => code

⾃研 - 代码转换示意

code

AST
⾃研 - 开发完成啦
 实践与优化
Part 4 技术贴合业务，获得持久⽣命⼒
实践与优化 - 微商城⽀付宝版

端： ⽀付宝

历史包袱： ⽆

开发流程
实践与优化 - 多端差异

Q：多端下的实现差异如何解决

A：根据情况，通过独⽴实现多套或在⼀套实现中使⽤条件判断解决

业务组件 基础组件

if ant
button
⽀付宝

else

微信
button button
实践与优化 - 基建复⽤

Q：⾃从⽤了多端，⽣态都要重新开发⼀遍，开发变慢了

A：⽀持使⽤原⽣模块。
实践与优化 - 迁移策略

直接⽀持原⽣模块，多端功能变强了，业务⽅也满意，皆⼤欢喜?

Emm, 以后会不会变成这样?
实践与优化 - 迁移策略

⽣态逐渐多端化，渐进式迁移：

• 现有⽣态： 套壳 多端实现
新增模块
• 新的模块：多端实现

原⽣迁移

原⽣模块
实践与优化 - 迁移策略

多端业务形态： 模块统 按端取 按端扩 业务⽣态现状

100+
40 微信

200+
多端模块 H5

10
⽀付宝
 多端体系思考
Part 5 从能⽤到好⽤，从技术到流程
还要做什么

？
}
• ⼀次开发，多端投放 ✅

• ⽣态迁移 ✅ 多端开发 ✅
• 多端与原⽣⼯程化融合 ✅

• 开发体验

• ⼯程能⼒
开发体验优化

现状：
因原⽣技术的不可抹平性，多端仍然存差异，但开发者并未意识到不可跨端性。

⽅案： tee-lint

{ }
开发体验优化

控制
对当前端下的不兼容写法给出警告
台

终端

可视化
开发体验优化

控制
对当前端下的不兼容写法给出警告
台

终端

可视化
开发体验优化

控制 对当前端下的不兼容写法在
台 可视化层⾯给出警告

终端

可视化
⼯程能⼒优化
现状：
因⼯程庞⼤，编译调试较为耗时。

⽅案： 增量编译

300%
编译效率
有赞的多端研发链路

基于多端统⼀研发链路。
有赞的多端研发链路

已落地商城核⼼链路, 技术⽅案输出到公司多个事业部。

20+
落地场景
现存问题

• 过渡期的包体积增⻓

• 多端展现仍然存在不⼀致

• 研发流程在原⽣技术层⾯存在差异
最后 - Why 多端
THANKS!