支付宝前端平台技术架构
前端的云时代
View Slide
关于我 = { 姓名: 王保平 工作: 前端基础架构 微博: @玉伯也叫射雕 }
大纲 • 前端是什么 • 前端发展简史 • 支付宝业务场景 • 前端平台架构 • 总结与展望
前端是什么
前端在做什么
前端的职责 ① 实现界面交互 ② 提升用户体验
前端发展简史
萌芽期 • 功能单一、页面少 • 修改频繁、速度快 • 团队小、多面手
萌芽期的前端
萌芽期的前端架构 设计 前端开发 后端 开发 项⺫⽬目 管理 挑战：找到合适的人
幼年期 • 业务复杂、页面多 • 交互逐步复杂 • 修改频繁、速度快 • 角色多、流程杂
幼年期的前端
幼年期的前端架构 挑战：招聘、协作 脚本开发 页面构建 基础类库 编码规范 开发流程 …
少年期 • 业务高速发展 • 前端性能要好 • 核心业务要稳定 • 人多、分工细
少年期的前端
少年期的前端架构 挑战：专才培养、招聘 稳定保障 性能优化 基础类库 开发环境 流程规范 … 业务二组 业务二组 业务一组
前端典型问题 • 项目并发多、忙 • 难以深入业务 • 价值认可度不高 • 职业发展迷茫
下一步 ？
支付宝业务场景
支付宝 互联网 金融
对技术的要求 稳定 快速 品质 ⽆无线上故障 响应快 开发快 发布快 性能高 可维护性好 可适应性强
前端业务分类 展现型 功能型 {给⽤用户看的 给⽤用户⽤用的
展现型
功能型
? 支撑 功能型业务 展现型业务
还要考虑人的需求 • 成就感 • 发展空间
前端平台架构
总体原则 • 保障业务的正常进行 • 兼容现有架构、支持并存 • 满足未来 3 年内的需求
上下游支持 • 设计和交互标准化 • 后端工程师达成往前走的共识
功能型业务 展现型业务 前端技术平台 前端技术平台 基础技术体系 基础设施平台 前端服务化 业务架构 业务架构 业务架构 业务架构
CMD 模块⽣生态圈⽀支付宝模块库⼀一淘模块库腾讯模块⽣生态库B2B模块库Arale Handy SeaJS spm 前端基础技术体系 百度模块⽣生态库
SeaJS h1p://seajs.org/ SeaJS 是一个适用于 Web 端的模块加载器
CMD 规范
spm h1ps://github.com/spmjs/spm/wiki 简单、放⼼心的包管理⼯工具
spm install spm upload spm build spm deploy spm init …
Arale Arale 是⼀一个开放、简单、易⽤用的前端基础类库
h1p://aralejs.org/
Arale 开放式，尽量复用业界成熟方案
Handy h1p://handyjs.github.com/
基础设施平台 基础设施平台 展现研发平台 前端测试系统 ⽤用户体验分析平台 前端监控系统 ⺫⽬目标：为前端提供持续交付和监控分析
展现研发平台
用户体验分析平台 用户行为分析 网站流量分析 营销价值分析
前端服务化 前端服务化 前台前端服务化 后台前端服务化 ⺫⽬目标：让后端⼯工程师可以基于前端平台进⾏行⾃自主开发
后台前端服务化
前端业务架构 前端技术平台 前端 后端 前后端协作 由资源型团队转换成服务型团队 。。。
总结与展望
前端的云时代 前端技术平台 业务架构 业务架构 业务架构 应⽤用 终端 前 端 云
展望 • 模块生态圈的形成 • 前端技术的精细化 • 前端驱动产品
支付宝前端基础技术团队
seajs.log(“谢谢大家”) Q&A
lifesinger
onlinesalon
junkifurukawa
k9i
convto
trycycle
taro_nanairo
oracle4engineer
nearme_tech
soracom
irof
ks91
asei
deanohume
rmw
matthewcrist
mraible
hannesfritz
edds
mza
shlominoach
garrettdimon
reverentgeek
sugarenia
caitiem20