HUGE SIZE OF SMARTGWT APPLIcation

codedude · #1 15th Mar 2009, 03:36

I just made a small app in smart GWT with Bynamic form and list grid its size is freaking 2 mb !! which means we can use it hightraffic site as users dont wait ............its there any document on how to optimize this .............................is it really possible to reduce size in smartgwt ? considering smarlient-core.js is around 400 kb ...almost half mb !!

codedude · #2 15th Mar 2009, 22:00

1964.0K 12 JavaScript Files !! HOLY COW !! even a pure swing or flex app is less than this !!

Empty Cache Primed Cache

1.4K 1 HTML/Text

37.7K 1 IFrame

1964.0K 12 JavaScript Files

82.8K 2 Stylesheet Files

0.1K 1 CSS Image

10.0K 12 Images
2096.2K Total size
29 HTTP requests

0.0K 1 HTML/Text

19.9K 12 JavaScript Files

0.0K 2 Stylesheet Files

0.0K 1 CSS Image

0.0K 12 Images
19.9K Total size
28 HTTP requests

Type URL Expires Gzip RespTime Size
(Ungzip) ETag
js [HTTP headers] http://localhost:8888/com.pagux.Test/sc/modules/ISC_Core.js 3/16/2009 10 483.0K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:30 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:35 GMT
Content-Type:text/javascript
Content-Length:483065
Server:Apache-Coyote/1.1
Loading...
js [HTTP headers] http://localhost:8888/com.pagux.Test/sc/modules/ISC_Grids.js 3/16/2009 13 439.8K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:30 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:35 GMT
Content-Type:text/javascript
Content-Length:439814
Server:Apache-Coyote/1.1
Loading...
js [HTTP headers] http://localhost:8888/com.pagux.Test/sc/modules/ISC_Forms.js 3/16/2009 14 368.8K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:30 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:35 GMT
Content-Type:text/javascript
Content-Length:368814
Server:Apache-Coyote/1.1
Loading...
js [HTTP headers] http://localhost:8888/com.pagux.Test/sc/modules/ISC_DataBinding.js 3/16/2009 207 278.9K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:30 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:35 GMT
Content-Type:text/javascript
Content-Length:278989
Server:Apache-Coyote/1.1
Loading...
js [HTTP headers] http://localhost:8888/com.pagux.Test/sc/modules/ISC_Foundation.js 3/16/2009 6 166.0K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:30 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:35 GMT
Content-Type:text/javascript
Content-Length:166086
Server:Apache-Coyote/1.1
Loading...
js [HTTP headers] http://localhost:8888/com.pagux.Test/sc/modules/ISC_Calendar.js 3/16/2009 4 74.8K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:30 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:35 GMT
Content-Type:text/javascript
Content-Length:74897
Server:Apache-Coyote/1.1
Loading...
js [HTTP headers] http://localhost:8888/com.pagux.Test/sc/modules/ISC_Containers.js 3/16/2009 4 71.0K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:30 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:35 GMT
Content-Type:text/javascript
Content-Length:71080
Server:Apache-Coyote/1.1
Loading...
css [HTTP headers] http://localhost:8888/com.pagux.Test/sc/skins/Enterprise/skin_styles.css 3/16/2009 3 54.4K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:31 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:36 GMT
Content-Type:text/css
Content-Length:54471
Server:Apache-Coyote/1.1
Loading...
iframe [HTTP headers] http://localhost:8888/com.pagux.Test/904C4B1BBA20B5C0207D2949FA730CDB.cache.html 3/16/2010 3 37.7K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:30 GMT
Last-Modified:Fri, 13 Mar 2009 07:14:19 GMT
Cache-Control:max-age=31536000
Expires:Tue, 16 Mar 2010 05:52:30 GMT
Content-Type:text/html
Content-Length:37750
Server:Apache-Coyote/1.1
Loading...
js [HTTP headers] http://localhost:8888/com.pagux.Test/sc/modules/ISC_RichTextEditor.js 3/16/2009 4 31.5K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:30 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:35 GMT
Content-Type:text/javascript
Content-Length:31586
Server:Apache-Coyote/1.1
Loading...
css [HTTP headers] http://localhost:8888/com.pagux.Test/gwt/standard/standard.css 3/16/2009 6 28.4K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:31 GMT
Last-Modified:Thu, 16 Oct 2008 23:31:54 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:36 GMT
Content-Type:text/css
Content-Length:28413
Server:Apache-Coyote/1.1
Loading...
js [HTTP headers] http://localhost:8888/com.pagux.Test/sc/skins/Enterprise/load_skin.js 3/16/2009 3 22.9K
ParamsHeadersPost
Response Headers
Date:Mon, 16 Mar 2009 05:52:31 GMT
Last-Modified:Tue, 10 Mar 2009 20:55:21 GMT
Cache-Control:max-age=5
Expires:Mon, 16 Mar 2009 05:52:36 GMT
Content-Type:text/javascript
Content-Length:22969
Server:Apache-Coyote/1.1
Loading...
js [HTTP headers] http://localhost:8888/com.pagux.Test/com.pagux.Test.nocache.js 1/2/1970 19 19.9K
ParamsHeadersPost
Response Headers
Cache-Control:max-age=0
Expires:Fri, 2 Jan 1970 00:00:00 GMT
Content-Type:text/javascript;charset=ISO-8859-1
Transfer-Encoding:chunked
Date:Mon, 16 Mar 2009 05:52:30 GMT
Server:Apache-Coyote/1.1
Loading...
j

