Reduce / Minimize SAPUI5 JS code with YUI Compressor
Motivation
Reduce / Minimize SAPUI5 JS code with YUI Compressor: 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:
YUI Compressor
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 : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 4 }, { lastName : "Friese", name : "Andy", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person2.gif", gender : "male", rating : 2 }, { lastName : "Mann", name : "Anita", checked : false, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "female", rating : 3 }, { lastName : "Schutt", name : "Doris", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "female", rating : 4 }, { lastName : "Open", name : "Doris", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "female", rating : 2 }, { lastName : "Dewit", name : "Kenya", checked : false, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "female", rating : 3 }, { lastName : "Zar", name : "Lou", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 1 }, { lastName : "Burr", name : "Tim", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person2.gif", gender : "male", rating : 2 }, { lastName : "Hughes", name : "Tish", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 5 }, { lastName : "Lester", name : "Mo", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 3 }, { lastName : "Case", name : "Justin", checked : false, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 3 }, { lastName : "Time", name : "Justin", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 4 }, { lastName : "Barr", name : "Gaye", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 2 }, { lastName : "Poole", name : "Gene", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person2.gif", gender : "male", rating : 1 }, { lastName : "Ander", name : "Corey", checked : false, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 5 }, { lastName : "Early", name : "Brighton", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 3 }, { lastName : "Noring", name : "Constance", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "female", rating : 4 }, { lastName : "Haas", name : "Jack", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person1.gif", gender : "male", rating : 2 }, { lastName : "Tress", name : "Matt", checked : true, linkText : "www.sap.com", href : "https://www.sap.com", src : "images/person2.gif", gender : "male", rating : 4 }, { lastName : "Turner", name : "Paige", checked : true, linkText : "www.sap.com", href : "https://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:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:4},{lastName:"Friese",name:"Andy",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person2.gif",gender:"male",rating:2},{lastName:"Mann",name:"Anita",checked:false,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"female",rating:3},{lastName:"Schutt",name:"Doris",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"female",rating:4},{lastName:"Open",name:"Doris",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"female",rating:2},{lastName:"Dewit",name:"Kenya",checked:false,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"female",rating:3},{lastName:"Zar",name:"Lou",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:1},{lastName:"Burr",name:"Tim",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person2.gif",gender:"male",rating:2},{lastName:"Hughes",name:"Tish",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:5},{lastName:"Lester",name:"Mo",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:3},{lastName:"Case",name:"Justin",checked:false,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:3},{lastName:"Time",name:"Justin",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:4},{lastName:"Barr",name:"Gaye",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:2},{lastName:"Poole",name:"Gene",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person2.gif",gender:"male",rating:1},{lastName:"Ander",name:"Corey",checked:false,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:5},{lastName:"Early",name:"Brighton",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:3},{lastName:"Noring",name:"Constance",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"female",rating:4},{lastName:"Haas",name:"Jack",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person1.gif",gender:"male",rating:2},{lastName:"Tress",name:"Matt",checked:true,linkText:"www.sap.com",href:"https://www.sap.com",src:"images/person2.gif",gender:"male",rating:4},{lastName:"Turner",name:"Paige",checked:true,linkText:"www.sap.com",href:"https://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:
????
Enjoy!
Cheers
New NetWeaver Information at SAP.com
Very Helpfull
