1. Front-end
Dev Environment
Ting-yu Chiang / josephj
josephj.com / josephj6802@gmail.com

2. /蒋
开 来
• 2.5
师
• 0.5
开发 传
• 1
师

3. 热爱 认为
Solution 讨论 来

4. 没
环岛
29
2008 5
27

5. 为 个 员 实 运
关 ( 国语 学 )
却进 别 挤 头 进
见识 软

6. 现 职
D-Link muchiii Team
D-Link 现 设备
联 务 强 户 关联

7. 为 决 进 D-Link
当时 觉 产 来 没预 ...

8. 为 D-Link 过 没 联 开发经验 进
没 从 开 开 开发环 决
软

9. Software Engineer Project Manager
Service Engineer System Architect DBA
Front-end Engineer QA Engineer QA Tester
System Analyzer Operation Engineer
这 Yahoo! 没 会 为
专门负责 团队...
务 决 决 够 变现 环
会

10. 过 发现 欢
纯 HTML/CSS/JavaScript 经
结 术让 够 (
碍 组 维护 现 热

11. Azure Firmware
Flash
I18N/L10N PEAR
CMS Apache Module Hardware
Android Win32 Objective C
Embedded System ChromeOS
Server-side Script
励 师 领
为 师 师

12. 开发环 -
• 减 环
码 断环 设 档
• 块 开发
HTML CSS JS 块开发
• 让 错变 难
Nicholas Zakas “Make it difficult to make
mistakes.“

13. 1. 减 环
eliminate environment difference

14. 断环 过 ...
JavaScript 断 Host 决 图档 AJAX 径
PHP 断 径 连 RD 样画 芦

15. 类 断
环 给 设 档

16. 环 开发 员数 语 类
让这 断 码 设 档 来 难 维
护 错 难 ...

17. 没 办
码 断环 设 档 写 环

18. 问题 1 : Host Name
devm1.corp.muchiii.com:5002*
Development
devm1.corp.muchiii.com:50029
devm1.corp.muchiii.com
Alpha
static.devm1.corp.muchiii.com
img[n].staging.bar.tw1.corp.muchiii.com
Staging
w[n].staging.bar.tw1.corp.muchiii.com
www.muchiii.com
Production
a.mimgs.com
Commit 码
仅 组态档 写 环

19. 对开发 员来说
开发 Host 对应

20. 见 host 档
换 烦 Port Protocol 对应

21. Proxy PAC 档 FF Chrome 换
没办 浏览

22. 经过 寻
发现 Fiddler Charles Debugging Proxy
这类虚拟 软 们
对应 环

23. 实际
Charles Debugging Proxy 对应 devm1.corp.muchiii.com:50020

24. Fiddler 还
Fiddler 这类 软 还 应
1. 协 AJAX
2. 协 开发时 图 传 务
3. 惯
4. 变浏览 顺
5. 拟 环
为 个 师 Fiddler 备

25. 线 错 Online Debugging
将 线 CSS baidu.css

26. 帮 东
没 Firebug YUI Console
页 湾 欢

27. CSS 档内 图档 径写
实际 径 /var/www/muchiii/static/home/style.css
HTTP 请 径 http://a.mimgs.com/home/style.css
#mod .bd {
background: url(bg_empty.png);
}
#mod .bd {
background: url(/home/bg_empty.png);
}
#mod .bd {
background: url(http://a.mimgs.com/home/bg_empty.png);
}

28. CSS 档内 图档 径写
#mod .bd {
background: url(bg_empty.png);
}
#mod .bd {
background: url(/home/bg_empty.png);
}
#mod .bd {
background: url(http://a.mimgs.com/home/bg_empty.png);
}
为 将 个 CSS 档
届时 CSS 将会 录
对 径 会 图档 径错误
过 杂 错
们 规

29. 1.1 结语
规 尽 减 码 环
让 维护 来 轻

30. 2. 块 开发
Modular Development

31. Modular Development
块 页开发
页 为开发逻辑
开发 个个 独 运 Div 块
独 HTML CSS JavaScript Controller 档

33. 寻 块
_photo_filter.php
_photo_filter.css
_photo_filter.js
显 块
_photo_view.php
_photo_view.css
_photo_view.js
块
_photo_list.php
_photo_list.css
_photo_list.js

34. 许 块档 (HTML)
独 HTML 档

35. 许 块档 CSS
独 CSS 档

36. 许 块档 JavaScript
独 JS 档

37. 块 难点
• HTML 决 include
Performance 响
• CSS : id 当 namespace
个 组 个档 页 30 个 组 会
30 个 requests 对 响
• JavaScript : CSS 样会 request
问题 个 组 沟

38. static.php 设 页 CSS/JS
$key - PHP Module 称 or 页 称
is_top: </head> </body>
还 is_noscript, media 属 设

39. 虽 static.php 块 CSS/JS 档 连 来
务 请 过 对 冲击
10 个 CSS Request
19 个 JS Request

40. Mini Tool
将 码缩
个 CSS/JS 档
开发环
档 担 问题
http://www.flickr.com/photos/prettypony/2644225789/

41. Mini XML 设 档 刚 设 这
寻 档 义 个
$DEV_ROOT 设 Apache VirtualHost 环 变数
个 module 会 CSS JS 档
module module exclude 个档
index CSS/JS 块档

42. 经过 Mini 压缩
/mini?module=[Mini 块 称]&type=[css js]

43. 观 压缩 内
&nominify

44. 长 static.php
29 个 Request

45. 页 Request 数

46. 简过 static.php
29 个 Request
2 个 Request

47. 页 Request 减

