vaadin 14 upgrade issues

Flow
1

I’ve had a great chat with a couple of the vaadin team earlier this week regarding vaadin 14 upgrade issues.

I thought I would start this thread to document some of the issues I’m having.
I hope this will give the vaadin dev team some guidance on what needs to be fixed with the documentation and related items.

  1. gradle plugin doesn’t support vaadin 14.

I’m using com.devsoap.vaadin-flow' version '1.1.2' to import vaading.

This tooling currently doesn’t support vaadin 14. It looks like work is underway but I’m not clear on the ETA or whether the current tool works sufficiently to be trying to use it (it has a property which suppresses the warning but I suspect there is more to the game).

  1. how does bower/npm fit in

I really don’t understand how bower or npm work and more specifically I don’t understand how vaadin works with either of these. On top of that you have webjars added to the mix.

Its worth noting that our organisation has used vaadin exclusively for our development because we didn’t have to deal with javascript/html. Flow has dumped us deep into the horrors of JS.
I’m guessing that lots of vaadin’s other users have similar expertise as us. As such you are probably going to have to give a good deal of guidance to help us move into the JS world and come up to speed with bower/npm.

Their is also a whole workflow around using bower/npm with vaadin which doesn’t appear to be documented.

When we started with flow we started using vaadin designer which just creates components (*.html) in the frontend directory.

Am I meant to add this to a bower repository? The doco provides no guidance on this.

The doco says that in dev mode vaadin pulls its components from the webjars but in production it pulls them from bower. It also states that going forward it will always use webjars.

Does this mean I need to package my components in web jars?

  1. conversion to polymer 3.

So I thought I would get all modern and convert to polyerm 3.

After a few trial and errors I seem to have mostly converted my components using the polymer modulizer. However I’m still having a number of issues.

I’m seeing numerous warings:
WARN: bower->npm mapping for “vaadin-icons” not found

This seems to imply I need to install the vaddin components via bower before I do the conversion.
My understanding is that gradle pulls these in as webjars.

So is this a requirement of the conversion or do I just ignore the warnings?

  1. Not all components have been renamed.

Whilst the modulizer completing without warnings I found a significant no. of my components appeared to be half converted.

The file wasn’t renamed from .html to .js and the internal conversions look different.

I couldn’t see any real point of difference as to why it converted some but not others.

  1. Manually update main in your bower.json or package.json

The modulizer throws the following warning:

widgets: Did not find an HTML main in bower.json. A main was not added to package.json, so this package will not be directly importable by name. Manually update main in your bower.json or package.json to fix.

I gather that normally you create a main entry point for your webapp. I wasn’t certain what to do with this.

With vaadin do we really have main entry point? Should this be one of my parent layouts? I have three parent layouts for my vaadin app. Does this work?

  1. bower mode
    When I cranked up tomcat it reported running in bower mode.
    The side affect that even after I changed my @HtmlImport to @JsModule it still tried to read the templates using the @HtmlImport logic (so essentially the PolymerTemplate parser ignores the annotation)

Apparently I’m meant to switch the modes in the deployment descriptor but I’m struggling to find the documentation for the bowermode switch.

So for the moment I’m going back to vaadin 13.

We really need to see a lot more documentation on this process.

I’ve been through a few version upgrade now (7-8, 8-10,11,12,13).
7-8 was a little tricky, 8-10 was a bit painful, 13-14 is looking impossible :slight_smile:

I love vaadin, but we have to have sufficient documentation on migrations and make certain all of the tooling is ready.

Brett

2

Hi Brett,

The Vaadin 14 client side refactoring is indeed confusing and as far as I have noticed it is still very much work in progress.

To cut things short, since you are working with the Gradle plugin I can give you a few pointers how to proceed.

Start by upgrading the Gradle plugin to version 1.2. It will bring support for Vaadin 14.

However, the @JSModule/Polymer 3 support is not there. It will still continue to use Bower as it has done for all other Vaadin versions prior. The support for those will eventually come in version 1.3 of the plugin. You can follow the progress on this ticket https://github.com/devsoap/gradle-vaadin-flow/issues/240.

When the support comes depends fully on the Vaadin team managing to stabilize the way the client side handling is done. It does not make much sense right now for the Gradle plugin to implement support for NPM/Polymer3 until the technology stack is stable (for once) and there is a documented way Vaadin Flow works. Right now the team keeps changing that every other week.

For those who haven’t yet started migrating I would really recommend staying on Vaadin 13 until things stabilize. It will save you a lot of headache and time.

Br,
John

3

John,
appreciate the response.

I was aware of #240 and will keep an eye on it.

For the minute I’ve upgraded to 14 but reverted my code to Polymer 2/bower.

My app now runs again!

I will await a more stable build :slight_smile:

Brett