Front-end Modular & Autmomated Development

6,370 views

Published on

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

No Downloads
Views
Total views
6,370
On SlideShare
0
From Embeds
0
Number of Embeds
1,386
Actions
Shares
0
Downloads
134
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Front-end Modular & Autmomated Development

  1. 1. Front-End Modular & Automated Development / josephj / http://josephj.com / josephj6802@gmail.com
  2. 2. D-Link D-Link
  3. 3. D-Link ...
  4. 4. D-Link
  5. 5. Software Engineer Project Manager Service Engineer System Architect DBA Front-end Engineer QA Engineer QA Tester System Analyzer Operation Engineer (Y!) 没 够
  6. 6. HTML/CSS/JavaScript (
  7. 7. Azure Firmware Flash I18N/L10N PEAR CMS Apache Module Hardware Android Win32 Objective C Embedded System Server-side Script
  8. 8. • HTML, CSS, JavaScript • Nicholas Zakas, “Make it difficult to make mistakes.“
  9. 9. DIV Modular Development
  10. 10. Modular Development DIV HTML CSS JS
  11. 11. _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
  12. 12. HTML - HTML
  13. 13. CSS - CSS
  14. 14. JavaScript - JavaScript
  15. 15. • HTML include • CSS : ID Selector CSS 30 30 Request • JavaScript : CSS
  16. 16. Request
  17. 17. static.php - JS/CSS key - is_top: </head> </body> is_noscript, media
  18. 18. static.php CSS/JS Request 10 CSS Request 19 JavaScript Request
  19. 19. Mini Tool 缩 CSS/JS http://www.flickr.com/photos/prettypony/2644225789/
  20. 20. Mini XML $DEV_ROOT Apache VirtualHost Mini module CSS JS module module exclude index CSS/JS
  21. 21. 经过 Mini 压缩 /mini?module=<Mini module>&type=<css|js>
  22. 22. 内 &nominify
  23. 23. static.php 29 Request
  24. 24. Request Orz...
  25. 25. static.php... 29 Request 2 Request
  26. 26. Request
  27. 27. Mini CSS/ JavaScript
  28. 28. Mini Statif File Web Server PHP CSS/JS Deploy s * md5_file() stamping 减 CDN
  29. 29. JavaScript JavaScript Function Object mod A mod B mod C
  30. 30. 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!
  31. 31. ( ) ( ) ( ) http://www.flickr.com/photos/vincentteeuwen/2816245519/
  32. 32. ( ) ( ) http://www.flickr.com/photos/acaben/2477822120/
  33. 33. Nicholas Zakas
  34. 34. JavaScript http://www.slideshare.net/nzakas/scalable-javascript-application-architecture
  35. 35. Loose Coupling http://www.thesoftwaredevotional.com/images/coupling_train.jpg 组 组
  36. 36. Broadcast & Listen Hub
  37. 37. Module - Static Instance Instance Instance Module Module Module Static Static Static • •
  38. 38. Core - Core Static Static Class Module Module Module Static Static Static • (register) • (start, stop) • (match)
  39. 39. 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
  40. 40. _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); } });
  41. 41. Demo http://josephj.com/project/javascript-platform-yui-demo
  42. 42. Keep Going Extension API Method Language Extension
  43. 43. YUI Intl JS
  44. 44. 3. api.listen(“lang-change”) api.getTrans(<key>) ; 1. api.setLang(“jp-JP”); 2. api.broadcast(“lang-change”) YUI Intl JS
  45. 45. PHP JavaScript Language Key <?php $trans = get_trans(“lang-show_title”, “Focus Figure”, tokens); ?> <script> var trans = api.getTrans( “lang-show_message”, “Nice to see you, I am Tofu flower girl”, tokens); </script>
  46. 46. API ( ) Unit Test
  47. 47. Make it difficult to make mistakes
  48. 48. j os ephj http://www.flickr.com/photos/eye1/3184963395/ by Ivan Mlinaric
  49. 49. Guidelines
  50. 50. As a team
  51. 51. ...
  52. 52. Winchester House http://www.crockford.com/codecamp/quality.ppt
  53. 53. Guideline Guideline
  54. 54. Guideline ...
  55. 55. Code Review 没 ...
  56. 56. 0 1
  57. 57. 0 1
  58. 58. 1. Commit/Push Commit/Push Hook • JSLint : JavaScript Good Parts • PHP CodeSniffer : Code Convention PHP JavaScript CSS • OptImg Commit !
  59. 59. document.write can be form of eval JSLint
  60. 60. .rule { attr: value; } PHP CodeSniffer (a.k.a phpcs)
  61. 61. Visual Designer PSD F2E PNG8 Web Fireworks Alpha Transparency ( )
  62. 62. Photoshop PSD
  63. 63. Firework
  64. 64.
  65. 65. OptImg: 46% Image Optimization
  66. 66. 给 Commit
  67. 67. 1. Commit/Push Guideline
  68. 68. 2. Packaging ... F2E Maintenance Performance Security (Packaging)
  69. 69. 2. Packaging • JS/CSS miii_index_d38eba51136ed0bf6d159770853b393b.css CSS • Static CSS • CSS DataURI/MHTML CSS Sprites
  70. 70. pkg_create JS/CSS Mini pkg_deploy pkg_create & pkg_deploy
  71. 71. 2. Packaging CSS/JS CSS Sprites DataURI/MHTML
  72. 72. Review • Performance •
  73. 73. • 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
  74. 74. Finally...
  75. 75. Thank You so muchiii Any Questions? josephj6802@gmail.com http://www.flickr.com/photos/phploveme/2847931240/

×