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

2012.12 �

关于我 �

= { �

姓名: 王保平 �

工作: 前端基础架构 �

微博: @玉伯也叫射雕 �

} �

大纲 �

•  前端是什么 �

•  前端发展简史 �

•  支付宝业务场景 �

•  前端平台架构 �

•  总结与展望 �

前端是什么 �

前端在做什么 �

前端在做什么 �

前端在做什么 �

前端的职责 �

①  实现界面交互 �

②  提升用户体验 �

前端发展简史 �

萌芽期 �

•  功能单一、页面少 �

•  修改频繁、速度快 �

•  团队小、多面手 �

萌芽期的前端 �

萌芽期的前端架构 �

设计  

前端开发  后端  开发  

项⺫⽬目  管理  

挑战：找到合适的人 �

幼年期 �

•  业务复杂、页面多 �

•  交互逐步复杂 �•  修改频繁、速度快 �

•  角色多、流程杂 �

幼年期的前端 �

           

幼年期的前端架构 �

挑战：招聘、协作 �

脚本开发 �页面构建 �

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

少年期 �

•  业务高速发展 �

•  前端性能要好 �•  核心业务要稳定 �

•  人多、分工细 �

少年期的前端 �

少年期的前端架构 �

挑战：专才培养、招聘 �

稳定保障 �性能优化 �

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

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

前端典型问题 �

•  项目并发多、忙 �

•  难以深入业务 �

•  价值认可度不高 �

•  职业发展迷茫 �

下一步 �

？  

支付宝业务场景 �

支付宝 �

互联网 � 金融 �

对技术的要求 �

稳定 �

快速 � 品质 �

⽆无线上故障  

响应快 �

开发快 �

发布快 �

性能高 �

可维护性好 �

可适应性强 �

前端业务分类 �

展现型 � 功能型 �

{ 给⽤用户看的   给⽤用户⽤用的  

展现型 �

功能型 �

? �

支撑 �

功能型业务 �展现型业务 �

还要考虑人的需求 �

•  成就感 �

•  发展空间 �

前端平台架构 �

总体原则 �

•  保障业务的正常进行 �

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

•  满足未来 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 