48. 过 Mini 设 档 将 独 CSS/
JavaScript 档 达

49. Mini 环 静
态档 务 Server-Side Script
会对 冲击
线 CSS/JS 变 个静态档
s
* md5_file() 检 档 内 产 stamp
减 CDN 档

50. JavaScript 块沟
JavaScript 块为单
独 Function Object
统 沟 战
mod A mod B
mod C

51. 满
显 张图 户 单 资
毕
显 点选 图
户点选
显 张图
选 动
户点选 图

52. window.mods[“photo-show”] = {
showPhoto : function (src) {
....
}
} 会 变 决问题
户点选
window.mods[“photo-list”] = {
init : function () {
...
$(“img”).on(“click”, function(e) {
window.mods[“photo-show”].showPhoto(this.src);
}
当 显 块没 页
} 时 块 现 Bug!

53. 们 员( 块) 们
场 (页 ) 赛( )
http://www.flickr.com/photos/vincentteeuwen/2816245519/

54. 纪 ( 变数)
将 员( 块) 间 冲
http://www.flickr.com/photos/acaben/2477822120/

55. 页 师 Nicholas Zakas 启发
师 这 PPK on JavaScript

56. 稳 JavaScript 应
http://www.slideshare.net/nzakas/scalable-javascript-application-architecture

57. Loose Coupling
组 关
http://www.thesoftwaredevotional.com/images/coupling_train.jpg
当页 个 块
将 会 组 结 样 为
将 让 组 沟 动
时 会 响 沟 组

58. Broadcast & Listen
组沟 类 Hub
broadcast 个 Client 会 讯
listen Client 兴 讯 处

59. 电脑发 讯 电脑 会
电脑 处 兴 讯

60. Broadcast & Listen
组沟 类 Hub
个 Client 内 时 会 Client 错
个 块 页 时 会 块 页
http://www.directsystems.com/support/switchvshub.php

61. 块 独 运 类
页
http://www.flickr.com/photos/nadesign/4324782791/

62. 废话 说 来 实

63. 个 个
• Y.Core.register() :
让个别 块 册
• Y.Core._match() :
组间 对应
Core
• Y.Core._addListener() :
个 组 记

64. 块 API
• oAPI.listen() :
mod mod mod
让 块 个
API • oAPI.broadcast()
让 块发 个
Core
• oAPI.getNode() :
块 DOM 参

65. _photo_list.js 块 JavaScript
资 Y.Core.register("photo-list", {
毕
// 块
显 张图 满 init: function (api) {
// 这个 块 兴 两 讯
api.listen("photo-filter-submit");
api.listen("photo-filter-response");
this.api = api;
},
户 单 // 块 页 ContentReady
onload: function () {
// 诉 Core 毕 张图 径
this.api.broadcast("photo-list-rendered", img.src);
},
// 块 讯
onmessage: function (eventType, callerName, data) {
switch (eventType) {
case "photo-filter-response" :
// 满
break;
case "photo-filter-submit" :
//
break;
}
},
_updateUI: function (data) {
// 诉 Core 毕 张图 径
this.api.broadcast("photo-list-rendered", img.src);
}
});

66. Demo
http://josephj.com:50010

67. 结语
块开发让开发 专 单 开发
烦恼 页 杂 测试
块为单 独 测试 Unit Test 个
TestCase Scope

68. 3. 让 错变 难
Make it difficult to make mistakes

69. 从 开 处 抢 赢

70. 个来
说
j os ephj
http://www.flickr.com/photos/eye1/3184963395/
by Ivan Mlinaric

71. 开 许 Guidelines

73. 时 难 话
GM Meeting 时 级领导对 们 质 质
As a F2E team 们

74. 软 开发团队 须 规
设计
码 质

75. 规 开发 员
设 况 会 ...

76. 烟囱 盖 顶
这 叠
Winchester House
http://www.crockford.com/codecamp/quality.ppt

77. Guideline 错 贴 积
习难 阳 阴违 个 对 习惯
将 Guideline

78. 当 Guideline 会
遗 个团队 码 质开 乱...

79. Code Review 个 许 时
间 没办 办 发现 问题
协 ...

80. 软 开发 应该 协
电脑 0 1吗

81. • Commit 会 检 没 过 过关
• 执 JSLint : JavaScript Good Parts
• 执 PHP CodeSniffer : 订 码标 检
PHP JavaScript CSS
• Packaging 会
• 执 Image Optimization (Smush.it)
图
• 没 压缩过 JavaScript CSS 会

82. document.write
can be form of eval
JSLint

83. .rule {
attr: value;
}
PHP CodeSniffer (a.k.a phpcs)

84. 们 Visual Designer
负责 PSD 档
F2E 处 图档 问题
PNG8 认 Web
Fireworks 转换
Alpha Transparency

85. 图 开 VD PSD...

86. 将 PNG8 转换

87. 这样 费 没 义

88. 个 帮
图档 总频宽 46%
Image Optimization

89. 给 Commit

90. pkg_create
JS/CSS 档
档 档 会 变 Mini
码 host 称
(www.muchiii.com -> devm1.corp.muchiii.com)
pkg_create & 线 pkg_deploy

91. 动 让 协 错误 会 发

92. Review
• 减 环
规 减 环 产 码
质
• 块 开发
让 个 块独 来 减 争议 让
组 沟
• 让 错变 难
过 动 减 费 时间
个 错

93. 开发 http://josephj.com:50010
线 http://modev.josephj.com
规 码 础
过 够 荡

94. Thank You
so muchiii
Any Questions?
josephj6802@gmail.com
http://www.flickr.com/photos/phploveme/2847931240/