Qq.com前端架构实践与思考
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Qq.com前端架构实践与思考

on

  • 3,675 views

 

Statistics

Views

Total Views
3,675
Views on SlideShare
3,675
Embed Views
0

Actions

Likes
3
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Qq.com前端架构实践与思考 Presentation Transcript

  • 1. 前端架构实践与思考QQ.com front-end infrastructure practice tomiezhang@tencent.com http://daimaren.cn
  • 2. 张耀辉tomie/大王2006.智联招聘2007.腾讯网
  • 3. 我来自这里...
  • 4. 前端架构?
  • 5. •架构,把握问题的关键,平衡设计。•前端架构就像一个舞台,舞台布置好    了,男女老少都可以在上面表演。
  • 6. 从自己的产品出发
  • 7. and more...
  • 8. 产品页面B 专题页面1 产品页面A首页改版2 首页改版1 产品页面Cxx页面调整 专题页面2 .....
  • 9. •庞大的综合型门户!•项目周期短,连贯性差!•面对各种类型的页面!•门户站点特有的裹脚布!
  • 10. •需要大量的“码农”•重复而意义不大的工作•个人成就感的直线下落•陷入代码维护的泥潭•创新、成长沦为空谈
  • 11. 肿么办?!
  • 12. FEDSFont-end Document System
  • 13. 代码规范 文档体系库 脚本规范 移动设备规范 ....FEDS Hound 辅助工具 koala ....
  • 14. HTML/css 设计
  • 15. <div class=”layout”> <div class=”chief”></div><!--主要--></div> 单列结构<div class=”layout”> <div class=”chief”></div><!--主要--> <div class=”extra”></div><!--扩展--></div> 2列结构<div class=”layout”> <div class=”chief”> <div class=”main”></div> <div class=”sub”></div> </div> <div class=”extra”></div><!--扩展--></div> 3列结构
  • 16. <div class=”mod” id=””> <div class=”hd”></div> <div class=”bd”></div> <div class=”ft”></div></div> 基本模块
  • 17. 标准头图 公共导航 头条 文字列表标准页卡 公共页尾 段落 图片列表 公共广告 视频列表 微博组件 图文混排 评论组件 排行榜列表
  • 18. base.css @media screen and (max-device-width:320px){ body{-webkit-text-size-adjust:none} } @media screen and (max-device-width:480px){ body{-webkit-text-size-adjust:none} } @media only screen and (max-device-pixel-ratio:2){ body{-webkit-text-size-adjust:none} } @media only screen and (max-device-width:768px) and (max-device-width:1024px){ body{-webkit-text-size-adjust:none} }
  • 19. base.css.layout{width:960px;margin:0 auto;}.Q-g12 .chief,.Q-g12 .extra{width:475px}.Q-g14 .chief {width:570px}.Q-g16 .chief{width:640px}.Q-g16 .main{width:380px}.Q-g16 .sub{width:250px}.Q-g17a .chief,.Q-g17b .chief{width:700px}.....
  • 20. Javascript
  • 21. •轻量的工具集•适合门户网站特质的•容易扩展的•模块化可组合的•易操作的
  • 22. core dom event cssarray prtotype extend ... focus tab scroll loader
  • 23. <script src=”focus.js”></script><script> var fos = new focus(); fos.time = 5; fos.txtColor = “#ff0000”; fos.init();</script> 从零散嵌入向集约管理转变Qfast([‘koala’,‘focus’],function(){ var fos = new focus(); fos.set({time:5,txtColor:”#ff0000”}).init();})
  • 24. hound(猎犬)
  • 25. koala(考拉)
  • 26. 流程优化与团队建设
  • 27. 产品/编辑 设计 前端
  • 28. 产品/编辑 TAPD设计 TAPD 前端 TAPD TAPDcms后台工程师 测试工程师
  • 29. •引入公司通用的tapd需求管理系统•引入公司通用的bugtrace系统•引入公司通用的性能监测系统(首屏概念、实时流量监控)•引入公司通用的code平台(svn/codereview)•非产品级页面走快速流程•产品级页面必须走标准流程(需求、测试、灰度)
  • 30. 专题页面1专题页面2专题页面3 跨平台 前端研究产品A 技术平台产品B产品C
  • 31. 思考
  • 32. •体系仍旧不是很强壮(检查、自动化)•最终目的是人的解放(工作、时间、创新)•在有限的条件下做到最大化,并坚持使之制度化•相信团队的智慧•没有最好的架构,只有最合适的(动态调整)
  • 33. Q&A?