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.

淘宝前端技术巡礼

95,941 views

Published on

淘宝前端技术

Published in: Technology, Design
  • good.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 淘宝前端
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 哈!感謝使用!
    http://wiki.woodpecker.org.cn/moin/ZqSharing/OpenClipart
    KISS 的 logo,俺无意留了个 bug ,所以,一眼认出来了,,
    内容的确 COOL taobao 对中国 UE 的技术发展贡献是基点式的!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 非常的棒!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 干货
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

淘宝前端技术巡礼

  1. 1. F2E@Taobao懂一点前端技术,不亦乐乎灵玉/拔赤 – F2E@Taobao 淘宝北京研发中心 2012-04
  2. 2. • Who Are We? 淘宝前端开发工程师 http://ued.taobao.com
  3. 3. Topic• 前端技术的演进• 技术实践• 知识体系• 未来展望
  4. 4. 2003
  5. 5. 2004
  6. 6. 2005
  7. 7. 2006
  8. 8. 2003-2006• 静态页面,表格嵌套• 无调试工具• 兼职的“页面开发”,单一浏览器• 谈不上“用户体验”
  9. 9. HTMLCSS SEO工具FW,PS,DW.. 浏览器 InternetExploer
  10. 10. 2007
  11. 11. 2006-2007• 交互复杂,页面“动”起来• 新岗位:“Web前端开发工程师”• 新增流程环节,进入磨合期• 制定规范
  12. 12. 引入开发流程
  13. 13. HTMLCSS SEO工具FW,PS,DW.. 浏览器 InternetExploer
  14. 14. 标准兼容 JS,W3C,HTML4..HTML 调试工具CSS Firefox,Firebug… SEO 用户 体验工具FW,PS,DW.. 浏览器 InternetExploer
  15. 15. 2008
  16. 16. 2007-2008• 业务拆分,网站庞大• 页面变慢• 大量使用Ajax• 内容暴增,内容管理成本太高• 页面排版亟需重新规划
  17. 17. 标准兼容 JS,W3C,HTML4..HTML 调试工具CSS Firefox,Firebug… SEO 用户 体验工具FW,PS,DW.. 浏览器 InternetExploer
  18. 18. 标准兼容 栅格化 JS,W3C,HTML4..HTML Reset/Grid.css. 调试工具CSS Firefox,Firebug… 库/框架 YUI2/Tbra.. SEO 用户 体验 组件库工具 部署FW,PS,DW.. Jslint,YC,Ant.. TMS 性能 浏览器 优化 InternetExploer
  19. 19. 网站栅格化
  20. 20. 2009
  21. 21. 2010
  22. 22. 2009-2010• 前端性能问题愈加严峻• 多人协作/前端架构/Combo/模块化• YUI/Tbra无法满足开发需求• 组件需要本地化
  23. 23. 标准兼容 栅格化 JS,W3C,HTML4..HTML Reset/Grid.css. 调试工具CSS Firefox,Firebug… 库/框架 YUI2/Tbra.. SEO 用户 体验 组件库工具 部署FW,PS,DW.. Jslint,YC,Ant.. TMS 性能 浏览器 优化 InternetExploer
  24. 24. 标准兼容 栅格化 JS,W3C,HTML4..HTML Reset/Grid.css. 前端架构 YUI3,Kissy… 调试工具CSS Firefox,Firebug… 库/框架 YUI2/Tbra.. SEO 用户 体验 组件库工具 部署FW,PS,DW.. Jslint,YC,Ant.. TMS 性能 浏览器 优化 InternetExploer
  25. 25. 2011
  26. 26. 2011
  27. 27. 2010-2011• 大尺寸屏幕• 高级浏览器渐进增强• 移动终端 (iOS/Android)• OPOA(单页应用)• 更“极致”的用户体验
  28. 28. 标准兼容 栅格化 JS,W3C,HTML4..HTML Reset/Grid.css. 前端架构 YUI3,Kissy… 调试工具CSS Firefox,Firebug… 库/框架 YUI2/Tbra.. SEO 用户 体验 组件库工具 部署FW,PS,DW.. Jslint,YC,Ant.. TMS 性能 浏览器 优化 InternetExploer
  29. 29. 标准兼容 栅格化 JS,W3C,HTML4..HTML Reset/Grid.css. 前端架构 YUI3,Kissy… 调试工具CSS Firefox,Firebug… 库/框架 YUI2/Tbra.. SEO 前端 用户 体验 组件库 MVC工具 部署 HTML5FW,PS,DW.. Jslint,YC,Ant.. CSS3 TMS 移动 性能 浏览器 优化 终端 InternetExploer
  30. 30. 与时俱进,充满挑战 发现问题,解决问题
  31. 31. 问题:什么是前端开发?
  32. 32. 回答:JavaScript/CSS/Html…
  33. 33. 回答:基于浏览器的编程开发
  34. 34. Yahoo 技术栈
  35. 35. 前端与后端
  36. 36. server
  37. 37. HTML 内容呈现 server
  38. 38. HTML 内容呈现 开发/调试/Bugfix… [理论沉淀 /最佳实践 ] server
  39. 39. CSS BOM APIHTML DOM JavaScript DOM API 内容呈现 开发/调试/Bugfix… [理论沉淀 /最佳实践 ] server
  40. 40. CSS YUI/Kissy/jQuery… BOM APIHTML DOM JavaScript DOM API 内容呈现 数据交换 开发/调试/Bugfix… xml Json [理论沉淀 /最佳实践 ] jsonp server
  41. 41. Safari Firefox Opera IE6~IE9 Firefox Chrome Safari Chrome Macintosh Windows Mobile CSS YUI/Kissy/jQuery… BOM API HTML DOM JavaScript DOM API 内容呈现 数据交换 开发/调试/Bugfix… xml Json [理论沉淀 /最佳实践 ] jsonp server
  42. 42. Safari Firefox Opera IE6~IE9 Firefox Chrome Safari Chrome Macintosh Windows Mobile CSS YUI/Kissy/jQuery… 技术维度 : x 6 BOM API HTML DOM JavaScript 操作系统 : x 3 DOM API 浏览器平台 : x 6 内容呈现 数据交换 渲染模式 : x 2 开发/调试/Bugfix… xml Json =216 [理论沉淀 /最佳实践 ] jsonp server
  43. 43. 兼容性,可访问性,视觉设计 信息架构,前端安全,上线部署标准化,性能优化,测试基准,移动设备 响应式适配,交互设计
  44. 44. 和后端相比,前端:• 无法编译• 代码开源• 客户端环境不可预知• 不能安装或存储• 数据无法隐藏• 更关注Web性能
  45. 45. Douglas Crockford:“前端工程师需要面对的软件开发环境实在是糟糕透顶,让人难以置信!”
  46. 46. http://www.flickr.com/photos/lijing00333/6820318400/in/photostream
  47. 47. • Web应用的基石:HTML• 程序员的画笔:CSS• 潜力无限的语言:JavaScript
  48. 48. I Know HTML! <html><!—how to make love-->
  49. 49. • 1989 Tim Berners-Lee 发明HTML • 1993 第一款浏览器“Mosaic”发布 • 1994 W3C成立 • 1997 HTML 3.2 • 1999 HTML4.01 • 2000 XHTML 1.0 • 2008 HTML5http://www.w3.org/People/Raggett/book4/ch02.html
  50. 50. 常用元素• 结构:p,div,span,h1-h6,body…• 列表:ul,ol,dl,li,dd,dt• 文本:a,em,strong,pre…• 表单:form,input,button,label…• 媒体:img,object…• 表格:table,tr,td,caption,tbody…• … http://reference.sitepoint.com/html/elements
  51. 51. html5 标签progress time article canvas rubynav datalist figure audio keygen section http://www.w3.org/TR/html5/
  52. 52. html5 标签progress time article canvas rubynav datalist figure audio keygen section http://www.w3.org/TR/html5/
  53. 53. <header> <h1> <a href=“#”> <strong>I</strong> love <em>u</em> </a> <span>I am Jay</span> </h1> <nav> <ul> <li>my journal</li> <li>about me</li> <li>the sandbox</li> </ul> </nav></header> 语义化的html
  54. 54. 程序员的画笔:CSS
  55. 55. • 1994 Hakon Wium Lie提出CSS概念• 1996 CSS Level 1• 1997 CSSWorking Group• 1998 CSS Level 2• CSS Level 3 – 进化中… http://www.w3.org/TR/css
  56. 56. 属性 值 属性 值 h1 { color:red;font-size:14px; }选择器 声明 声明
  57. 57. 盒模型http://css-tricks.com/the-css-box-model/
  58. 58. http://www.w3.org/TR/CSS2/box.html
  59. 59. display: block display: inline display:inline-block http://www.w3.org/TR/CSS2/box.html
  60. 60. 元素显示:display • p、div、h1-h6 等是 block 元素 • span、a、img 等是 inline 元素http://www.w3school.com.cn/css/pr_class_display.asp
  61. 61. http://www.quirksmode.org/css/contents.html
  62. 62. Hack(样式补丁)#box { color:black; /*firefox*/ color:red9; /*所有ie*/ *color:blue; /*ie7*/ _color:green; /*ie6*/}
  63. 63. 指定Doctype!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML>
  64. 64. 指定Doctype!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML>
  65. 65. 潜力无限的语言:JavaScript
  66. 66. • 1995 JavaScript 诞生• 1996 ECMAScript 诞生• 1999 ECMAScript 3• 2009 ECMAScript 5• ECMAScript Harmony 正在讨论中… http://zh.wikipedia.org/zh-cn/JavaScript
  67. 67. Google Code中语言出现 fuck一词的比率 0.56% 0.29% 0.26%0.24% 0.15% 0.13% 0.13% 0.12% 0.10% 0.04% 0.05%
  68. 68. Java和JavaScript的关系, 就和雷锋和雷锋塔一样
  69. 69. 我对JavaScript既爱又恨, 它的优秀之处并非原创, 它的原创之处并不优秀… -- Brendan Eichhttp://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html
  70. 70. Java SchemeC Self JavaScript
  71. 71. Java基本语法 Scheme C Self JavaScript
  72. 72. 数据类型/内存管理 Java基本语法 Scheme C Self JavaScript
  73. 73. 数据类型/内存管理 函数式编程 Java基本语法 Scheme C Self JavaScript
  74. 74. 数据类型/内存管理 函数式编程 Java基本语法 Scheme C 基于原型 Self JavaScript
  75. 75. The Good Parts:JavaScript语言精华 http://book.douban.com/subject/3590768/
  76. 76. 闭包for(var i = 0;i<elements.length;i++){ elements[i].attachEvent (click,function(){ alert(i); });}
  77. 77. 闭包for(var i = 0;i<elements.length;i++){ (function(n){ elements[n].attachEvent(click,function(){ alert(n); }); })(i);}
  78. 78. 链式调用 var el = $(‘div’); el.addClass(‘new Class’); el.text(‘Hello World’); el.show();$(‘div’) .addClass(‘new Class’) .text(‘Hello World’) .show();
  79. 79. JS Patterns:JavaScript独有的编程模式 http://book.douban.com/subject/5252901/
  80. 80. 兼容性,可访问性,视觉设计 信息架构,前端安全,上线部署标准化,性能优化,测试基准,移动设备 响应式适配,交互设计
  81. 81. 问题:为什么要关注性能?
  82. 82. 前端工程师问题:为什么要关注性能?
  83. 83. Steve Souders:“网页展现过程百分之八十到九十的时间消耗在了浏览器端…”
  84. 84. Web性能优化手段1. 减少HTTP请求数2. 使用CDN3. 给HTTP头部添加过期时间4. 使用Gzip压缩5. 样式表置于页面最前面6. 把脚本放在最后7. 使用外部JavaScript和CSS8. 压缩(Minify)JavaScript和CSS9. …
  85. 85. 性能优化:减少页面首屏等待时间!
  86. 86. 网站渲染速度 0.5s 1.0s 1.5s 2.0s 3s ebayamazonedangdang 360buy taobao
  87. 87. 高性能网站建设(进阶)指南,高性能JavaScript http://book.douban.com/subject/3132277/ http://book.douban.com/subject/4719162/ http://book.douban.com/subject/5362856/
  88. 88. JavaScript类库的世界
  89. 89. 大而全 vs 小而精
  90. 90. 策略不同,目标一致
  91. 91. jQuery 简洁 API 的背后…
  92. 92. JavaScript类库的封装兼容性封装:Dom、Event、Ajax… 工具函数:OO、CustomEvent、Plugin… 组件封装:Calendar、Menu、Tabview… 应用框架:MVC、UnitTest、ModuleLoader
  93. 93. 淘宝前端库:Kissy小巧灵活,简洁实用本地化的组件性能优越特性支持源自淘宝内部需求及时响应的bugfix
  94. 94. 淘宝前端库:Kissy小巧灵活,简洁实用本地化的组件性能优越特性支持源自淘宝内部需求及时响应的bugfix
  95. 95. 为Kissy贡献代码http://github.com/kissyteam/kissy
  96. 96. 前后端的协作
  97. 97. (前端) (后端)静态页面 套页面html/css/js php/java/mv
  98. 98. (前端) (后端)静态模板 数据接口 html/css/js php/javajavascriptMVC
  99. 99. (前端) (后端) 静态模板 数据接口 html/css/js php/java javascriptMVC更专注于UI和交互!
  100. 100. 更专注于底层数据! (前端) (后端) 静态模板 数据接口 html/css/js php/java javascriptMVC更专注于UI和交互!
  101. 101. PC Tablet http://twitter.com
  102. 102. JavaScript设计模式,JS Web Appshttp://book.douban.com/subject/3329540/http://book.douban.com/subject/6397064/
  103. 103. So:多读书,读好书http://limu.iteye.com/blog/1267475
  104. 104. JS高级程序设计(第三版),JS权威指南(第六版) http://book.douban.com/subject/4886879/ http://book.douban.com/subject/2228378/
  105. 105. • 读好书• 勤学多练• 实战中进阶
  106. 106. Taobao Opensource
  107. 107. Taobao F2E 编辑部
  108. 108. 前端工程师,Enjoy yourself…
  109. 109. refhttp://www.slideshare.net/lifesinger/ss-8533438http://limu.iteye.com/blog/1267475http://www.slideshare.net/lijing00333/html5taobaohttp://www.slideshare.net/lijing00333/haslayouthttp://www.slideshare.net/lijing00333/2011-6516501http://ued.taobao.com/blog/2010/04/29/qcon_notes
  110. 110. @jayli F2E & Translatorhtt[p://jayli.github.com bachi@taobao.com

×