Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. Abstract Why NProxy What NProxy can do How to use

    NProxy Bonus Tool for SF Projects
  2. Why NProxy Workflow of UI development Development Deployment ant deploy-js

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

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

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

    ant deploy-css ant deploy-css fail deploy deploy coding coding coding
  6. 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
  7. Why NProxy Hard to debug issues in production Production Environment

    Code in Remote Server JS files are compressed JS files are merged
  8. Why NProxy Support Mac, Linux and Windows(A) Requirements Support single

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

    file replacing (B) Support merged file replacing (C) Support directory mapping (D)
  10. 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)
  11. 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)
  12. 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
  13. 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 ✔ ✔ ✘ ✔
  14. 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 ✔ ✔ ✔ ✔ ✔
  15. 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)
  16. How to Use NProxy 1. install node (>=0.8.x) 2. npm

    install -g nproxy 3. prepare a rule file
  17. 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
  18. 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
  19. 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
  20. 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’ } ];
  21. 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’ } ]; { }
  22. 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 { }
  23. 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) { }
  24. 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) { }
  25. How to Use NProxy Replace single file with local one

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

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

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

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

    https:/ /qacand.successfactors.com/ ui/js/homepage.js Qacand Server request response .js NProxy
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. How to Use NProxy Replace merged file with source files

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

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

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

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

    https:/ /qacand.successfactors.com/ ui/js/homepageTileFramework.js Qacand Server request response .js NProxy
  43. 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
  44. 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
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. 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
  52. How to Use NProxy Directory Mapping https:/ /..../ui/js/homepage.js Qacand Server

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

    request response .js NProxy https:/ /..../ui/js/a_dev-snapshot.js
  54. 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
  55. 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
  56. 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
  57. 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
  58. 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
  59. 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
  60. Bonus tool for Sf projects XML configuration file for file

    merging <groupdefinition> <groups> <group id=”homepageTileFramework” type=”global”> <resource uri=”/ui/homepage/js/common/HTMUtils.js” /> <resource uri=”/ui/homepage/js/tileFramwork/hmpAnimUtil.js” /> <resource uri=”/ui/homepage/js/tileFramework/ hmpGenericTileDAO.js” /> <resource uri=”/ui/homepage/js/dropMenu/ hmpAbstractMenuModel.js” /> .... </group> ... </groups> </groupdefinition>
  61. 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’, ‘...’ ] } } ];
  62. 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
  63. Why NProxy Workflow of UI development with NProxy Development Deployment

    Finish Coding Setup nproxy deploy coding Browser