Vaadin alternative for heavily loaded UI

Question

Currently I am programming the Web Application based on Vaadin. I am quite happy with the learning cycle and the way how easy UI can be designed.

In general pluses of Vaadin are:

• "Native" UI programming for Java users (component hierarchy / event listeners / drag & drop / validation).
• Out-of-box nice collection of components (tree / table / list / ...).

The minuses are:

• Big and complex HTML output. That slows down the browser response time (also mentioned here and there) and leads to some rendering peculiarities from browser to browser.
• Difficulties in handling big number of components (see Can CustomLayout handle 5000 components?).
• The need to recompile the widget set if you use 3rd party components.

My question to community is:

What Web Framework fits best the following requirements:

• Separation of presentation with event/action handlers.
• Common components out of box (with advanced features like table column drag&drop, lazy loading).
• Layout support (no headache with padding and alignment of components).
• Event propagation to server and server-side event processing.
• Possibility to generate your HTML (if framework is not HTML-based) and also capture events for it (e.g. mouse clicks).
• Possibility to register key stoke callbacks (e.g. Ctrl-S) is a plus.
• Short learning curve for Java developer is a plus.

The sensible mix of approaches would fit as well. Please, provide the link for "Hello World" application, implemented based on the framework that you suggest. I am considering Apache Wicket / Echo2 / Tapestry / Click / GWT, but it's difficult to make a choice without playing for couple of months (hopefully with no deep disappointment).

Gemsbok

The phrase "What would be your choice of Web Framework" pretty much guarantees that this question will get closed. – Loaf

@Loaf just out of curiosity why does that phrase make it unsuitable for the forum? I thought it would be interesting hearing points from developers using other frameworks. I use Vaadin myself and have no experience with other frameworks and would really like to read opinions on alternatives. – Octonary

@AndroidHustle: stackoverflow.com/faq#dontask – Loaf

@skaffman: I have given a concrete task and concrete requirements for the framework. How would you reword the question then? "What framework fits best the mentioned requirements"? Let it be so. – Gemsbok

Your "5000 components" use case has a different solution. As described by you it's simply text with links, where you need to handle the links. A label with a content type of XHTML will certainly keep your text and allow you to embed arbitrary links. To maintain visual consistency you will need to ensure that you put the appropriate class attributes (look at what Vaadin generates to see what you need) on the HTML. If you are jumping within the HTML block or to external sites there's nothing more to do than put the links in normally. – Frustum

You also need to ask yourself why scrolling through 5000 links in a huge text is a good interface :) – Frustum

@RossJudson: Thanks for comment. Answering shortly: I don't need to navigate the external site by link click; I want to display the additional dialog about the selected text to allow the user to annotate it. 5000 annotations is of course, extreme. But I have tested with 2Mb document with 200 annotations: that is already problematic to display. 500 annotations (= link components in terms of Vaadin) is not doable, and that is not many. The result is: browser page hangs until AXAJ is completed and then FF displays "Javascript took too much time, stop script? Yes/No" message. – Gemsbok

I've been using a Vaadin label to embed an XHTML report (generated with XSLT) into a results window. The report contains thousands of log entries and process information. It also has embedded links in it that allow navigation within the report. Note that you can use a URIHandler to intercept custom made links, such as those you might embed into the text. Lastly, it sounds like you might want to use a Table instead of just embedding Links. If your text is arrange into paragraphs, each paragraph can be a row in a table. Create a Vaadin Container for your source text. – Frustum

Use a borderless, hidden headers table style for your main document display. Vaadin will automatically handle paging of the row/paragraph data for you. Your client-side session will be much lighter. Such an approach will solve the overall scalability problem, I think. – Frustum

@RossJudson: There was a similar suggestion on forum: to use UriFragmentUtility. I need to know the client coordinates of the component to display the popup next to it. I haven't found any way to do it. ClickableCustomLayout was very helpful, but it has the same limitation: ~500 components and browser is down. Also how do you suggest to pass information from URIHandler (let's say linkID) into Vaadin component (let's say to current Panel)? Hacking into event routing? Event listener as thread local? – Gemsbok

Answer 1

I completely agree with all your mentioned minuses and can not say very much against. Because I'm quite new in GWT I can only share my little experience I have collected other last 2 months.

• Separation of presentation with event/action handlers.

I think UiBinder with annotation @UiHandler("closeButton") @UiField in GWT 2.0 and later is exactly for separation HTML form code and handlers. Also MVP pattern with event bus is perfect answer from GWT team.

• Short learning curve for Java developer is a plus.

I'm not naive and I don't think that it's possible to get quality result only with java knowledge without understanding WEB technologies.

Most of GWT UI frameworks I have reviewed and read about, introduces more problems than solutions. They somehow manages to and one or few benefits and restrict you from other features which comes in the new releases of GWT. I have chosen not to use vaadin because I felt like It will force me to do webapp development in their way, which I agree is fast easy to understand, but somehow limited. I like to have some freedom by choosing classic GWT without fancy controls.

Also I also feel that GWT UI Components are limited and there is no quality alternatives. Something is wrong here. I think google team have to do something on this part.

Regards RemisB

Matchboard

+1 for opinion. How much time will it take you to implement the piece of interface I've mentioned in GWT? – Gemsbok

Answer 2

You can use a Vaadin Table to solve the original problem, more or less like this. The trick is to create a Vaadin Container and put components in it, as data. On the text side, wrap a label in VerticalLayout then add a click listener. This yields the ability to display "paragraphs" of XHTML text, detect clicks on them with relative locations, and still be able to handle large numbers of paragraphs.

You might need to modify your styles.css to allow wrapping of text within a table row, so you'll get ragged rows.

package com.soletta.clickytable;

import com.vaadin.Application;
import com.vaadin.data.util.IndexedContainer;
import com.vaadin.event.LayoutEvents.LayoutClickEvent;
import com.vaadin.event.LayoutEvents.LayoutClickListener;
import com.vaadin.terminal.Sizeable;
import com.vaadin.terminal.gwt.server.WebApplicationContext;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.Table;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.Window.CloseEvent;
import com.vaadin.ui.Window.CloseListener;

public class ClickytableApplication extends Application {
    @Override
    public void init() {
        Window mainWindow = new Window("Clickytable 2 Application");
        setMainWindow(mainWindow);
        mainWindow.addListener(new CloseListener(){
            public void windowClose(CloseEvent e) {
                WebApplicationContext context = (WebApplicationContext) getContext();
                context.getHttpSession().invalidate();
                close();
            }});

        IndexedContainer container = new IndexedContainer();
        container.addContainerProperty("text", VerticalLayout.class, new VerticalLayout());
        container.addContainerProperty("edit", Button.class, new Button("Edit"));

        for (int i = 0; i < 10; i++) {
            final int index = i;
            Object item = container.addItem();
            Label lbl = new Label("Text Content " + i);
            VerticalLayout vl = new VerticalLayout();
            vl.setWidth(100, Sizeable.UNITS_PERCENTAGE);
            vl.addComponent(lbl);
            vl.addListener(new LayoutClickListener() {
                public void layoutClick(LayoutClickEvent event) {
                    System.out.println(String.format("Clicked on text %,d at client(%,d,%,d), relative(%,d %,d)\n", index, event.getClientX(), event.getClientY(), event.getRelativeX(), event.getRelativeY()));
                }
            });

            container.getItem(item).getItemProperty("text").setValue(vl);
            container.getItem(item).getItemProperty("edit").setValue(new Button("Button " + i));
        }

        Table table = new Table("ClickyTable 2", container);
        table.setColumnExpandRatio("text", 1);
                table.setColumnExpandRatio("edit", 0);
        table.setSizeFull();

        VerticalLayout fl = new VerticalLayout();
        fl.setSizeFull();
        fl.addComponent(table);

        mainWindow.setContent(fl);
    }
}

With some style changes in place, the result can look something like this:

ClickTable Screen Shot http://www.soletta.com/images/ClickyTable.PNG

Frustum

Thanks for comment. May I ask you to change the number of components from 10 to 700 (in for-loop and also the number or visible rows in table)? Will table wok if I load 3Mb of XHTML data (split into paragraphs, 1 paragraph per line)? This is minimum I need. Maybe you can also recommend how to implement the UI from screenshot? If it is hardly doable with Vaadin then... – Gemsbok

I modified for 700 items -- no difference in speed. I inserted several paragraphs of text instead of a simple label, and the speed stays good. You do need to do a little custom CSS -- basically you need to override to "whitespace:normal" and remove the overflow:hiddens, at several places. Vaadin does all the paging automatically, internally. – Frustum

Thanks for nice idea. +1 for efforts. The difficulty is that I have several links per paragraph, which should be big (say 10), in general it is "text link text link" – 20 chunks in total. In this case I need HorizontalLayout which is filled with... VerticalLayout+Label for each chunk! Am I right? If so I can imagine what will be the size of HTML. On the other side I can try to use ClickableCustomLayout in each row – that is worse trying. – Gemsbok

Answer 3

If you ever find yourself putting hundreds of components on web page in Vaadin, you probably should reconsider your application structure. Why not implement a custom widget for the part of the UI that requires such huge number of widgets? It is just GWT and thus fairly easy. Then you can have the best of the both worlds - simplicity of Vaadin with full control of HTML5 on the client side.

Dahle

Joonas, thanks for comments. Also thanks for your help on Vaadin forum. Re-considering UI is straightforward. Consider the following example: I would like to display HTML page with many links, and on link click I would like to display the popup window with message "Link <ID> was clicked". How would you implement this? Perhaps I would come to the same solution as implemented in ClickableCustomLayout. However something doesn't scale well and causes JS timeout. BTW, how would you recommend to implement UI on screenshot? – Gemsbok

While I agree with this, the issue is ofcourse really depending on your situation. I currently find myself creating a table with 'only' 160 rows, but 52 columns, my dataset generates around 1600 buttons in this table. This is not easy to be optimised. First of all you need to learn a new technology (GWT) second how can I make a 'better' table then the core Vaadin guru's? I did notice oddities. when I scroll up/down. And back up. Vaadin seems to load the same data again and it's not cached within the browser. Anyways, Joonas, your help on the forums and here is great, as always! – Bashuk

Answer 4

Vaadin Flow

You must have been using the previous generation of Vaadin, versions 6, 7, and 8.

Because of the limitations and incompatibilities of earlier browsers, the long delays in producing CSS 3, and predating HTML5, Vaadin did indeed generate large and complicated pages. Given the relatively poor performance of JavaScript runtimes back then, some elaborate web apps may not have performed as well as you would have liked.

Web Components versus GWT

Fast forward some years now since your Question was posted. Vaadin Flow has arrived. Versions 10 and later are longer based on GWT. Instead they use the open standards that have emerged, collectively known as Web Components.

CSS 3

CSS 3 has finally arrived, and matured. Browsers now offer built-in sophisticated page layout with Flexbox and Grid, in addition to the previous Float. So no longer must page layout be hacked together with abuse of table and crazy assortment of div & span tag soup. Page layout can now be built with short, simple, and clean code.

Modern browsers

Other modern advancements include:

• HTML5 designed expressly for building web apps (as opposed to web documents)
• The consolidation in browser engines (basically only 2 left standing: WebKit/Chromium & Quantum/Gecko)
• Dramatic advances in the performance of JavaScript runtimes, plus important new features of JavaScript 6
• Close cooperation between browser makers in writing and implementing web standards with much more consistent behaviors
• The "evergreen" rapid-release model of modern browsers

All these taken together mean the burden on Vaadin to deliver high-quality consistent web-app experiences has been greatly decreased. You should see much shorter, simpler, and faster page code.

Give it a try.

For more discussion, see my Answer to the Question, Understanding Vaadin Flow / Vaadin 10.

The minuses are:

Big and complex HTML output. That slows down the browser response time (also mentioned here and there) and leads to some rendering peculiarities from browser to browser.

No longer big and complex, as discussed above, because of modern web technology improving so much.

Difficulties in handling big number of components (see Can CustomLayout handle 5000 components?).

Web Components is an open standard, composed of four specifications.

Many components have been built over the last several years, now available for you to use in your Vaadin Flow web apps.

• Most of the UI widgets you knew in Vaadin 6/7/8 have been rebuilt as Web Components (see Comparison Matrix). This means these Vaadin components can be used in other web projects without the Vaadin Flow server-side Java binding.
• You can easily wrap other non-Vaadin-specific components built on Web Components to be available to your in your Java code running on the server-side Vaadin Flow framework. See Integrating a Web Component. To get you started, here are a couple thousand to choose from.
• You can create your own components.

The need to recompile the widget set if you use 3rd party components.

No more WidgetSet in Vaadin Flow, because there are no more GWT widgets. Supplanted by Web Components as discussed above.

What Web Framework fits best the following requirements:

Vaadin Flow ticks all the boxes you listed in your Question: event handlers, common components with advanced features, sophisticated page layout, user-events propagating from client to server (and the other direction via built-in Push technologies), keyboard shortcuts, and a short learning curve for Java programmers.

Furthermore, from the server-side you can now invoke JavaScript snippets on the browser. And Vaadin 15 this spring brings client-side coding in TypeScript while still integrating with the Java code running server-side in Vaadin Flow.

Vitrescent

Answer 5

Web Firm Framework is the best alternative. It's an opensource Java framework under Apache License 2.0. I also had to load heavy components in my application it was smooth with this framework.

It is like a collection of java classes for all HTML5 tags and attributes. Using these classes we can build the UI just like we do using the pure HTML. It can handle heavy HTML because the data coming from the server to client is like a stream through websocket, eg:-

//creates table
Table tableObj = new Table(null,
        new Style("width:100%")).give(table -> {
    new TBody(table);
});

//finding tbody object in the table
TBody tBody = TagRepository.findOneTagAssignableToTag(TBody.class, tableObj);

for (int i = 0; i < 10; i++) {
    int count = i;
    Tr trObj = new Tr(null).give(tr -> {
        new Th(tr).give(th -> {
            new NoTag(th, "Firstname " + count);
        });

        new Th(tr).give(th1 -> {
            new NoTag(th1, "Lastname " + count);
        });

        new Th(tr).give(th2 -> {
            new NoTag(th2, "Age " + count);
        });
    });

//appending tr in the table
    tBody.appendChild(trObj);
}

Whenever trObj is appended it will be immediately available in the UI it will not wait to finish the for loop. Check their demo app which contains a button to stream 1000 rows.

We can handle events without much effort eg:

to handle click event of a button

//This will create a button in the UI.
new Button(null, new Type(Type.BUTTON), new OnClick((data, ev) -> {
    System.out.println("Button clicked");
 return null;
}));

In this git repo you can find sample projects for it.

We can also try this tool to convert HTML5 to Java/Kotlin code. This video and developers guide will be helpful to understand it better.

Bedwarmer