淘宝前端技术巡礼

F2E@Taobao

淘宝北京研发中心 2012-04

懂一点前端技术，不亦乐乎

灵玉/拔赤 – F2E@Taobao

演示者

演示文稿备注

1、F2E:Front End Engineer 2、《javascript忍者的秘密》John Resig

• Who Are We?淘宝前端开发工程师

http://ued.taobao.com

http://ued.taobao.com/

• 前端技术的演进

• 技术实践

• 知识体系

• 未来展望

Topic

• 静态页面,表格嵌套

• 无调试工具

• 兼职的“页面开发”,单一浏览器

• 谈不上“用户体验”

2003-2006

HTML

CSS

FW,PS,DW..工具

浏览器Internet�Exploer

SEO

• 交互复杂，页面“动”起来

• 新岗位：“Web前端开发工程师”

• 新增流程环节，进入磨合期

• 制定规范

2006-2007

引入开发流程

HTML

CSS

FW,PS,DW..工具


SEO

JS,W3C,HTML4..

标准兼容

Firefox,Firebug…调试工具

用户体验

HTML

CSS

FW,PS,DW..工具


SEO

• 业务拆分,网站庞大

• 页面变慢

• 大量使用Ajax

• 内容暴增,内容管理成本太高

• 页面排版亟需重新规划

2007-2008

JS,W3C,HTML4..

标准兼容


用户体验

HTML

CSS

SEO

FW,PS,DW..工具


部署

JS,W3C,HTML4..

标准兼容


用户体验

HTML

CSS

SEO

FW,PS,DW..工具


栅格化Reset/Grid.css.

库/框架YUI2/Tbra..

组件库

TMSJslint,YC,Ant..

性能优化

网站栅格化

• 前端性能问题愈加严峻

• 多人协作/前端架构/Combo/模块化

• YUI/Tbra无法满足开发需求

• 组件需要本地化

2009-2010

部署

JS,W3C,HTML4..

标准兼容


用户体验

HTML

CSS

SEO

FW,PS,DW..工具




组件库

TMSJslint,YC,Ant..

性能优化

部署

JS,W3C,HTML4..

标准兼容


用户体验

HTML

CSS

SEO

FW,PS,DW..工具




组件库

TMSJslint,YC,Ant..

性能优化

前端架构YUI3,Kissy…

• 大尺寸屏幕

• 高级浏览器渐进增强

• 移动终端 (iOS/Android)

• OPOA（单页应用）

• 更“极致”的用户体验

2010-2011

部署

JS,W3C,HTML4..

标准兼容


用户体验

HTML

CSS

SEO

FW,PS,DW..工具




组件库

TMSJslint,YC,Ant..

性能优化


部署

JS,W3C,HTML4..

标准兼容


用户体验

HTML

CSS

SEO

FW,PS,DW..工具




组件库

TMSJslint,YC,Ant..

性能优化


前端MVC

HTML5CSS3

移动终端

与时俱进，充满挑战

发现问题，解决问题

问题：什么是前端开发？

回答：

JavaScript/CSS/Html…

回答：

基于浏览器的编程开发

Yahoo 技术栈

前端与后端

server

HTML

server

内容呈现

HTML

server

内容呈现

[�理论沉淀 /�最佳实践 ]

开发/调试/Bugfix…

HTML DOM JavaScript

CSS

BOM API

DOM API

server

内容呈现



HTML DOM JavaScript

CSS

BOM API

DOM API

YUI/Kissy/jQuery…

server

内容呈现


数据交换xmlJsonjsonp


HTML DOM JavaScript

CSS

BOM API

DOM API

YUI/Kissy/jQuery…

Safari

Macintosh Windows Mobile

Firefox Opera IE6~IE9 Firefox Chrome Safari Chrome

server

内容呈现




HTML DOM JavaScript

CSS

BOM API

DOM API

YUI/Kissy/jQuery…

Safari

Macintosh Windows Mobile

Firefox Opera IE6~IE9 Firefox Chrome Safari Chrome

server

内容呈现




技术维度 : x 6

操作系统 : x 3

浏览器平台 : x 6

渲染模式 : x 2

=216

兼容性，可访问性，视觉设计

信息架构，前端安全，上线部署

标准化，性能优化，测试基准，移动设备

响应式适配，交互设计

和后端相比，前端：

• 无法编译

• 代码开源

• 客户端环境不可预知

• 不能安装或存储

• 数据无法隐藏

• 更关注Web性能

演示者

演示文稿备注

1、javascript是一种解释行编程语言 2、javascript不能生成可独立执行的可执行文件 3、编译语言在应用源程序执行前，目标代码字节码

Douglas Crockford:“前端工程师需要面对的软件开发环境

实在是糟糕透顶，让人难以置信！”

演示者

演示文稿备注

JavaScript的精神领袖，领域权威，是JSON、JSLint、JSMin和ADSafe之父

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

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

