前端的云时代

支付宝前端平台技术架构

Transcript

1. 前端的云时代
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. CMD 模块⽣生态圈 ⽀支付宝模块库 ⼀一淘 模块库 腾讯模块 ⽣生态库 B2B 模块库 Arale   Handy   SeaJS   spm   前端基础技术体系  百度模块 ⽣生态库
35. SeaJS  h1p://seajs.org/   SeaJS  是一个适用于  Web  端的模块加载器  
36. CMD 规范 
37. spm  h1ps://github.com/spmjs/spm/wiki   简单、放⼼心的包管理⼯工具  
38. spm  install   spm  upload   spm  build   spm  deploy   spm  init   …  
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(“谢谢大家”)  Q&A