Build Lightweight Web Module

Build Lightweight Web ModuleMorgan Cheng@morganchengMay 26th, 2011

Inject Your Content Into Other Sites

Partner Website ServerYour Website ServerBrowser

Partner Website ServerYour Website ServerWeb ModuleBrowser

Inject Content with JSONPCreate one hidden elementSend JSONP request When JSONP data is received, compose HTMLFill the hidden element with composed HTMLShow hidden element

iframe covering whole viewport

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

Same Domain CallbackHidden Proxy Iframe

Cannot be “javascript: … ”Hidden Proxy Iframe

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

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

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

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

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

Rules #1: Don’t Assume Too Much on Hosting PageWhat?You Don’t Have YUI?

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

Rules #3: Don’t Impact Hosting Page Performance

Simplest Feature vs. Rich Feature

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

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

/* * 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('&');}

/* * 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

/* * 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

/* * 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

/* * 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

/* * 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

/* * 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

/* * 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

/* * 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

/* * 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?

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

JavaScript?GzipGzip is no-loss compressionIt Doesn’t Understand JavaScript

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

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

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

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

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

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

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

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

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

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

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

function escapeHTML(s) { return s.replace(/&/g, '&').replace(/>/g, '>').replace(/</g,'<').replace(/"/g, '&quot').replace(/'/g,''').replace(/\//g,'/');}

function escapeHTML(s) { return s.replace(/&/g, '&').replace(/>/g, '>').replace(/</g,'<').replace(/"/g, '&quot').replace(/'/g,''').replace(/\//g,'/');}function escapeHTML(s, r) {r='replace';returns[r](/&/g,'&')[r](/>/g,'>')[r](/</g,'<')[r](/"/g, '&quot')[r](/'/g,''')[r](/\//g,'/’);}Saving 19 Bytes

JavaScript is NOT SlowBut, DOM is Slow

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

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

Build Lightweight Web Module

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Build Lightweight Web Module (20)

More from Morgan Cheng (13)

Recently uploaded (20)

Build Lightweight Web Module