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

4,578 views

Published on

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

No Downloads
Views
Total views
4,578
On SlideShare
0
From Embeds
0
Number of Embeds
197
Actions
Shares
0
Downloads
217
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

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

  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. 谢谢

×