Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Front-EndModular & Automated   Developmenthttp://tinyurl.com/josephj-hinet-frontend                  / josephj /          ...
/josephj               sfasdf• 2.5  Yahoo!• 0.5  YDN• 1• 1.5   ~  miiiCasa
http://josephj.com                     Solution
没           29    2008    5           27
D-LinkD-Link
miiiCasa = WWW + Device =                               •                               •                               • ...
miiiCasa Spacehttp://www.miiicasa.com/space                        Device
miiiCasa Barhttp://tw.yahoo.com              http://www.google.com.tw                      http://*                       ...
D-Link...
D-Link
Software Engineer       Project Manager Service Engineer     System Architect         DBAFront-end Engineer    QA Engineer...
HTML/CSS/JavaScript                  (
•    Fiddler Debugging Proxy•        HTML, CSS, JavaScript•    Nicholas Zakas, “Make it difficult to make    mistakes.“   ...
-2• YUI 3      YUI Sexy Part !
1.Eliminating environment difference
...JavaScript   Host        AJAX  PHP               RD
...
•                              Host Name•           Alpha     QA    Staging    Production      Host Name•                 ...
miiiCasa•                      /etc/hosts•        内                Host Name    www.miiicasa.com, api.miiicasa.com,    a.m...
1:                     Host Name            devm1.corp.miiicasa.com:5002*Development            devm1.corp.miiicasa.com:50...
Host       Port   5002*
host Port
Proxy PAC   FF   Chrome   换    没
Fiddler CharlesVirtual Proxy
Charles     FiddlerCharlesFiddler                        Windows           Fiddler                     Fiddler
Fiddler Debugging Proxy    - http://tinyurl.com/josephj-fiddler           Fiddler Debugging Proxy               / josephj ...
CSS             内            /var/www/static/home/style.cssHTTP             http://a.mimgs.com/home/style.css  /var/www/st...
CSS             内#mod .bd {    background: url(bg_empty.png);}#mod .bd {    background: url(/home/bg_empty.png);}#mod .bd ...
CSS                                                                       //var/www/static/miiicasa/miiicasa.csshttp://a.m...
Server         /etc/hosts  DB Access   Model
QA    Producer   Fiddler                           Host   PackageShell Script       Host Name
1.1
DIV  Modular Development
Modular Development                   DIV      HTML   CSS JS
yhtw_mastheadykpmtykpsbykpimt                   ykpadvykpimqa         ykpimr                         ykpugykpiht          ...
HTML     <div id=”nav”>         <div class=”hd”>             <h2>    </h2>         </div>ID       <div class=”bd”>        ...
ykpsb• ykp      +    prefix• sb    search box•       inc/search_box.php
id          CSS              namespaceform                               .extra[HTML]                           [CSS]     ...
_photo_filter.php                  _photo_filter.css                  _photo_filter.js_photo_view.php_photo_view.css_photo_vi...
HTML -         HTML
CSS -        CSS
JavaScript -               JavaScript
• HTML                      include• CSS :    ID Selector      CSS                                      30          30    ...
Request
static.php -                    JS/CSS               key -                  is_top:    </head>         </body>            ...
static.php            CSS/JS       Request                 10    CSS Request                                     19   Java...
Mini Tool                                                              缩                                                  ...
Mini   XML                      $DEV_ROOT              Apache VirtualHost                                  Mini module    ...
经过 Mini         压缩/mini?module=<Mini module>&type=<css|js>
内&nominify
static.php  29   Request
Request   Orz...
static.php...           29   Request           2    Request
Request
Mini    CSS/JavaScript
MiniStatif File  Web Server               PHP                           CSS/JS      Deploy                                ...
JavaScript    JavaScript                 Function   Object       mod A            mod B                        mod C
window.mods[“photo-show”] = {  showPhoto : function (src) {    ....  }}                                 window.mods[“photo...
(             )(          )                                                 (   )    http://www.flickr.com/photos/vincentte...
(                                       )                  (              )http://www.flickr.com/photos/acaben/2477822120/
Nicholas Zakas
JavaScripthttp://www.slideshare.net/nzakas/scalable-javascript-application-architecture
Loose Couplinghttp://www.thesoftwaredevotional.com/images/coupling_train.jpg                                              ...
Broadcast & Listen            Hub
http://www.flickr.com/photos/nadesign/4324782791/
Module -                                       Static         Instance      Instance      Instance      Module        Modu...
Core -                     Core                                             Static                                       S...
Sandbox -                                          API                                                 Core               ...
_photo_list.js       Y.Core.register("photo-list", {           //           init: function (api) {               //       ...
Demohttp://josephj.com/project/javascript-platform-yui-demo
miiiCasa   CodeIgniter   PHP Framework            HMVC Library
http://www.miiicasa.com/my
http://www.miiicasa.com/my                    CodeIgniter      controller ~/miiicasa/index/my/controllers/index.php       ...
http://www.miiicasa.com/my
http://www.miiicasa.com/my     Controller ~/miiicasa/index/common/controllers/_masthead.php         Views ~/miiicasa/index...
http://www.miiicasa.com/my                     Controller ~/miiicasa/index/common/controllers/_masthead.php               ...
API(   )        Unit Test
Make it difficult to make mistakes
jos ephj           http://www.flickr.com/photos/eye1/3184963395/                                          by Ivan Mlinaric
Guidelines
As a team
...
Winchester Househttp://www.crockford.com/codecamp/quality.ppt
Guideline            Guideline
Guideline            ...
Code Review   没              ...
0   1
1. Commit/Push    Commit/Push        Hook•   JSLint :       JavaScript Good Parts•   PHP CodeSniffer :     Code Convention...
document.write          can be form of evalJSLint
.rule {                           attr: value;                        }PHP CodeSniffer (a.k.a phpcs)
Visual Designer                PSD F2EPNG8             Web          FireworksAlpha Transparency (          )
Photoshop   PSD
Firework
没
OptImg:                      46%     Image Optimization
给 Commit
1. Commit/Push    Guideline
2. Packaging                      ... F2E                   Maintenance        Performance    Security       (Packaging)
2. Packaging•   JS/CSS    miii_index_d38eba51136ed0bf6d159770853b393b.css          CSS•   Static          CSS•   CSS      ...
pkg_create         JS/CSS                      Mini                     pkg_deploypkg_create & pkg_deploy
2. Packaging                      CSS/JS        CSS Sprites      DataURI/MHTML
Review••                  Performance•         Performance
•   JavaScript Module Platform @ GitHub    http://github.com/josephj/javascript-platform-yui    •   Online Demo        htt...
Thank You                                                    so muchiii                                                   ...
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
Upcoming SlideShare
Loading in …5
×

建立前端開發團隊 - 2011 中華電信訓練所版

7,448 views

Published on

Published in: Technology, Business
  • Be the first to comment

建立前端開發團隊 - 2011 中華電信訓練所版

  1. 1. Front-EndModular & Automated Developmenthttp://tinyurl.com/josephj-hinet-frontend / josephj / Cloud Connected Inc.
  2. 2. /josephj sfasdf• 2.5 Yahoo!• 0.5 YDN• 1• 1.5 ~ miiiCasa
  3. 3. http://josephj.com Solution
  4. 4. 没 29 2008 5 27
  5. 5. D-LinkD-Link
  6. 6. miiiCasa = WWW + Device = • • • • • SNS http://josephj.com/entry.php?id=348
  7. 7. miiiCasa Spacehttp://www.miiicasa.com/space Device
  8. 8. miiiCasa Barhttp://tw.yahoo.com http://www.google.com.tw http://* miiiCasa
  9. 9. D-Link...
  10. 10. D-Link
  11. 11. Software Engineer Project Manager Service Engineer System Architect DBAFront-end Engineer QA Engineer QA Tester System Analyzer Operation Engineer (Y!) 没 够
  12. 12. HTML/CSS/JavaScript (
  13. 13. • Fiddler Debugging Proxy• HTML, CSS, JavaScript• Nicholas Zakas, “Make it difficult to make mistakes.“ Performance optimg + dataurize
  14. 14. -2• YUI 3 YUI Sexy Part !
  15. 15. 1.Eliminating environment difference
  16. 16. ...JavaScript Host AJAX PHP RD
  17. 17. ...
  18. 18. • Host Name• Alpha QA Staging Production Host Name• Host Name•• CSS/JS
  19. 19. miiiCasa• /etc/hosts• 内 Host Name www.miiicasa.com, api.miiicasa.com, a.mimgs.com• RD Linux• RD Fiddler• CSS 内 URL /• Deploy Shell Script Host
  20. 20. 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
  21. 21. Host Port 5002*
  22. 22. host Port
  23. 23. Proxy PAC FF Chrome 换 没
  24. 24. Fiddler CharlesVirtual Proxy
  25. 25. Charles FiddlerCharlesFiddler Windows Fiddler Fiddler
  26. 26. Fiddler Debugging Proxy - http://tinyurl.com/josephj-fiddler Fiddler Debugging Proxy / josephj / Cloud Connected Inc.
  27. 27. CSS 内 /var/www/static/home/style.cssHTTP http://a.mimgs.com/home/style.css /var/www/static/home/bg_empty.png#mod .bd { background: url(bg_empty.png);} CSS#mod .bd { background: url(/home/bg_empty.png);}#mod .bd { background: url(http://a.mimgs.com/home/bg_empty.png);}
  28. 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);} Performance CSS CSS
  29. 29. CSS //var/www/static/miiicasa/miiicasa.csshttp://a.mimgs.com/miiicasa/miiicasa.css sp_ico_misc.png CSS http://a.mimgs.com/combo?miiicasa/miiicasa.css&foo/foo.css
  30. 30. Server /etc/hosts DB Access Model
  31. 31. QA Producer Fiddler Host PackageShell Script Host Name
  32. 32. 1.1
  33. 33. DIV Modular Development
  34. 34. Modular Development DIV HTML CSS JS
  35. 35. yhtw_mastheadykpmtykpsbykpimt ykpadvykpimqa ykpimr ykpugykpiht ykpiht
  36. 36. 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>
  37. 37. ykpsb• ykp + prefix• sb search box• inc/search_box.php
  38. 38. id CSS namespaceform .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>
  39. 39. _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
  40. 40. HTML - HTML
  41. 41. CSS - CSS
  42. 42. JavaScript - JavaScript
  43. 43. • HTML include• CSS : ID Selector CSS 30 30 Request• JavaScript : CSS
  44. 44. Request
  45. 45. static.php - JS/CSS key - is_top: </head> </body> is_noscript, media
  46. 46. static.php CSS/JS Request 10 CSS Request 19 JavaScript Request
  47. 47. Mini Tool 缩 CSS/JShttp://www.flickr.com/photos/prettypony/2644225789/
  48. 48. Mini XML $DEV_ROOT Apache VirtualHost Mini module CSS JS module module exclude index CSS/JS
  49. 49. 经过 Mini 压缩/mini?module=<Mini module>&type=<css|js>
  50. 50. 内&nominify
  51. 51. static.php 29 Request
  52. 52. Request Orz...
  53. 53. static.php... 29 Request 2 Request
  54. 54. Request
  55. 55. Mini CSS/JavaScript
  56. 56. MiniStatif File Web Server PHP CSS/JS Deploy s * md5_file() stamping 减 CDN
  57. 57. JavaScript JavaScript Function Object mod A mod B mod C
  58. 58. 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!
  59. 59. ( )( ) ( ) http://www.flickr.com/photos/vincentteeuwen/2816245519/
  60. 60. ( ) ( )http://www.flickr.com/photos/acaben/2477822120/
  61. 61. Nicholas Zakas
  62. 62. JavaScripthttp://www.slideshare.net/nzakas/scalable-javascript-application-architecture
  63. 63. Loose Couplinghttp://www.thesoftwaredevotional.com/images/coupling_train.jpg 组 组
  64. 64. Broadcast & Listen Hub
  65. 65. http://www.flickr.com/photos/nadesign/4324782791/
  66. 66. Module - Static Instance Instance Instance Module Module Module Static Static Static • •
  67. 67. Core - Core Static Static Class Module Module Module Static Static Static• (register)• (start, stop)• (match)
  68. 68. Sandbox - API Core Staticmatch(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
  69. 69. _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); } });
  70. 70. Demohttp://josephj.com/project/javascript-platform-yui-demo
  71. 71. miiiCasa CodeIgniter PHP Framework HMVC Library
  72. 72. http://www.miiicasa.com/my
  73. 73. http://www.miiicasa.com/my CodeIgniter controller ~/miiicasa/index/my/controllers/index.php views ~/miiicasa/index/my/views/index.php CodeIgniter
  74. 74. http://www.miiicasa.com/my
  75. 75. 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
  76. 76. 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/_mastheadvim -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
  77. 77. API( ) Unit Test
  78. 78. Make it difficult to make mistakes
  79. 79. jos ephj http://www.flickr.com/photos/eye1/3184963395/ by Ivan Mlinaric
  80. 80. Guidelines
  81. 81. As a team
  82. 82. ...
  83. 83. Winchester Househttp://www.crockford.com/codecamp/quality.ppt
  84. 84. Guideline Guideline
  85. 85. Guideline ...
  86. 86. Code Review 没 ...
  87. 87. 0 1
  88. 88. 1. Commit/Push Commit/Push Hook• JSLint : JavaScript Good Parts• PHP CodeSniffer : Code Convention PHP JavaScript CSS• OptImg Commit !
  89. 89. document.write can be form of evalJSLint
  90. 90. .rule { attr: value; }PHP CodeSniffer (a.k.a phpcs)
  91. 91. Visual Designer PSD F2EPNG8 Web FireworksAlpha Transparency ( )
  92. 92. Photoshop PSD
  93. 93. Firework
  94. 94.
  95. 95. OptImg: 46% Image Optimization
  96. 96. 给 Commit
  97. 97. 1. Commit/Push Guideline
  98. 98. 2. Packaging ... F2E Maintenance Performance Security (Packaging)
  99. 99. 2. Packaging• JS/CSS miii_index_d38eba51136ed0bf6d159770853b393b.css CSS• Static CSS• CSS DataURI/MHTML CSS Sprites
  100. 100. pkg_create JS/CSS Mini pkg_deploypkg_create & pkg_deploy
  101. 101. 2. Packaging CSS/JS CSS Sprites DataURI/MHTML
  102. 102. Review•• Performance• Performance
  103. 103. • 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
  104. 104. Thank You so muchiii Any Questions? josephj6802@gmail.comhttp://www.flickr.com/photos/phploveme/2847931240/

×