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

Views

Total Views
85,680
On Slideshare
0
From Embeds
0
Number of Embeds
18

Actions

Shares
Downloads
2,067
Comments
10
Likes
148

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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