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-End
Modular & Automated
   Development

                    / josephj /
     http://josephj.com / josephj6802@gmail....
D-Link
D-Link
D-Link

...
D-Link
Software Engineer       Project Manager

 Service Engineer     System Architect         DBA

Front-end Engineer    QA Engi...
HTML/CSS/JavaScript
                  (
Azure    Firmware
Flash
          I18N/L10N     PEAR
CMS     Apache Module    Hardware

Android      Win32    Objective C
...
•
        HTML, CSS, JavaScript

•
    Nicholas Zakas, “Make it difficult to make
    mistakes.“
DIV
  Modular Development
Modular Development




                   DIV
      HTML   CSS JS
_photo_filter.php
                  _photo_filter.css
                  _photo_filter.js




_photo_view.php
_photo_view.css
...
HTML -




         HTML
CSS -




        CSS
JavaScript -




               JavaScript
• HTML                      include


• CSS :    ID Selector      CSS
                                      30
          3...
Request
static.php -                    JS/CSS



               key -




                  is_top:    </head>         </body>


...
static.php            CSS/JS
       Request


                 10    CSS Request




                                     ...
Mini Tool


                                                              缩
                                              ...
Mini   XML



                      $DEV_ROOT              Apache VirtualHost



                                  Mini mo...
经过 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
Mini
Statif File  Web Server               PHP




                            CSS/JS     Deploy

                        ...
JavaScript
    JavaScript
                 Function   Object



       mod A            mod B




                        ...
window.mods[“photo-show”] = {
  showPhoto : function (src) {
    ....
  }
}




                                 window.mo...
(             )
(          )                                                 (   )




    http://www.flickr.com/photos/vin...
(                                       )
                  (              )




http://www.flickr.com/photos/acaben/247782...
Nicholas Zakas
JavaScript




http://www.slideshare.net/nzakas/scalable-javascript-application-architecture
Loose Coupling


http://www.thesoftwaredevotional.com/images/coupling_train.jpg




                                      ...
Broadcast & Listen
            Hub
Module -
                                       Static




         Instance      Instance      Instance



      Module  ...
Core -
                     Core
                                             Static

                                    ...
Sandbox -                                          API
                                                 Core
             ...
_photo_list.js
       Y.Core.register("photo-list", {
           //
           init: function (api) {
               //
  ...
Demo
http://josephj.com/project/javascript-platform-yui-demo
Keep Going

         Extension
          API Method


Language Extension
YUI Intl   JS
3.              api.listen(“lang-change”)
                 api.getTrans(<key>)      ;


                                  ...
PHP              JavaScript                    Language Key

<?php
$trans = get_trans(“lang-show_title”, “Focus Figure”, t...
API
(   )
        Unit Test
Make it difficult to make mistakes
j os ephj




            http://www.flickr.com/photos/eye1/3184963395/
                                           by Ivan ...
Guidelines
As a team
...
Winchester House
http://www.crockford.com/codecamp/quality.ppt
Guideline

            Guideline
Guideline
            ...
Code Review
   没
              ...
0   1
0   1
1. Commit/Push
    Commit/Push        Hook
•   JSLint :
       JavaScript Good Parts
•   PHP CodeSniffer :
     Code Conve...
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 (          )
Photoshop   PSD
Firework
没
OptImg:




                      46%




     Image Optimization
给 Commit
1. Commit/Push




    Guideline
2. Packaging
                      ...

 F2E                   Maintenance



        Performance    Security



       (P...
2. Packaging
•   JS/CSS
    miii_index_d38eba51136ed0bf6d159770853b393b.css

          CSS

•   Static
          CSS

•   ...
pkg_create
         JS/CSS
                      Mini




                     pkg_deploy




pkg_create & pkg_deploy
2. Packaging


                      CSS/JS
        CSS Sprites
      DataURI/MHTML
Review


•
         Performance


•
•   JavaScript Module Platform @ GitHub
    http://github.com/josephj/javascript-platform-yui


    •   Online Demo
      ...
Finally...
Thank You
                                                    so muchiii
                                                 ...
Front-end Modular & Autmomated Development
Front-end Modular & Autmomated Development
Front-end Modular & Autmomated Development
Front-end Modular & Autmomated Development
Front-end Modular & Autmomated Development
Front-end Modular & Autmomated Development
Front-end Modular & Autmomated Development
Front-end Modular & Autmomated Development
Upcoming SlideShare
Loading in …5
×

Front-end Modular & Autmomated Development

6,512 views

Published on

  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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/

×