1. Build Lightweight Web Module Morgan Cheng @morgancheng May 26th, 2011

2. Expand Thriving Web Site

3. Inject Your Content Into Other Sites

4. Partner Website Server Your Website Server Browser

5. Partner Website Server Your Website Server Web Module Browser

6. Cross Domain

7. JSONP

8. Inject Content with JSONP Create one hidden element Send JSONP request When JSONP data is received, compose HTML Fill the hidden element with composed HTML Show hidden element

9. Inject an iframe

11. iframe covering whole viewport

12. It is easy to create abigiframe. The hard part is how to close it.

13. Same Domain Callback Hidden Proxy Iframe

14. Time to Wear Hacker’s Hat

15. Cannot be “javascript: … ” Hidden Proxy Iframe

16. API Design First

17. <script src=“XXXXX_loader.js”></script><script>XXXXX.load(parameter);</script>

18. YAHOO.ABC.load(parameter);

19. YAHOO.ABC.load(parameter); Y.ABC.load(parameter);

20. YAHOO.ABC.load(parameter); Y.ABC.load(parameter); YABC.load(parameter);

21. YABC.load( ‘wretch’, // appid. Mandatory 1234, // spaceid. Mandatory 100 // delay in ms. Optional );

22. YABC.load( ‘wretch’, // appid. Mandatory 1234, // spaceid. Mandatory 100, // delay in ms. Optional ‘tw’ // intl. Mandatory ); What if new Mandatory parameter is added?

23. YABC.load({ appid: ‘wretch’, spaceid: ‘1234’, delay: 100, intl: ‘tw’ }); Better! Config Object Pattern

24. Be Disciplined

25. Rules #1: Don’t Assume Too Much on Hosting Page What? You Don’t Have YUI?

26. Rules #2: Don’t Be Obstructive to Hosting Page

27. Rules #3: Don’t Impact Hosting Page Performance

28. In a Word, We Have To DIY

29. And, It MUST Be Lightweight

30. Simplest Feature vs. Rich Feature

31. YAHOO.util.Connect.asyncRequest( ‘GET’, ‘http://www.example.com/jsonp’, { success: sucessHandler, failure: failureHandler, argument: argumentObj }, postData };

32. We Don’t Need Full Feature YAHOO.util.Connect.asyncRequest( ‘GET’, ‘http://www.example.com/jsonp’, { success: sucessHandler, failure: failureHandler, argument: argumentObj }, postData };

33. This is What We Need

34. Minify-Friendly JavaScript

35. /* * Gets query string presentation of given object. */ function toQueryString(params) { varencParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); }

36. /* * Gets query string presentation of given object. */ function toQueryString(params) { varencParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); } function toQueryString(c){var a=[],b=encodeURIComponent;for(key in c){a.push(b(key)+"="+b(c[key]))}returna.join("&")}; Before 287 bytes After 119 bytes Compression Rate: 59% Minify

37. What Can Be Minified?

38. /* * Gets query string presentation of given object. */ function toQueryString(params) { varencParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); } function toQueryString(c){var a=[],b=encodeURIComponent;for(key in c){a.push(b(key)+"="+b(c[key]))}returna.join("&")}; Comments are stripped

39. /* * Gets query string presentation of given object. */ function toQueryString(params) { varencParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); } function toQueryString(c){var a=[],b=encodeURIComponent;for(key in c){a.push(b(key)+"="+b(c[key]))}returna.join("&")}; Unnecessary White Spaces are Stripped

40. /* * Gets query string presentation of given object. */ function toQueryString(params) { varencParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); } function toQueryString(c){var a=[],b=encodeURIComponent;for(key in c){a.push(b(key)+"="+b(c[key]))}returna.join("&")}; Argument Names are Obfuscated

41. /* * Gets query string presentation of given object. */ function toQueryString(params) { varencParams= [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); } function toQueryString(c){vara=[],b=encodeURIComponent;for(key in c){a.push(b(key)+"="+b(c[key]))}returna.join("&")}; Local Variable Names are Minified

42. What Can NOT Be Minified?

43. /* * Gets query string presentation of given object. */ functiontoQueryString(params) { varencParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); } functiontoQueryString(c){var a=[],b=encodeURIComponent;for(key in c){a.push(b(key)+"="+b(c[key]))}returna.join("&")}; Keywords are NOT Minified

