淘宝网前端应用与发展
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

淘宝网前端应用与发展

  • 33,786 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • cool
    Are you sure you want to
    Your message goes here
  • very good!
    Are you sure you want to
    Your message goes here
  • thanks
    Are you sure you want to
    Your message goes here
  • Priscila Brito dos Santos

    Slides: http://www.slideshare.net/priscilabritosantos
    Blog: http://respeitopelosidosos.blogspot.com/
    e-Mail: priscilabritosantos@gmail.com
    Twitter: @PriscaBritoRH
    Are you sure you want to
    Your message goes here
  • very good
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
33,786
On Slideshare
26,733
From Embeds
7,053
Number of Embeds
31

Actions

Shares
Downloads
1,728
Comments
9
Likes
164

Embeds 7,053

http://ued.taobao.com 5,879
http://www.slideshare.net 317
http://www.techgig.com 200
http://wiki.ued.taobao.net 188
http://www.alibuybuy.com 126
http://static.slidesharecdn.com 90
http://angck.com 84
http://xianguo.com 27
http://www.zhuaxia.com 25
http://ued.taobao.org 18
http://reader.youdao.com 16
http://cache.baidu.com 15
http://woshao.com 14
http://www.angck.com 8
http://k.mr7.me 7
http://www.taochengxi.com 7
http://www.doocom.cn 5
http://zhuaxia.com 5
http://www.taochengxi.cn 4
http://article.woshao.com 3
http://www.aspxhome.com 3
http://www.techgig.timesjobs.com 2
http://localhost 2
http://br.qzone.qq.com 1
http://www.janesoap.com 1
http://mailreader.163.com 1
http://www.ah81.com 1
file:// 1
http://www.xuesz.com 1
http://www.itfeed.cn 1
http://192.168.74.3 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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

    Kissy

    TBack
    YUI2
    TBra
    Mall
    基础类库 { }
    公司类库 { }
    应用类库 { }
  • 54. HTML5 & CSS3
    HTML压缩
    DOM预加载
    本地存储
    data:url
    CSS圆角
    淘宝性能指数
    性能自动化测试
    Firefox + ySlow + showslow + xvfb
    CDN改造
    基于Nginx的 CDN combo 实现
    MVC架构改造
    挑战:性能要求苛刻
    对策:速度委员会
  • 55.
  • 56. 目标 (2010)
    目标(2010)
    探索和研发最适合自己的前端框架
    精雕细琢地前端编码
    Fast by Default
  • 57. 淘宝网前端实践之路
  • 58. 淘宝网前端发展展望
  • 59. 前端岗位发展展望
  • 60.
  • 61. 前端团队人才与成长
    好的设计驱动技术创新(Design) 好的技术为设计提供无限的想象(Develop)
  • 62. 淘宝UED的设计流程: http://ued.taobao.com/blog/2007/08/13/our_design_flow/
    网页栅格系统研究: http://lifesinger.org/blog/2008/10/grid-system-1/
    Kissy on GoogleCode: http://code.google.com/p/kissy/
    ySlowrules: http://developer.yahoo.com/performance/rules.html
    WebPageTest: http://www.webpagetet.org/
    YUICompressor: http://developer.yahoo.com/yui/compressor/
    Let‘s make the web faster:http://code.google.com/speed/articles/html5-performance.html
    @kejunz: http://twitter.com/kejunz
  • 63. 谢谢