Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

淘宝网前端应用与发展

32,321 views

Published on

《淘宝前端应用与发展》 @ QCon2010 北京

Published in: Technology
  • Login to see the comments

淘宝网前端应用与发展

  1. 1. 淘宝网前端应用与发展<br />小马<br />
  2. 2. 淘宝前端发展史<br />近四年来的问题与挑战<br />实践经验与心得<br />前端发展展望<br />内容提要<br />内容提要<br />
  3. 3. 关于我<br />{<br />Name: “赵泽欣”,<br />Nickname: “小马”,<br />Job: “前端工程师”<br />Company: “淘宝网”<br />Twitter: “@zhaozexin”<br />}<br />
  4. 4. Taobao.com @ 2003<br />
  5. 5. Taobao.com @ 2004<br />
  6. 6. Taobao.com @ 2005<br />
  7. 7. Taobao.com @ 2006<br />
  8. 8. 淘宝网前端 @ 2006<br />
  9. 9. Taobao.com @ 2007<br />
  10. 10. 淘宝网前端 @ 2007<br />
  11. 11. <ul><li>团队合作成本高,编码规范缺失</li></ul>网站应用交互变复杂,要“动”起来<br />脚本管理混乱,复用性低,维护成本高<br />问题与挑战 @ 2007<br />问题与挑战 @ 2007<br />
  12. 12. UED开发流程<br />
  13. 13. 问题:团队合作成本高,编码规范缺失<br />对策:制定与交互/视觉的合作规范<br />Axure<br />淘斯基<br />标注规范<br />
  14. 14. 标注示例<br />
  15. 15. 提高与后端开发的合作效率<br />对策:制定与后端开发的合作规范<br />共用的基础脚本库<br />代码约定<br />
  16. 16. 自行开发<br />Prototype<br />jQuery<br />YUI<br />dojo<br />Ext<br />选择一个脚本类库<br />
  17. 17. Prototype like<br />Prototype likes<br />
  18. 18. jQuery<br />jQuery likes<br />
  19. 19. dojo<br />dojo likes<br />
  20. 20. YUI<br />YUI likes<br />
  21. 21. Ext<br />Ext likes<br />
  22. 22. 适用于网站<br />适合淘宝的协作开发环境<br />功能齐全<br />稳定 可靠<br />Why YUI?<br />
  23. 23. TBra:基于YUI的电子商务网站常用组件库<br />
  24. 24. 对策:制定与后端开发的合作规范<br />共用的基本脚本库<br />代码约定<br />
  25. 25. 合作中最常遇到的问题:<br />HTML 嵌套错误或标签未关闭<br />Hook 标签被误删或更改<br />脚本开发分工不明,全局变量名冲突<br />制定与后端开发的合作规范<br />
  26. 26. 问题: HTML嵌套错误或标签未关闭<br />解决方法:<br />约定特定格式的注释 <br />培训开发人员使用Firebug & HTML Validator<br />制定与后端开发的合作规范<br />
  27. 27. 制定与后端开发的合作规范<br />问题: Hook 标签被误删或更改<br />解决方法:<br />Hook命名约定<br />
  28. 28. 代码约定示例<br /><span class=“ww:token”><br /><a class=“ww-online”>…</a><br /></span><br />
  29. 29. 代码约定示例<br /><div id=“fp:slide” class=“tb-slide”><br /> …… <br /></div><br /><div id=“J_Slide” class=“tb-slide”><br /> …… <br /></div><br />
  30. 30. 制定与后端开发的合作规范<br />问题: 脚本开发分工不明,全局变量冲突<br />解决方法:<br />展现层由前端工程师开发<br />业务逻辑涉及脚本由后端工程师开发<br />
  31. 31. 小结 (2007)<br />小结 (2007)<br />制定UED规范<br />制定前端代码规范<br />制定前端与后端开发的协作规范<br />
  32. 32. Taobao.com @ 2008<br />
  33. 33. 淘宝网前端 @ 2008<br />
  34. 34. 淘宝的业务拆分,网站日益庞大。如何保持页面的一致性?<br />促销活动频繁,促销页面和垂直频道占用大量前端工作量<br />用户抱怨淘宝页面慢<br />问题与挑战 @ 2008<br />
  35. 35. 统一页头页尾<br />栅格化<br />TMS 系统<br />对策:工业化<br />
  36. 36. TMS<br />
  37. 37. 对策:根据ySlow规则优化前端性能<br />CSS Sprite<br />减少HTTP请求<br />首页 JavaScript/CSS 内嵌<br />CSS/JavaScript文件合并(将YUI+TBra打包成tbra-aio.js)<br />引入CDN Assets域名<br />assets.taobaocdn.com <br />JavaScript/CSS压缩<br />YUICompressor<br />
  38. 38. 小结 (2008)<br />小结 (2008)<br />完善规范,将规范转化为工业化工具(TMS)<br />使用 ySlow / YUICompressor等工具优化前端性能<br />
  39. 39. Taobao.com @ 2009<br />
  40. 40. 淘宝网前端 @ 2009<br />
  41. 41. 网站页面性能形势严峻<br />YUI+TBra日益无法满足开发需求<br />问题与挑战 @ 2009<br />
  42. 42. 问题:网站页面性能形势严峻<br />一些研究数据<br />Amazon 慢0.1 s -> 1% 用户放弃交易 <br />Google 慢 0.4s -> 0.6% 放弃搜索<br />Yahoo! 慢 0.4s -> 减少 5%-9% 的流量<br />Bing 慢 2s ->收入下降 4.3 %<br />
  43. 43. 商品详情页面优化项目<br />首页性能优化项目<br />搜索结果页性能优化项目<br />其他<br />图片延迟加载<br />cookie 优化<br />assets.taobaocdn.com -> a.tbcdn.cn<br />图片强制压缩<br />对策:性能优化别动组<br />
  44. 44. 性能收益公式<br />页面节省的带宽费用/年 = <br />优化减少的下载量(KB)  x  <br />页面PV  x  <br /> 20%(无缓存用户比率)  x   <br /> (8/1000/12/3600*750000/100) <br />
  45. 45. 2010 前端性能年<br />Fiddler - Microsoft <br />Pagetest - AOL<br />ySlow – YAHOO!<br />
  46. 46. 网站页面性能形势严峻<br />YUI+TBra日益无法满足开发需求<br />YUI的组件体验不合国情<br />YUI组件较为笨重<br />TBra 扩展性不足<br />问题与挑战 @ 2009<br />
  47. 47. 建立开源 Kissy 框架<br />重写常用组件<br />AutoComplete<br />ImageLazyLoad<br />RichEditor<br />……<br />困难与挑战 @ 2009<br />对策:尝试研发新脚本库<br />
  48. 48. 小结 (2009)<br />小结 (2009)<br />联合开发/运维/测试工程师一起立项全面优化网站性能<br />创建Kissy开源项目,逐步迁移YUI/TBra组件到Kissy组件,改善体验,优化性能<br />
  49. 49. Taobao.com @ 2010<br />
  50. 50. 淘宝网前端 @ 2010 <br />
  51. 51. 用户个性化需求强烈<br />YUI + TBra的前端架构不再适合淘宝<br />性能要求苛刻<br />项目前端开发工作量占比不断提高,后台架构和开发过程需要改革<br />问题与挑战 @ 2010<br />问题与挑战 @ 2010<br />
  52. 52. Kissy Core 重写,不再依赖YUI<br />Kissy UI 开源组件库<br />TBra基于 Kissy,成为淘宝专用组件库<br />建立各产品线工具类库<br />对策:设计新的淘宝前端架构<br />
  53. 53. 淘宝2010前端架构<br />Shop<br />3C<br />…<br />Kissy <br />…<br />TBack<br />YUI2<br />TBra<br />Mall<br />基础类库 { }<br />公司类库 { }<br />应用类库 { }<br />
  54. 54. HTML5 & CSS3<br />HTML压缩<br />DOM预加载<br />本地存储<br />data:url<br />CSS圆角<br />淘宝性能指数<br />性能自动化测试<br />Firefox + ySlow + showslow + xvfb<br />CDN改造<br />基于Nginx的 CDN combo 实现<br />MVC架构改造<br />挑战:性能要求苛刻<br />对策:速度委员会<br />
  55. 55.
  56. 56. 目标 (2010)<br />目标(2010)<br />探索和研发最适合自己的前端框架<br />精雕细琢地前端编码<br />Fast by Default<br />
  57. 57. 淘宝网前端实践之路<br />
  58. 58. 淘宝网前端发展展望<br />
  59. 59. 前端岗位发展展望<br />
  60. 60.
  61. 61. 前端团队人才与成长<br />好的设计驱动技术创新(Design) 好的技术为设计提供无限的想象(Develop)<br />
  62. 62. 淘宝UED的设计流程: http://ued.taobao.com/blog/2007/08/13/our_design_flow/<br />网页栅格系统研究: http://lifesinger.org/blog/2008/10/grid-system-1/<br />Kissy on GoogleCode: http://code.google.com/p/kissy/<br />ySlowrules: http://developer.yahoo.com/performance/rules.html<br />WebPageTest: http://www.webpagetet.org/<br />YUICompressor: http://developer.yahoo.com/yui/compressor/<br />Let‘s make the web faster:http://code.google.com/speed/articles/html5-performance.html<br />@kejunz: http://twitter.com/kejunz<br />
  63. 63. 谢谢<br />

×