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: 创新和成长

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

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

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

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

前端技术体系的构成

模板开发规范
前端开发代码风格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模板。

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

改造 zen-coding(http://code.google.com/p/zen-coding/, http://mattn.github.com/zencoding-vim/)

dui.page
dui.mod
dui.title-bar
dui.list
dui.list-msg
dui.item
dui.album-item
dui.comment-item
dui.user
dui.link-button
dui.hot-button
dui.rating
dui.text

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应用的基础－框架和库、代码模式
开发流程
其实还有更多：性能、安全、测试、代码维护......

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

标题来自...

前端基础架构的概念

基础架构

前端基础架构

现状1

现状2

现状3

今天会说什么...

前端架构解决的问题

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

前端架构解决的问题

问题2: 打通产品开发链

前端架构解决的问题

问题3: 团队的高效运行

前端架构解决的问题

问题4: 创新和成长

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

前端技术体系的构成

HTML设计模式

HTML设计模式

分离结构和样式

页面结构

模块结构

分离结构和样式

分离结构和内容

分离结构和内容

分离结构和内容

分离结构和内容

DoubanUI中的标准组件

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

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

CSS三级结构

范例：Chivas项目

Javascript应用

超轻量级Javascript框架 - Do

解决模块重用问题

统一的Javascript开发模式

现有的前端开发流程

改进的前端开发流程

总结

Q & A