建立前端开发团队 (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(/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(/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 档

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

页 Request 数

简过 static.php 29 个 Request 2 个 Request

页 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

开许 Guidelines

时难话 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

图开 VD PSD...

将 PNG8 转换

这样费没义

个帮图档总频宽 46% Image Optimization

给 Commit

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)

by Joseph Chiang on Jul 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 327

Statistics

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

http://josephj.com	205
http://www.josephj.com	47
http://josephjiang.com	42
http://static.slidesharecdn.com	21
http://www.techgig.com	9
http://www.slideshare.net	3