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:


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

/wp-content/uploads/2014/02/yuimin0_394157.png

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):

/wp-content/uploads/2014/02/yuimin_394033.png

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:

/wp-content/uploads/2014/02/yuimin2_394032.png

🙂

Enjoy!

Cheers

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply