淘宝网前端应用与发展

31,893 views
31,661 views

Published on

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

Published in: Technology
9 Comments
168 Likes
Statistics
Notes
No Downloads
Views
Total views
31,893
On SlideShare
0
From Embeds
0
Number of Embeds
7,090
Actions
Shares
0
Downloads
1,750
Comments
9
Likes
168
Embeds 0
No embeds

No notes for slide

淘宝网前端应用与发展

  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 />

×