More Related Content
Similar to 建立前端開發團隊 - 2011 中華電信訓練所版
Similar to 建立前端開發團隊 - 2011 中華電信訓練所版 (20)
More from Joseph Chiang (20)
建立前端開發團隊 - 2011 中華電信訓練所版
- 2. /josephj
sfasdf
• 2.5
Yahoo!
• 0.5
YDN
• 1
• 1.5 ~
miiiCasa
- 6. miiiCasa = WWW + Device =
•
•
•
•
• SNS
http://josephj.com/entry.php?id=348
- 11. Software Engineer Project Manager
Service Engineer System Architect DBA
Front-end Engineer QA Engineer QA Tester
System Analyzer Operation Engineer
(Y!) 没
够
- 13. Azure Firmware
Flash
I18N/L10N PEAR
CMS Apache Module Hardware
Android Win32 Objective C
Embedded System
Server-side Script
- 14. •
Fiddler Debugging Proxy
•
HTML, CSS, JavaScript
•
Nicholas Zakas, “Make it difficult to make
mistakes.“
- 20. • Host Name
• Alpha QA Staging
Production Host
• Host
•
• CSS/JS
- 21. miiiCasa
• /etc/hosts
• 内 Host Name
www.miiicasa.com, api.miiicasa.com,
a.mimgs.com
• RD Linux
• RD Fiddler
• CSS 内 URL /
• Deploy Shell Script Host
- 22. 1: Host Name
devm1.corp.miiicasa.com:5002*
Development
devm1.corp.miiicasa.com:50029
w1.alpha.corp.miiicasa.com
Alpha
img1.alpha.corp.miiicasa.com
www.staging.miiicasa.com
Staging
a.staging.mings.com
www.miiicasa.com
Production
a.mimgs.com
Commit
- 27. Charles Fiddler
Charles
Fiddler Windows
Fiddler
Fiddler
- 28. Fiddler Debugging Proxy
http://tinyurl.com/josephj-fiddler
Fiddler Debugging Proxy
/ josephj /
Cloud Connected Inc.
- 29. CSS 内
/var/www/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);
}
- 30. 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);
}
Performance CSS
CSS
- 31. CSS /
/var/www/static/miiicasa/miiicasa.css
http://a.mimgs.com/miiicasa/miiicasa.css
sp_ico_misc.png
CSS
http://a.mimgs.com/combo?miiicasa/miiicasa.css&foo/foo.css
- 32. Server
/etc/hosts
DB Access Model
- 33. QA Producer Fiddler
Host
Package
Shell Script Host Name
- 39. HTML
<div id=”nav”>
<div class=”hd”>
<h2> </h2>
</div>
ID <div class=”bd”> .hd, .bd, .ft
<p> </p> header body footer
</div>
<div class=”ft”>
<a href=”...”> ... </a>
</div>
</div>
- 40. ykpsb
• ykp + prefix
• sb search box
• inc/search_box.php
- 41. id CSS namespace
form .extra
[HTML] [CSS]
<style>
<div id=”ykpsb”>
#ykpsb {
<div class=”bd clearfix”>
margin-bottom:10px;
<form ...>
}
...
#ykpsb form {
</form>
float:left;
<div class=”extra”>
}
...
#ykpsb .extra {
</div>
float:right;
</div>
}
</div>
</style>
- 43. _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
- 47. • HTML include
• CSS : ID Selector CSS
30
30 Request
• JavaScript : CSS
- 49. static.php - JS/CSS
key -
is_top: </head> </body>
is_noscript, media
- 50. static.php CSS/JS
Request
10 CSS Request
19 JavaScript Request
- 51. Mini Tool
缩
CSS/JS
http://www.flickr.com/photos/prettypony/2644225789/
- 52. Mini XML
$DEV_ROOT Apache VirtualHost
Mini module CSS JS
module module exclude
index CSS/JS
- 53. 经过 Mini 压缩
/mini?module=<Mini module>&type=<css|js>
- 62. JavaScript
JavaScript
Function Object
mod A mod B
mod C
- 64. 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!
- 65. ( )
( ) ( )
http://www.flickr.com/photos/vincentteeuwen/2816245519/
- 66. ( )
( )
http://www.flickr.com/photos/acaben/2477822120/
- 73. Module -
Static
Instance Instance Instance
Module Module Module
Static Static Static
•
•
- 74. Core -
Core
Static
Static Class
Module Module Module
Static Static Static
• (register)
• (start, stop)
• (match)
- 75. Sandbox - API
Core
Static
match(caller, object)
Sandbox Sandbox Sandbox
Instance Instance Instance
listen(“need-love”) broadcast(“need-love”, object)
Module Module Module
Static Static Static
• Instance
• Core Sandbox
• Sandbox
• broadcast listen
- 76. _photo_list.js
Y.Core.register("photo-list", {
//
init: function (api) {
//
api.listen("photo-filter-submit");
api.listen("photo-filter-response");
this.api = api;
},
// ContentReady
onviewload: function () {
// Core
this.api.broadcast("photo-list-rendered", img.src);
},
//
onmessage: function (eventType, callerName, data) {
switch (eventType) {
case "photo-filter-response" :
this._updateUI() //
break;
`
case "photo-filter-submit" :
//
break;
}
},
_updateUI: function (data) {
// 诉 Core
this.api.broadcast("photo-list-rendered", img.src);
}
});
- 78. miiiCasa CodeIgniter PHP Framework
HMVC Library
- 80. http://www.miiicasa.com/my
CodeIgniter
controller ~/miiicasa/index/my/controllers/index.php
views ~/miiicasa/index/my/views/index.php
CodeIgniter
- 82. http://www.miiicasa.com/my
Controller ~/miiicasa/index/common/controllers/_masthead.php
Views ~/miiicasa/index/common/views/_masthead.php
JavaScript ~/miiicasa/static/index/common/_masthead.js
CSS /miiicasa/static/index/common/_masthead.css
_ div
partial component
- 83. http://www.miiicasa.com/my
Controller ~/miiicasa/index/common/controllers/_masthead.php
Views ~/miiicasa/index/common/views/_masthead.php
JavaScript ~/miiicasa/static/index/common/_masthead.js
CSS /miiicasa/static/index/common/_masthead.css
...
Shell Script
$ codeigniter open <CI Module>/_<div Module> #
$ codeigniter create <CI Module>/_<div Module> #
codeigniter open common/_masthead
vim -p /home/dev/joseph_chiang/miiicasa/index/modules/common/controllers/_masthead.php /home/dev/
joseph_chiang/miiicasa/index/modules/common/views/_masthead.php /home/dev/joseph_chiang/miiicasa/
static/common/_masthead.js /home/dev/joseph_chiang/miiicasa/static/common/_masthead.css
- 87. jos ephj
http://www.flickr.com/photos/eye1/3184963395/
by Ivan Mlinaric
- 98. 1. Commit/Push
Commit/Push Hook
• JSLint :
JavaScript Good Parts
• PHP CodeSniffer :
Code Convention PHP JavaScript CSS
• OptImg
Commit !
- 100. .rule {
attr: value;
}
PHP CodeSniffer (a.k.a phpcs)
- 105. OptImg:
46%
Image Optimization
- 108. 2. Packaging
...
F2E Maintenance
Performance Security
(Packaging)
- 109. 2. Packaging
• JS/CSS
miii_index_d38eba51136ed0bf6d159770853b393b.css
CSS
• Static
CSS
• CSS DataURI/MHTML
CSS Sprites
- 110. pkg_create
JS/CSS
Mini
pkg_deploy
pkg_create & pkg_deploy
- 114. • JavaScript Module Platform @ GitHub
http://github.com/josephj/javascript-platform-yui
• Online Demo
http://josephj.com/project/javascript-platform-yui-demo
• Demo Source @ GitHub
http://github.com/josephj/javascript-plaform-yui-demo
- 115. Thank You
so muchiii
Any Questions?
josephj6802@gmail.com
http://www.flickr.com/photos/phploveme/2847931240/
