前端基础架构的实践和思考
- 1. 础 构 实
kejun
Sunday, September 25, 2011
这 话题 问题 实4 过 ant 态 编译 统 时 对 础 构 还
总 现 发 为 术 单纯 这
样 发挥 终 2 识 础 构 义 术 组 应 础
专业 团队 运转 础
- 2. Long long ago ...
Sunday, September 25, 2011
团队职 值 顾 职 经历 样 转变
这 转变 过 释 团队 转变过 职 值还
页 实现
- 3. Long long ago ...
团队 职 转变 发
页 应
实现 创
浏览
Sunday, September 25, 2011
团队职 值 顾 职 经历 样 转变
这 转变 过 释 团队 转变过 职 值还
页 实现
- 4. Long long ago ...
团队 职 转变 发
页 应
实现 创
浏览
实现 浏览 页 发 创 应
Sunday, September 25, 2011
团队职 值 顾 职 经历 样 转变
这 转变 过 释 团队 转变过 职 值还
页 实现
- 6. 发挥 团队 职
Sunday, September 25, 2011
须 师 设计师 实现 补设计师 产 经 术 这
发 发 术 间环节 发环 统 发 设
计 过 时 现 术 2 专业团队 这 专业 带 长时间 术积 带 3
过 术 础 发 带动团队 运转 过 这 术 础 变 术
结 带 术 续创
- 7. 发挥 团队 职
专业团队
运转
术
术 续创
Sunday, September 25, 2011
须 师 设计师 实现 补设计师 产 经 术 这
发 发 术 间环节 发环 统 发 设
计 过 时 现 术 2 专业团队 这 专业 带 长时间 术积 带 3
过 术 础 发 带动团队 运转 过 这 术 础 变 术
结 带 术 续创
- 8. 础 构
Sunday, September 25, 2011
谈论 “ 础 构” 这 术 “ 础 构” 应 这
术 发 导 术 细节 发挥
项 发 创 应 术 术 识 积 3 团结
调剂 术 跃 领 4 术 让 发 缝结 见 义
- 9. 础 构
团队运 规 统
Sunday, September 25, 2011
谈论 “ 础 构” 这 术 “ 础 构” 应 这
术 发 导 术 细节 发挥
项 发 创 应 术 术 识 积 3 团结
调剂 术 跃 领 4 术 让 发 缝结 见 义
- 10. 础 构
团队运 规 统
• 发 贡 术
• 术 项 实 积 术
• 众 项 发 础 发 为
• 术 术 缝结 发挥 术
Sunday, September 25, 2011
谈论 “ 础 构” 这 术 “ 础 构” 应 这
术 发 导 术 细节 发挥
项 发 创 应 术 术 识 积 3 团结
调剂 术 跃 领 4 术 让 发 缝结 见 义
- 12. 应 发 - Skeleton
Flash
库 - zepto onering
综 - jQuery Mobile / jQtouch
动应
UI
UI
JS 统 (jQuery Template/Mustache)
组 组
MVC (Backbone)
jQuery
应 预发 环
common-mixin libs
core.css / grid.css
测试环
base.html
库/
库 发环
报
载
监测
javascript : bit.ly/douban-javascript
Do.js
css : bit.ly/douban-css
JS单 测试 oz.js 运 监测 发环
动 测试 CSS预处 SCSS+Compass 码风 Guidelines
测试
块 赖 / / 访问
YUICompressor
Douban-JSLint
术
图 损压缩 CSSLint
训
态 预编译 质检验
项
码
规 统
础 构
Sunday, September 25, 2011
颗树 础 构 设 长 过 结 构 术
结
- 14. 质产 验
块 预处 维护 报
线风险 监测
认
运 监测
JS单 测试
动 测试
CSS预处 (SCSS+Compass)
测试 块 赖
YUICompressor
Douban-JSLint
图 损压缩 CSSLint
态 预编译
质检验
码
Sunday, September 25, 2011
规 统 块 们 间 紧 联 为 实规 证 质 统
联 发环 mission 为 质 产 验 这 组
码 为 码 块 组织 为简 预处 达 维护 质检验
证 码 们约 统 码Guidelines 测试 为 规 风险 线 运 监测 为 运营过
- 15. Javascript
预处 统
Sunday, September 25, 2011
们 务 对 论 联还 联 js css 进 块 组织 这 @import 编译语
发环 这样 线 编译 CDN
- 16. CSS
预处 统
OOCSS + SCSS
+
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue; Douban-UI CSS3-MIXIN
color:
darken($blue, 9%);
}
pySCSS
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Sunday, September 25, 2011
css @import编译语 还 SCSS语 Compass CSS3 Mixin Library 简 发 发
们还 进 OOCSS 为Douban-UI 对 进 对
样 库
- 17. 应 发 - Skeleton Flash
库 - zepto onering
综 - jQuery Mobile / jQtouch
动应
UI
UI
组 组 JS 统 (jQuery Template/Mustache)
MVC (Backbone)
jQuery 应
common-mixin libs
core.css / grid.css
base.html
库/
库
码资
载 拥 补
Do.js 应 构设计&
oz.js 应 组
动 发领
Sunday, September 25, 2011
库 LESS
为 码资 发拥 术 项 发
术 结 发
块 赖 补 库 样 视应 构 设计 应 这
统 MVC 动 发 为 们 组 Zepto jQuery
图 损压缩
发 ( 构 师) 发 onering webkit html5 应 发
- 18. javascript : bit.ly/douban-javascript
css : bit.ly/douban-css
码风 Guidelines
/ / / 访问
术
训
简 实 查
检验
规 术
Sunday, September 25, 2011
规 础 规 应 备 时 检验 测试 们 CI Douban-JSLint 这
们 规 JSLint 时 发环 检 术 积
习资 结 训 团队 时 们 欢 师 码 们
样 这 让协 们 过规 槛 扫
- 19. 预发 环
测试环
发环
协 发环
间环节 发环
项
项
统
Sunday, September 25, 2011
们 发环 环 协 发 间环节 发 师 订 发
URL 对应 规 Ajax 说 发 终 实现
拟输 实现 诸 Charles 发 项
协 头 Ticket 启动 发 这 过 简
- 20. 发
统 统 联
协
Sunday, September 25, 2011
发 为 证产 质 该 环节还
统 统 动 时
- 22. &A
Blog: hikejun.com/blog
GTalk: Listenpro@gmail.com
Twitter: kejunz
Douban:douban.com/people/listenpro
Sunday, September 25, 2011