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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,604

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,604
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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?

×