Improving the application's startup time

In this recipe, we will show how to optimize widget set loading strategies. We will show how to speed up the starting of a Vaadin application by reducing the number of widgets that are initially downloaded from the server. A widget is a client-side implementation of a component, whic needs to be downloaded to the client browser.

First, we will create a simple UI class, which we are going to optimize:

public class MyVaadinUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
        new WidgetSetOptimizer().extend(this);

        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);
        
        Button button = new Button("Click Me");
        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                layout.addComponent(new Label("Thank you for clicking"));
            }
        });
        layout.addComponent(button);
    }
}

The preceding application code uses UI, VerticalLayout, and the Button components. Only the client-side implementations for these three components should be loaded during the application startup.

In a real-life scenario, we might have many components on the initial view and it might be difficult to get the list of components that should be loaded at the startup. There is an add-on called Widget Set Optimizer , which helps us with optimization widget loading. We will use it in this recipe.

Getting ready

Add the dependency to the Widget Set Optimizer add-on of the project and then recompile the widget set. The JAR file can be downloaded from https://vaadin.com/directory#addon/widget-set-optimizer.

Note

Because Maven dependency was not present on the add-on home page, I have added it to my Maven repository. Do check the Widget Set Optimizer add-on page for any updates or up-to-date Maven dependency. If the Maven dependency is not there, you can use the following:

<repository>
    <id>qiiip-repo</id>
    <url>http://qiiip.org/mavenRepo</url>
</repository>
<dependency>
    <groupId>org.vaadin.addons</groupId>
    <artifactId>widgetsetoptimizer</artifactId>
    <version>0.1.0</version>
</dependency>

How to do it...

Perform the following steps:

  1. Add the following line into the init method inside the MyVaadinUI class:
    new WidgetSetOptimizer().extend(this);
  2. Run the application and open it with the ?debug parameter in URL, as shown here:
    http://localhost:8080/?debug
  3. In order to see what widgets are currently loaded, click on the SU button. A list of component connectors appears in the debug window:
    How to do it...
  4. Click on the OWS button that generates optimization code in the server console:
    How to do it...
  5. Go to the server console and follow the instructions that have been printed out:
    How to do it...
  6. Create the OptimizedConnectorBundleLoaderFactory class, copy and paste the generated code from the server console and fix the imports:
    package com;

import com.google.gwt.core.ext.typeinfo.JClassType;
import com.vaadin.server.widgetsetutils.ConnectorBundleLoaderFactory;
import com.vaadin.shared.ui.Connect;
import com.vaadin.ui.*;

import java.util.*;

public class OptimizedConnectorBundleLoaderFactory extends
        ConnectorBundleLoaderFactory {
  private Set<String> eagerConnectors = new HashSet<String>();

  {
      eagerConnectors.add(com.vaadin.client.ui.orderedlayout.VerticalLayoutConnector.class.getName());
      eagerConnectors.add(com.vaadin.client.ui.button.ButtonConnector.class.getName());
      eagerConnectors.add(com.vaadin.client.ui.ui.UIConnector.class.getName());
  }

  @Override
  protected Connect.LoadStyle getLoadStyle(JClassType connectorType) {
    if (eagerConnectors.contains(connectorType.getQualifiedBinaryName())) {
      return Connect.LoadStyle.EAGER;
    } else {
      return Connect.LoadStyle.DEFERRED;
    }
  }
}
  7. Add the generated XML from the server console into the AppWidgetSet.gwt.xml file. Do not forget to update the full class name of OptimizedConnectorBundleLoaderFactory inside the class parameter:
    <module>
  <generate-with class="com.OptimizedConnectorBundleLoaderFactory">
    <when-type-assignable class="com.vaadin.client.metadata.ConnectorBundleLoader"/>
  </generate-with>
  8. Recompile the widget set.

How it works...

When the Vaadin application is starting up, the default widget set is uploading all the available components from the server to the client browser. All the available components are downloaded, because Vaadin does not know which components are going to be used on the startup page. Therefore, we need to always optimize the widget download strategy.

There are three strategies for widget downloading:

  • Eager: Widget is downloaded during the initial payload
  • Deferred: Widget is downloaded right after the initial rendering of an application is done
  • Lazy: Widget is downloaded when the component is going to be rendered, which can slow down the rendering speed

The Widget Set Optimizer add-on uses the eager and deferred strategies. All the components that will be eagerly loaded are inserted into the eagerConnectors collection. The getLoadStyle method is called for each connector type. The other components, which are not in the eagerConnectors collection, will be uploaded after the application is rendered.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.222.175