1. 前端的云时代᠋᠌᠍᠎
- 支付宝前端平台架构

2012.12


2. 关于我

= {

姓名: 王保平

工作: 前端基础架构

微博: @玉伯也叫射雕

}


3. 大纲

• 前端是什么

• 前端发展简史

• 支付宝业务场景

• 前端平台架构

• 总结与展望


4. 前端是什么


5. 前端在做什么


6. 前端在做什么


7. 前端在做什么


9. 前端的职责

① 实现界面交互

② 提升用户体验


10. 前端发展简史


11. 萌芽期

• 功能单一、页面少

• 修改频繁、速度快

• 团队小、多面手


12. 萌芽期的前端


13. 萌芽期的前端架构

项⺫⽬目
管理
设计
后端
前端开发
开发
挑战：找到合适的人


14. 幼年期

• 业务复杂、页面多

• 交互逐步复杂

• 修改频繁、速度快

• 角色多、流程杂


15. 幼年期的前端


16. 幼年期的前端架构

页面构建
 脚本开发

基础类库
 编码规范
 开发流程
 …

挑战：招聘、协作


17. 少年期

• 业务高速发展

• 前端性能要好

• 核心业务要稳定

• 人多、分工细


18. 少年期的前端


19. 少年期的前端架构

性能优化
 稳定保障

业务一组
 业务二组
 业务二组

基础类库
 开发环境
 流程规范
 …

挑战：专才培养、招聘


20. 前端典型问题

• 项目并发多、忙

• 难以深入业务

• 价值认可度不高

• 职业发展迷茫


21. 下一步

？

22. 支付宝业务场景


23. 支付宝

互联网
 金融


24. 对技术的要求

⽆无线上故障
稳定

响应快

性能高

开发快
 快速
 品质
 可维护性好

发布快

可适应性强


25. 前端业务分类

展现型

{
给⽤用户看的
功能型

给⽤用户⽤用的

26. 展现型


27. 功能型


28. 展现型业务
 功能型业务

支撑

?


29. 还要考虑人的需求

• 成就感

• 发展空间


30. 前端平台架构


31. 总体原则

• 保障业务的正常进行

• 兼容现有架构、支持并存

• 满足未来 3 年内的需求


32. 上下游支持

• 设计和交互标准化

• 后端工程师达成往前走的共识


33. 前端技术平台

展现型业务
 功能型业务

业务架构
 业务架构
 业务架构
 业务架构

前端技术平台

前端服务化

基础技术体系
 基础设施平台


34. 前端基础技术体系

⽀支付宝模块库
Arale
Handy
百度模块
B2B ⽣生态库
CMD 模块⽣生态圈
模块库
SeaJS
spm
⼀一淘
腾讯模块
模块库
⽣生态库

35. SeaJS

SeaJS
是一个适用于
Web
端的模块加载器
h1p://seajs.org/

36. CMD 规范


37. spm

简单、放⼼心的包管理⼯工具
h1ps://github.com/spmjs/spm/wiki

38. spm
install
spm
build
spm
init
spm
upload
spm
deploy
…

39. Arale

Arale
是⼀一个开放、简单、易⽤用的前端基础类库

40. h1p://aralejs.org/

41. Arale

开放式，尽量复用业界成熟方案


42. Handy

h1p://handyjs.github.com/

43. 基础设施平台

基础设施平台



展现研发平台
 ⽤用户体验分析平台


前端测试系统
 前端监控系统

⺫⽬目标：为前端提供持续交付和监控分析

44. 展现研发平台


45. 用户体验分析平台

用户行为分析
 网站流量分析
 营销价值分析


46. 前端服务化

前端服务化



后台前端服务化
前台前端服务化


⺫⽬目标：让后端⼯工程师可以基于前端平台进⾏行⾃自主开发

47. 后台前端服务化


48. 前端
后端
前后端协作

。。。
前端业务架构

前端技术平台

由资源型团队转换成服务型团队

49. 总结与展望


50. 前端的云时代

终端
应⽤用
业务架构

业务架构
 业务架构

前
端
云
前端技术平台


51. 展望

• 模块生态圈的形成

• 前端技术的精细化

• 前端驱动产品


52. 支付宝前端基础技术组


53. seajs.log(“谢谢大家”)

QA