Upgrade to Pro — share decks privately, control downloads, hide ads and more …

前端的云时代

lifesinger
December 09, 2012

 前端的云时代

支付宝前端平台技术架构

lifesinger

December 09, 2012
Tweet

More Decks by lifesinger

Other Decks in Technology

Transcript

  1. 前端的云时代

    View Slide

  2. 关于我 
    = { 
    姓名: 王保平 
    工作: 前端基础架构 
    微博: @玉伯也叫射雕 
    } 

    View Slide

  3. 大纲 
    •  前端是什么 
    •  前端发展简史 
    •  支付宝业务场景 
    •  前端平台架构 
    •  总结与展望 

    View Slide

  4. 前端是什么 

    View Slide

  5. 前端在做什么 

    View Slide

  6. 前端在做什么 

    View Slide

  7. 前端在做什么 

    View Slide

  8. View Slide

  9. 前端的职责 
    ①  实现界面交互 
    ②  提升用户体验 

    View Slide

  10. 前端发展简史 

    View Slide

  11. 萌芽期 
    •  功能单一、页面少 
    •  修改频繁、速度快 
    •  团队小、多面手 

    View Slide

  12. 萌芽期的前端 

    View Slide

  13. 萌芽期的前端架构 
    设计  
    前端开发  
    后端  
    开发  
    项⺫⽬目  
    管理  
    挑战:找到合适的人 

    View Slide

  14. 幼年期 
    •  业务复杂、页面多 
    •  交互逐步复杂 
    •  修改频繁、速度快 
    •  角色多、流程杂 

    View Slide

  15. 幼年期的前端 
               

    View Slide

  16. 幼年期的前端架构 
    挑战:招聘、协作 
    脚本开发 
    页面构建 
    基础类库  编码规范  开发流程  … 

    View Slide

  17. 少年期 
    •  业务高速发展 
    •  前端性能要好 
    •  核心业务要稳定 
    •  人多、分工细 

    View Slide

  18. 少年期的前端 

    View Slide

  19. 少年期的前端架构 
    挑战:专才培养、招聘 
    稳定保障 
    性能优化 
    基础类库  开发环境  流程规范  … 
    业务二组  业务二组 
    业务一组 

    View Slide

  20. 前端典型问题 
    •  项目并发多、忙 
    •  难以深入业务 
    •  价值认可度不高 
    •  职业发展迷茫 

    View Slide

  21. 下一步 

     

    View Slide

  22. 支付宝业务场景 

    View Slide

  23. 支付宝 
    互联网  金融 

    View Slide

  24. 对技术的要求 
    稳定 
    快速  品质 
    ⽆无线上故障  
    响应快 
    开发快 
    发布快 
    性能高 
    可维护性好 
    可适应性强 

    View Slide

  25. 前端业务分类 
    展现型  功能型 
    {
    给⽤用户看的   给⽤用户⽤用的  

    View Slide

  26. 展现型 

    View Slide

  27. 功能型 

    View Slide

  28. ? 
    支撑 
    功能型业务 
    展现型业务 

    View Slide

  29. 还要考虑人的需求 
    •  成就感 
    •  发展空间 

    View Slide

  30. 前端平台架构 

    View Slide

  31. 总体原则 
    •  保障业务的正常进行 
    •  兼容现有架构、支持并存 
    •  满足未来 3 年内的需求 

    View Slide

  32. 上下游支持 
    •  设计和交互标准化 
    •  后端工程师达成往前走的共识 

    View Slide

  33. 功能型业务 
    展现型业务 
    前端技术平台 
    前端技术平台 
    基础技术体系  基础设施平台 
    前端服务化 
    业务架构  业务架构  业务架构  业务架构 

    View Slide

  34. CMD 模块⽣生态圈
    ⽀支付宝模块库
    ⼀一淘
    模块库
    腾讯模块
    ⽣生态库
    B2B
    模块库
    Arale   Handy  
    SeaJS   spm  
    前端基础技术体系 
    百度模块
    ⽣生态库

    View Slide

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

    View Slide

  36. CMD 规范 

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. h1p://aralejs.org/  

    View Slide

  41. Arale 
    开放式,尽量复用业界成熟方案 

    View Slide

  42. Handy 
    h1p://handyjs.github.com/  

    View Slide

  43. 基础设施平台 
    基础设施平台 
    
    
    
    
    
    
    
    展现研发平台  
    前端测试系统  
    ⽤用户体验分析平台  
    前端监控系统  
    ⺫⽬目标:为前端提供持续交付和监控分析  

    View Slide

  44. 展现研发平台 

    View Slide

  45. 用户体验分析平台 
    用户行为分析  网站流量分析  营销价值分析 

    View Slide

  46. 前端服务化 
    前端服务化 
    
    
    
    
    前台前端服务化  
    后台前端服务化  
    ⺫⽬目标:让后端⼯工程师可以基于前端平台进⾏行⾃自主开发  

    View Slide

  47. 后台前端服务化 

    View Slide

  48. 前端业务架构 
    前端技术平台 
    前端   后端  
    前后端协作 
    由资源型团队转换成服务型团队  
    。。。  

    View Slide

  49. 总结与展望 

    View Slide

  50. 前端的云时代 
    前端技术平台 
    业务架构 
    业务架构 
    业务架构 
    应⽤用  
    终端  
    前  
    端  
    云  

    View Slide

  51. 展望 
    •  模块生态圈的形成 
    •  前端技术的精细化 
    •  前端驱动产品 

    View Slide

  52. 支付宝前端基础技术团队  

    View Slide

  53. seajs.log(“谢谢大家”) 
    Q&A 

    View Slide