codedude · #3 15th Mar 2009, 22:01

/**
*
*/
package com.pagux.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.fields.DateItem;
import com.smartgwt.client.widgets.form.fields.PasswordIt em;

import com.smartgwt.client.widgets.form.fields.*;

import com.smartgwt.client.widgets.form.validator.RegExpV alidator; //import com.smartgwt.client.widgets.form.validator.

/**
* @author gp
*
*/
public class Test implements EntryPoint {

public void onModuleLoad() {
final DynamicForm form = new DynamicForm();

form.setGroupTitle("Checkout ...");
form.setIsGroup(true);
form.setWidth(300);
form.setHeight(180);
form.setNumCols(2);
form.setColWidths(60, "*");
// form.setBorder("1px solid blue");
form.setPadding(5);
form.setCanDragResize(true);
form.setResizeFrom("R");
form.setWidth(300);

TextItem itemName = new TextItem();
itemName.setName("itemName");
itemName.setTitle("Item");

// / form.setAlign(Alignment.LEFT );
// form.setPadding(10);
TextItem textFname = new TextItem();
textFname.setName("textFname");
textFname.setTitle("First Name");

textFname.setRequired(true);
// textItem.setN
// textItem.setHint("A plain text field");

// txtLname,txtEmail
TextItem txtLname = new TextItem();
txtLname.setName("txtLname");
txtLname.setTitle("Last Name");
txtLname.setRequired(true);

// txtLname.setHint("A plain text field");

TextItem txtEmail = new TextItem();
txtEmail.setName("txtEmail");
txtEmail.setTitle("Email");

RegExpValidator regExpValidator = new RegExpValidator();
regExpValidator
.setExpression("^([a-zA-Z0-9_.\\-+])+@(([a-zA-Z0-9\\-])+\\.)+[a-zA-Z0-9]{2,4}$");
regExpValidator.setErrorMessage("Kuute.....");
txtEmail.setValidators(regExpValidator);

TextItem txtMobile = new TextItem();
txtMobile.setName("txtMobile");
txtMobile.setTitle("Mobile No");
RegExpValidator regExpMobileValidator = new RegExpValidator();
regExpMobileValidator
.setExpression("^([a-zA-Z0-9_.\\-+])+@(([a-zA-Z0-9\\-])+\\.)+[a-zA-Z0-9]{2,4}$");
regExpMobileValidator.setErrorMessage("Mobile..... ");
txtMobile.setValidators(regExpMobileValidator);

TextItem textAddLine1 = new TextItem();
textAddLine1.setName("textAddLine1");
textAddLine1.setTitle("Line 1");
textAddLine1.setRequired(true);

TextItem textAddLine2 = new TextItem();
textAddLine2.setName("textAddLine2");
textAddLine2.setTitle("Line 2");
textAddLine2.setRequired(true);

TextItem textAddLine3 = new TextItem();
textAddLine3.setName("textAddLine3");
textAddLine3.setTitle("Line 3");
textAddLine3.setRequired(true);

TextItem txtCity = new TextItem();
txtCity.setName("txtCity");
txtCity.setTitle("City");
RegExpValidator regExpCityValidator = new RegExpValidator();
regExpCityValidator
.setExpression("^([a-zA-Z0-9_.\\-+])+@(([a-zA-Z0-9\\-])+\\.)+[a-zA-Z0-9]{2,4}$");
regExpCityValidator.setErrorMessage("Mobile.....") ;
txtCity.setValidators(regExpCityValidator);

SpinnerItem spinnerAge = new SpinnerItem();
spinnerAge.setName("spinnerAge");
spinnerAge.setTitle("Age");
spinnerAge.setDefaultValue(25);
spinnerAge.setMin(0);
spinnerAge.setMax(120);

// ,txtEmail,textAddLine1,textAddLine2,textAddLine3,t xtCity,cbState,spinnerAge
ComboBoxItem cbState = new ComboBoxItem();
cbState.setName("cbState");
cbState.setTitle("State");
cbState.setHint("Select your State");
cbState.setType("comboBox");
cbState.setValueMap("Delhi", "Mumbai", "Chennai", "Kolkotta",
"Banglore", "Chennai");

SectionItem sectionPrimaryContact = new SectionItem();
sectionPrimaryContact.setDefaultValue("Enter Your or Primary Contacts Details");
sectionPrimaryContact.setSectionExpanded(true);
sectionPrimaryContact.setItemIds("textFname", "txtLname", "txtEmail", "txtMobile",
"textAddLine1", "textAddLine2", "textAddLine3", "txtCity",
"cbState", "spinnerAge");
// section1.setItemIds("itemName");

// sectionPrimaryContact.
/************************************************** ***** Card UI ************************************************** ****/

RadioGroupItem radioGroupCard = new RadioGroupItem();
radioGroupCard.setName("radioGroupCard");
radioGroupCard.setTitle("Card");
radioGroupCard.setValueMap("Visa", "Master Card");

DateItem dateExpiry = new DateItem();
dateExpiry.setName("dateExpiry");
dateExpiry.setTitle("Expiry Date");
// dateExpiry.setHint("Picklist based date input");

// dateExpiry,passwordCard

PasswordItem passwordCard = new PasswordItem();
passwordCard.setName("passwordCard");
passwordCard.setTitle("Enter CVV no");
passwordCard.setLength(3);
passwordCard.setWidth(45);

SectionItem sectionCard = new SectionItem();
sectionCard.setDefaultValue("Credit Card Details");
sectionCard.setSectionExpanded(false);
sectionCard.setItemIds("radioGroupCard", "dateExpiry", "passwordCard");

form.setFields(sectionPrimaryContact, textFname, txtLname, txtEmail, textAddLine1,
textAddLine2, textAddLine3, txtCity, cbState, spinnerAge,sectionCard,
radioGroupCard, dateExpiry, passwordCard);

form.draw();

}

}

