关于前端架构 @张克军 - 之乎者也2011

from: http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html

前端基础架构的概念

一、基础架构

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)
完善开发流程*
完善各种系统*
文档管理，知识库
分享和交流，新同学培训

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

——————————————————————————————

前端技术体系的构成

1. DoubanUI
- 设计原型库(Stencil Kit)
- 交互组件库 (内容展现)
- 模板(mako)组件库

2. Javascript框架 - Do

3. 功能库 - 地图、media、DragDrop …

4. 自动化测试、品质校验等工具…

——————————————————————————————

HTML设计模式

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

一、分离结构和样式

页面结构：

`1`	`<` `div` `class` `=` `"wrapper page-type"` `>`

`2`	`<` `div` `id` `=` `"header"` `>header</` `div` `>`

`3`	`<` `div` `id` `=` `"content"` `>`

`4`	`<` `div` `class` `=` `"main"` `>content...</` `div` `>`

`5`	`<` `div` `class` `=` `"aside"` `>content...</` `div` `>`

`6`	`</` `div` `>`

`7`	`<` `div` `id` `=` `"footer"` `>footer</` `div` `>`

`8`	`</` `div` `>`

模块结构：

`1`	`<` `div` `class` `=` `"mod"` `id` `=` `"mod-id"` `>`

`2`	`<` `div` `class` `=` `"hd"` `>title</` `div` `>`

`3`	`<` `div` `class` `=` `"bd"` `>content...</` `div` `>`

`4`	`<` `div` `class` `=` `"ft"` `>footer</` `div` `>`

`5`	`</` `div` `>`

二、分离结构和内容

`1`	`<` `div` `class` `=` `"mod"` `id` `=` `"db-hotsong"` `>`

`2`	`<` `div` `class` `=` `"hd"` `>人气作品 · · · · · · </` `div` `>`

`3`	`<` `div` `class` `=` `"bd"` `>`

`4`	`<` `div` `class` `=` `"songinfo"` `>...</` `div` `>`

`5`	`<` `div` `class` `=` `"player"` `>...</` `div` `>`

`6`	`<` `div` `class` `=` `"lyric"` `>...</` `div` `>`

`7`	`</` `div` `>`

`8`	`</` `div` `>`

——————————————————————————————

DoubanUI中的标准组件

导航
- 全局导航
页脚
- 完整版
- 简版
内容项
- 图书条目
- 电影条目
- 唱片条目
- 活动条目
列表
- 通用列表
- 小组列表
- 成员列表
- 评论列表
- 相册列表
- 排行榜
- 活动列表
- 消息列表
- 论坛列表
- 标签

表单
- 登录
- 回应
- 评论
分页
提示区
- 请求和提醒
评价
搜索
- 成员搜索
- 全能搜索
- 小组搜索
- 图书搜索
- 电影搜索
- 唱片搜索
- 音乐人
- 同城搜索
按钮
广告位
媒体
- 音乐播放器

交互组件库

一、做成更好用的工具(实践中…)

改造 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开发框架
是一个很轻薄的JS组织层。6.4K/2.3K(min)/1K(gzip)
内部由模块及依赖关系管理＋异步加载队列组成

解决模块重用问题

一分为三。模块内容(HTML)，模块对应的JS处理，它所依赖的JS和CSS
放在一起，同时不影响页面性能

<div id="db-cover">...</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'......});

统一的Javascript开发模式

1. 内联的Javascript

1 Do( 'mod1' , 'mod2' , function () {

2 // your code

3 });
2. 插件模式

01 ( function ($){

03    var _privateVariable;

05     MyClass = function (el, config){

06        this .init();

07     };

09     ......

10       renderUI: function () {},

11       bindUI: function () {},

12       syncUI: function () {},

——————————————————————————————

现有的前端开发流程

改进的前端开发流程

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

总结

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

【翻译自台湾yahoo奇摩前端】

什么是F2E，F2E又要做些什么样的工作。

1. F2E在做什么：

F2E的工作内容简言之就是：We tell browsers what to do. 也就是负责让设计好的网页页面，在不同的浏览器上都可以呈现出应有外观与互动效果。也就是要每天面对网页源代码，用一行行代码呈现出美丽的网页。

2. F2E需要懂什么：

F2E需要有良好的标记语意结构概念(semantic markup)，熟悉CSS、Javascript(DOM Scripting, AJAX)。在Yahoo!奇摩担任F2E，都必须使用YUI (Yahoo! User Interface Library, http://developer.yahoo.com/yui/)，这是全球Yahoo!的F2E都共通使用的程式宝库；阿当则是在加入Yahoo! 后，透过阅读文件、参与专题实践、与同事讨论，来了解YUI的精髓。

3. 好的F2E应具备什么样的能力：

(1) 了解网页应该要有良好的亲和力：可以跨平台与浏览器使用、或是让不能使用滑鼠或视障朋友可以正常浏览网页，都是展现网页良好亲和力的表现之一。身为台湾最大的入口网站，有各式各样的使用者造访，亲和力绝对不能被忽视。

(2) 达到producer(产品经理)与VD(视觉设计师)的需求：producer负责开出原型方案，设计网页的各种互动效果；VD负责给图以让网页看起来美美的。而F2E则要以最少的code达成VD想要的效果，能够将视觉画面转换成程式，是F2E有别于其他软件工程师之外必备的技能。

(3) 符合W3C网页标准：能够让网页内容、结构（HTML）、样式（CSS，提供美丽的画面）、行为（Javascript）都分开。以确保HTML文件在任何情况下都是清楚、可阅读的。

(4) 由于产业特性，F2E工作相关资讯在网路上都看得到，技术演进速度很快，资料量大，所以担任F2E的人一定要有热情，愿意吸收不断演进的技术。

给想入行的人的建议：多买书，多看国外网站资讯。由于F2E的工作必需在design和coding中平衡，所以多培养美感，喜欢design，是相当重要的！

私房推荐网站：

Smashing Magazine: http://smashingmagazine.com/

Nettus: http://nettuts.com/

YUI library theater: http://developer.yahoo.com/yui/theater

之乎者也2011

公告

前端基础架构的概念

一、基础架构

二、前端基础架构

今天会说什么…

一、前端架构解决的问题

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

问题2: 打通产品开发链

问题3: 团队的高效运行

问题4: 创新和成长

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

前端技术体系的构成

HTML设计模式

一、分离结构和样式

二、分离结构和内容

——————————————————————————————

DoubanUI中的标准组件

一、做成更好用的工具(实践中…)

二、CSS三级结构

范例：Chivas项目

三、Javascript应用

超轻量级Javascript框架 – Do

解决模块重用问题

统一的Javascript开发模式

现有的前端开发流程

改进的前端开发流程

总结

wordpress的TinyMCE编辑器追加html按钮

F2E – Front End Engineer 前端工程师