Your SlideShare is downloading. ×
建立前端開發團隊 - 2011 中華電信訓練所版
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

6,715
views

Published on

Published in: Technology, Business

0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,715
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
95
Comments
0
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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