Vaadin 10 for new project

Question

I'm Java developer and I'm going to start the new project. I have the very limited client-side development skills and this is why I really love the idea of Vaadin framework. I have evaluated Vaadin 10 Bakery App Starter application https://vaadin.com/start#vaadin10 and was really surprised by the amount of custom HTML/CSS/JavaScript written in order to make this application up and running. Right now I'm really confused with this and don't understand how it can simplify my developer's life.

The only application I can apply as my project starter, for now, is the famous QuickTickets Dashboard https://demo.vaadin.com/dashboard/ where all UI is implemented purely in Java. The biggest issue, for now, is that this application is implemented on Vaadin 8 and I'm unable to find its version for Vaadin 10. Do you have something similar for Vaadin 10? If no, do you have the migration guide from Vaadin 8 to Vaadin 10 that I can use in order to try to port this application to the Vaadin 10?

Sphericity

V10 is not yet released – Biamonte

Yes, I know it. This is available in Developer Preview. – Sphericity

If you are trying to get real work done now, use Vaadin 8, the current version. Vaadin 8 is built on a proven codebase going back many years. Vaadin 8 has a long life ahead. Vaadin 10, in contrast, is experimental cutting-edge next-generation stuff, involving new concepts and new technologies and new code. Vaadin 10 is not yet ready for production use. – Griseldagriseldis

hi @Sphericity did you find anything in the vaadin 10 which can help me to create an application or just a template like this. demo.vaadin.com/dashboard please if you can suggest me then that will be appriciable – Sangria

UPDATE: The Vaadin Ltd company posted 2018-07 a blog post by Matti Tahvonen giving a sober analysis of the pros and cons of developing today with Vaadin 8 (Framework) versus Vaadin 10/11 (Flow). – Griseldagriseldis

Answer 1

Use Vaadin 8

I'm developing with Vaadin for a couple of years and I would recommend to stick to Vaadin 8.

While there is a fundamental change on the horizon with Vaadin 10 (Replacement of GWT by WebComponents), I strongly suggest to stick with Vaadin 8 for starting a new project. Especially if you are also starting with Vaadin.

Vaadin 10 is a developer preview version. There will be a lot of changes along the way. Also the pool of knowledge (documentation, StackOverflow, Forum, etc.) is much much smaller. Also I don't see a stable release happening in 2018. My guess is summer 2019 till it is stable enough to replace Vaadin 8.

Read about the long-term plans for Vaadin 8 on the company’s roadmap. The plans include a regular quarterly release cadence for several years.

Update 2018 March: Vaadin 10 (now known as Vaadin Flow) just went into beta. And the company announced a new release cadence plan, with quarterly releases and Long-Term Support (LTS) releases. Maybe a stable release will happen sooner than I expected. But I still recommend Vaadin Framework 8 for a new project.

Consider Vaadin 14

Update 2019 August: Vaadin 14, the current LTS version, is now released.

If your users will be using recent versions of the modern “evergreen” web browsers, if starting a new project, and if the components you need are available, then Yes I recommend trying 14. Beware of this speed bump I encountered and resolved when getting started with a new Vaadin 14 project.

Aerostatic

Thank you! I'll follow this suggestion and will stick with Vaadin 8 – Sphericity

Update: As of 2018-03, Vaadin Ltd has started pushing Vaadin 10, now called Vaadin Flow (v10) versus Vaadin Framework (v8,7,6). The web site defaults to Flow information & documentation. See the 2018-03-08 blog post about new plan for a regular quarterly release cadence for Flow with interspersed LTS (Long-Term Support). Nevertheless, I agree with this Answer suggesting your stick with Vaadin 8 this year (2018) if you are trying to get real work done. Flow is beta, not yet as full-featured nor as stable as Vaadin Framework 8. – Griseldagriseldis

@ssindelar, is it known why they skipped version 9? Is it related to Java 9? – Coenobite

I think they said once because the change is so big. – Aerostatic

Hi Basil! Today 29 March 2019 - Vaadin 10.0.12 LTS Same dilemma as before one year ago. Would you recommend me to start with Vaadin 8 or Vaadin 10? With Vaadin 8 is easier as the documentation is very good but not up-to-date. – Claypan

