Optimize my UI performances

Vaadin 6 / 7 / 8
1

Hi everyone !

I need to optimize my UI performances (loading). After some searches, I tryed to use the following tutorial to optimize my widgetset loading and therefore my UI loading : https://vaadin.com/book/vaadin7/-/page/mobile.optimization.html

But I’m getting issues in setting up this optimization because my project achitecture is made with maven with the command :
$ mvn archetype:generate \ -DarchetypeGroupId=com.vaadin \ -DarchetypeArtifactId=vaadin-archetype-application \ -DarchetypeVersion=7.4.0 \ -DgroupId=your.company \ -DartifactId=project-name \ -Dversion=1.0 \ -Dpackaging=war
So I have three projects for my application : UI, the Production & Widgetset.

I followed the previous tutorial and then I made two packages in my projects :
In my UI project, I have a package containing my loading optimization class like :
com.myproject.ui.optimization.OptimizedConnectorBundleLoaderFactory.java

And in my Widgetset project, I have a package containing :
com.myproject.widgetset.MyAppWidgetset.gwt.xml

As in the tutorial I put the following code in the MyAppWidgetset.gwt.xml file :

<generate-with class="com.myproject.ui.optimization.OptimizedConnectorBundleLoaderFactory"> 
        <when-type-assignable class="com.vaadin.client.metadata.ConnectorBundleLoader" /> 
</generate-with>

But when I try to compile my project (including the widgetset compilation), I am not able to find my OptimizedConnectorBundleLoaderFactory.java class and I get the error :
[i]
[INFO]
— vaadin-maven-plugin:7.4.0:compile (default) @ MyProject-widgetset —
[INFO]
auto discovered modules [com.myproject.widgetset.MyAppWidgetset]

[INFO]
Loading inherited module ‘com.myproject.widgetset.MyAppWidgetset’
[INFO]
[ERROR]
Line 6: Unable to load class ‘com.myproject.ui.optimization.OptimizedConnectorBundleLoaderFactory’
[INFO]
java.lang.ClassNotFoundException: com.myproject.ui.optimization.OptimizedConnectorBundleLoaderFactory
[/i]

Then I tryed many different way to access to my OptimizedConnectorBundleLoaderFactory.java class in my MyAppWidgetset.gwt.xml file (like ) but I can’t get rid of the previous error.
So how can I specify in where my class is (as it is in another project folder) or where should I put my OptimizedConnectorBundleLoaderFactory.java class ?

EDIT:
There is a dependency in my UI project that includes the widgetset like :

<dependency>
            <groupId>${project.groupId}</groupId>
            <artifactId>MyProject-widgetset</artifactId>
            <version>${project.version}</version>
</dependency>

But there isn’t dependency including the UI project in the widgetset one. That’s probably why I can’t access to my OptimizedConnectorBundleLoaderFactory.java class because it is in the UI project. So I guess I should put the OptimizedConnectorBundleLoaderFactory.java class in the widgetset project and I tryed it but it still doesn’t work !

Thanks for your help !

Tom

2

In my experience optimizing the widgeset is actually easier by using the ?debug in your application url. There you can find what to add in your application.

3

It will give you the instructions.

4

Thank you for answering. Yes the ?debug is quite helpful and I found the same instructions as in my tutorial. But my problem is actually not a problem of what to do because I made the java class and completed the MyAppWidgetset.gwt.xml file in the widgetset project, my problem is more where to put my java class in my particular project architecture and what class path to specify in : in the MyAppWidgetset.gwt.xml.

5

Tom,

Just move the file com.myproject.ui.optimization.OptimizedConnectorBundleLoaderFactory.java from UI project to the Widgetset project.

Recompile all and must work.

6

Hi,

Thank you for your answer. I thought about it too so I tried to put my OptimizedConnectorBundleLoaderFactory.java in the Widgetset project. I tried two different location : the same package as the MyAppWidgetset.gwt.xml and a different package com.myproject.myprojectname (still in the Widgetset project) in another folder (src/java) (because I don’t know why Eclipse doesn’t allow me to name the package src/main/java). But even with these two locations I can’t make it working.
I attach a screenshot from my Eclipse project to show you my widgetset project architecture and where I put the java class.

19701.png

7

Maven always look at src/main/java for java files. You must specify the new source location in the pom since you have a different source location.

8

Tom,

I don’t know how to make it using Eclipse because I use NetBeans, and in my project the OptimizedConnectorBundleLoaderFactory.java is in the src/main/java.

See the attached screenshot.
19702.png

9

Just go to the project folder outside eclipse. In there create the src/main/java. In eclipse configure that folder as the source folder.

10

Thanks a lot ! it works !
I created the folder src/main/java and put my OptimizedConnectorBundleLoaderFactory.java class in it.
Then I edited MyAppWidgetset.gwt.xml with
And it worked !
Thanks again !

11

Tom,

After some monitoring and analysis , I have discard the idea of a separated widget module. When I have the Optimizantion together with my ui, the generated —.cache.js had half the size when the Optimization was in a separated module.
Have a widget module is almost the same as not having any optimization even if you put OptimizedConnectorBundleLoaderFactory.java in it.

Example:
in UI module: transfer: 163.81Kb size:516.68Kb
in Widget module: transfer:607.76Kb size: 1226.70Kb