$30 off During Our Annual Pro Sale. View Details »

NProxy——A Sharp Weapon for UI Developers

Goddy Zhao
September 01, 2012

NProxy——A Sharp Weapon for UI Developers

An introduction to NProxy(A cross-platform web proxy specialised in file replacing).
If you are seeking an alternative for Fiddler in Mac and Linux, NProxy will be your best choice. It is more powerful than Fiddler in the cases of file replacing.

Goddy Zhao

September 01, 2012
Tweet

More Decks by Goddy Zhao

Other Decks in Technology

Transcript

  1. NProxy
    A Sharp Weapon for UI Developers
    by Goddy Zhao

    View Slide

  2. Abstract
    Why NProxy
    What NProxy can do
    How to use NProxy
    Bonus Tool for SF Projects

    View Slide

  3. Why NProxy

    View Slide

  4. Why NProxy
    Workflow of UI development

    View Slide

  5. Why NProxy
    Workflow of UI development
    Development

    View Slide

  6. Why NProxy
    Workflow of UI development
    Development
    Deployment

    View Slide

  7. Why NProxy
    Workflow of UI development
    Development
    Deployment
    coding

    View Slide

  8. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    coding

    View Slide

  9. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    deploy
    coding

    View Slide

  10. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    deploy
    coding

    View Slide

  11. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    deploy
    coding coding

    View Slide

  12. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    ant deploy-css
    deploy
    coding coding

    View Slide

  13. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    ant deploy-css
    deploy deploy
    coding coding

    View Slide

  14. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    ant deploy-css
    deploy deploy
    coding coding

    View Slide

  15. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    ant deploy-css
    deploy deploy
    coding coding coding

    View Slide

  16. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    ant deploy-css
    ant deploy-css
    deploy deploy
    coding coding coding

    View Slide

  17. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    ant deploy-css
    ant deploy-css
    deploy deploy
    coding coding coding

    View Slide

  18. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    ant deploy-css
    ant deploy-css
    fail
    deploy deploy
    coding coding coding

    View Slide

  19. Why NProxy
    Workflow of UI development
    Development
    Deployment
    ant deploy-js
    ant deploy-css
    ant deploy-css
    fail
    deploy deploy
    coding coding coding
    blocked blocked blocked

    View Slide

  20. Why NProxy

    View Slide

  21. Why NProxy
    Production Environment

    View Slide

  22. Why NProxy
    Production Environment
    Code in Remote Server

    View Slide

  23. Why NProxy
    Production Environment
    Code in Remote Server
    JS files are compressed

    View Slide

  24. Why NProxy
    Production Environment
    Code in Remote Server
    JS files are compressed
    JS files are merged

    View Slide

  25. Why NProxy
    Hard to debug issues
    in production
    Production Environment
    Code in Remote Server
    JS files are compressed
    JS files are merged

    View Slide

  26. Why NProxy
    ?

    View Slide

  27. Why NProxy
    Proxy for replacing
    static files

    View Slide

  28. Why NProxy
    Requirements

    View Slide

  29. Why NProxy
    Support Mac, Linux and Windows(A)
    Requirements

    View Slide

  30. Why NProxy
    Support Mac, Linux and Windows(A)
    Requirements
    Support single file replacing (B)

    View Slide

  31. Why NProxy
    Support Mac, Linux and Windows(A)
    Requirements
    Support single file replacing (B)
    Support merged file replacing (C)

    View Slide

  32. Why NProxy
    Support Mac, Linux and Windows(A)
    Requirements
    Support single file replacing (B)
    Support merged file replacing (C)
    Support directory mapping (D)

    View Slide

  33. Why NProxy
    Support Mac, Linux and Windows(A)
    Requirements
    Support single file replacing (B)
    Support merged file replacing (C)
    Support directory mapping (D)
    Support HTTPS (E)

    View Slide

  34. Why NProxy
    Support Mac, Linux and Windows(A)
    Requirements
    Support single file replacing (B)
    Support merged file replacing (C)
    Support directory mapping (D)
    Support HTTPS (E)

    View Slide

  35. Why NProxy
    Support Mac, Linux and Windows(A)
    Support single file replacing (B)
    Support merged file replacing (C)
    Support directory mapping (D)
    Support HTTPS (E)
    Existing Proxies

    View Slide

  36. Why NProxy
    Support Mac, Linux and Windows(A)
    Support single file replacing (B)
    Support merged file replacing (C)
    Support directory mapping (D)
    Support HTTPS (E)
    Existing Proxies
    Fiddler Charles Rythem TinyProx
    y
    A ✘ ✔ ✘ ✘
    B ✔ ✔ ✔ ✔
    C ✘ ✘ ✘ ✘
    D ✘ ✘ ✔ ✘
    E ✔ ✔ ✘ ✔

    View Slide

  37. Why NProxy
    Support Mac, Linux and Windows(A)
    Support single file replacing (B)
    Support merged file replacing (C)
    Support directory mapping (D)
    Support HTTPS (E)
    Existing Proxies
    Fiddler Charles Rythem TinyProx
    y
    A ✘ ✔ ✘ ✘
    B ✔ ✔ ✔ ✔
    C ✘ ✘ ✘ ✘
    D ✘ ✘ ✔ ✘
    E ✔ ✔ ✘ ✔
    NProxy





    View Slide

  38. Why NProxy
    NProxy is really good
    at file replacing

    View Slide

  39. What NProxy can do
    Support Mac, Linux and Windows(A)
    Support single file replacing (B)
    Support merged file replacing (C)
    Support directory mapping (D)
    Support HTTPS (E)

    View Slide

  40. How to Use NProxy

    View Slide

  41. How to Use NProxy
    1. install node (>=0.8.x)

    View Slide

  42. How to Use NProxy
    1. install node (>=0.8.x)
    2. npm install -g nproxy

    View Slide

  43. How to Use NProxy
    1. install node (>=0.8.x)
    2. npm install -g nproxy
    3. prepare a rule file

    View Slide

  44. How to Use NProxy
    1. install node (>=0.8.x)
    2. npm install -g nproxy
    4. nproxy -l rulefilename.js
    3. prepare a rule file

    View Slide

  45. How to Use NProxy
    1. install node (>=0.8.x)
    2. npm install -g nproxy
    4. nproxy -l rulefilename.js
    3. prepare a rule file
    5. set nproxy as browser’s proxy

    View Slide

  46. How to Use NProxy
    1. install node (>=0.8.x)
    2. npm install -g nproxy
    4. nproxy -l rulefilename.js
    3. prepare a rule file
    5. set nproxy as browser’s proxy

    View Slide

  47. How to Use NProxy
    Set proxy for browser

    View Slide

  48. How to Use NProxy
    Set proxy for browser
    HTTP

    View Slide

  49. How to Use NProxy
    Set proxy for browser
    HTTP
    HTTPS

    View Slide

  50. How to Use NProxy
    Format of rule file

    View Slide

  51. How to Use NProxy
    Format of rule file
    module.exports = [
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    },
    {
    pattern: ‘homepageTile.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    ];

    View Slide

  52. How to Use NProxy
    Format of rule file
    module.exports = [
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    },
    {
    pattern: ‘homepageTile.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    ];
    {
    }

    View Slide

  53. How to Use NProxy
    Format of rule file
    module.exports = [
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    },
    {
    pattern: ‘homepageTile.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    ];
    pattern: ‘homepage.js’,
    URL Pattern
    {
    }

    View Slide

  54. How to Use NProxy
    Format of rule file
    module.exports = [
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    },
    {
    pattern: ‘homepageTile.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    ];
    responder: ‘/Users/goddyzhao/homepage.js’
    File Path(Local/Web)
    {
    }

    View Slide

  55. How to Use NProxy
    Format of rule file
    module.exports = [
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    },
    {
    pattern: ‘homepageTile.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    ];
    name.js
    responder: ‘/Users/goddyzhao/homepage.js’
    File Path(Local/Web)
    {
    }

    View Slide

  56. How to Use NProxy
    Replace single file with local one

    View Slide

  57. How to Use NProxy
    Replace single file with local one

    View Slide

  58. How to Use NProxy
    Replace single file with local one
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js

    View Slide

  59. How to Use NProxy
    Replace single file with local one
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    request

    View Slide

  60. How to Use NProxy
    Replace single file with local one
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    request

    View Slide

  61. How to Use NProxy
    Replace single file with local one
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    request
    response
    .js

    View Slide

  62. How to Use NProxy
    Replace single file with local one
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    NProxy

    View Slide

  63. How to Use NProxy
    Replace single file with local one
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    NProxy

    View Slide

  64. How to Use NProxy
    Replace single file with local one
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    NProxy

    View Slide

  65. How to Use NProxy
    Replace single file with local one
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    NProxy

    View Slide

  66. How to Use NProxy
    Replace single file with local one
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    NProxy

    View Slide

  67. How to Use NProxy
    Replace single file with local one
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    NProxy

    View Slide

  68. How to Use NProxy
    Replace single file with local one
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    NProxy
    Local File System

    View Slide

  69. How to Use NProxy
    Replace single file with local one
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    NProxy
    Local File System
    .js

    View Slide

  70. How to Use NProxy
    Replace single file with local one
    {
    pattern: ‘homepage.js’,
    responder: ‘/Users/goddyzhao/homepage.js’
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepage.js
    Qacand Server
    NProxy
    Local File System
    .js

    View Slide

  71. How to Use NProxy
    Replace merged file with source files

    View Slide

  72. How to Use NProxy
    Replace merged file with source files

    View Slide

  73. How to Use NProxy
    Replace merged file with source files
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js

    View Slide

  74. How to Use NProxy
    Replace merged file with source files
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    request

    View Slide

  75. How to Use NProxy
    Replace merged file with source files
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    request

    View Slide

  76. How to Use NProxy
    Replace merged file with source files
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    request
    response
    .js

    View Slide

  77. How to Use NProxy
    Replace merged file with source files
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    request
    response
    .js
    NProxy

    View Slide

  78. How to Use NProxy
    Replace merged file with source files
    {
    pattern: ‘homepageTileFramework.js’,
    responder: {
    dir: ‘/Users/goddyzhao/’,
    src: [‘hmpTile.js’, ‘hmpUtil.js’, ‘...’]
    }
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    request
    response
    .js
    NProxy

    View Slide

  79. How to Use NProxy
    Replace merged file with source files
    {
    pattern: ‘homepageTileFramework.js’,
    responder: {
    dir: ‘/Users/goddyzhao/’,
    src: [‘hmpTile.js’, ‘hmpUtil.js’, ‘...’]
    }
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    NProxy

    View Slide

  80. How to Use NProxy
    Replace merged file with source files
    {
    pattern: ‘homepageTileFramework.js’,
    responder: {
    dir: ‘/Users/goddyzhao/’,
    src: [‘hmpTile.js’, ‘hmpUtil.js’, ‘...’]
    }
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    NProxy

    View Slide

  81. How to Use NProxy
    Replace merged file with source files
    {
    pattern: ‘homepageTileFramework.js’,
    responder: {
    dir: ‘/Users/goddyzhao/’,
    src: [‘hmpTile.js’, ‘hmpUtil.js’, ‘...’]
    }
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    NProxy

    View Slide

  82. How to Use NProxy
    Replace merged file with source files
    {
    pattern: ‘homepageTileFramework.js’,
    responder: {
    dir: ‘/Users/goddyzhao/’,
    src: [‘hmpTile.js’, ‘hmpUtil.js’, ‘...’]
    }
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    NProxy

    View Slide

  83. How to Use NProxy
    Replace merged file with source files
    {
    pattern: ‘homepageTileFramework.js’,
    responder: {
    dir: ‘/Users/goddyzhao/’,
    src: [‘hmpTile.js’, ‘hmpUtil.js’, ‘...’]
    }
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    NProxy
    Local File System

    View Slide

  84. How to Use NProxy
    Replace merged file with source files
    {
    pattern: ‘homepageTileFramework.js’,
    responder: {
    dir: ‘/Users/goddyzhao/’,
    src: [‘hmpTile.js’, ‘hmpUtil.js’, ‘...’]
    }
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    NProxy
    Local File System
    .js .js .js

    View Slide

  85. How to Use NProxy
    Replace merged file with source files
    {
    pattern: ‘homepageTileFramework.js’,
    responder: {
    dir: ‘/Users/goddyzhao/’,
    src: [‘hmpTile.js’, ‘hmpUtil.js’, ‘...’]
    }
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    NProxy
    Local File System
    .js .js .js

    View Slide

  86. How to Use NProxy
    Replace merged file with source files
    {
    pattern: ‘homepageTileFramework.js’,
    responder: {
    dir: ‘/Users/goddyzhao/’,
    src: [‘hmpTile.js’, ‘hmpUtil.js’, ‘...’]
    }
    }
    https:/
    /qacand.successfactors.com/
    ui/js/homepageTileFramework.js
    Qacand Server
    NProxy
    Local File System
    .js .js .js
    .js
    merged

    View Slide

  87. How to Use NProxy
    Directory Mapping
    https:/
    /..../ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    https:/
    /..../ui/js/a_dev-snapshot.js

    View Slide

  88. How to Use NProxy
    Directory Mapping
    https:/
    /..../ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    NProxy
    https:/
    /..../ui/js/a_dev-snapshot.js

    View Slide

  89. How to Use NProxy
    Directory Mapping
    {
    pattern: ‘/ui/js/’,
    responder: ‘/Users/goddyzhao/js/’
    }
    https:/
    /..../ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    NProxy
    https:/
    /..../ui/js/a_dev-snapshot.js

    View Slide

  90. How to Use NProxy
    Directory Mapping
    {
    pattern: ‘/ui/js/’,
    responder: ‘/Users/goddyzhao/js/’
    }
    https:/
    /..../ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    NProxy
    https:/
    /..../ui/js/a_dev-snapshot.js

    View Slide

  91. How to Use NProxy
    Directory Mapping
    {
    pattern: ‘/ui/js/’,
    responder: ‘/Users/goddyzhao/js/’
    }
    https:/
    /..../ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    NProxy
    https:/
    /..../ui/js/a_dev-snapshot.js

    View Slide

  92. How to Use NProxy
    Directory Mapping
    {
    pattern: ‘/ui/js/’,
    responder: ‘/Users/goddyzhao/js/’
    }
    https:/
    /..../ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    NProxy
    Local File System
    https:/
    /..../ui/js/a_dev-snapshot.js
    matching

    View Slide

  93. How to Use NProxy
    Directory Mapping
    {
    pattern: ‘/ui/js/’,
    responder: ‘/Users/goddyzhao/js/’
    }
    https:/
    /..../ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    NProxy
    Local File System
    .js
    https:/
    /..../ui/js/a_dev-snapshot.js
    matching

    View Slide

  94. How to Use NProxy
    Directory Mapping
    {
    pattern: ‘/ui/js/’,
    responder: ‘/Users/goddyzhao/js/’
    }
    https:/
    /..../ui/js/homepage.js
    Qacand Server
    request
    response
    .js
    NProxy
    Local File System
    .js
    https:/
    /..../ui/js/a_dev-snapshot.js
    matching

    View Slide

  95. Bonus tool for Sf projects
    XML configuration file for file merging

    View Slide

  96. Bonus tool for Sf projects
    XML configuration file for file merging





    hmpGenericTileDAO.js” />
    hmpAbstractMenuModel.js” />
    ....

    ...


    View Slide

  97. How to quickly
    convert it to nproxy
    rule file
    Bonus tool for Sf projects

    View Slide

  98. Bonus tool for Sf projects
    sf -i /your/path/of/grouped.xml
    -d /Users/goddyzhao/webapps
    -o /output/dir

    View Slide

  99. Bonus tool for Sf projects
    module.exports = [
    {
    pattern: ‘homepageTileFramework’,
    responder: {
    dir: ‘/Users/goddyzhao/webapps’,
    src: [
    ‘/ui/homepage/js/common/HTMUtils.js’,
    ‘/ui/homepage/js/tileFramwork/hmpAnimUtil.js’,
    ‘/ui/homepage/js/tileFramework/hmpGenericTileDAO.js’,
    ‘...’
    ]
    }
    }
    ];

    View Slide

  100. Bonus tool for Sf projects
    module.exports = [
    {
    pattern: ‘homepageTileFramework’,
    responder: {
    dir: ‘/Users/goddyzhao/webapps’,
    src: [
    ‘/ui/homepage/js/common/HTMUtils.js’,
    ‘/ui/homepage/js/tileFramwork/hmpAnimUtil.js’,
    ‘/ui/homepage/js/tileFramework/hmpGenericTileDAO.js’,
    ‘...’
    ]
    }
    }
    ];
    -d

    View Slide

  101. Why NProxy
    Workflow of UI development with NProxy

    View Slide

  102. Why NProxy
    Workflow of UI development with NProxy
    Development

    View Slide

  103. Why NProxy
    Workflow of UI development with NProxy
    Development
    Deployment

    View Slide

  104. Why NProxy
    Workflow of UI development with NProxy
    Development
    Deployment
    Browser

    View Slide

  105. Why NProxy
    Workflow of UI development with NProxy
    Development
    Deployment
    Setup nproxy
    Browser

    View Slide

  106. Why NProxy
    Workflow of UI development with NProxy
    Development
    Deployment
    Setup nproxy
    coding
    Browser

    View Slide

  107. Why NProxy
    Workflow of UI development with NProxy
    Development
    Deployment
    Finish Coding
    Setup nproxy
    coding
    Browser

    View Slide

  108. Why NProxy
    Workflow of UI development with NProxy
    Development
    Deployment
    Finish Coding
    Setup nproxy
    deploy
    coding
    Browser

    View Slide

  109. http:/
    /goddyzhao.me/nproxy

    View Slide

  110. Thanks Larry!

    View Slide

  111. Thanks!

    View Slide