@DuracellDeMonaco I am starting a new project now using Vaadin 14, the latest LTS version. Yes, some parts of the documentation are thin, such as some of the layouts lacking any explanatory discussion. So if starting a new project, and if the components you need are available, then yes I recommend trying 14. Beware of this speed bump I encountered and solved with a new project. – Griseldagriseldis

@DuracellDeMonaco Yes, I too am disappointed by the large amount of custom HTML, CSS, and JavaScript work that the Vaadin puts into their fancier starters and examples. I consider it misleading about the capabilities of Vaadin and about its mainstream usages, and therefore counterproductive as a marketing tool. So, I suggest perhaps perusing the code in those examples. But for real work, use the basic starter via the "Plain Java Servlet" option on the Get started with Vaadin page. And add the npm/Node.js tools as discussed in that speed bump link above. – Griseldagriseldis

Answer 2

Give the 10 a try!

Yes, it's true. We do not provide starters with Java-only UI, yet. But this does not mean that it is not possible with Vaadin 10. Javier gave a good example already. And we are working on new starters all the time and will allow 3rd party starters in the future, too.

For the migration, please have a look at https://vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html. It should give you a good overview.

Besides that, Vaadin 10 reached beta status and we plan a final release this year.

If you never worked with Vaadin at all I would suggest to use Vaadin 10 and not start learning "old" Vaadin (even if it will be supported for years).

Handley

hi @paul for vaadin 10 i want same dashboar or template as mentioned in the below link. demo.vaadin.com/dashboard if you can provice or suggest me then that will be appriciable – Sangria

Hey KuldeeP ChoudharY, unfortunately there is no show case like that available for Vaadin 10 and nothing is planned, afaik, as we fully concentrate on the starters. – Handley

Answer 3

While Vaadin 10 Bakery App Starter does a good job demonstrating the new features of the framework, it is heavily based on PolymerTemplate and maybe it's not the best example if you are looking for some code more similar to Vaadin 8.

Actually, writing a Java-only UI is still as simple as it was in the previous versions. For instance, the MainView class described in the Vaadin Flow Tutorial (excerpt below) contains a Grid and doesn't require writing HTML or JS.

If you go with this approach, you may base your application in the Skeleton Starter App, and replace the ExampleTemplate (polymer) with your own layouts defined in Java code.

@HtmlImport("styles/shared-styles.html")
@Route("")
@Theme(Lumo.class)
@BodySize(height = "100vh", width = "100vw")
public class MainView extends VerticalLayout {
    private CustomerService service = CustomerService.getInstance();
    private Grid<Customer> grid = new Grid<>();

    public MainView() {
       grid.setSizeFull();

       grid.addColumn(Customer::getFirstName).setHeader("First name");
       grid.addColumn(Customer::getLastName).setHeader("Last name");
       grid.addColumn(Customer::getStatus).setHeader("Status");

       add(grid);

       updateList();
   }

   //etc...
}

Howzell

Are you aware of a similar example (Java-only, no html template) that contains input handling ? – Doscher

No, but did you see vaadin.com/docs/v10/flow/binding-data/…? – Howzell

Saw it, but the difference between this and the examples based on templates given in "Simple UI App" or "Project Base" is never made clear as far as I know (i.e. PolymerTemplate + Model interface vs Binder). – Doscher

Answer 4

I've made this modified version of the Beverage Buddy app starter you can check out: https://github.com/OlliTietavainenVaadin/drink-starter-flow. Only Java used there, no CSS or JavaScript.

Edit (01/2020): this is probably no longer a good idea to use, you should go with Vaadin 14 instead.

Neckwear

Answer 5

If you are okay with Kotlin instead of Java, you can try out https://github.com/mvysny/vaadin-kotlin-pwa . The goal with that app is to not to use Polymer Templates at all, and orchestrate everything pure server-side, like we did with Vaadin 8. Everything should be explained in the Github readme - if not, please let me know and open a bug report.

Shortsighted