狠狠撸

狠狠撸Share a Scribd company logo
前端架构实践与思考
 front-end infrastructure practice
     tomiezhang@tencent.com
          http://daimaren.cn
张耀辉
tomie/大王
2006.智联招聘
2007.腾讯网
我来自这里...
前端架构?
?架构,把握问题的关键,平衡设计。
?前端架构就像一个舞台,舞台布置好
 ? ?了,男女老少都可以在上面表演。
从自己的产物出发
蚕辩.肠辞尘前端架构实践与思考
and more...
产物页面B

 专题页面1                     产物页面A



首页改版2                       首页改版1


                            产物页面C
xx页面调整


                         专题页面2
         .....
?庞大的综合型门户!
?项目周期短,连贯性差!
?面对各种类型的页面!
?门户站点特有的裹脚布!
?需要大量的“码农”
?重复而意义不大的工作
?个人成就感的直线下落
?陷入代码维护的泥潭
?创新、成长沦为空谈
肿么办?!
蚕辩.肠辞尘前端架构实践与思考
FEDS
Font-end Document System
代码规范

       文档体系库   脚本规范

               移动设备规范

                ....
FEDS
                Hound

       辅助工具     koala

                ....
HTML/css 设计
蚕辩.肠辞尘前端架构实践与思考
<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列结构
<div class=”mod” id=””>
  <div class=”hd”></div>
  <div class=”bd”></div>
  <div class=”ft”></div>
</div>



                      基本模块
标准头图   公共导航   头条   文字列表


标准页卡   公共页尾   段落   图片列表


       公共广告        视频列表


       微博组件        图文混排


       评论组件        排行榜列表
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}
 }
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}
.....
Javascript
?轻量的工具集
?适合门户网站特质的
?容易扩展的
?模块化可组合的
?易操作的
core             dom            event        css


array          prtotype         extend       ...



       focus            tab         scroll



                       loader
<script src=/greengnn/qqcom/”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();
})
丑辞耻苍诲(猎犬)
蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考
办辞补濒补(考拉)
蚕辩.肠辞尘前端架构实践与思考
流程优化与团队建设
产物/编辑   设计   前端
产物/编辑          TAPD




设计
                   TAPD


                                 前端
           TAPD
                          TAPD

cms后台工程师


                  测试工程师
?引入公司通用的tapd需求管理系统
?引入公司通用的bugtrace系统
?引入公司通用的性能监测系统(首屏概念、实时流
量监控)

?引入公司通用的code平台(svn/codereview)
?非产物级页面走快速流程
?产物级页面必须走标准流程(需求、测试、灰度)
专题页面1

专题页面2

专题页面3


        跨平台

        前端研究
产物A
        技术平台
产物B

产物C
思考
?体系仍旧不是很强壮(检查、自动化)
?最终目的是人的解放(工作、时间、创新)
?在有限的条件下做到最大化,并坚持使之制度化
?相信团队的智慧
?没有最好的架构,只有最合适的(动态调整)
Q&A?

More Related Content

蚕辩.肠辞尘前端架构实践与思考