导航栏： 首页 评论列表

转载：关于前端架构 @张克军

默认分类 2014/02/07 22:28

http://www.cnblogs.com/wrmfw/archive/2011/09/25/2190402.html
http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html#1
http://www.slideshare.net/d0nn9n/zhaozexin-frontend

1/35
slides: http://sn.im/2010_fe_infrastructure

关于前端架构，我说的其实是...

张克军
@kejunz | hikejun.com

标题来自...

很多工作像长跑一样， 需要坚持不懈的做，往往到最后才能体现出其意义
过程常常伴随着思考和纠结
绝对不能走
(不能用变通的方式达成短期目标)

前端基础架构的概念

基础架构

Infrastructure /ˈɪnfrəstrʌktʃə(r)/
组织运行所必需的设施、设备和服务的体系

基础架构就像一个舞台，舞台布置好了，男女老少都可以在上面表演。舞台包含了灯光、音响等。

前端基础架构

前端团队运行所必需的规范、工具和系统的体系

现状1

现状2

现状3

今天会说什么...

  • 前端架构解决哪些问题
  • 前端技术体系的构成
  • 前端架构的基础(1)－HTML设计模式
  • 前端架构的基础(2)－Javascript框架
  • 前端开发方式

前端架构解决的问题

问题1: 为产品的前端开发提供可复用的模式

  • 可重用的前端应用开发模型，或者叫前端开发的脚手架
  • 一致的模板框架，组件库，JS框架，各种JS库
  • 要做的事：开发环境，平台工具(框架、库、发布工具等)

前端架构解决的问题

问题2: 打通产品开发链

  • 有多少人对自己公司的开发流程满意呢?
  • 部门间的代沟；专业间的代沟；流程的代沟
    产品开发流程
  • 处于开发(Build)的中间环节，可以平衡设计，得出更合理的开发方案
  • 要做的事：建立相关开发规范(跟BE/UE)、UI组件库(跟UE)

前端架构解决的问题

问题3: 团队的高效运行

  • 前端团队应当溶入到整个技术团队中(!important)
  • 完善自动化系统，弱化人为管理
  • 项目追踪系统、反馈系统、SVN、发布系统、开发环境、测试环境
  • 代码品质控制植入到系统中
  • 远程办公
  • 要做的事：完善各种系统

前端架构解决的问题

问题4: 创新和成长

  • 创新是玩出来的
  • 积累形成的技术体系，是非常宝贵的资源
  • 新同学可以更容易融入团队
  • 要做的事：个人开发环境，文档管理，知识库，分享和交流

小结: 前端基础架构的内容

  1. 开发环境*，平台工具(框架、库、发布工具等)
  2. 建立相关开发规范(跟BE/UE)、UI组件库(跟UE)
  3. 完善开发流程*
  4. 完善各种系统*
  5. 文档管理，知识库
  6. 分享和交流，新同学培训

*注：跟后端基础架构重叠

前端技术体系的构成

模板开发规范
前端开发代码风格Guidelines
性能
安全性
易用性
开发环境
开发流程
1. DoubanUI
  - 设计原型库(Stencil Kit)
  - 交互组件库(内容展现)
  - 模板(mako)组件库
2. Javascript框架 - Do
3. 功能库 - 地图、media、DragDrop ...
4. 自动化测试、品质校验等工具...
产品级解决方案
创新成果

豆瓣技术体系

