Motivation
In production environments, mobile devices, etc. reduce size of our JS code is a must in order get a better usability, lower wait time when there is a poor bandwidth.
Another reason which we need to reduce code is to "protect" non free code (for example a private B2C, B2E, B2B portal).
A good example could be YUI Compressor. This tool, developed by Yahoo Team, reduces / compresses JS code:
Step by step
1. Download YUI Compressor tool from YUI Compressor
2. Use YUI on console. In this example (JS Bin - Collaborative JavaScript Debugging) we reduce this JS example:
Open a console and execute this command (-v in order to see WARNINGs or ERRORs, -o is the output file parameter)
java -jar yuicompressor-2.4.8.jar -v myview.view.js -o myview.view-min.js
This is the original code:
sap.ui.jsfragment("fragment.Table", {
createContent : function(oController) {
//Obtain data from controller
var aData = oController.fragmentInitData.data;
//Create an instance of the table control
var oTable = new sap.ui.table.Table( {
title : oController.fragmentInitData.title, //Obtain title from controller
visibleRowCount : 7
});
//Obtain column definition from controller
for ( var i = 0; i < oController.fragmentInitData.columns.length; i++) {
var template;
//Define the columns and the control templates to be used
if (oController.fragmentInitData.columns[i].type == "Text")
template = new sap.ui.commons.TextView()
.bindProperty(
"text",
oController.fragmentInitData.columns[i].bindingPath);
else if (oController.fragmentInitData.columns[i].type == "Rating")
template = new sap.ui.commons.RatingIndicator()
.bindProperty(
"value",
oController.fragmentInitData.columns[i].bindingPath);
else if (oController.fragmentInitData.columns[i].type == "Checkbox")
template = new sap.ui.commons.CheckBox()
.bindProperty(
"checked",
oController.fragmentInitData.columns[i].bindingPath);
if (template !== undefined) {
oTable
.addColumn(new sap.ui.table.Column(
{
label : new sap.ui.commons.Label(
{
text : oController.fragmentInitData.columns[i].title
}),
template : template,
sortProperty : oController.fragmentInitData.columns[i].bindingPath,
filterProperty : oController.fragmentInitData.columns[i].bindingPath,
width : "200px"
}));
}
}
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData( {
modelData : aData
});
oTable.setModel(oModel);
oTable.bindRows("/modelData");
//Initially sort the table
oTable.sort(oTable.getColumns()[0]);
//Bring the table onto the UI
return oTable;
}
});
sap.ui.controller("view.FragmentsExample", {});
sap.ui.jsview("view.FragmentsExample", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf view.FragmentsExample
*/
getControllerName : function() {
return "view.FragmentsExample";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf view.FragmentsExample
*/
createContent : function(oController) {
//Define some sample data
var aData = createSampleData();
//Define fragment init data
oController.fragmentInitData = {
title : "This is a Table Fragment Example",
data : aData,
columns : [ {
title : 'Last Name',
bindingPath : 'lastName',
type : "Text"
}, {
title : 'Name',
bindingPath : 'lastName',
type : "Text"
}, {
title : 'Selected',
bindingPath : 'checked',
type : "Checkbox"
}, {
title : 'Rating',
bindingPath : 'rating',
type : "Rating"
} ]
};
//Instantiate fragment.Table with this init data "oController.fragmentInitData"
var table1 = sap.ui.jsfragment("fragment.Table", oController);
//Define some sample data again
var aData2 = createSampleData();
//Define fragment init data. Different init data this time (different title and less columns).
oController.fragmentInitData = {
title : "This is a Table Fragment Example 2",
data : aData,
columns : [ {
title : 'Last Name',
bindingPath : 'lastName',
type : "Text"
}, {
title : 'Name',
bindingPath : 'lastName',
type : "Text"
} ]
};
//Instantiate fragment.Table with this init data "oController.fragmentInitData"
var table2 = sap.ui.jsfragment("fragment.Table", oController);
var oDivider1 = new sap.ui.commons.HorizontalDivider("divider1");
oDivider1.setHeight(sap.ui.commons.HorizontalDividerHeight.Large);
//Present data into VerticalLayout
var oLayout = new sap.ui.layout.VerticalLayout( {
content : [ table1, oDivider1, table2 ]
});
return oLayout;
}
});
/**
* Returns some sample data
*/
function createSampleData() {
return [ {
lastName : "Dente",
name : "Al",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 4
}, {
lastName : "Friese",
name : "Andy",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person2.gif",
gender : "male",
rating : 2
}, {
lastName : "Mann",
name : "Anita",
checked : false,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "female",
rating : 3
}, {
lastName : "Schutt",
name : "Doris",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "female",
rating : 4
}, {
lastName : "Open",
name : "Doris",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "female",
rating : 2
}, {
lastName : "Dewit",
name : "Kenya",
checked : false,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "female",
rating : 3
}, {
lastName : "Zar",
name : "Lou",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 1
}, {
lastName : "Burr",
name : "Tim",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person2.gif",
gender : "male",
rating : 2
}, {
lastName : "Hughes",
name : "Tish",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 5
}, {
lastName : "Lester",
name : "Mo",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 3
}, {
lastName : "Case",
name : "Justin",
checked : false,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 3
}, {
lastName : "Time",
name : "Justin",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 4
}, {
lastName : "Barr",
name : "Gaye",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 2
}, {
lastName : "Poole",
name : "Gene",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person2.gif",
gender : "male",
rating : 1
}, {
lastName : "Ander",
name : "Corey",
checked : false,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 5
}, {
lastName : "Early",
name : "Brighton",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 3
}, {
lastName : "Noring",
name : "Constance",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "female",
rating : 4
}, {
lastName : "Haas",
name : "Jack",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "male",
rating : 2
}, {
lastName : "Tress",
name : "Matt",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person2.gif",
gender : "male",
rating : 4
}, {
lastName : "Turner",
name : "Paige",
checked : true,
linkText : "www.sap.com",
href : "http://www.sap.com",
src : "images/person1.gif",
gender : "female",
rating : 3
} ];
}
var view = sap.ui.view( {
id : "FragmentsExample",
viewName : "view.FragmentsExample",
type : sap.ui.core.mvc.ViewType.JS
});
view.placeAt("content");
3. A minimized file is created (we can see how size is reduced from 9k to 5k, WoW):
JS Bin - Collaborative JavaScript Debugging
sap.ui.jsfragment("fragment.Table",{createContent:function(c){var b=c.fragmentInitData.data;var a=new sap.ui.table.Table({title:c.fragmentInitData.title,visibleRowCount:7});for(var d=0;d<c.fragmentInitData.columns.length;d++){var e;if(c.fragmentInitData.columns[d].type=="Text"){e=new sap.ui.commons.TextView().bindProperty("text",c.fragmentInitData.columns[d].bindingPath)}else{if(c.fragmentInitData.columns[d].type=="Rating"){e=new sap.ui.commons.RatingIndicator().bindProperty("value",c.fragmentInitData.columns[d].bindingPath)}else{if(c.fragmentInitData.columns[d].type=="Checkbox"){e=new sap.ui.commons.CheckBox().bindProperty("checked",c.fragmentInitData.columns[d].bindingPath)}}}if(e!==undefined){a.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:c.fragmentInitData.columns[d].title}),template:e,sortProperty:c.fragmentInitData.columns[d].bindingPath,filterProperty:c.fragmentInitData.columns[d].bindingPath,width:"200px"}))}}var f=new sap.ui.model.json.JSONModel();f.setData({modelData:b});a.setModel(f);a.bindRows("/modelData");a.sort(a.getColumns()[0]);return a}});sap.ui.controller("view.FragmentsExample",{});sap.ui.jsview("view.FragmentsExample",{getControllerName:function(){return"view.FragmentsExample"},createContent:function(c){var b=createSampleData();c.fragmentInitData={title:"This is a Table Fragment Example",data:b,columns:[{title:"Last Name",bindingPath:"lastName",type:"Text"},{title:"Name",bindingPath:"lastName",type:"Text"},{title:"Selected",bindingPath:"checked",type:"Checkbox"},{title:"Rating",bindingPath:"rating",type:"Rating"}]};var d=sap.ui.jsfragment("fragment.Table",c);var g=createSampleData();c.fragmentInitData={title:"This is a Table Fragment Example 2",data:b,columns:[{title:"Last Name",bindingPath:"lastName",type:"Text"},{title:"Name",bindingPath:"lastName",type:"Text"}]};var a=sap.ui.jsfragment("fragment.Table",c);var e=new sap.ui.commons.HorizontalDivider("divider1");e.setHeight(sap.ui.commons.HorizontalDividerHeight.Large);var f=new sap.ui.layout.VerticalLayout({content:[d,e,a]});return f}});function createSampleData(){return[{lastName:"Dente",name:"Al",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:4},{lastName:"Friese",name:"Andy",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person2.gif",gender:"male",rating:2},{lastName:"Mann",name:"Anita",checked:false,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"female",rating:3},{lastName:"Schutt",name:"Doris",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"female",rating:4},{lastName:"Open",name:"Doris",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"female",rating:2},{lastName:"Dewit",name:"Kenya",checked:false,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"female",rating:3},{lastName:"Zar",name:"Lou",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:1},{lastName:"Burr",name:"Tim",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person2.gif",gender:"male",rating:2},{lastName:"Hughes",name:"Tish",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:5},{lastName:"Lester",name:"Mo",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:3},{lastName:"Case",name:"Justin",checked:false,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:3},{lastName:"Time",name:"Justin",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:4},{lastName:"Barr",name:"Gaye",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:2},{lastName:"Poole",name:"Gene",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person2.gif",gender:"male",rating:1},{lastName:"Ander",name:"Corey",checked:false,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:5},{lastName:"Early",name:"Brighton",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:3},{lastName:"Noring",name:"Constance",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"female",rating:4},{lastName:"Haas",name:"Jack",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"male",rating:2},{lastName:"Tress",name:"Matt",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person2.gif",gender:"male",rating:4},{lastName:"Turner",name:"Paige",checked:true,linkText:"www.sap.com",href:"http://www.sap.com",src:"images/person1.gif",gender:"female",rating:3}]}var view=sap.ui.view({id:"FragmentsExample",viewName:"view.FragmentsExample",type:sap.ui.core.mvc.ViewType.JS});view.placeAt("content");
4. Let's use new minimized file:
:smile:
Enjoy!
Cheers
- SAP Managed Tags:
