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.

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