HTML设计模式

  • 分离内容和样式（网站重构的重要理念，早以深入人心）
  • 分离结构和样式
  • 分离结构和内容
  • OOCSS (http://oocss.org/)

HTML设计模式

分离结构和样式

页面结构

<div class="wrapper page-type">
  <div id="header">header</div>
  <div id="content">
    <div class="main">content...</div>
    <div class="aside">content...</div>
  </div>
  <div id="footer">footer</div>
</div>

模块结构

<div class="mod" id="mod-id">
  <div class="hd">title</div>
  <div class="bd">content...</div>
  <div class="ft">footer</div>
</div>

分离结构和样式

<div class="mod" id="mod-id">
  <div class="hd">title</div>
  <div class="bd">content...</div>
</div>

分离结构和内容

<div class="mod" id="db-hotsong">
  <div class="hd">人气作品 · · · · · · </div>
  <div class="bd">
    <div class="songinfo">...</div>
    <div class="player">...</div>
    <div class="lyric">...</div>
  </div>
</div>

分离结构和内容

分离结构和内容

分离结构和内容

DoubanUI中的标准组件

  • 导航
    • 全局导航
  • 页脚
    • 完整版
    • 简版
  • 内容项
    • 图书条目
    • 电影条目
    • 唱片条目
    • 活动条目
  • 列表
    • 通用列表
    • 小组列表
    • 成员列表
    • 评论列表
    • 相册列表
    • 排行榜
    • 活动列表
    • 消息列表
    • 论坛列表
    • 标签
  • 表单
    • 登录
    • 回应
    • 评论
  • 分页
  • 提示区
    • 请求和提醒
  • 评价
  • 搜索
    • 成员搜索
    • 全能搜索
    • 小组搜索
    • 图书搜索
    • 电影搜索
    • 唱片搜索
    • 音乐人
    • 同城搜索
  • 按钮
  • 广告位
  • 媒体
    • 音乐播放器
  • 交互组件库

模板组件库(实践中...)

<div class="intro">
  ${dui.entryItem(mod_culture['headline'])}
</div>
...
<div class="entry-list">
  ${dui.list(entry_list)}
</div>

通过本地开发环境，直接开发Mako模板。

做成更好用的工具(实践中...)

CSS三级结构

范例：Chivas项目

  • 全站级core.css (20.8K, 6.9K gzip)
    定义标签重置、页面布局结构、模块结构、标准组件样式和常用规则
  • 产品级chivas.css (4.9K, 1.6K gzip)
    定义具体产品的统一样式
  • 页面级，定义页面专有的样式

Javascript应用

  • 框架 - do.js
  • 核心功能库 - jQuery, douban.js
  • 功能库 - map.js, swfobject.js ......
  • DoubanUI组件库 - dialog.js ...

超轻量级Javascript框架 - Do

  • 框架 + 库
  • Douban Javascript开发框架 [Demo]
  • 是一个很轻薄的JS组织层。6.4K/2.3K(min)/1K(gzip)
  • 内部由模块及依赖关系管理＋异步加载队列组成

解决模块重用问题

  • 一分为三。模块内容(HTML)，模块对应的JS处理，它所依赖的JS和CSS
  • 放在一起，同时不影响页面性能
<div id="db-cover" class="mod">...</div>

Do.add('dialog-css', {path: 'http://t.douban.com/css/ui/dialog.css', type: 'css'});
Do.add('dialog', {path: 'http://t.douban.com/js/ui/dialog.js', type: 'js', requires: ['dialog-css']});

Do('dialog', function(){
    $('#db-cover .bn-std[href$=#rec]').click(function(e){
      e.preventDefault();
      dui.Dialog({
        title: '向我的友邻推荐芝华士骑士群声',
        width: 500,
        content: '推荐语：',
        buttons: [
          {
           text: '确定',
           method: function (o) {
             $('form', o.node)[0].submit();
             o.close();
           }
          },
          'cancel'
        ]
      }).open();
    });
});

统一的Javascript开发模式

  • 1. 内联的Javascript 
    Do('mod1', 'mod2', function () {
    // your code 
});
  • 2. 插件模式 
    (function($){

  var _privateVariable; 

   MyClass = function(el, config){
      this.init();
   };

   MyClass.prototype = {
     init: function () {
       this.renderUI();
       this.bindUI();
       this.syncUI();
     },
     renderUI: function () {},
     bindUI: function () {},
     syncUI: function () {},
     //......
   };

   $.fn.myPlugin = function(config){
      return this.each(function(){
         (new MyClass(this, config));
      });
   }

})(jQuery);

现有的前端开发流程

改进的前端开发流程

对开发环节、Build环节、上线环节的改进

总结

  • 前端基础架构是什么？前端团队运行所必需的规范、工具和系统的体系
  • 它能解决什么问题？1）为开发提供可复用的模式; 2)打通产品开发链; 3)团队的高效运行; 4)创新和成长
  • 前端基础架构中技术体系的构成
  • HTML设计模式
  • Javascipt应用的基础－框架和库、代码模式
  • 开发流程
  • 其实还有更多：性能、安全、测试、代码维护......


>> 留言评论