Microservice UI with Service-Side Vaadin

Hello everyone,

in my new project I’m implementing several Microservices that should be composed into a Vaadin webapp. Of course, most of the microservices (according to Fowler and others) should have an UI. So now i am looking for a way to compose the several UI’s in, lets say a composer-UI, which is used by clients. Obviously, as my microservices are using REST to communicate, a microservice might have a resource which returns HTML-Code.
In my opinion, thats not very nice, so I’m wondering whether there is a way to somehow compose server-side Vaadin Applications?
I have tried using BrowserFrame in the the composer-ui and loading the UI’s that were created by other microservices using the microservice UI URL’s. The downsides of this solution:
1st: we have full websites in iframes which wouldn’t be easy to create a responsive design from it
2nd: one of the two UI’s which i have tested were getting a “Session Expired” immediately (I’m not aware of that subject, so I’ve no idea whats the reason)

I would appreciate any idea from you.
Thanks in advance!

Hi Hans,

2nd: “session expired” usually means exactly that – the client browser didn’t see the server for a configurably “long” time. The application must be restarted in a new session, usually by clicking or pressing RETURN.

As for a number of Vaadin UIs in parallel, other than IFRAME (BrowserFrame) the things I would have in mind to
investigate are

a) Portlets. Maybe you would like to deploy a number of Portlets to, say, a LifeRay server?
https://vaadin.com/docs/-/part/framework/portal/portal-ui.html#figure.portal.helloworld

b) OSGi. I think I remember a quite interesting demo by Florian Pirchner of Lunifera where services died end
when they had died, those services’ UIs just disappeared – and when the services came back online, so did their UIs.

Hope it gives some food for thought that helps on the way to a solution!
–Enver

Couple of extra tips:

  • If your microservices come from the same domain, you can naturally embed multiple Vaadin apps on the same “host page”, even without iframes. Then the “mashup” don’t necessarily need to be Vaadin app at all.

  • Using CORS
    is also an option, if you want to avoid iframes (which are not that bad though)
  • Create only one UI server and access the REST APIs from your Vaadin apps. This is
    super easy with Java
    and probably you can also share the “domain model” from your services to UIs.

cheers,
matti

One additional alternative: The Embedded UI add-on add-on that allows embedding or adding Vaadin applications into layouts:
https://vaadin.com/directory#!addon/embedded-ui

Dear,

Does someone managed to make it working with Vaadin 8.0 ? (setup microservices with their own vaadin gui and integrate then in another vaadin application)

Embedded-ui is not compatible with 8.0

Best regards

Alexandre

Hi,

I just upgraded the add-on to Vaadin Framework 8.0.6+. Please notice that this is an experimental add-on and hasn’t been tested on production environments.

Dear,

Thanks a lot.

I did some test and it go now one more step, that’s good ! I can display remote app, but i still get some errors :
Main App, accessible with http://localhost:8080/
Remote App, accessible with http://localhost:8081/users and http://localhost:8081/roles

When accessing the Main App, I get some
404
errors for :

If I go directly on the remote App, I don’t have the problem, but the URL of UIDL is : http://localhost:8081/vaadinServlet/UIDL/?v-uiId=0
Then the Main App should also access this url
/vaadinServlet/UIDL/?v-uiId=0
instead of
/users/UIDL/?v-uiId=0
when using the addon.

I hope it may help you to solve.
I can send you the whole code if needed (small POC app).

Best regards

Alexandre

Hi,

Yes, a POC app would help a lot. Thanks!