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 !!
-
-
Yslow analysis............2mb for simple form
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 -
Source Code of above app
/**
*
*/
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.PasswordItem;
import com.smartgwt.client.widgets.form.fields.*;
import com.smartgwt.client.widgets.form.validator.RegExpValidator; //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("<nobr>A plain text field</nobr>");
// txtLname,txtEmail
TextItem txtLname = new TextItem();
txtLname.setName("txtLname");
txtLname.setTitle("Last Name");
txtLname.setRequired(true);
// txtLname.setHint("<nobr>A plain text field</nobr>");
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,txtCity,cbState,spinnerAge
ComboBoxItem cbState = new ComboBoxItem();
cbState.setName("cbState");
cbState.setTitle("State");
cbState.setHint("<nobr>Select your State</nobr>");
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("<nobr>Picklist based date input</nobr>");
// 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();
}
}Comment
-
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.
SanjivLast edited by sjivan; 16 Mar 2009, 06:39.Comment
-
Will Revert back after manual optimization
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 ...Originally posted by sjivanComment
-
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.Last edited by smartgwt.dev; 16 Mar 2009, 08:21.Comment
-
Cant we make smart client core js lib to be more modular
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 !!Last edited by codedude; 16 Mar 2009, 08:36.Comment
-
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!Comment
-
Thanks I wont use your bloated Js Lib
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 appsOriginally posted by smartgwt.dev
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 !!Comment
-
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.Comment
-
Codedude,
Both Sanjiv and Isomorphic took the time to explain the SmartGWT architecture to you, and why we think it's the right approach. Yet we're seeing you post accusations of bloat elsewhere without taking any of what we've said into account.
This kind of behavior forces the core dev team to run around and ensure that a full explanation is given anywhere you might post, a huge waste of time that is a great disservice to other users in the SmartGWT community, who obviously would greatly prefer to see their high priority issues and enhancements addressed.
If you feel that initial download size is an extremely important issue, and you rate it as much more important than other users seem to rate it, then there are clear steps to take to address it, by sponsoring development in this area or even contributing code yourself. But flaming the project just hurts other users. Be constructive.Comment
-
Well i must say that this site http://payroll.intuit.com is not very impressive example for gwt. It is too slow or my internet sux?Comment
-
@mnechev That's not the app where SmartClient is used, Intuit is using SmartClient not SmartGWT (but same runtime), and last we checked you'd need a paid account to get into the real application (not just a tour).
However, the point was not that particular application (there are many high volume SmartClient applications), but in what kinds of applications it makes sense to have a larger up-front download vs use a featherweight framework.
There's a long list of criteria to meet before initial download size becomes a major concern:
When initial download does become a major concern, for example, the front page of a site like apple.com or cnn.com or a similar high-content low-interactivity site, neither SmartGWT nor GWT in general make much sense, and something like JQuery is more appropriate for the limited interactivity needs of such a site (and is what's commonly used). The same company will then use more application-oriented technologies elsewhere, where the tradeoffs are different (low content, high interactivity, high data volume).If your users will use 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.Comment
-
Good excuse
Good excuse for bloated library ,Originally posted by Isomorphic
GWT on other hand is extremely optimized , same app which we made in smartgwt was 800 kb (after optimization ) and was 70 kb in GWT while its impossible to create any application less than 637.9 kb (without gzip compression) or 163.6 kb (with gzip compression enabled) as its size smartclient core js libraries which has to be included in every smartclient application ....
I am not hurling insults ............Its just feedback and a honest one .....you refuse to acknowledge problem /feedback and say that I am talking to a team which built 100's of enterprise apps (hence we know better than me )....... Lots of company offer free products today so that they can build a community around it and so that they charge paid premium support / development or premium addon which is fine ....but whats the point of having a community if dont want to take feedback .................most of us here (including me) work on big projects for fortune X companies and are potential customers ...Dont want listened its your choice ...we got plenty of choices (open source options )Flex , Extgwt , aribaweb,http://itmill.com/ etcOriginally posted by Isomorphic
Yes its very IMPORTANT for real world internet applications in public domain where you cant assume anything (like users browser , bandwidth available etc) ....Originally posted by Isomorphic
.I would like to work on it (hopefully once my current project is over) .I think solution lies in make core Js files more moduler so that compiler can include relevant modules based widget dependency tree of widget used besides other compiler optimization
WILL NOT BE REDUCED !! or We dont want to reduceOriginally posted by smartgwt.dev
This is my last post on this topic I dont want waste my/community time on it , I hope you will at-least acknowledge the problem and take feedback from community positively otherwise smartgwt/smartclient will remain niche product used inside only corporate LAN
Astalavista Baby !!Last edited by codedude; 31 Mar 2009, 00:45.Comment
-
Well dude, take it easy. Smart gwt is a very new product and it will be improved and optimized, but the time is not enough, so you have to be glad that such projects are free.Comment
Comment