top100summit前端的云时代支付宝前端平台架构 王保平
TRANSCRIPT
![Page 1: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/1.jpg)
前端的云时代���᠋᠌᠍- 支付宝前端平台架构 �
2012.12 �
![Page 2: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/2.jpg)
关于我 �
= { �
姓名: 王保平 �
工作: 前端基础架构 �
微博: @玉伯也叫射雕 �
} �
![Page 3: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/3.jpg)
大纲 �
• 前端是什么 �
• 前端发展简史 �
• 支付宝业务场景 �
• 前端平台架构 �
• 总结与展望 �
![Page 4: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/4.jpg)
前端是什么 �
![Page 5: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/5.jpg)
前端在做什么 �
![Page 6: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/6.jpg)
前端在做什么 �
![Page 7: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/7.jpg)
前端在做什么 �
![Page 8: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/8.jpg)
![Page 9: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/9.jpg)
前端的职责 �
① 实现界面交互 �
② 提升用户体验 �
![Page 10: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/10.jpg)
前端发展简史 �
![Page 11: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/11.jpg)
萌芽期 �
• 功能单一、页面少 �
• 修改频繁、速度快 �
• 团队小、多面手 �
![Page 12: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/12.jpg)
萌芽期的前端 �
![Page 13: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/13.jpg)
萌芽期的前端架构 �
设计
前端开发 后端 开发
项⺫⽬目 管理
挑战:找到合适的人 �
![Page 14: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/14.jpg)
幼年期 �
• 业务复杂、页面多 �
• 交互逐步复杂 �• 修改频繁、速度快 �
• 角色多、流程杂 �
![Page 15: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/15.jpg)
幼年期的前端 �
![Page 16: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/16.jpg)
幼年期的前端架构 �
挑战:招聘、协作 �
脚本开发 �页面构建 �
基础类库 � 编码规范 � 开发流程 � … �
![Page 17: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/17.jpg)
少年期 �
• 业务高速发展 �
• 前端性能要好 �• 核心业务要稳定 �
• 人多、分工细 �
![Page 18: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/18.jpg)
少年期的前端 �
![Page 19: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/19.jpg)
少年期的前端架构 �
挑战:专才培养、招聘 �
稳定保障 �性能优化 �
基础类库 � 开发环境 � 流程规范 � … �
业务二组 � 业务二组 �业务一组 �
![Page 20: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/20.jpg)
前端典型问题 �
• 项目并发多、忙 �
• 难以深入业务 �
• 价值认可度不高 �
• 职业发展迷茫 �
![Page 21: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/21.jpg)
下一步 �
?
![Page 22: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/22.jpg)
支付宝业务场景 �
![Page 23: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/23.jpg)
支付宝 �
互联网 � 金融 �
![Page 24: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/24.jpg)
对技术的要求 �
稳定 �
快速 � 品质 �
⽆无线上故障
响应快 �
开发快 �
发布快 �
性能高 �
可维护性好 �
可适应性强 �
![Page 25: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/25.jpg)
前端业务分类 �
展现型 � 功能型 �
{ 给⽤用户看的 给⽤用户⽤用的
![Page 26: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/26.jpg)
展现型 �
![Page 27: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/27.jpg)
功能型 �
![Page 28: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/28.jpg)
? �
支撑 �
功能型业务 �展现型业务 �
![Page 29: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/29.jpg)
还要考虑人的需求 �
• 成就感 �
• 发展空间 �
![Page 30: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/30.jpg)
前端平台架构 �
![Page 31: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/31.jpg)
总体原则 �
• 保障业务的正常进行 �
• 兼容现有架构、支持并存 �
• 满足未来 3 年内的需求 �
![Page 32: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/32.jpg)
上下游支持 �
• 设计和交互标准化 �
• 后端工程师达成往前走的共识 �
![Page 33: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/33.jpg)
功能型业务 �展现型业务 �
前端技术平台 �
前端技术平台 �
基础技术体系 � 基础设施平台 �
前端服务化 �
业务架构 � 业务架构 � 业务架构 � 业务架构 �
![Page 34: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/34.jpg)
CMD 模块⽣生态圈
⽀支付宝模块库
⼀一淘 模块库 腾讯模块
⽣生态库
B2B 模块库
Arale Handy
SeaJS spm
前端基础技术体系 �
百度模块 ⽣生态库
![Page 35: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/35.jpg)
SeaJS �
h1p://seajs.org/
SeaJS 是一个适用于 Web 端的模块加载器
![Page 36: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/36.jpg)
CMD 规范 �
![Page 37: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/37.jpg)
spm �
h1ps://github.com/spmjs/spm/wiki
简单、放⼼心的包管理⼯工具
![Page 38: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/38.jpg)
spm install
spm upload
spm build
spm deploy
spm init
…
![Page 39: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/39.jpg)
Arale �
Arale 是⼀一个开放、简单、易⽤用的前端基础类库
![Page 40: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/40.jpg)
h1p://aralejs.org/
![Page 41: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/41.jpg)
Arale �
开放式,尽量复用业界成熟方案 �
![Page 42: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/42.jpg)
Handy �h1p://handyjs.github.com/
![Page 43: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/43.jpg)
基础设施平台 �
基础设施平台 � � � � � � � �
展现研发平台
前端测试系统
⽤用户体验分析平台
前端监控系统
⺫⽬目标:为前端提供持续交付和监控分析
![Page 44: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/44.jpg)
展现研发平台 �
![Page 45: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/45.jpg)
用户体验分析平台 �
用户行为分析 � 网站流量分析 � 营销价值分析 �
![Page 46: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/46.jpg)
前端服务化 �
前端服务化 � � � � �
前台前端服务化 后台前端服务化
⺫⽬目标:让后端⼯工程师可以基于前端平台进⾏行⾃自主开发
![Page 47: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/47.jpg)
后台前端服务化 �
![Page 48: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/48.jpg)
前端业务架构 �
前端技术平台 �
前端 后端
前后端协作 �
由资源型团队转换成服务型团队
。。。
![Page 49: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/49.jpg)
总结与展望 �
![Page 50: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/50.jpg)
前端的云时代 �
前端技术平台 �
业务架构 �业务架构 �
业务架构 �
应⽤用
终端
前 端 云
![Page 51: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/51.jpg)
展望 �
• 模块生态圈的形成 �
• 前端技术的精细化 �
• 前端驱动产品 �
![Page 52: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/52.jpg)
支付宝前端基础技术组 �
![Page 53: Top100summit前端的云时代支付宝前端平台架构 王保平](https://reader034.vdocuments.site/reader034/viewer/2022052200/5584f9d4d8b42ae71b8b4746/html5/thumbnails/53.jpg)
seajs.log(“谢谢大家”) �
Q&A �