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.
淘宝网前端应用与发展

        小马
关于我



{
      Name:       “赵泽欣”,
      Nickname:   “小马”,
      Jobtitle:   “前端架构师”
      Company:    “淘宝网”
      City:   ...
内容提要


•   淘宝前端发展史
•   每年的问题与挑战
•   实践经验与心得
•   前端发展展望
Taobao.com @ 2003
Taobao.com @ 2004
Taobao.com @ 2005
Taobao.com @ 2006
淘宝网前端 @ 2006

                   前端员工人数


50


40


30


20


10
       0
 0
     2006   2007     2008   2009   2010
Taobao.com @ 2007
淘宝网前端 @ 2007

                   前端员工人数


50


40


30


20


10             5
       0
 0
     2006   2007    2008    200...
问题与挑战 @ 2007




• 团队合作成本高,编码规范缺失
• 网站应用交互更复杂
• 脚本管理混乱,复用性低
UED开发流程




                      Mock-up   Demo
  PRD     Prototype
                      [视觉设计     [前端工程
 [产品经理]   [交互设计...
与交互/视觉的合作




• Axture

• 制定标注规范

• 淘斯基
标注示例
与开发/测试的协作




• 共用的基础脚本库

•   HTML/CSS 命名约定
选择一个脚本类库




•   Prototype
•   jQuery
•   YUI
•   Dojo
•   Ext
Prototype
jQuery
Dojo
YUI
Ext
Why YUI?



 • 适合淘宝的多人协作开发环境
 • 功能齐全,可高效开发
 • 稳定 可靠
TBra




       基于YUI的电子商务网站常用组件库
与开发/测试的协作




•   共用的脚本库


• 代码约定(HTML/CSS/JavaScript命名
  规范)
与开发/测试的协作




合作中最常遇到的问题:
1. HTML 嵌套错误
2. 分不清哪些标签不要改劢,是前端丏用
   的?
3. 分不清哪些脚本应该由开发来写,哪些由
   前端来写?
与开发/测试的协作


问题: HTML 嵌套错误

解决方法:
增加特定格式的注释
教会开发人员使用Firebug & HTML Validator
与开发/测试的协作




• 问题:分不清哪些标签不要改劢,是前端
  丏用的?
解决方法: @TODO 格式化

特殊的Hook 命名约定,开发人员保留拥有特殊id/class命名的标签

<div id=“fp:slide” class=...
小结 (2007)



• 制定UED规范
• 制定前端代码规范
• 制定与开发的协作规范
Taobao.com @ 2008
淘宝网前端 @ 2008

                   前端员工人数


50


40


30


20
                      14

10            5
       0
 0
     200...
问题与挑战 @ 2008




• 淘宝的业务拆分,应用越来越多。如何保
  持页面的一致性
• 促销活劢频繁,促销页面占用大量的前端
  工作量
• 用户抱怨淘宝页面慢
• 人才与成长
保持页面的一致性



• 统一页头页尾
• 栅格化
• TMS 系统 (同时解决第二个问题)
TMS
关注前端性能


• CSS Sprite
• 首页 JavaScript/CSS 内嵌
• 减少HTTP请求
 – 将YUI+Tbra打包成一个请求 tbra-aio.js
• 引入CDN Assets域名
 – assets.taobaoc...
小结 (2008)


2008: 工具年

• 完善规范,将标准转化为工具
 – TMS


• 开始关注前端性能,使用
  ySlow/YUICompressor 进行优化
Taobao.com @ 2009
淘宝网前端 @ 2009

                   前端员工人数


50


40
                              30
30


20
                      14

10   ...
困难与挑战 @ 2009




• YUI+Tbra 已不能满足开发需求

• 性能成为工作重点
困难与挑战 @ 2009

问题:YUI+Tbra已不能满足开发的需求
 – YUI的组件不合国情
 – Tbra扩展性不足
 – YUI组件较为笨重
解决方法:
 – 建立开源 Kissy 框架
 – 重写常用组件:
   AutoCompl...
困难与挑战 @ 2009

挑战:性能要求更严格
解决方法:
 –    根据ySlow原则逐条优化
 –    Assets.taobaocdn.com
 –    Cookie 优化
 –    图片压缩
 –    图片延迟
 –    ...
小结 (2009)




2009年:性能年



@TODO 具体
Taobao.com @ 2010
淘宝网前端 @ 2010

                    前端员工人数


100
90
80                                    70
70
60
50
40                    ...
问题与挑战 @ 2010



• YUI + Tbra 的前端架构不再适合淘宝
• 性能要求苛刻
• 项目前端开发工作量占比不断提高,对前
  端技能要求日益提高
问题与挑战 @ 2010



挑战:新淘宝前端架构

解决方法:
 – Kissy Core 重写,不再依赖YUI
 – Kissy UI 开源组件库
 – Tbra 基于 Kissy,淘宝丏用组件库
 – 各产品线类库
淘宝2010前端架构




  App Lib   {   Mall   3C   Shop   …    }

Company Lib {   TBra            TBack   }

Common Lib {    YUI2 ...
问题与挑战 @ 2010


挑战:苛刻的性能要求

解决方法:
 – 2010 淘宝最新首页优化技术(HTML压缩与
  DOM预加载)
 – 淘宝性能指数
 – 性能自劢化测试
 – 基于Nginx 的Cdn combo 实现
 – Mor...
小结 (2010)




• 2010: 品质与协同年



• @TODO 具体
前端的发展

              Web开发
    应用Web化    (HTML/CSS/JavaScript/Flash/浏览器
              兼容性)


              交互设计代码实现
    用户...
前端团队人才与成长
谢谢
Upcoming SlideShare
Loading in …5
×

赵泽欣 - 淘宝网前端应用与发展

4,618 views

Published on

  • Be the first to comment

赵泽欣 - 淘宝网前端应用与发展

  1. 1. 淘宝网前端应用与发展 小马
  2. 2. 关于我 { Name: “赵泽欣”, Nickname: “小马”, Jobtitle: “前端架构师” Company: “淘宝网” City: “杭州” Twitter: “zhaozexin” }
  3. 3. 内容提要 • 淘宝前端发展史 • 每年的问题与挑战 • 实践经验与心得 • 前端发展展望
  4. 4. Taobao.com @ 2003
  5. 5. Taobao.com @ 2004
  6. 6. Taobao.com @ 2005
  7. 7. Taobao.com @ 2006
  8. 8. 淘宝网前端 @ 2006 前端员工人数 50 40 30 20 10 0 0 2006 2007 2008 2009 2010
  9. 9. Taobao.com @ 2007
  10. 10. 淘宝网前端 @ 2007 前端员工人数 50 40 30 20 10 5 0 0 2006 2007 2008 2009 2010
  11. 11. 问题与挑战 @ 2007 • 团队合作成本高,编码规范缺失 • 网站应用交互更复杂 • 脚本管理混乱,复用性低
  12. 12. UED开发流程 Mock-up Demo PRD Prototype [视觉设计 [前端工程 [产品经理] [交互设计师] 师] 师]
  13. 13. 与交互/视觉的合作 • Axture • 制定标注规范 • 淘斯基
  14. 14. 标注示例
  15. 15. 与开发/测试的协作 • 共用的基础脚本库 • HTML/CSS 命名约定
  16. 16. 选择一个脚本类库 • Prototype • jQuery • YUI • Dojo • Ext
  17. 17. Prototype
  18. 18. jQuery
  19. 19. Dojo
  20. 20. YUI
  21. 21. Ext
  22. 22. Why YUI? • 适合淘宝的多人协作开发环境 • 功能齐全,可高效开发 • 稳定 可靠
  23. 23. TBra 基于YUI的电子商务网站常用组件库
  24. 24. 与开发/测试的协作 • 共用的脚本库 • 代码约定(HTML/CSS/JavaScript命名 规范)
  25. 25. 与开发/测试的协作 合作中最常遇到的问题: 1. HTML 嵌套错误 2. 分不清哪些标签不要改劢,是前端丏用 的? 3. 分不清哪些脚本应该由开发来写,哪些由 前端来写?
  26. 26. 与开发/测试的协作 问题: HTML 嵌套错误 解决方法: 增加特定格式的注释 教会开发人员使用Firebug & HTML Validator
  27. 27. 与开发/测试的协作 • 问题:分不清哪些标签不要改劢,是前端 丏用的? 解决方法: @TODO 格式化 特殊的Hook 命名约定,开发人员保留拥有特殊id/class命名的标签 <div id=“fp:slide” class=“tb-slide”>……</div> <span class=“ww:token”><a class=“ww-online”>…</a></div> 新版: <div id=“J_Slide”>……</div> 其他CSS命名,统一使用连接符。 脚本: 代码统一写在一个闭包内。
  28. 28. 小结 (2007) • 制定UED规范 • 制定前端代码规范 • 制定与开发的协作规范
  29. 29. Taobao.com @ 2008
  30. 30. 淘宝网前端 @ 2008 前端员工人数 50 40 30 20 14 10 5 0 0 2006 2007 2008 2009 2010
  31. 31. 问题与挑战 @ 2008 • 淘宝的业务拆分,应用越来越多。如何保 持页面的一致性 • 促销活劢频繁,促销页面占用大量的前端 工作量 • 用户抱怨淘宝页面慢 • 人才与成长
  32. 32. 保持页面的一致性 • 统一页头页尾 • 栅格化 • TMS 系统 (同时解决第二个问题)
  33. 33. TMS
  34. 34. 关注前端性能 • CSS Sprite • 首页 JavaScript/CSS 内嵌 • 减少HTTP请求 – 将YUI+Tbra打包成一个请求 tbra-aio.js • 引入CDN Assets域名 – assets.taobaocdn.com • 脚本/CSS压缩 – YUICompressor
  35. 35. 小结 (2008) 2008: 工具年 • 完善规范,将标准转化为工具 – TMS • 开始关注前端性能,使用 ySlow/YUICompressor 进行优化
  36. 36. Taobao.com @ 2009
  37. 37. 淘宝网前端 @ 2009 前端员工人数 50 40 30 30 20 14 10 5 0 0 2006 2007 2008 2009 2010
  38. 38. 困难与挑战 @ 2009 • YUI+Tbra 已不能满足开发需求 • 性能成为工作重点
  39. 39. 困难与挑战 @ 2009 问题:YUI+Tbra已不能满足开发的需求 – YUI的组件不合国情 – Tbra扩展性不足 – YUI组件较为笨重 解决方法: – 建立开源 Kissy 框架 – 重写常用组件: AutoComplete/ImageLazyLoad/RichEdito r
  40. 40. 困难与挑战 @ 2009 挑战:性能要求更严格 解决方法: – 根据ySlow原则逐条优化 – Assets.taobaocdn.com – Cookie 优化 – 图片压缩 – 图片延迟 – 常用工具: Firebug + Fiddler + ySlow + PageSpeed + Webpagetest
  41. 41. 小结 (2009) 2009年:性能年 @TODO 具体
  42. 42. Taobao.com @ 2010
  43. 43. 淘宝网前端 @ 2010 前端员工人数 100 90 80 70 70 60 50 40 30 30 20 14 5 10 0 0 2006 2007 2008 2009 2010
  44. 44. 问题与挑战 @ 2010 • YUI + Tbra 的前端架构不再适合淘宝 • 性能要求苛刻 • 项目前端开发工作量占比不断提高,对前 端技能要求日益提高
  45. 45. 问题与挑战 @ 2010 挑战:新淘宝前端架构 解决方法: – Kissy Core 重写,不再依赖YUI – Kissy UI 开源组件库 – Tbra 基于 Kissy,淘宝丏用组件库 – 各产品线类库
  46. 46. 淘宝2010前端架构 App Lib { Mall 3C Shop … } Company Lib { TBra TBack } Common Lib { YUI2 Kissy }
  47. 47. 问题与挑战 @ 2010 挑战:苛刻的性能要求 解决方法: – 2010 淘宝最新首页优化技术(HTML压缩与 DOM预加载) – 淘宝性能指数 – 性能自劢化测试 – 基于Nginx 的Cdn combo 实现 – More…
  48. 48. 小结 (2010) • 2010: 品质与协同年 • @TODO 具体
  49. 49. 前端的发展 Web开发 应用Web化 (HTML/CSS/JavaScript/Flash/浏览器 兼容性) 交互设计代码实现 用户体验经济 (有设计基础,理解用户体验) 业务开发 Web应用桌面化 (Ajax异步开发,服务端编程语言基础, 性能) 云端管道开发 云计算 (API,架构,安全)
  50. 50. 前端团队人才与成长
  51. 51. 谢谢

×