Vaadin 10 for new project - vaadin

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?

Answer 1

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).

Answer 2

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.

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...
}

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.

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.