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
2. Abstract Why NProxy What NProxy can do How to use NProxy Bonus Tool for SF Projects
3. Why NProxy
4. Why NProxy Workflow of UI development
5. Why NProxy Workflow of UI development Development
6. Why NProxy Workflow of UI development Development Deployment
7. Why NProxy Workflow of UI development Development Deployment coding
8. Why NProxy Workflow of UI development Development Deployment ant deploy-js coding
9. Why NProxy Workflow of UI development Development Deployment ant deploy-js deploy coding
10. Why NProxy Workflow of UI development Development Deployment ant deploy-js deploy coding
11. Why NProxy Workflow of UI development Development Deployment ant deploy-js deploy coding coding
12. Why NProxy Workflow of UI development Development Deployment ant deploy-js ant deploy-css deploy coding coding
13. Why NProxy Workflow of UI development Development Deployment ant deploy-js ant deploy-css deploy deploy coding coding
14. Why NProxy Workflow of UI development Development Deployment ant deploy-js ant deploy-css deploy deploy coding coding
15. Why NProxy Workflow of UI development Development Deployment ant deploy-js ant deploy-css deploy deploy coding coding coding
16. Why NProxy Workflow of UI development Development Deployment ant deploy-js ant deploy-css ant deploy-css deploy deploy coding coding coding
17. Why NProxy Workflow of UI development Development Deployment ant deploy-js ant deploy-css ant deploy-css deploy deploy coding coding coding
18. Why NProxy Workflow of UI development Development Deployment ant deploy-js ant deploy-css ant deploy-css fail deploy deploy coding coding coding
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
20. Why NProxy
21. Why NProxy Production Environment
22. Why NProxy Production Environment Code in Remote Server
23. Why NProxy Production Environment Code in Remote Server JS files are compressed
24. Why NProxy Production Environment Code in Remote Server JS files are compressed JS files are merged
25. Why NProxy Hard to debug issues in production Production Environment Code in Remote Server JS files are compressed JS files are merged
26. Why NProxy ?
27. Why NProxy Proxy for replacing static files
28. Why NProxy Requirements
29. Why NProxy Support Mac, Linux and Windows(A) Requirements
30. Why NProxy Support Mac, Linux and Windows(A) Requirements Support single file replacing (B)
31. Why NProxy Support Mac, Linux and Windows(A) Requirements Support single file replacing (B) Support merged file replacing (C)
32. Why NProxy Support Mac, Linux and Windows(A) Requirements Support single file replacing (B) Support merged file replacing (C) Support directory mapping (D)
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)
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)
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
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 ✔ ✔ ✘ ✔
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 ✔ ✔ ✔ ✔ ✔
38. Why NProxy NProxy is really good at file replacing
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)
40. How to Use NProxy
41. How to Use NProxy 1. install node (>=0.8.x)
42. How to Use NProxy 1. install node (>=0.8.x) 2. npm install -g nproxy
43. How to Use NProxy 1. install node (>=0.8.x) 2. npm install -g nproxy 3. prepare a rule file
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
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
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
47. How to Use NProxy Set proxy for browser
48. How to Use NProxy Set proxy for browser HTTP
49. How to Use NProxy Set proxy for browser HTTP HTTPS
50. How to Use NProxy Format of rule file
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’ } ];
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’ } ]; { }
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 { }
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) { }
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) { }
56. How to Use NProxy Replace single file with local one
57. How to Use NProxy Replace single file with local one
58. How to Use NProxy Replace single file with local one https:/ /qacand.successfactors.com/ ui/js/homepage.js
59. How to Use NProxy Replace single file with local one https:/ /qacand.successfactors.com/ ui/js/homepage.js request
60. How to Use NProxy Replace single file with local one https:/ /qacand.successfactors.com/ ui/js/homepage.js Qacand Server request
61. How to Use NProxy Replace single file with local one https:/ /qacand.successfactors.com/ ui/js/homepage.js Qacand Server request response .js
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
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
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
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
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
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
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
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
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
71. How to Use NProxy Replace merged file with source files
72. How to Use NProxy Replace merged file with source files
73. How to Use NProxy Replace merged file with source files https:/ /qacand.successfactors.com/ ui/js/homepageTileFramework.js
74. How to Use NProxy Replace merged file with source files https:/ /qacand.successfactors.com/ ui/js/homepageTileFramework.js request
75. How to Use NProxy Replace merged file with source files https:/ /qacand.successfactors.com/ ui/js/homepageTileFramework.js Qacand Server request
76. How to Use NProxy Replace merged file with source files https:/ /qacand.successfactors.com/ ui/js/homepageTileFramework.js Qacand Server request response .js
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
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
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
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
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
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
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
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
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
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
87. How to Use NProxy Directory Mapping https:/ /..../ui/js/homepage.js Qacand Server request response .js https:/ /..../ui/js/a_dev-snapshot.js
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
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
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
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
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
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
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
95. Bonus tool for Sf projects XML configuration file for file merging
96. 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>
97. How to quickly convert it to nproxy rule file Bonus tool for Sf projects
98. Bonus tool for Sf projects sf -i /your/path/of/grouped.xml -d /Users/goddyzhao/webapps -o /output/dir
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’, ‘...’ ] } } ];
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
101. Why NProxy Workflow of UI development with NProxy
102. Why NProxy Workflow of UI development with NProxy Development
103. Why NProxy Workflow of UI development with NProxy Development Deployment
104. Why NProxy Workflow of UI development with NProxy Development Deployment Browser
105. Why NProxy Workflow of UI development with NProxy Development Deployment Setup nproxy Browser
106. Why NProxy Workflow of UI development with NProxy Development Deployment Setup nproxy coding Browser
107. Why NProxy Workflow of UI development with NProxy Development Deployment Finish Coding Setup nproxy coding Browser
108. Why NProxy Workflow of UI development with NProxy Development Deployment Finish Coding Setup nproxy deploy coding Browser
109. http:/ /goddyzhao.me/nproxy
110. Thanks Larry!
111. Thanks!