Suche senden
Hochladen
赵泽欣 - 淘宝网前端应用与发展
•
15 gefällt mir
•
1,363 views
D
d0nn9n
Folgen
Melden
Teilen
Melden
Teilen
1 von 51
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
淘宝网前端应用与发展
淘宝网前端应用与发展
taobao.com
中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技
Will Huang
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊
Will Huang
Web 开发漫谈 —— 前端篇
Web 开发漫谈 —— 前端篇
尚斌 杨
Question 7
Question 7
shelby poll
CV(5)
CV(5)
Andr Flakke
Furniture design_LR_Green Chair in situ
Furniture design_LR_Green Chair in situ
Heather Gulko
JavascriptCert
JavascriptCert
Dennis Suto
Empfohlen
淘宝网前端应用与发展
淘宝网前端应用与发展
taobao.com
中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技
Will Huang
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊
《多奇線上講堂》如何用 Outlook 和 OWA 整理聯絡人資訊
Will Huang
Web 开发漫谈 —— 前端篇
Web 开发漫谈 —— 前端篇
尚斌 杨
Question 7
Question 7
shelby poll
CV(5)
CV(5)
Andr Flakke
Furniture design_LR_Green Chair in situ
Furniture design_LR_Green Chair in situ
Heather Gulko
JavascriptCert
JavascriptCert
Dennis Suto
marmalade
marmalade
Brad Froelich
Diapositivas
Diapositivas
VeronicaOlv
Niceas santos
Niceas santos
niceas santos silva
Licences Surveyor_May 8 2003-Jun 7 2004
Licences Surveyor_May 8 2003-Jun 7 2004
Gilberto Espinoza
Reconocimiento Tec Milenio
Reconocimiento Tec Milenio
Paulina I. Mata
Org Change Mang Cert Grant Yarde 2014
Org Change Mang Cert Grant Yarde 2014
Grant Yarde ICP, ICP-TST
567292326631244
567292326631244
biodinamica88
Graduate Degree 3
Graduate Degree 3
Make an Investment in Love and Kindness
El mudo, el enano y el cuarteteto en twitter
El mudo, el enano y el cuarteteto en twitter
SuresConsultora
Presentación de observación del proceos escolar.
Presentación de observación del proceos escolar.
observacionprocesoescolar
No more Benetton
No more Benetton
churossa
IKT & lärande; lärarutbildningen Södertörns högskola, januari 2009
IKT & lärande; lärarutbildningen Södertörns högskola, januari 2009
patrik hernwall
Referencje z Berlitz Poland Sp z o.o.
Referencje z Berlitz Poland Sp z o.o.
Ma?gorzata Marczak
1-2015051015591967
1-2015051015591967
Ali Javaid BE Chemical looking job urgently
20150812121235773
20150812121235773
MULABIZI MKANDAWIRE
Market Watch December 2012
Market Watch December 2012
Richard Silver, Certified International REALTOR®
Nadalpresentacio08
Nadalpresentacio08
Neus Cortiella
Boas festas
Boas festas
Mô...Moema Anita Conceição
Examen de computación
Examen de computación
jalf88
美团前端架构简介
美团前端架构简介
pan weizeng
前端性能优化&测试
前端性能优化&测试
tbmallf2e
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
Weitere ähnliche Inhalte
Andere mochten auch
marmalade
marmalade
Brad Froelich
Diapositivas
Diapositivas
VeronicaOlv
Niceas santos
Niceas santos
niceas santos silva
Licences Surveyor_May 8 2003-Jun 7 2004
Licences Surveyor_May 8 2003-Jun 7 2004
Gilberto Espinoza
Reconocimiento Tec Milenio
Reconocimiento Tec Milenio
Paulina I. Mata
Org Change Mang Cert Grant Yarde 2014
Org Change Mang Cert Grant Yarde 2014
Grant Yarde ICP, ICP-TST
567292326631244
567292326631244
biodinamica88
Graduate Degree 3
Graduate Degree 3
Make an Investment in Love and Kindness
El mudo, el enano y el cuarteteto en twitter
El mudo, el enano y el cuarteteto en twitter
SuresConsultora
Presentación de observación del proceos escolar.
Presentación de observación del proceos escolar.
observacionprocesoescolar
No more Benetton
No more Benetton
churossa
IKT & lärande; lärarutbildningen Södertörns högskola, januari 2009
IKT & lärande; lärarutbildningen Södertörns högskola, januari 2009
patrik hernwall
Referencje z Berlitz Poland Sp z o.o.
Referencje z Berlitz Poland Sp z o.o.
Ma?gorzata Marczak
1-2015051015591967
1-2015051015591967
Ali Javaid BE Chemical looking job urgently
20150812121235773
20150812121235773
MULABIZI MKANDAWIRE
Market Watch December 2012
Market Watch December 2012
Richard Silver, Certified International REALTOR®
Nadalpresentacio08
Nadalpresentacio08
Neus Cortiella
Boas festas
Boas festas
Mô...Moema Anita Conceição
Examen de computación
Examen de computación
jalf88
Andere mochten auch
(19)
marmalade
marmalade
Diapositivas
Diapositivas
Niceas santos
Niceas santos
Licences Surveyor_May 8 2003-Jun 7 2004
Licences Surveyor_May 8 2003-Jun 7 2004
Reconocimiento Tec Milenio
Reconocimiento Tec Milenio
Org Change Mang Cert Grant Yarde 2014
Org Change Mang Cert Grant Yarde 2014
567292326631244
567292326631244
Graduate Degree 3
Graduate Degree 3
El mudo, el enano y el cuarteteto en twitter
El mudo, el enano y el cuarteteto en twitter
Presentación de observación del proceos escolar.
Presentación de observación del proceos escolar.
No more Benetton
No more Benetton
IKT & lärande; lärarutbildningen Södertörns högskola, januari 2009
IKT & lärande; lärarutbildningen Södertörns högskola, januari 2009
Referencje z Berlitz Poland Sp z o.o.
Referencje z Berlitz Poland Sp z o.o.
1-2015051015591967
1-2015051015591967
20150812121235773
20150812121235773
Market Watch December 2012
Market Watch December 2012
Nadalpresentacio08
Nadalpresentacio08
Boas festas
Boas festas
Examen de computación
Examen de computación
Ähnlich wie 赵泽欣 - 淘宝网前端应用与发展
美团前端架构简介
美团前端架构简介
pan weizeng
前端性能优化&测试
前端性能优化&测试
tbmallf2e
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
drewz lin
淘宝搜索前端优化
淘宝搜索前端优化
Frank Xu
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
美团技术团队
中小互联网公司服务端优化实践
中小互联网公司服务端优化实践
moonbingbing
History of share
History of share
aido Cho
前端性能测试
前端性能测试
tbmallf2e
Web Development Roadmap
Web Development Roadmap
Alexander Shieh
漫谈web前端
漫谈web前端
woody huang
QconShanghai2015-wuyongwei-baidu
QconShanghai2015-wuyongwei-baidu
Yongwei Wu
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
[LaravelConf Taiwan 2019] 在中國三年,從 0 開始自建完整電商餐飲系統
[LaravelConf Taiwan 2019] 在中國三年,從 0 開始自建完整電商餐飲系統
LaravelConfTaiwan
web-frontend-overview
web-frontend-overview
otakustay
张勇 搜搜前端架构
张勇 搜搜前端架构
isnull
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Kirk Chen
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
yang alex
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
锐 张
前端&服务器
前端&服务器
fangdeng
Ähnlich wie 赵泽欣 - 淘宝网前端应用与发展
(20)
美团前端架构简介
美团前端架构简介
前端性能优化&测试
前端性能优化&测试
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
淘宝搜索前端优化
淘宝搜索前端优化
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
中小互联网公司服务端优化实践
中小互联网公司服务端优化实践
History of share
History of share
前端性能测试
前端性能测试
Web Development Roadmap
Web Development Roadmap
漫谈web前端
漫谈web前端
QconShanghai2015-wuyongwei-baidu
QconShanghai2015-wuyongwei-baidu
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
[LaravelConf Taiwan 2019] 在中國三年,從 0 開始自建完整電商餐飲系統
[LaravelConf Taiwan 2019] 在中國三年,從 0 開始自建完整電商餐飲系統
web-frontend-overview
web-frontend-overview
张勇 搜搜前端架构
张勇 搜搜前端架构
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
前端&服务器
前端&服务器
Mehr von d0nn9n
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)
d0nn9n
腾讯大讲堂:55 企业法律风险防范
腾讯大讲堂:55 企业法律风险防范
d0nn9n
腾讯大讲堂:56 qzone安全之路
腾讯大讲堂:56 qzone安全之路
d0nn9n
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
d0nn9n
腾讯大讲堂:57 超级qq的千万之路
腾讯大讲堂:57 超级qq的千万之路
d0nn9n
蔡学镛 Rebol漫谈
蔡学镛 Rebol漫谈
d0nn9n
Yanggang wps
Yanggang wps
d0nn9n
熊节 - 软件工厂的精益之路
熊节 - 软件工厂的精益之路
d0nn9n
谢恩伟 - 微软在云端
谢恩伟 - 微软在云端
d0nn9n
去哪儿平台技术
去哪儿平台技术
d0nn9n
吴磊 - Silverlight企业级RIA
吴磊 - Silverlight企业级RIA
d0nn9n
Tom - Scrum
Tom - Scrum
d0nn9n
Tim - FSharp
Tim - FSharp
d0nn9n
Tiger oracle
Tiger oracle
d0nn9n
Paulking groovy
Paulking groovy
d0nn9n
Paulking dlp
Paulking dlp
d0nn9n
Patrick jcp
Patrick jcp
d0nn9n
Nick twitter
Nick twitter
d0nn9n
Marc facebook
Marc facebook
d0nn9n
Kane debt
Kane debt
d0nn9n
Mehr von d0nn9n
(20)
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂:62 拇指下的精彩(手机qq交互设计经验分享)
腾讯大讲堂:55 企业法律风险防范
腾讯大讲堂:55 企业法律风险防范
腾讯大讲堂:56 qzone安全之路
腾讯大讲堂:56 qzone安全之路
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
腾讯大讲堂:59 数据蕴含商机,挖掘决胜千里
腾讯大讲堂:57 超级qq的千万之路
腾讯大讲堂:57 超级qq的千万之路
蔡学镛 Rebol漫谈
蔡学镛 Rebol漫谈
Yanggang wps
Yanggang wps
熊节 - 软件工厂的精益之路
熊节 - 软件工厂的精益之路
谢恩伟 - 微软在云端
谢恩伟 - 微软在云端
去哪儿平台技术
去哪儿平台技术
吴磊 - Silverlight企业级RIA
吴磊 - Silverlight企业级RIA
Tom - Scrum
Tom - Scrum
Tim - FSharp
Tim - FSharp
Tiger oracle
Tiger oracle
Paulking groovy
Paulking groovy
Paulking dlp
Paulking dlp
Patrick jcp
Patrick jcp
Nick twitter
Nick twitter
Marc facebook
Marc facebook
Kane debt
Kane debt
赵泽欣 - 淘宝网前端应用与发展
1.
淘宝网前端应用与发展
小马
2.
关于我 {
Name: “赵泽欣”, Nickname: “小马”, Jobtitle: “前端架构师” Company: “淘宝网” City: “杭州” Twitter: “zhaozexin” }
3.
内容提要 •
淘宝前端发展史 • 每年的问题与挑战 • 实践经验与心得 • 前端发展展望
4.
Taobao.com @ 2003
5.
Taobao.com @ 2004
6.
Taobao.com @ 2005
7.
Taobao.com @ 2006
8.
淘宝网前端 @ 2006
前端员工人数 50 40 30 20 10 0 0 2006 2007 2008 2009 2010
9.
Taobao.com @ 2007
10.
淘宝网前端 @ 2007
前端员工人数 50 40 30 20 10 5 0 0 2006 2007 2008 2009 2010
11.
问题与挑战 @ 2007 •
团队合作成本高,编码规范缺失 • 网站应用交互更复杂 • 脚本管理混乱,复用性低
12.
UED开发流程
Mock-up Demo PRD Prototype [视觉设计 [前端工程 [产品经理] [交互设计师] 师] 师]
13.
与交互/视觉的合作 • Axture • 制定标注规范 •
淘斯基
14.
标注示例
15.
与开发/测试的协作 • 共用的基础脚本库 •
HTML/CSS 命名约定
16.
选择一个脚本类库 •
Prototype • jQuery • YUI • Dojo • Ext
17.
Prototype
18.
jQuery
19.
Dojo
20.
YUI
21.
Ext
22.
Why YUI? •
适合淘宝的多人协作开发环境 • 功能齐全,可高效开发 • 稳定 可靠
23.
TBra
基于YUI的电子商务网站常用组件库
24.
与开发/测试的协作 •
共用的脚本库 • 代码约定(HTML/CSS/JavaScript命名 规范)
25.
与开发/测试的协作 合作中最常遇到的问题: 1. HTML 嵌套错误 2.
分不清哪些标签不要改劢,是前端丏用 的? 3. 分不清哪些脚本应该由开发来写,哪些由 前端来写?
26.
与开发/测试的协作 问题: HTML 嵌套错误 解决方法: 增加特定格式的注释 教会开发人员使用Firebug
& HTML Validator
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.
小结 (2007) • 制定UED规范 •
制定前端代码规范 • 制定与开发的协作规范
29.
Taobao.com @ 2008
30.
淘宝网前端 @ 2008
前端员工人数 50 40 30 20 14 10 5 0 0 2006 2007 2008 2009 2010
31.
问题与挑战 @ 2008 •
淘宝的业务拆分,应用越来越多。如何保 持页面的一致性 • 促销活劢频繁,促销页面占用大量的前端 工作量 • 用户抱怨淘宝页面慢 • 人才与成长
32.
保持页面的一致性 • 统一页头页尾 • 栅格化 •
TMS 系统 (同时解决第二个问题)
33.
TMS
34.
关注前端性能 • CSS Sprite •
首页 JavaScript/CSS 内嵌 • 减少HTTP请求 – 将YUI+Tbra打包成一个请求 tbra-aio.js • 引入CDN Assets域名 – assets.taobaocdn.com • 脚本/CSS压缩 – YUICompressor
35.
小结 (2008) 2008: 工具年 •
完善规范,将标准转化为工具 – TMS • 开始关注前端性能,使用 ySlow/YUICompressor 进行优化
36.
Taobao.com @ 2009
37.
淘宝网前端 @ 2009
前端员工人数 50 40 30 30 20 14 10 5 0 0 2006 2007 2008 2009 2010
38.
困难与挑战 @ 2009 •
YUI+Tbra 已不能满足开发需求 • 性能成为工作重点
39.
困难与挑战 @ 2009 问题:YUI+Tbra已不能满足开发的需求
– YUI的组件不合国情 – Tbra扩展性不足 – YUI组件较为笨重 解决方法: – 建立开源 Kissy 框架 – 重写常用组件: AutoComplete/ImageLazyLoad/RichEdito r
40.
困难与挑战 @ 2009 挑战:性能要求更严格 解决方法:
– 根据ySlow原则逐条优化 – Assets.taobaocdn.com – Cookie 优化 – 图片压缩 – 图片延迟 – 常用工具: Firebug + Fiddler + ySlow + PageSpeed + Webpagetest
41.
小结 (2009) 2009年:性能年 @TODO 具体
42.
Taobao.com @ 2010
43.
淘宝网前端 @ 2010
前端员工人数 100 90 80 70 70 60 50 40 30 30 20 14 5 10 0 0 2006 2007 2008 2009 2010
44.
问题与挑战 @ 2010 •
YUI + Tbra 的前端架构不再适合淘宝 • 性能要求苛刻 • 项目前端开发工作量占比不断提高,对前 端技能要求日益提高
45.
问题与挑战 @ 2010 挑战:新淘宝前端架构 解决方法:
– Kissy Core 重写,不再依赖YUI – Kissy UI 开源组件库 – Tbra 基于 Kissy,淘宝丏用组件库 – 各产品线类库
46.
淘宝2010前端架构 App
Lib { Mall 3C Shop … } Company Lib { TBra TBack } Common Lib { YUI2 Kissy }
47.
问题与挑战 @ 2010 挑战:苛刻的性能要求 解决方法:
– 2010 淘宝最新首页优化技术(HTML压缩与 DOM预加载) – 淘宝性能指数 – 性能自劢化测试 – 基于Nginx 的Cdn combo 实现 – More…
48.
小结 (2010) • 2010:
品质与协同年 • @TODO 具体
49.
前端的发展
Web开发 应用Web化 (HTML/CSS/JavaScript/Flash/浏览器 兼容性) 交互设计代码实现 用户体验经济 (有设计基础,理解用户体验) 业务开发 Web应用桌面化 (Ajax异步开发,服务端编程语言基础, 性能) 云端管道开发 云计算 (API,架构,安全)
50.
前端团队人才与成长
51.
谢谢
Jetzt herunterladen