Mixing Fusion and Flow?

Hello all,

If we have a Fusion web app, is it possible to create custom components in Java and use these components in our typescript/frontend views?

What do I mean by creating custom component: is it possible to build a composite component purely in Java (no litelement template) and then use that in your frontend code?

I'm still trying to understand what exactly is running on server and what is running on client.

Thanks!

Hi,

Flow UI code is written in Java and runs on the server. Fusion endpoint code is written in Java and runs on the server.

Fusion UI code is written in TypeScript and runs in the browser.

Whatever you write in Java is run on the server. Whatever you write in TypeScript runs in the browser.

Integrating the two can be done as:

1. For a view, you select if you want to implement it using Flow or Fusion. A Fusion view defined in routes.ts and a Flow view annotated with @Route are both available in the app. You can create a "hybrid" application in start.vaadin.com to see this (note that Flow views won't show up in the menu right now because of a bug, you can still navigate to them if you add them manually)
2. A Fusion component can be used inside a Flow view/component by creating a Java class for it. The easiest way would be to extend LitTemplate and add proper @JsModule and @Tag annotations.
3. A Flow component can be given a tag, exported as a web component and used in any Fusion view/component as <my-flow-component>. This currently does not work directly because of https://github.com/vaadin/flow/issues/8136, but if you take the workaround from there it should work.

Thanks for the clarification! Did not know about option #3, which seems to be exactly what I'm looking for.