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

前端的云时代

Db33090541526c03c798f82aa0a5dbaa?s=47 lifesinger
December 09, 2012

 前端的云时代

支付宝前端平台技术架构

Db33090541526c03c798f82aa0a5dbaa?s=128

lifesinger

December 09, 2012
Tweet

More Decks by lifesinger

Other Decks in Technology

Transcript

  1. 前端的云时代

  2. 关于我  = {  姓名: 王保平  工作: 前端基础架构

     微博: @玉伯也叫射雕  } 
  3. 大纲  •  前端是什么  •  前端发展简史  •  支付宝业务场景

     •  前端平台架构  •  总结与展望 
  4. 前端是什么 

  5. 前端在做什么 

  6. 前端在做什么 

  7. 前端在做什么 

  8. None
  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