淘宝网前端应用和发展

淘宝网前端应用与发展小马{Name:“赵泽欣”,Nickname:“小马”,Jobtitle:“前端架构师”Company:“淘宝网”City:“杭州”Twitter:“zhaozexin”}关于我•淘宝前端发展史•每年的问题与挑战•实践经验与心得•前端发展展望内容提要[e-mail]@[e-mail]@2006淘宝网前端@200601020304050200620072008200920100前端员工人数Taobao.com@2007淘宝网前端@2007010203040502006200720082009201005前端员工人数•团队合作成本高，编码规范缺失•网站应用交互更复杂•脚本管理混乱，复用性低问题与挑战@2007UED开发流程PRD[产品经理]Prototype[交互设计师]Mock-up[视觉设计师]Demo[前端工程师]•Axture•制定标注规范•淘斯基与交互/视觉的合作标注示例•共用的基础脚本库•HTML/CSS命名约定与开发/测试的协作•Prototype•jQuery•YUI•Dojo•Ext选择一个脚本类库PrototypejQueryDojoYUIExt•适合淘宝的多人协作开发环境•功能齐全，可高效开发•稳定可靠WhyYUI？基于YUI的电子商务网站常用组件库TBra•共用的脚本库•代码约定（HTML/CSS/JavaScript命名规范）与开发/测试的协作合作中最常遇到的问题：1.HTML嵌套错误2.分不清哪些标签不要改劢，是前端丏用的？3.分不清哪些脚本应该由开发来写，哪些由前端来写？与开发/测试的协作问题:HTML嵌套错误解决方法：增加特定格式的注释教会开发人员使用Firebug&HTMLValidator与开发/测试的协作•问题：分不清哪些标签不要改劢，是前端丏用的？与开发/测试的协作解决方法：@TODO格式化特殊的Hook命名约定，开发人员保留拥有特殊id/class命名的标签divid=“fp:slide”class=“tb-slide”……/divspanclass=“ww:token”aclass=“ww-online”…/a/div新版：divid=“J_Slide”……/div其他CSS命名，统一使用连接符。脚本：代码统一写在一个闭包内。•制定UED规范•制定前端代码规范•制定与开发的协作规范小结(2007)Taobao.com@2008淘宝网前端@200801020304050200620072008200920100514前端员工人数•淘宝的业务拆分，应用越来越多。如何保持页面的一致性•促销活劢频繁，促销页面占用大量的前端工作量•用户抱怨淘宝页面慢•人才与成长问题与挑战@2008•统一页头页尾•栅格化•TMS系统(同时解决第二个问题)保持页面的一致性TMS•CSSSprite•首页JavaScript/CSS内嵌•减少HTTP请求–将YUI+Tbra打包成一个请求tbra-aio.js•引入CDNAssets域名–assets.taobaocdn.com•脚本/CSS压缩–YUICompressor关注前端性能2008:工具年•完善规范，将标准转化为工具–TMS•开始关注前端性能，使用ySlow/YUICompressor进行优化小结（2008）Taobao.com@2009淘宝网前端@20090102030405020062007200820092010051430前端员工人数•YUI+Tbra已不能满足开发需求•性能成为工作重点困难与挑战@2009问题：YUI+Tbra已不能满足开发的需求–YUI的组件不合国情–Tbra扩展性不足–YUI组件较为笨重解决方法：–建立开源Kissy框架–重写常用组件：AutoComplete/ImageLazyLoad/RichEditor困难与挑战@2009挑战：性能要求更严格解决方法：–根据ySlow原则逐条优化–Assets.taobaocdn.com–Cookie优化–图片压缩–图片延迟–常用工具：Firebug+Fiddler+ySlow+PageSpeed+Webpagetest困难与挑战@20092009年：性能年@TODO具体小结(2009)Taobao.com@2010淘宝网前端@201001020304050607080901002006200720082009201005143070前端员工人数•YUI+Tbra的前端架构不再适合淘宝•性能要求苛刻•项目前端开发工作量占比不断提高，对前端技能要求日益提高问题与挑战@2010挑战：新淘宝前端架构解决方法：–KissyCore重写，不再依赖YUI–KissyUI开源组件库–Tbra基于Kissy，淘宝丏用组件库–各产品线类库问题与挑战@2010淘宝2010前端架构YUI2KissyCommonLib{}TBraTBackCompanyLib{}Mall…AppLib{}3CShop挑战：苛刻的性能要求解决方法：–2010淘宝最新首页优化技术(HTML压缩与DOM预加载)–淘宝性能指数–性能自劢化测试–基于Nginx的Cdncombo实现–More…问题与挑战@2010小结（2010）•2010：品质与协同年•@TODO具体前端的发展应用Web化Web开发(HTML/CSS/JavaScript/Flash/浏览器兼容性)用户体验经济交互设计代码实现(有设计基础，理解用户体验)Web应用桌面化业务开发(Ajax异步开发，服务端编程语言基础，性能)云计算云端管道开发(API，架构，安全)前端团队人才与成长谢谢