http://reference.sitepoint.com/html/elements

常用元素

• 结构：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

nav

canvas

datalist

time

figureaudio

section

rubyarticle

keygen

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

演示者

演示文稿备注

1、proggress：显示javascript中耗费时间函数的进度 2、time：标签定义公历的时间或日期，以机器可读的方式对日期和时间进行编码，添加到用户日程表中 3、figure:标签规定独立的流内容（图像、图表、照片、代码等等） 4、keygen：标签规定用于表单的密钥对生成器字段，私钥存储在本地，公钥发送到服务器 5、audio：标签定义声音


html5 标签

progress

nav

canvas

datalist

time

figureaudio

section

rubyarticle

keygen



<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

程序员的画笔：CSS

• 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

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

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

}

选择器声明声明

属性值属性值

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

盒模型

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

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



display:block

display:inline

display:inline-block


• p、div、h1-h6 等是 block 元素

• span、a、img 等是 inline 元素

元素显示：display

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

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

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

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

#box {color:black; /*firefox*/color:red\9; /*所有ie*/*color:blue; /*ie7*/_color:green; /*ie6*/

}

Hack（样式补丁）

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

<!DOCTYPE HTML>

指定Doctype！

潜力无限的语言：JavaScript

• 1995 JavaScript 诞生

• 1996 ECMAScript 诞生

• 1999 ECMAScript 3

• 2009 ECMAScript 5

• ECMAScript Harmony 正在讨论中…

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

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

0.24%0.29%

0.26%

0.13% 0.13% 0.12%

0.04%

0.15%0.10%

0.56%

0.05%

Google Code中语言出现

fuck一词的比率

Java和JavaScript的关系，

就和雷锋和雷锋塔一样

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

-- Brendan Eich

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

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

JavaScript

C

JavaScheme

Self

JavaScript

C

JavaScheme

Self

基本语法

JavaScript

C

JavaScheme

Self

基本语法

数据类型/内存管理

JavaScript

C

JavaScheme

Self

基本语法


函数式编程

JavaScript

C

JavaScheme

Self

基本语法


函数式编程

基于原型

http://book.douban.com/subject/3590768/

The Good Parts：JavaScript语言精华


闭包

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

http://book.douban.com/subject/3132277/http://book.douban.com/subject/4719162/http://book.douban.com/subject/5362856/




JavaScript类库的世界

演示者

演示文稿备注

1、zepto.js 移动端javascript框架 2、LABjs 工具，按需加载javascript文件 3、seajs 模块加载框架 3、scrollability 移动web应用滚屏动态效果 4、pdf.js，html5技术的PDF解析器 5、Knockout 是个JavaScript library，帮助创建丰富的显示和编辑器UI，通过干净的底层数据模型。你可以在任何时候动态更新UI的选择部分。 6、jStorage用于jquery浏览器端缓存数据的包装插件 7、Underscore.js是一个实用的JavaScript工具框架，提供了与Prototype.js（或Ruby）相似的功能编程支持，但没有对 JavaScript 内置的对象进行扩展。 8、AmplifyJS 是一套组件集合，简化所有表单数据处理 9、spine mvc框架 10、Jasmine 是一个简易的JS单元测试框架 11、mustache 基于javascript 实现的模板引擎

演示者

演示文稿备注

1、Sencha基于最新的WEB标准 Sencha Touch是专门为移动设备开发应用的Javascript框架 2、Closure Library，Google的标准JavaScript类库 3、Tangram是Baidu开发的一套简单可依赖的Javascript库

大而全 vs 小而精

策略不同，目标一致

jQuery 简洁 API 的背后…

兼容性封装：Dom、Event、Ajax…

工具函数：OO、CustomEvent、Plugin…

组件封装：Calendar、Menu、Tabview…

应用框架：MVC、UnitTest、ModuleLoader

JavaScript类库的封装

小巧灵活，简洁实用

本地化的组件

性能优越

特性支持源自淘宝内部需求

及时响应的bugfix

淘宝前端库：Kissy

http://github.com/kissyteam/kissy

为Kissy贡献代码

http://github.com/kissyteam/kissy

前后端的协作

静态页面套页面（前端）（后端）

html/css/js php/java/mv

静态模板数据接口（前端）（后端）

html/css/jsjavascriptMVC

php/java



php/java

更专注于UI和交互！



php/java

更专注于UI和交互！

更专注于底层数据！

http://twitter.com

PCTablet

http://twitter.com/

JavaScript设计模式，JS Web Apps





So：多读书，读好书

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


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





• 读好书

• 勤学多练

• 实战中进阶

Taobao Opensource

演示者

演示文稿备注

Less 一种动态样式语言 In.js 异步加载js框架 Sandbox 脚本加载器.

Taobao F2E 编辑部

前端工程师，Enjoy yourself…

ref

http://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



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/

@jayliF2E & Translator

htt[p://[email protected]

淘宝前端技术巡礼

Technology