sjivan · #4 16th Mar 2009, 04:36

codedude,

calm down :) There are several things you can do to improve the performance.

First, inherit the SmartGwtNoScript module and only include the required SC JS files in your host html file. For example you do not need Calendar in your sample. Have a look at the Showcase example source.

Second, if you configure your web app correctly, you'll see that the performance of the app will improve dramatically. You need to gzip your content, apply the appropriate Expires Headers and ETags. You can read the Yahoo Best Practices on this. Once you do this, all the SC JS files will be read from cache and the size of your "real" application JS files with SmartGWT will be extremely small compared to any other library allowing new versions to be updated with little overhead.

Have a look at the SmartGWT showcase example which has been configured correctly. After the initial view, subsequent views of the showcase load up very fast making it suitable for hight traffic websites.

You can also take advantage of a CDN by placing the SC JS file on it. This is something most other GWT applications cannot take advantage of.

Sanjiv

codedude · #5 16th Mar 2009, 07:41

Quote:

Originally Posted by sjivan

codedude,

calm down :) There are several things you can do to improve the performance.

First, inherit the SmartGwtNoScript module and only include the required SC JS files in your host html file. For example you do not need Calendar in your sample. Have a look at the Showcase example source.

Second, if you configure your web app correctly, you'll see that the performance of the app will improve dramatically. You need to gzip your content, apply the appropriate Expires Headers and ETags. You can read the Yahoo Best Practices on this. Once you do this, all the SC JS files will be read from cache and the size of your "real" application JS files with SmartGWT will be extremely small compared to any other library allowing new versions to be updated with little overhead.

Have a look at the SmartGWT showcase example which has been configured correctly. After the initial view, subsequent views of the showcase load up very fast making it suitable for hight traffic websites.

You can also take advantage of a CDN by placing the SC JS file on it. This is something most other GWT applications cannot take advantage of.

Sanjiv

