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

淘宝网前端应用与发展小马•淘宝前端发展史•近四年来的问题与挑战•实践经验与心得•前端发展展望内容提要内容提要{Name:“赵泽欣”,Nickname:“小马”,Job:“前端工程师”Company:“淘宝网”Twitter:“@zhaozexin”}关于我[e-mail]@[e-mail]@2006淘宝网前端@2006Taobao.com@2007淘宝网前端@2007•团队合作成本高，编码规范缺失•网站应用交互变复杂，要“动”起来•脚本管理混乱，复用性低，维护成本高问题与挑战@2007问题与挑战@2007PRD[产品经理]Prototype[交互设计师]Mock-up[视觉设计师]Demo[前端工程师]UED开发流程•Axure问题:团队合作成本高，编码规范缺失对策：制定与交互/视觉的合作规范•标注规范•淘斯基标注示例提高与后端开发的合作效率对策：制定与后端开发的合作规范•共用的基础脚本库•代码约定•自行开发•Prototype•jQuery•YUI•dojo•Ext选择一个脚本类库PrototypelikejQuerydojoYUIExt•适用于网站•适合淘宝的协作开发环境•功能齐全•稳定可靠WhyYUI？TBra：基于YUI的电子商务网站常用组件库•共用的基本脚本库•代码约定对策：制定与后端开发的合作规范合作中最常遇到的问题：•HTML嵌套错误或标签未关闭•Hook标签被误删或更改•脚本开发分工不明，全局变量名冲突制定与后端开发的合作规范问题:HTML嵌套错误或标签未关闭解决方法：•约定特定格式的注释•培训开发人员使用Firebug&HTMLValidator制定与后端开发的合作规范制定与后端开发的合作规范问题:Hook标签被误删或更改解决方法：•Hook命名约定代码约定示例spanclass=“ww:token”aclass=“ww-online”…/a/span代码约定示例divid=“fp:slide”class=“tb-slide”……/divdivid=“J_Slide”class=“tb-slide”……/div制定与后端开发的合作规范问题:脚本开发分工不明，全局变量冲突解决方法：•展现层由前端工程师开发•业务逻辑涉及脚本由后端工程师开发•制定UED规范•制定前端代码规范•制定前端与后端开发的协作规范小结(2007)小结(2007)Taobao.com@2008淘宝网前端@2008•淘宝的业务拆分，网站日益庞大。如何保持页面的一致性？•促销活动频繁，促销页面和垂直频道占用大量前端工作量•用户抱怨淘宝页面慢问题与挑战@2008•统一页头页尾•栅格化•TMS系统对策：工业化TMS•CSSSprite对策：根据ySlow规则优化前端性能•减少HTTP请求–首页JavaScript/CSS内嵌–CSS/JavaScript文件合并（将YUI+TBra打包成tbra-aio.js)•引入CDNAssets域名–assets.taobaocdn.com•JavaScript/CSS压缩–YUICompressor•完善规范，将规范转化为工业化工具(TMS)•使用ySlow/YUICompressor等工具优化前端性能小结（2008）小结(2008)Taobao.com@2009淘宝网前端@2009•网站页面性能形势严峻•YUI+TBra日益无法满足开发需求问题与挑战@2009问题：网站页面性能形势严峻•Amazon慢0.1s-1%用户放弃交易•Google慢0.4s-0.6%放弃搜索•Yahoo!慢0.4s-减少5%-9%的流量•Bing慢2s-收入下降4.3%一些研究数据•商品详情页面优化项目•首页性能优化项目•搜索结果页性能优化项目•其他–图片延迟加载–cookie优化–assets.taobaocdn.com-a.tbcdn.cn–图片强制压缩对策：性能优化别动组页面节省的带宽费用/年=优化减少的下载量(KB)x页面PVx20%(无缓存用户比率)x(8/1000/12/3600*750000/100)性能收益公式2010前端性能年Pagetest-AOLFiddler-MicrosoftySlow–YAHOO!•网站页面性能形势严峻•YUI+TBra日益无法满足开发需求–YUI的组件体验不合国情–YUI组件较为笨重–TBra扩展性不足问题与挑战@2009•建立开源Kissy框架•重写常用组件•AutoComplete•ImageLazyLoad•RichEditor•……困难与挑战@2009对策：尝试研发新脚本库•联合开发/运维/测试工程师一起立项全面优化网站性能•创建Kissy开源项目，逐步迁移YUI/TBra组件到Kissy组件，改善体验，优化性能小结(2009)小结(2009)Taobao.com@2010淘宝网前端@2010•用户个性化需求强烈•YUI+TBra的前端架构不再适合淘宝•性能要求苛刻•项目前端开发工作量占比不断提高，后台架构和开发过程需要改革问题与挑战@2010问题与挑战@2010•KissyCore重写，不再依赖YUI•KissyUI开源组件库•TBra基于Kissy，成为淘宝专用组件库•建立各产品线工具类库对策：设计新的淘宝前端架构淘宝2010前端架构YUI2Kissy基础类库{}TBraTBack公司类库{}Mall…应用类库{}3CShop…•HTML5&CSS3–HTML压缩–DOM预加载–本地存储–data：url–CSS圆角•淘宝性能指数•性能自动化测试–Firefox+ySlow+showslow+xvfb•CDN改造–基于Nginx的CDNcombo实现•MVC架构改造挑战：性能要求苛刻对策：速度委员会目标（2010）•探索和研发最适合自己的前端框架•精雕细琢地前端编码•FastbyDefault目标(2010)淘宝网前端实践之路标准与规范工具性能品质与协同淘宝网前端发展展望拿来主义自力更生追求卓越应用Web化Web开发(HTML/CSS/JavaScript/Flash/浏览器兼容性)用户体验经济交互设计代码实现(有设计基础，理解用户体验)Web应用桌面化业务开发(Ajax异步开发，服务端编程语言基础，性能)云计算云端开发(openAPI，架构，安全)前端岗位发展展望前端工程师云端工程师前端团队人才与成长好的设计驱动技术创新(Design)好的技术为设计提供无限的想象(Develop)•淘宝UED的设计流程:•网页栅格系统研究:•KissyonGoogleCode:•ySlowrules:•WebPageTest:•YUICompressor:•Let‘smakethewebfaster：•@kejunz:谢谢