淘宝前端技术巡礼

F2E@Taobao
懂一点前端技术，不亦乐乎
灵玉/拔赤 – F2E@Taobao

淘宝北京研发中心 2012-04

• Who Are We?
淘宝前端开发工程师
http://ued.taobao.com

Topic

• 前端技术的演进
• 技术实践
• 知识体系
• 未来展望

2003-2006

• 静态页面,表格嵌套
• 无调试工具
• 兼职的“页面开发”,单一浏览器
• 谈不上“用户体验”

HTML

CSS

SEO

工具
FW,PS,DW..
浏览器
InternetExploer

2006-2007

• 交互复杂，页面“动”起来
• 新岗位：“Web前端开发工程师”
• 新增流程环节，进入磨合期
• 制定规范

标准兼容
JS,W3C,HTML4..
HTML
调试工具
CSS Firefox,Firebug…

SEO
用户
体验
工具
FW,PS,DW..
浏览器
InternetExploer

2007-2008

• 业务拆分,网站庞大
• 页面变慢
• 大量使用Ajax
• 内容暴增,内容管理成本太高
• 页面排版亟需重新规划

标准兼容
栅格化
JS,W3C,HTML4..
HTML Reset/Grid.css.

调试工具
CSS Firefox,Firebug… 库/框架
YUI2/Tbra..
SEO
用户
体验组件库

工具
部署
FW,PS,DW.. Jslint,YC,Ant..
TMS
性能
浏览器优化
InternetExploer

2009-2010

• 前端性能问题愈加严峻
• 多人协作/前端架构/Combo/模块化
• YUI/Tbra无法满足开发需求
• 组件需要本地化

标准兼容
栅格化
JS,W3C,HTML4..
前端架构
YUI3,Kissy…
调试工具
YUI2/Tbra..
SEO
用户
体验组件库

工具
部署
TMS
性能
浏览器优化
InternetExploer

2010-2011
• 大尺寸屏幕
• 高级浏览器渐进增强
• 移动终端 (iOS/Android)
• OPOA（单页应用）
• 更“极致”的用户体验

标准兼容
栅格化
JS,W3C,HTML4..
前端架构
YUI3,Kissy…
调试工具
YUI2/Tbra..
SEO 前端
用户
体验组件库 MVC
工具
部署 HTML5
CSS3
TMS 移动
性能
浏览器优化终端

InternetExploer

与时俱进，充满挑战
发现问题，解决问题

问题：什么是前端开发？

回答：
JavaScript/CSS/Html…

回答：
基于浏览器的编程开发

HTML

内容呈现

server

HTML

内容呈现
开发/调试/Bugfix…
[理论沉淀 /最佳实践 ]

server

CSS
BOM API
HTML DOM JavaScript
DOM API

内容呈现
开发/调试/Bugfix…
[理论沉淀 /最佳实践 ]

server

CSS YUI/Kissy/jQuery…
BOM API
HTML DOM JavaScript
DOM API

内容呈现数据交换
开发/调试/Bugfix… xml
Json
[理论沉淀 /最佳实践 ] jsonp

server

Safari Firefox Opera IE6~IE9 Firefox Chrome Safari Chrome

Macintosh Windows Mobile

BOM API
HTML DOM JavaScript
DOM API

Json

server

Safari Firefox Opera IE6~IE9 Firefox Chrome Safari Chrome

Macintosh Windows Mobile

技术维度 : x 6 BOM API
HTML DOM JavaScript
操作系统 : x 3 DOM API
浏览器平台 : x 6
渲染模式 : x 2
Json

=216

server

兼容性，可访问性，视觉设计
信息架构，前端安全，上线部署

标准化，性能优化，测试基准，移动设备
响应式适配，交互设计

和后端相比，前端：
• 无法编译
• 代码开源
• 客户端环境不可预知
• 不能安装或存储
• 数据无法隐藏
• 更关注Web性能

Douglas Crockford:
“前端工程师需要面对的软件开发环境
实在是糟糕透顶，让人难以置信！”

http://www.flickr.com/photos/lijing00333/6820318400/in/photostream

• Web应用的基石：HTML
• 程序员的画笔：CSS
• 潜力无限的语言：JavaScript

I Know HTML!
<html>
<!—how to make love-->

• 1989 Tim Berners-Lee 发明HTML
• 1993 第一款浏览器“Mosaic”发布
• 1994 W3C成立
• 1997 HTML 3.2
• 1999 HTML4.01
• 2000 XHTML 1.0
• 2008 HTML5

http://www.w3.org/People/Raggett/book4/ch02.html

常用元素
• 结构：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

html5 标签

progress time
article
canvas ruby
nav datalist
figure
audio
keygen
section

