In my attempt to explore best practices regarding the development og PWA applications I have set myself a goal og using Vaadin to create a small PWA, which will do the following:
Open with a splash screen
Display essentially a blank white page, ideally on mobile with a material design but that part is not essential
Display a square about 50% x 50% in size of the available screen area, centered. The square must display a google map, ideally with an initial position on my current location but again that part is not essential at the moment. Any location is good as long as it’s scrollable.
Display some text beneath the map square. The text could be the name of the nearest city.
I want to use the latest and greatest release of Vaadin so I have used start.vaadin.com to bootstrap me into a Vaadin 14 Spring Boot application. The app works nicely.
But getting GoogleMaps (com.vaadin.tapio.googlemaps.GoogleMap.GoogleMap) to work inside is a different matter. There are quite a few pages providing example code for com.vaadin.tapio.googlemaps.GoogleMap (and some other variants of this component) but they all seem to reference older versions of the component which apparently do not work with Vaadin 14 (getting this error “The type com.vaadin.ui.AbstractComponentContainer cannot be resolved. It is indirectly referenced from required .class files”). It is also difficult to find java examples, as most examples I have found seem to center on using custom tags (the “html” way).
Can anyone tell me if there is any way to get the tapio GoogleMap component to work with Vaadin 14, and if not if there is some other way to achieve this?
But getting GoogleMaps (com.vaadin.tapio.googlemaps.GoogleMap.GoogleMap) to work inside is a different matter.
There is a very simple explanation to this. The above mentioned add-on is made for Vaadin 8, and it is not directly compatible with Vaadin 14. (Vaadin 8 add-ons can be used with Vaadin 4 using Multi Platform Runtime product though)
In directory there is plain web component for Google Maps, but it is currently in Polymer 2 format as webjar, and can be used with Vaadin 13 or Vaadin 14 in compatibility mode.
I think the largest problem with Vaadin is the fact that there are so many things you have to know beforehand in order to get started with anything but trivial hello world type of things. Nothing of what you just said makes much sense to me. I guess I have to run in compatibility mode - whatever that is and however I enable that, and I guess I have to understand what a webjar is and where to put it and how to use it. Perhaps then I can get my map to work - but you see the steepness of that learning curve right?
I really like what I’ve seen about Vaadin so far but to become a success I think the company needs to focus on the ecosystem and integration with the outside world though reusable components rather than the core architecture. It should be simple to create an app that has a Google maps view (or other Google services) exposed inside of it, but it just isn’t. It seems that Vaadin has a strategy to appeal to web and app developers on a technical level but when the platform doesn’t help developers integrate with ubiquitous service providers like Google or Amazon, it won’t be the first choice for many I think.
Sorry for the rant, I’m not actually trying to be negative towards Vaadin as a company or a technology. Just frustrated that I am not able to make a simple project like what I outlined possible.
Case in point I was able to achieve the entire thing using Thunkable in under 30 minutes. It should just be that simple.
Thanks for your feedback, I think your points are valid.
Yes. We have different generations of the framework and it is not always obvious what is compatible with what and so forth. Also that may make decisions difficult, i.e. whether you should choose old Vaadin 8 or go with Vaadin 14. With Vaadin 14 you get new features helping your app to be more responsive and mobile friendly.
