I am using vaadin 7.1 right now, and see that my application take time on downloading 400kb data for first time using.
As we know, vaadin require the first time widgetset js size more than 350kb eventough we already set most of component as Lazy. may communication layer and etc is inside. so if the server location is far away with the client location these become problem and make first impresion that our application is to slow. first touch is meaningfull for me.
if we can implement CDN so we can make the first download is near to the client and the speed may much better.
is this posible to implement like CDN for the first widget js ?
so not only static thing like image, html, css is include on my CDN cache.
please enlight me if I have wrong paradigm of vaadin
thanks
You should be able to do that quite easily. The Vaadin client side engine has been compiled with cross site linker by default from first 7 release.
First step is to create and deploy resources to you CDN. Stuff that you should have under VAADIN directory:
vaadinBootstrap.js (from vaadin-server.jar)
your widgetset artifacts or the gwt generated stuff from vaadin-client-compiled
Stuff for themes directory. E.g. VAADIN content from vaadin-themes.jar, you own custom theme with possible inherited resources from core themes or e.g. contents from the
dawn theme jar .
I prepared an example where the static files in my “cdn” server looked like this:
Then, if your static files (the VAADIN directory) are e.g in “http://your-cdn.provider.com/cdn-example” you can just adjust your Vaadin servlet with following init parameter:
BTW, using the Valo theme (~ dawn) also makes your app seem to start much faster Probably just an illusion, but the feeling is the most essential thing anyways.
I got problem when setup Lazy widgetset, why WidgetSetOptimizer is not found ?
please help me
Widgetset ‘com.tenma.common.widgetset.VuangkitaWidgetset’ does not
contain implementation for
org.vaadin.artur.widgetsetoptimizer.WidgetSetOptimizer. Check its
component connector’s @Connect mapping, widgetsets GWT module
description file and re-compile your widgetset. In case you have
downloaded a vaadin add-on package, you might want to refer to add-on instructions
Are you still using 6.x? You shouldn’t need that widgetsetoptimizer at all using 7.x. It pretty much does the same as the new feature in the “?debug console”.
Yes, nice and usefull blog, inspired many vaadin user on to optimized their apps. that good for vaadin.
No. I am using Vaadin 7.1.14, and trying using widgetsetoptimizer but got error on first page while init
public class TenmaWebApplication extends UI
protected void init(VaadinRequest request) {
new WidgetSetOptimizer().extend(this); // error with this code
}
}
Widgetset ‘com.tenma.common.widgetset.VuangkitaWidgetset’ does not
contain implementation for
org.vaadin.artur.widgetsetoptimizer.WidgetSetOptimizer. Check its
component connector’s @Connect mapping, widgetsets GWT module
description file and re-compile your widgetset. In case you have
downloaded a vaadin add-on package, you might want to refer to add-on instructions
Hmmm… bit confusing me, do you mean the addon is not needed more ?
I am trying to make default of the widgetset are LAZY, only some of them are EAGER.
now first js download when i am login to my apps is about almost 2 Mb js.
as your blog using gzip the size will be 450kb.
am using firebug to monitor the network traffict on login, i seen that still huge even tough I had enable the gzip and also setup most of the widgetset are LAZY.
do I make and mistake on monitoring the real traffict ?
if all are set with optimized configuration, in my calculation my logon process will be less than 3 seconds, but now still around 9 second average.
Yes, that add-on is not needed. The Vaadin’s debug dialog contains nowadays similar, but enhanced feature.
Also make sure you remove all other unnecessary components.
The start time may also be lengthier because of other isseus. Using browsers inspector you can check out why it takes long. Some apps make lots of various initialiation during the first request, which may take lots of time on the server side.
Also, if you compile your theme “on the fly”, which I think you should never do, the sass compiler might cause latencies that jam the app start.
sorry another question again :
on my debug client at browser I show this and suggest to recompile.
doest it mean my EAGER set is mistake so all the widget is download because of this ?
Add the following java file to your project:
import java.util.HashSet;
import java.util.Set;
import com.google.gwt.core.ext.typeinfo.JClassType;
import com.vaadin.client.ui.ui.UIConnector;
import com.vaadin.server.widgetsetutils.ConnectorBundleLoaderFactory;
import com.vaadin.shared.ui.Connect.LoadStyle;
public class OptimizedConnectorBundleLoaderFactory extends
ConnectorBundleLoaderFactory {
private Set<String> eagerConnectors = new HashSet<String>();
{
eagerConnectors.add(com.vaadin.client.ui.ui.UIConnector.class.getName());
eagerConnectors.add(com.vaadin.client.ui.panel.PanelConnector.class.getName());
eagerConnectors.add(com.vaadin.client.ui.menubar.MenuBarConnector.class.getName());
eagerConnectors.add(com.vaadin.client.ui.orderedlayout.VerticalLayoutConnector.class.getName());
eagerConnectors.add(com.vaadin.client.ui.orderedlayout.HorizontalLayoutConnector.class.getName());
eagerConnectors.add(com.vaadin.client.ui.button.ButtonConnector.class.getName());
eagerConnectors.add(com.vaadin.client.ui.label.LabelConnector.class.getName());
eagerConnectors.add(com.vaadin.client.extensions.FileDownloaderConnector.class.getName());
eagerConnectors.add(org.dussan.vaadin.dcharts.client.connector.DChartsConnector.class.getName());
eagerConnectors.add(com.vaadin.client.ui.table.TableConnector.class.getName());
}
@Override
protected LoadStyle getLoadStyle(JClassType connectorType) {
if (eagerConnectors.contains(connectorType.getQualifiedBinaryName())) {
return LoadStyle.EAGER;
} else {
// Loads all other connectors immediately after the initial view has
// been rendered
return LoadStyle.DEFERRED;
}
}
}
About the OptimizedConnectorBundleLoaderFactory. To me that looks ok, maybe change the default in the else clause to lazy. Also ensure you have the correct rule in your “YourAppWidgetset.gwt.xml” file. The class alone does not do anything.
Probably just an illusion, but the feeling is the most essential thing anyways.