http://www.w3.org/TR/html5/

<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

• 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

属性值属性值

h1 {
color:red;font-size:14px;
}

选择器声明声明

盒模型

http://css-tricks.com/the-css-box-model/

http://www.w3.org/TR/CSS2/box.html

display:
block

display:
inline

display:
inline-block

http://www.w3.org/TR/CSS2/box.html

元素显示：display

• p、div、h1-h6 等是 block 元素
• span、a、img 等是 inline 元素

http://www.w3school.com.cn/css/pr_class_display.asp

http://www.quirksmode.org/css/contents.html

Hack（样式补丁）

#box {
color:black; /*firefox*/
color:red9; /*所有ie*/
*color:blue; /*ie7*/
_color:green; /*ie6*/
}

指定Doctype！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML>

潜力无限的语言：JavaScript

• 1995 JavaScript 诞生
• 1996 ECMAScript 诞生
• 1999 ECMAScript 3
• 2009 ECMAScript 5
• ECMAScript Harmony 正在讨论中…

http://zh.wikipedia.org/zh-cn/JavaScript

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%

Java和JavaScript的关系，
就和雷锋和雷锋塔一样

我对JavaScript既爱又恨，
它的优秀之处并非原创，
它的原创之处并不优秀…

-- Brendan Eich

http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html

Java
Scheme
C
Self

JavaScript

Java
基本语法 Scheme
C
Self

JavaScript

数据类型/内存管理
Java
基本语法 Scheme
C
Self

JavaScript

函数式编程
Java
基本语法 Scheme
C
Self

JavaScript

函数式编程
Java
基本语法 Scheme
C 基于原型
Self

JavaScript

The Good Parts：JavaScript语言精华
http://book.douban.com/subject/3590768/

闭包

for(var i = 0;i<elements.length;i++){
elements[i].attachEvent ('click',function(){
alert(i);
});
}

闭包
for(var i = 0;i<elements.length;i++){
(function(n){
elements[n].attachEvent('click',function(){
alert(n);
});
})(i);
}

链式调用
var el = $(‘div’);
el.addClass(‘new Class’);
el.text(‘Hello World’);
el.show();

$(‘div’)
.addClass(‘new Class’)
.text(‘Hello World’)
.show();

JS Patterns：JavaScript独有的编程模式

问题：为什么要关注性能？

前端工程师

问题：为什么要关注性能？

Steve Souders:
“网页展现过程百分之八十到九十的时
间消耗在了浏览器端…”

Web性能优化手段
1. 减少HTTP请求数
2. 使用CDN
3. 给HTTP头部添加过期时间
4. 使用Gzip压缩
5. 样式表置于页面最前面
6. 把脚本放在最后
7. 使用外部JavaScript和CSS
8. 压缩(Minify)JavaScript和CSS
9. …

性能优化：减少页面首屏等待时间！

网站渲染速度
0.5s 1.0s 1.5s 2.0s 3s

ebay

amazone

dangdang

360buy

taobao

高性能网站建设(进阶)指南，高性能JavaScript

jQuery 简洁 API 的背后…

JavaScript类库的封装

兼容性封装：Dom、Event、Ajax…
工具函数：OO、CustomEvent、Plugin…
组件封装：Calendar、Menu、Tabview…
应用框架：MVC、UnitTest、ModuleLoader

淘宝前端库：Kissy

小巧灵活，简洁实用
本地化的组件
性能优越
特性支持源自淘宝内部需求
及时响应的bugfix

为Kissy贡献代码

http://github.com/kissyteam/kissy

（前端）（后端）

静态页面套页面
html/css/js php/java/mv


静态模板数据接口
html/css/js php/java
javascriptMVC


javascriptMVC

更专注于UI和交互！

更专注于底层数据！

javascriptMVC

更专注于UI和交互！

PC
Tablet

http://twitter.com

JavaScript设计模式，JS Web Apps

So：多读书，读好书

http://limu.iteye.com/blog/1267475

JS高级程序设计(第三版),JS权威指南(第六版)

• 读好书
• 勤学多练
• 实战中进阶

前端工程师，Enjoy yourself…

ref
http://www.slideshare.net/lifesinger/ss-8533438
http://limu.iteye.com/blog/1267475
http://www.slideshare.net/lijing00333/html5taobao
http://www.slideshare.net/lijing00333/haslayout
http://www.slideshare.net/lijing00333/2011-6516501
http://ued.taobao.com/blog/2010/04/29/qcon_notes

@jayli
F2E & Translator
htt[p://jayli.github.com
bachi@taobao.com

淘宝前端技术巡礼

Related slideshows

More Related Content

淘宝前端技术巡礼