Hi Sanjeev ....thanks for replying ..I think samrtgwt is amazing project and productivity gains to java dev are amazing ....I would like to thank you for making this project possible.....I am trying to manually optimize my app ....by manually including only js files ......gzip ...headers etc ......will revert back after this......but is there any way to reduce size of those core js files modules/ISC_Core.js 10 483.0K , ISC_Foundation.js 166.0K as they form base minimum of app (even if its simple hello world application)............it would be great if compiler could handle this and also striping parts of code in js file which application doesn't use .... as with GWT..as GWT apps are really light weight ...even with limited widgets ...

smartgwt.dev · #6 16th Mar 2009, 08:17

The size of ISC_Core.js and ISC_Foundation.js will not be reduced. Please take a moment to step back and evaluate your end goals. If you want the smallest possible compile output, you will not get that. Unused methods in SmartGWT will be stripped out by the GWT compiler, but the core SmartClient files will remain unchanged. However, as pointed out before, if you configure your app correctly, the size of ISC_Core.js and related files will not be of much relevance after the initial download since they will be cached in the users browser. The SmartGWT Showcase (250 examples / screens) does this and is highly scalable for high traffic use.

One should also realize that a lot of functionality is baked into SmartGWT itself, which will reduce user written code significantly. For example MVC across widgets, databound Drag n Drop, virtual scrolling, metadata driven modeling etc. You need to take this into consideration and the amount of code (size) it effectively eliminates by not having you write.

codedude · #7 16th Mar 2009, 08:28

is it possible to divide core smart client lib into no of smaller classes/packages which can be included as required by dependant widgets ?.......400 kb looks big monolithic code...in js kingdom ...it reminds me big fat java's rt.jar (which sun is making it more modular and download components as required )......so that dependant widgets can only include part core framework they need...core libs are around 150 kb after gzip compression ...which means simple hello world app will around 200kb phew after compression and more than half a mb without compression !!

smartgwt.dev · #8 16th Mar 2009, 08:46

We've already suggested gzipping and using Expires Header for optimizing but you continue to respond without trying out any of the suggestions. We have also pointed out that the Showcase, a fairly large app, which performs and scales well.

If you are looking to write a "Hello World" app, stick with GWT, or even use jQuery. If you are looking to build a rich, enterprise application, you'll soon realize that as functionality is added starting from such a baseline, your code size will approach the size of the core js files, but without the benefit of being able to cache them.

I think everything that needs to be said has been covered here. If you still feel SmartGWT doesn't meet your requirements, then feel free to use a library that does.

Good luck!

codedude · #9 16th Mar 2009, 10:44

Quote:

Originally Posted by smartgwt.dev

We've already suggested gzipping and using Expires Header for optimizing but you continue to respond without trying out any of the suggestions. We have also pointed out that the Showcase, a fairly large app, which performs and scales well.

If you are looking to write a "Hello World" app, stick with GWT, or even use jQuery. If you are looking to build a rich, enterprise application, you'll soon realize that as functionality is added starting from such a baseline, your code size will approach the size of the core js files, but without the benefit of being able to cache them.

I think everything that needs to be said has been covered here. If you still feel SmartGWT doesn't meet your requirements, then feel free to use a library that does.

Good luck!

Hahahahahahahahahahaha ...what an attitude !! ...........................I tried all your suggestions app size is still 800 kb .......................which too much for high traffic website ................I will go with your suggestion and common sense will use GWT .........as it meets all requirement...so should all those folks who want to write internet apps...i guess smartgwt is good for corporate application in their internal lan not for high traffic public websites or for those control panel kind of apps
Have look at tibco gi it has optimization tools which result in much smaller download size...............right lib for gwt wrapper ?
Good luck to you too !!

Isomorphic · #10 16th Mar 2009, 12:00

It's not about high traffic or low traffic (SmartClient is used at eg Quickbooks.com), it's about usage pattern. If you're going to spend at least several minutes in an application or you will use it frequently or both, up front download size matters much less than responsiveness as you continue to use the application, and of course, feature richness.

If your users will the application infrequently and briefly AND many of them will not have broadband AND you cannot use a CDN or similar approach AND you have no way to mask the download time (see background downloading) AND your app doesn't require anything unique to SmartGWT AND you decide that it makes sense to spend extra time in development and delay release in order to save your users a few seconds wait on the first ever access THEN yes by all means use another technology, SmartGWT doesn't solve every problem and it would be worse if it tried to.

But recognize you are speaking to a team that has built 100s of enterprise applications. There are conscious design tradeoffs in SmartGWT and in response to a patient attempt to explain this, you flung insults at a free product. This speaks for itself.

Best of luck.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search