淘宝
This presentation is the property of its rightful owner.
Sponsored Links
1 / 63

淘宝 网 前端应用与发展 PowerPoint PPT Presentation


  • 125 Views
  • Uploaded on
  • Presentation posted in: General

淘宝 网 前端应用与发展. 小马. 内容提要. 内容提要. 淘 宝前端发展史 近四年来的问题与挑战 实践经验与 心得 前端发展展望. 关于我. { Name : “ 赵泽欣 ” , Nickname: “ 小马 ”, Job: “ 前端 工程 师 ” Company:“ 淘宝网 ” Twitter : “@ zhaozexin ” }. Taobao.com @ 2003. Taobao.com @ 2004. Taobao.com @ 2005. Taobao.com @ 2006. 淘宝网前端 @ 2006.

Download Presentation

淘宝 网 前端应用与发展

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


5445115

淘宝网前端应用与发展

小马


5445115

内容提要

内容提要

  • 淘宝前端发展史

  • 近四年来的问题与挑战

  • 实践经验与心得

  • 前端发展展望


5445115

关于我

{

Name:“赵泽欣”,

Nickname: “小马”,

Job:“前端工程师”

Company:“淘宝网”

Twitter:[email protected]

}


Taobao com @ 2003

Taobao.com @ 2003


Taobao com @ 2004

Taobao.com @ 2004


Taobao com @ 2005

Taobao.com @ 2005


Taobao com @ 2006

Taobao.com @ 2006


@ 2006

淘宝网前端 @ 2006


Taobao com @ 2007

Taobao.com @ 2007


@ 2007

淘宝网前端 @ 2007


@ 20071

问题与挑战 @ 2007

问题与挑战 @ 2007

  • 团队合作成本高,编码规范缺失

  • 网站应用交互变复杂,要“动”起来

  • 脚本管理混乱,复用性低,维护成本高


  • 5445115

    UED开发流程


    5445115

    问题:团队合作成本高,编码规范缺失

    对策:制定与交互/视觉的合作规范

    • Axure

    • 淘斯基

    • 标注规范


    5445115

    标注示例


    5445115

    提高与后端开发的合作效率

    对策:制定与后端开发的合作规范

    • 共用的基础脚本库

    • 代码约定


    5445115

    选择一个脚本类库

    • 自行开发

    • Prototype

    • jQuery

    • YUI

    • dojo

    • Ext


    Prototype like

    Prototype like

    Prototype likes


    Jquery

    jQuery

    jQuery likes


    D ojo

    dojo

    dojo likes


    5445115

    YUI

    YUI likes


    5445115

    Ext

    Ext likes


    5445115

    Why YUI?

    • 适用于网站

    • 适合淘宝的协作开发环境

    • 功能齐全

    • 稳定 可靠


    Tbra yui

    TBra:基于YUI的电子商务网站常用组件库


    5445115

    对策:制定与后端开发的合作规范

    • 共用的基本脚本库

    • 代码约定


    5445115

    制定与后端开发的合作规范

    合作中最常遇到的问题:

    • HTML 嵌套错误或标签未关闭

    • Hook 标签被误删或更改

    • 脚本开发分工不明,全局变量名冲突


    5445115

    制定与后端开发的合作规范

    问题: HTML嵌套错误或标签未关闭

    解决方法:

    • 约定特定格式的注释

    • 培训开发人员使用Firebug & HTML Validator


    5445115

    制定与后端开发的合作规范

    问题: Hook 标签被误删或更改

    解决方法:

    • Hook命名约定


    5445115

    代码约定示例

    <span class=“ww:token”>

    <a class=“ww-online”>…</a>

    </span>


    5445115

    代码约定示例

    <div id=“fp:slide” class=“tb-slide”>

    ……

    </div>

    <div id=“J_Slide” class=“tb-slide”>

    ……

    </div>


    5445115

    制定与后端开发的合作规范

    问题: 脚本开发分工不明,全局变量冲突

    解决方法:

    • 展现层由前端工程师开发

    • 业务逻辑涉及脚本由后端工程师开发


    5445115

    小结 (2007)

    小结 (2007)

    • 制定UED规范

    • 制定前端代码规范

    • 制定前端与后端开发的协作规范


    Taobao com @ 2008

    Taobao.com @ 2008


    @ 2008

    淘宝网前端 @ 2008


    5445115

    问题与挑战 @ 2008

    • 淘宝的业务拆分,网站日益庞大。如何保持页面的一致性?

    • 促销活动频繁,促销页面和垂直频道占用大量前端工作量

    • 用户抱怨淘宝页面慢


    5445115

    对策:工业化

    • 统一页头页尾

    • 栅格化

    • TMS 系统


    5445115

    TMS


    5445115

    对策:根据ySlow规则优化前端性能

    • CSS Sprite

    • 减少HTTP请求

      • 首页 JavaScript/CSS 内嵌

      • CSS/JavaScript文件合并(将YUI+TBra打包成tbra-aio.js)

    • 引入CDN Assets域名

      • assets.taobaocdn.com

    • JavaScript/CSS压缩

      • YUICompressor


    5445115

    小结 (2008)

    小结 (2008)

    • 完善规范,将规范转化为工业化工具(TMS)

    • 使用 ySlow / YUICompressor等工具优化前端性能


    Taobao com @ 2009

    Taobao.com @ 2009


    @ 2009

    淘宝网前端 @ 2009


    5445115

    问题与挑战 @ 2009

    • 网站页面性能形势严峻

    • YUI+TBra日益无法满足开发需求


    5445115

    问题:网站页面性能形势严峻

    一些研究数据

    • Amazon 慢0.1 s -> 1% 用户放弃交易

    • Google 慢 0.4s -> 0.6% 放弃搜索

    • Yahoo! 慢 0.4s -> 减少 5%-9% 的流量

    • Bing 慢 2s ->收入下降 4.3 %


    5445115

    对策:性能优化别动组

    • 商品详情页面优化项目

    • 首页性能优化项目

    • 搜索结果页性能优化项目

    • 其他

      • 图片延迟加载

      • cookie 优化

      • assets.taobaocdn.com -> a.tbcdn.cn

      • 图片强制压缩


    5445115

    性能收益公式

    页面节省的带宽费用/年 =

    优化减少的下载量(KB)  x 

    页面PV  x 

    20%(无缓存用户比率)  x  

    (8/1000/12/3600*750000/100) 


    5445115

    2010 前端性能年

    Fiddler - Microsoft

    Pagetest - AOL

    ySlow – YAHOO!


    5445115

    问题与挑战 @ 2009

    • 网站页面性能形势严峻

    • YUI+TBra日益无法满足开发需求

      • YUI的组件体验不合国情

      • YUI组件较为笨重

      • TBra 扩展性不足


    @ 20091

    困难与挑战 @ 2009

    对策:尝试研发新脚本库

    • 建立开源 Kissy 框架

    • 重写常用组件

      • AutoComplete

      • ImageLazyLoad

      • RichEditor

      • ……


    5445115

    小结 (2009)

    小结 (2009)

    • 联合开发/运维/测试工程师一起立项全面优化网站性能

    • 创建Kissy开源项目,逐步迁移YUI/TBra组件到Kissy组件,改善体验,优化性能


    Taobao com @ 2010

    Taobao.com @ 2010


    @ 2010

    淘宝网前端 @ 2010


    @ 20101

    问题与挑战 @ 2010

    问题与挑战 @ 2010

    • 用户个性化需求强烈

    • YUI + TBra的前端架构不再适合淘宝

    • 性能要求苛刻

    • 项目前端开发工作量占比不断提高,后台架构和开发过程需要改革


    5445115

    对策:设计新的淘宝前端架构

    • Kissy Core 重写,不再依赖YUI

    • Kissy UI 开源组件库

    • TBra基于 Kissy,成为淘宝专用组件库

    • 建立各产品线工具类库


    5445115

    淘宝2010前端架构

    Shop

    3C

    Kissy

    TBack

    YUI2

    TBra

    Mall

    基础类库 { }

    公司类库 { }

    应用类库 { }


    5445115

    挑战:性能要求苛刻

    对策:速度委员会

    • HTML5 & CSS3

      • HTML压缩

      • DOM预加载

      • 本地存储

      • data:url

      • CSS圆角

    • 淘宝性能指数

    • 性能自动化测试

      • Firefox + ySlow + showslow + xvfb

    • CDN改造

      • 基于Nginx的 CDN combo 实现

    • MVC架构改造


    5445115

    目标 (2010)

    目标(2010)

    • 探索和研发最适合自己的前端框架

    • 精雕细琢地前端编码

    • Fast by Default


    5445115

    淘宝网前端实践之路


    5445115

    淘宝网前端发展展望


    5445115

    前端岗位发展展望


    5445115

    前端团队人才与成长

    好的设计驱动技术创新(Design) 好的技术为设计提供无限的想象(Develop)


    5445115

    • 淘宝UED的设计流程: http://ued.taobao.com/blog/2007/08/13/our_design_flow/

    • 网页栅格系统研究: http://lifesinger.org/blog/2008/10/grid-system-1/

    • Kissy on GoogleCode: http://code.google.com/p/kissy/

    • ySlowrules: http://developer.yahoo.com/performance/rules.html

    • WebPageTest: http://www.webpagetet.org/

    • YUICompressor: http://developer.yahoo.com/yui/compressor/

    • Let‘s make the web faster:http://code.google.com/speed/articles/html5-performance.html

    • @kejunz: http://twitter.com/kejunz


    5445115

    谢谢


  • Login