建立前端开发团队 (Front-end Development Environment)

Front-end
Dev Environment

Ting-yu Chiang / josephj
josephj.com / josephj6802@gmail.com

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

热爱认为
Solution 讨论来

没

环岛
29
2008 5
27

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

现职

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

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

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

Software Engineer Project Manager

Service Engineer System Architect DBA

Front-end Engineer QA Engineer QA Tester

System Analyzer Operation Engineer

这 Yahoo! 没会为
专门负责团队...
务决决够变现环
会

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

Azure Firmware
Flash
I18N/L10N PEAR
CMS Apache Module Hardware

Android Win32 Objective C

Embedded System ChromeOS

Server-side Script

励师领
为师师

开发环 -

• 减环
码断环设档

• 块开发
HTML CSS JS 块开发

• 让错变难
Nicholas Zakas “Make it difficult to make
mistakes.“

1. 减环
eliminate environment difference

断环过 ...
JavaScript 断 Host 决图档 AJAX 径

PHP 断径连 RD 样画芦

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

没办
码断环设档写环

问题 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 码
仅组态档写环

对开发员来说
开发 Host 对应

见 host 档
换烦 Port Protocol 对应

Proxy PAC 档 FF Chrome 换
没办浏览

经过寻
发现 Fiddler Charles Debugging Proxy
这类虚拟软们

对应环

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

Fiddler 还
Fiddler 这类软还应

1. 协 AJAX
2. 协开发时图传务
3. 惯
4. 变浏览顺
5. 拟环

为个师 Fiddler 备

线错 Online Debugging

将线 CSS baidu.css

帮东

没 Firebug YUI Console

页湾欢

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(/https/www.slideshare.net/home/bg_empty.png);
}

#mod .bd {
background: url(http://a.mimgs.com/home/bg_empty.png);
}

CSS 档内图档径写
#mod .bd {
background: url(bg_empty.png);
}

#mod .bd {
background: url(/https/www.slideshare.net/home/bg_empty.png);
}

#mod .bd {
background: url(http://a.mimgs.com/home/bg_empty.png);
}

为将个 CSS 档
届时 CSS 将会录
对径会图档径错误
过杂错
们规

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

2. 块开发
Modular Development

Modular Development
块页开发

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

建立前端开发团队 (Front-end Development Environment)

寻块
_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

许块档 (HTML)

独 HTML 档

许块档 CSS

独 CSS 档

许块档 JavaScript

独 JS 档

块难点

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

static.php 设页 CSS/JS

$key - PHP Module 称 or 页称

is_top: </head> </body>

还 is_noscript, media 属设

虽 static.php 块 CSS/JS 档连来
务请过对冲击

10 个 CSS Request

19 个 JS Request

Mini Tool

将码缩
个 CSS/JS 档
开发环

档担问题

http://www.ﬂickr.com/photos/prettypony/2644225789/

Mini XML 设档刚设这

寻档义个
$DEV_ROOT 设 Apache VirtualHost 环变数

个 module 会 CSS JS 档

module module exclude 个档

index CSS/JS 块档

经过 Mini 压缩

/mini?module=[Mini 块称]&type=[css js]

观压缩内

&nominify

长 static.php

29 个 Request

简过 static.php

29 个 Request
2 个 Request

过 Mini 设档将独 CSS/
JavaScript 档达

Mini 环静
态档务 Server-Side Script
会对冲击

线 CSS/JS 变个静态档

s
* md5_ﬁle() 检档内产 stamp
减 CDN 档

JavaScript 块沟
JavaScript 块为单
独 Function Object
统沟战

mod A mod B

mod C

满

显张图户单资

毕
显点选图

户点选
显张图
选动

户点选图

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!

们员( 块) 们
场 (页 ) 赛( )

http://www.ﬂickr.com/photos/vincentteeuwen/2816245519/

纪 ( 变数)
将员( 块) 间冲

http://www.ﬂickr.com/photos/acaben/2477822120/

页师 Nicholas Zakas 启发

师这 PPK on JavaScript

稳 JavaScript 应

http://www.slideshare.net/nzakas/scalable-javascript-application-architecture

Loose Coupling
组关

http://www.thesoftwaredevotional.com/images/coupling_train.jpg

当页个块
将会组结样为
将让组沟动
时会响沟组

Broadcast & Listen
组沟类 Hub

broadcast 个 Client 会讯
listen Client 兴讯处

电脑发讯电脑会
电脑处兴讯

Broadcast & Listen
组沟类 Hub

个 Client 内时会 Client 错
个块页时会块页
http://www.directsystems.com/support/switchvshub.php

块独运类
页

http://www.ﬂickr.com/photos/nadesign/4324782791/

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

块 API

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

_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);
}
});

Demo
http://josephj.com:50010

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

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

个来
说

j os ephj

http://www.ﬂickr.com/photos/eye1/3184963395/
by Ivan Mlinaric

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

软开发团队须规
设计
码质

规开发员
设况会 ...

烟囱盖顶
这叠

Winchester House
http://www.crockford.com/codecamp/quality.ppt

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

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

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

软开发应该协
电脑 0 1吗

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

document.write
can be form of eval

JSLint

.rule {
attr: value;
}

PHP CodeSniffer (a.k.a phpcs)

们 Visual Designer
负责 PSD 档

F2E 处图档问题

PNG8 认 Web

Fireworks 转换
Alpha Transparency

个帮

图档总频宽 46%

Image Optimization

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

pkg_create & 线 pkg_deploy

动让协错误会发

Review
• 减环
规减环产码
质

• 块开发
让个块独来减争议让
组沟

• 让错变难
过动减费时间
个错

开发 http://josephj.com:50010

线 http://modev.josephj.com

规码础

过够荡

Thank You
so muchiii
Any Questions?
josephj6802@gmail.com

http://www.ﬂickr.com/photos/phploveme/2847931240/

建立前端开发团队 (Front-end Development Environment)

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 建立前端开发团队 (Front-end Development Environment) (20)

More from Joseph Chiang (20)

建立前端开发团队 (Front-end Development Environment)