淘宝网最新WEB前端应用及发展.ppt

淘宝网前端应用与发展淘宝前端发展史
近四年来的问题与挑战
实践经验与心得
前端发展展望
{
Name: “赵泽欣”,
Nickname: “小马”,
Job: “前端工程师”
Company: “淘宝网”
Twitter: “@zhaozexin”
}[e-mail]@[e-mail]@2006淘宝网前端@2006Taobao.com@2007淘宝网前端@2007团队合作成本高，编码规范缺失
网站应用交互变复杂，要“动”起来
脚本管理混乱，复用性低，维护成本高Axure标注示例提高与后端开发的合作效率自行开发
Prototype
jQuery
YUI
dojo
Ext

PrototypelikejQuerydojoYUIExt适用于网站
适合淘宝的协作开发环境
功能齐全
稳定可靠
TBra：基于YUI的电子商务网站常用组件库合作中最常遇到的问题：

HTML嵌套错误或标签未关闭
Hook标签被误删或更改
脚本开发分工不明，全局变量名冲突
问题:HTML嵌套错误或标签未关闭

解决方法：
约定特定格式的注释
培训开发人员使用Firebug&HTMLValidator

制定与后端开发的合作规范代码约定示例代码约定示例制定与后端开发的合作规范制定UED规范
制定前端代码规范
制定前端与后端开发的协作规范Taobao.com@2008淘宝网前端@2008淘宝的业务拆分，网站日益庞大。如何保持页面的一致性？
促销活动频繁，促销页面和垂直频道占用大量前端工作量
用户抱怨淘宝页面慢统一页头页尾
栅格化
TMS系统
TMSCSSSprite完善规范，将规范转化为工业化工具(TMS)
使用ySlow/YUICompressor等工具优化前端性能

Taobao.com@2009淘宝网前端@2009网站页面性能形势严峻
YUI+TBra日益无法满足开发需求问题：网站页面性能形势严峻商品详情页面优化项目
首页性能优化项目
搜索结果页性能优化项目
其他
图片延迟加载
cookie优化
assets.taobaocdn.com->a.tbcdn.cn
图片强制压缩
2010前端性能年网站页面性能形势严峻
YUI+TBra日益无法满足开发需求
YUI的组件体验不合国情
YUI组件较为笨重
TBra扩展性不足
建立开源Kissy框架
重写常用组件
AutoComplete
ImageLazyLoad
RichEditor
……

联合开发/运维/测试工程师一起立项全面优化网站性能
创建Kissy开源项目，逐步迁移YUI/TBra组件到Kissy组件，改善体验，优化性能
Taobao.com@2010淘宝网前端@2010用户个性化需求强烈
YUI+TBra的前端架构不再适合淘宝
性能要求苛刻
项目前端开发工作量占比不断提高，后台架构和开发过程需要改革KissyCore重写，不再依赖YUI
KissyUI开源组件库
TBra基于Kissy，成为淘宝专用组件库
建立各产品线工具类库

淘宝2010前端架构HTML5&CSS3
HTML压缩
DOM预加载
本地存储
data：url
CSS圆角
淘宝性能指数
性能自动化测试
Firefox+ySlow+showslow+xvfb
CDN改造
基于Nginx的CDNcombo实现
MVC架构改造

目标（2010）淘宝网前端实践之路淘宝网前端发展展望前端团队人才与成长谢谢