The document discusses building a lightweight web module to inject content from one site into another cross-domain using JSONP. It covers topics like same-domain callbacks using hidden proxy iframes, API design using configuration objects, minimizing JavaScript size through techniques like removing comments and whitespace, and evolving code through patterns like the immediate function pattern. The document provides examples of minimizing code size through techniques like short variable names and replacing methods with equivalent but shorter alternatives.

1. Build Lightweight Web ModuleMorgan Cheng@morganchengMay 26th, 2011

2. Expand Thriving Web Site

3. Inject Your Content Into Other Sites

4. Partner Website ServerYour Website ServerBrowser

5. Partner Website ServerYour Website ServerWeb ModuleBrowser

6. Cross Domain

7. JSONP

8. Inject Content with JSONPCreate one hidden elementSend JSONP request When JSONP data is received, compose HTMLFill the hidden element with composed HTMLShow 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 CallbackHidden 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 PageWhat?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 FeatureYAHOO.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 bytesAfter 119 bytesCompression 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?GzipGzip 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.jshttp://www.example.com/loader_20110510.js

72. Short Time Caching

73. TakeawaysMake your partners happyHack your own code. Hack it Hard!Minify JavaScript Code

74. Thank You!