NProxy——A Sharp Weapon for UI Developers

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!