44. /* * Gets query string presentation of given object. */ function toQueryString(params) { varencParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); } function toQueryString(c){var a=[],b=encodeURIComponent;for(key in c){a.push(b(key)+"="+b(c[key]))}returna.join("&")}; Global Variables are NOT Minified

45. /* * Gets query string presentation of given object. */ function toQueryString(params) { varencParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); } function toQueryString(c){var a=[],b=encodeURIComponent;for(key in c){a.push(b(key)+"="+b(c[key]))}returna.join("&")}; Object Properties are NOT Minified

46. /* * Gets query string presentation of given object. */ function toQueryString(params) { varencParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&'); } function toQueryString(c){var a=[],b=encodeURIComponent;for(key in c){a.push(b(key)+"="+b(c[key]))}returna.join("&")}; How About This?

47. Wait, Do We Need Minify If All Browsers Support Gzip?

48. JavaScript? Gzip Gzip is no-loss compressionIt Doesn’t Understand JavaScript

49. ~15% “Accept-Encoding: gzip, deflate”HTTP Headers Are Stripped

50. Evolution of Code

51. YABC = { load: function() { // do something } };

52. YABC = { privateVariable: ‘hello’, privateFunction: function() { // do some private thing }, load: function() { // do something } };

53. YABC = { privateVariable: ‘hello’, privateFunction: function() { // do some helping }, load: function() { // do something } }; Not Minifiable

54. (function() { var _privateVariable = ‘hello’; function _privateFunction () { // do some private thing } YABC = { load: function() { // do something } }; }()) Immediate Function Pattern

55. (function() { var_privateVariable= ‘hello’; function _privateFunction() { // do some private thing } YABC = { load: function() { // do something } }; }()) Minifiable

56. (function() { var win = window; _privateVariable = ‘hello’; function _privateFunction () { // do some private thing } YABC = { load: function() { // do something } }; }()) “window” is used more than once

57. (function() { var win = window; _privateVariable = ‘hello’; function _privateFunction () { // do some private thing } YABC = { unload: function() { }, load: function() { // do something } }; }())

58. (function() { var win = window; _privateVariable = ‘hello’; function _privateFunction () { // do some private thing } YABC = { unload: function() { }, load: function() { // do something } }; }()) Every invocation of this method has to be “YABC.unload”

59. (function() { var win = window; _privateVariable = ‘hello’, yabc; function _privateFunction () { // do some private thing } varyabc= { unload: function() { }, load: function() { // do something } }; YABC = yabc; }()) Local Invocation of “yabc.unload” can be minfied

60. (function() { var win = window; _privateVariable = ‘hello’, yabc; function _privateFunction () { // do some private thing } varyabc= { unload: function() { }, load: function() { // do something } }; YABC = yabc; }()) YUI Developers, Looks Familiar?

61. Be a JavaScript Ninjia

62. (function() { // immediate functioning }())

63. (function() { // immediate functioning }()) !function() { // immediate functioning }() Saving 1 Byte

64. if (-1===indexOf(foo,’bar’)) { // do something }

65. if (-1!==foo.indexOf(’bar’)) { // do something } if (~foo.indexOf(’bar’)) { // do something } Saving 4 Bytes

66. function escapeHTML(s) { return s.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g,'&lt;').replace(/"/g, '&quot').replace(/'/g,'&#x27;').replace(//g,'&#x2F;'); }

67. function escapeHTML(s) { return s.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g,'&lt;').replace(/"/g, '&quot').replace(/'/g,'&#x27;').replace(//g,'&#x2F;'); } function escapeHTML(s, r) { r='replace';returns[r](/&/g,'&amp;')[r](/>/g,'&gt;')[r](/</g,'&lt;')[r](/"/g, '&quot')[r](/'/g,'&#x27;')[r](//g,'&#x2F;’); } Saving 19 Bytes

68. History of code size

69. JavaScript is NOT SlowBut, DOM is Slow

70. Module Versioning

71. Traditionally … http://www.example.com/v1/loader.js http://www.example.com/loader_20110510.js

72. Short Time Caching

73. Takeaways Make your partners happy Hack your own code. Hack it Hard! Minify JavaScript Code

74. Thank You!