Build Lightweight Web Module
-
Upload
mocheng -
Category
Technology
-
view
785 -
download
1
Transcript of Build Lightweight Web Module
![Page 1: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/1.jpg)
Build Lightweight Web Module
Morgan Cheng@morgancheng
May 26th, 2011
![Page 2: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/2.jpg)
Expand Thriving Web Site
![Page 3: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/3.jpg)
Inject Your Content Into Other Sites
![Page 4: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/4.jpg)
Partner Website Server
Browser
Your Website Server
![Page 5: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/5.jpg)
Partner Website Server
Browser
Your Website Server
Web Module
![Page 6: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/6.jpg)
Cross Domain
![Page 7: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/7.jpg)
JSONP
![Page 8: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/8.jpg)
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
![Page 9: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/9.jpg)
Inject an iframe
![Page 10: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/10.jpg)
![Page 11: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/11.jpg)
iframe covering whole viewport
![Page 12: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/12.jpg)
It is easy to create a big iframe. The hard part is how to close it.
![Page 13: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/13.jpg)
Same Domain Callback
Hidden Proxy Iframe
![Page 14: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/14.jpg)
Time to Wear Hacker’s Hat
![Page 15: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/15.jpg)
Cannot be “javascript: … ”
Hidden Proxy Iframe
![Page 16: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/16.jpg)
API Design First
![Page 17: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/17.jpg)
<script src=“XXXXX_loader.js”></script>
<script> XXXXX.load(parameter);</script>
![Page 18: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/18.jpg)
YAHOO.ABC.load(parameter);
![Page 19: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/19.jpg)
YAHOO.ABC.load(parameter);Y.ABC.load(parameter);
![Page 20: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/20.jpg)
YAHOO.ABC.load(parameter);Y.ABC.load(parameter);YABC.load(parameter);
![Page 21: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/21.jpg)
YABC.load(‘wretch’, // appid. Mandatory1234, // spaceid. Mandatory100 // delay in ms. Optional
);
![Page 22: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/22.jpg)
YABC.load(‘wretch’, // appid. Mandatory1234, // spaceid. Mandatory100, // delay in ms. Optional
‘tw’ // intl. Mandatory);
What if new Mandatory parameter is added?
![Page 23: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/23.jpg)
YABC.load({ appid: ‘wretch’, spaceid: ‘1234’, delay: 100, intl: ‘tw’}); Better!
Config Object Pattern
![Page 24: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/24.jpg)
Be Disciplined
![Page 25: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/25.jpg)
Rules #1: Don’t Assume Too Much on Hosting Page
What?You Don’t Have YUI?
![Page 26: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/26.jpg)
Rules #2: Don’t Be Obstructive to Hosting Page
![Page 27: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/27.jpg)
Rules #3: Don’t Impact Hosting Page Performance
![Page 28: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/28.jpg)
In a Word, We Have To DIY
![Page 29: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/29.jpg)
And, It MUST Be Lightweight
![Page 30: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/30.jpg)
Simplest Feature vs. Rich Feature
![Page 31: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/31.jpg)
YAHOO.util.Connect.asyncRequest(‘GET’,‘http://www.example.com/jsonp’,{
success: sucessHandler,failure: failureHandler,argument: argumentObj
},postData
};
![Page 32: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/32.jpg)
YAHOO.util.Connect.asyncRequest(‘GET’,‘http://www.example.com/jsonp’,{
success: sucessHandler,failure: failureHandler,argument: argumentObj
},postData
};
We Don’t Need Full Feature
![Page 33: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/33.jpg)
This is What We Need
![Page 34: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/34.jpg)
Minify-Friendly JavaScript
![Page 35: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/35.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], encode = encodeURIComponent; for(key in params) { encParams.push(encode(key) + '=' + encode(params[key])); } return encParams.join('&');}
![Page 36: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/36.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], 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]))}return a.join("&")};
Minify
Before 287 bytesAfter 119 bytesCompression Rate: 59%
![Page 37: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/37.jpg)
What Can Be Minified?
![Page 38: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/38.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], 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]))}return a.join("&")};
Comments are stripped
![Page 39: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/39.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], 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]))}return a.join("&")};
Unnecessary White Spaces are Stripped
![Page 40: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/40.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], 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]))}return a.join("&")};
Argument Names are Obfuscated
![Page 41: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/41.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], 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]))}return a.join("&")};
Local Variable Names are Minified
![Page 42: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/42.jpg)
What Can NOT Be Minified?
![Page 43: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/43.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], 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]))}return a.join("&")};
Keywords are NOT Minified
![Page 44: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/44.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], 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]))}return a.join("&")};
Global Variables are NOT Minified
![Page 45: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/45.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], 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]))}return a.join("&")};
Object Properties are NOT Minified
![Page 46: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/46.jpg)
/* * Gets query string presentation of given object. */function toQueryString(params) { var encParams = [], 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]))}return a.join("&")};
How About This?
![Page 47: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/47.jpg)
Wait, Do We Need Minify If All Browsers
Support Gzip?
![Page 48: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/48.jpg)
Gzip is no-loss compressionIt Doesn’t Understand JavaScript
JavaScript?
Gzip
![Page 49: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/49.jpg)
~15% “Accept-Encoding: gzip, deflate”HTTP Headers Are Stripped
![Page 50: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/50.jpg)
Evolution of Code
![Page 51: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/51.jpg)
YABC = { load: function() {
// do something }};
![Page 52: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/52.jpg)
YABC = { privateVariable: ‘hello’, privateFunction: function() { // do some private thing }, load: function() {
// do something }};
![Page 53: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/53.jpg)
YABC = {privateVariable: ‘hello’, privateFunction: function() {
// do some helping }, load: function() {
// do something }};
Not Minifiable
![Page 54: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/54.jpg)
(function() { var _privateVariable = ‘hello’;
function _privateFunction () {// do some private thing
}
YABC = { load: function() {
// do something }};
}())
Immediate Function Pattern
![Page 55: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/55.jpg)
(function() { var _privateVariable = ‘hello’;
function _privateFunction () {// do some private thing
}
YABC = { load: function() {
// do something }};
}())
Minifiable
![Page 56: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/56.jpg)
(function() { var win = window;
_privateVariable = ‘hello’;
function _privateFunction () {// do some private thing
}
YABC = { load: function() {
// do something }};
}())
“window” is used more than once
![Page 57: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/57.jpg)
(function() { var win = window;
_privateVariable = ‘hello’;
function _privateFunction () {// do some private thing
}
YABC = { unload: function() { }, load: function() {
// do something }};
}())
![Page 58: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/58.jpg)
(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”
![Page 59: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/59.jpg)
(function() { var win = window;
_privateVariable = ‘hello’,yabc;
function _privateFunction () {// do some private thing
}
var yabc = { unload: function() { }, load: function() {
// do something }};
YABC = yabc;}())
Local Invocation of “yabc.unload” can be minfied
![Page 60: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/60.jpg)
(function() { var win = window;
_privateVariable = ‘hello’,yabc;
function _privateFunction () {// do some private thing
}
var yabc = { unload: function() { }, load: function() {
// do something }};
YABC = yabc;}())
YUI Developers,Looks Familiar?
![Page 61: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/61.jpg)
Be a JavaScript Ninjia
![Page 62: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/62.jpg)
(function() {// immediate functioning
}())
![Page 63: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/63.jpg)
(function() {// immediate functioning
}())
!function() {// immediate functioning
}()
Saving 1 Byte
![Page 64: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/64.jpg)
if (-1===indexOf(foo,’bar’)) {// do something
}
![Page 65: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/65.jpg)
if (-1!==foo.indexOf(’bar’)) {// do something
}
if (~foo.indexOf(’bar’)) {// do something
}
Saving 4 Bytes
![Page 66: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/66.jpg)
function escapeHTML(s) {return s.replace(/&/g, '&').replace(/>/g, '>').replace(/</g,'<').replace(/"/g, '"').replace(/'/g,''').replace(/\//g,'/');
}
![Page 67: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/67.jpg)
function escapeHTML(s) {return s.replace(/&/g, '&').replace(/>/g, '>').replace(/</g,'<').replace(/"/g, '"').replace(/'/g,''').replace(/\//g,'/');
}
function escapeHTML(s, r) {r='replace';return s[r](/&/g,'&')[r](/>/g,'>')[r](/</g,'<')[r](/"/g, '"')[r](/'/g,''')[r](/\//g,'/’);
}
Saving 19 Bytes
![Page 68: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/68.jpg)
History of code size
Raw Minified Gzipped Minfied + Gzipped
Prototype 14858 7817 4585 3262
Strip Functionality 8311 3755 3720 1901
minify-Friendly 8109 3664 3317 1809
![Page 69: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/69.jpg)
JavaScript is NOT SlowBut, DOM is Slow
![Page 70: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/70.jpg)
Module Versioning
![Page 71: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/71.jpg)
Traditionally …
• http://www.example.com/v1/loader.js
• http://www.example.com/loader_20110510.js
![Page 72: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/72.jpg)
Short Time Caching
![Page 73: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/73.jpg)
Takeaways
• Make your partners happy
• Hack your own code. Hack it Hard!
• Minify JavaScript Code
![Page 74: Build Lightweight Web Module](https://reader038.fdocuments.net/reader038/viewer/2022103000/555169b5b4c905723b8b46c4/html5/thumbnails/74.jpg)
Thank You!