0
淘宝网前端应用与发展

        小马
关于我



{
      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,209

Published on

0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,209
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
216
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

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

  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. 谢谢
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×