1. 淘宝网前端应用与发展
小马

2. 关于我
{
Name: “赵泽欣”,
Nickname: “小马”,
Jobtitle: “前端架构师”
Company: “淘宝网”
City: “杭州”
Twitter: “zhaozexin”
}

3. 内容提要
• 淘宝前端发展史
• 每年的问题与挑战
• 实践经验与心得
• 前端发展展望

4. Taobao.com @ 2003

5. Taobao.com @ 2004

6. Taobao.com @ 2005

7. Taobao.com @ 2006

8. 淘宝网前端 @ 2006
前端员工人数
50
40
30
20
10
0
0
2006 2007 2008 2009 2010

9. Taobao.com @ 2007

10. 淘宝网前端 @ 2007
前端员工人数
50
40
30
20
10 5
0
0
2006 2007 2008 2009 2010

11. 问题与挑战 @ 2007
• 团队合作成本高，编码规范缺失
• 网站应用交互更复杂
• 脚本管理混乱，复用性低

12. UED开发流程
Mock-up Demo
PRD Prototype
[视觉设计 [前端工程
[产品经理] [交互设计师]
师] 师]

13. 与交互/视觉的合作
• Axture
• 制定标注规范
• 淘斯基

14. 标注示例

15. 与开发/测试的协作
• 共用的基础脚本库
• HTML/CSS 命名约定

16. 选择一个脚本类库
• Prototype
• jQuery
• YUI
• Dojo
• Ext

17. Prototype

18. jQuery

19. Dojo

20. YUI

21. Ext

22. Why YUI？
• 适合淘宝的多人协作开发环境
• 功能齐全，可高效开发
• 稳定 可靠

23. TBra
基于YUI的电子商务网站常用组件库

24. 与开发/测试的协作
• 共用的脚本库
• 代码约定（HTML/CSS/JavaScript命名
规范）

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

26. 与开发/测试的协作
问题: HTML 嵌套错误
解决方法：
增加特定格式的注释
教会开发人员使用Firebug & HTML Validator

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. 小结 (2007)
• 制定UED规范
• 制定前端代码规范
• 制定与开发的协作规范

29. Taobao.com @ 2008

30. 淘宝网前端 @ 2008
前端员工人数
50
40
30
20
14
10 5
0
0
2006 2007 2008 2009 2010

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

32. 保持页面的一致性
• 统一页头页尾
• 栅格化
• TMS 系统 (同时解决第二个问题)

33. TMS

34. 关注前端性能
• CSS Sprite
• 首页 JavaScript/CSS 内嵌
• 减少HTTP请求
– 将YUI+Tbra打包成一个请求 tbra-aio.js
• 引入CDN Assets域名
– assets.taobaocdn.com
• 脚本/CSS压缩
– YUICompressor

35. 小结 （2008）
2008: 工具年
• 完善规范，将标准转化为工具
– TMS
• 开始关注前端性能，使用
ySlow/YUICompressor 进行优化

36. Taobao.com @ 2009

37. 淘宝网前端 @ 2009
前端员工人数
50
40
30
30
20
14
10 5
0
0
2006 2007 2008 2009 2010

38. 困难与挑战 @ 2009
• YUI+Tbra 已不能满足开发需求
• 性能成为工作重点

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

40. 困难与挑战 @ 2009
挑战：性能要求更严格
解决方法：
– 根据ySlow原则逐条优化
– Assets.taobaocdn.com
– Cookie 优化
– 图片压缩
– 图片延迟
– 常用工具： Firebug + Fiddler + ySlow +
PageSpeed + Webpagetest

41. 小结 (2009)
2009年：性能年
@TODO 具体

42. Taobao.com @ 2010

43. 淘宝网前端 @ 2010
前端员工人数
100
90
80 70
70
60
50
40 30
30
20 14
5
10 0
0
2006 2007 2008 2009 2010

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

45. 问题与挑战 @ 2010
挑战：新淘宝前端架构
解决方法：
– Kissy Core 重写，不再依赖YUI
– Kissy UI 开源组件库
– Tbra 基于 Kissy，淘宝丏用组件库
– 各产品线类库

46. 淘宝2010前端架构
App Lib { Mall 3C Shop … }
Company Lib { TBra TBack }
Common Lib { YUI2 Kissy }

47. 问题与挑战 @ 2010
挑战：苛刻的性能要求
解决方法：
– 2010 淘宝最新首页优化技术(HTML压缩与
DOM预加载)
– 淘宝性能指数
– 性能自劢化测试
– 基于Nginx 的Cdn combo 实现
– More…

48. 小结 （2010）
• 2010： 品质与协同年
• @TODO 具体

49. 前端的发展
Web开发
应用Web化 (HTML/CSS/JavaScript/Flash/浏览器
兼容性)
交互设计代码实现
用户体验经济
(有设计基础，理解用户体验)
业务开发
Web应用桌面化 (Ajax异步开发，服务端编程语言基础，
性能)
云端管道开发
云计算
(API，架构，安全)

50. 前端团队人才与成长

51. 谢谢