Experiment - Hilla with a React frontend

Our aim is to have production-ready support by Q4. But we will decide definitively within a few weeks, depending on our progress with development and testing.

Sounds good, thanks for the reply!

React components works with Lit: https://github.com/sveine/vaadin-small-business-starter/blob/5d4d3e1c2b3c045003a506fbbbca25e388e60255/small-business-starter-vaadin/frontend/views/reactdemo/react-render-sample-view.ts#L25. Hope React views and Lit views can be used together for a smooth transition of code.

Just to be clear. We are not introducing React support with the intent that anyone needs to move from Lit to React. Just offer it as an alternate.

Hope React views and Lit views can be used together for a smooth transition of code.
What @secure-leopard said. But also, to clarify, the possibility of running both React and Lit views in the same app will probably be missing from the first release that will add React support. We will look into making this option available in the long term.

Hello! Had a question out of curiosity for future projects:

When react support is added (either now or later in 2023), how necessary would you say vaadin components are required for building the frontend?

As in, if I wanted to use a different style framework (such as https://chakra-ui.com/ or https://mui.com/) out of either desire (maybe new team members familiar with those) or requirements, would I be able to without much trouble? The integrated framework with generated methods is already a big feature I appreciate, and the component system is pretty complete and nice in vaadin already, but I could see some cases when this might be asked.

(I can see mixing both vaadin and one of these frameworks as messy, but guess that could also be considered by someone :stuck_out_tongue: )

Also, two other things I forgot I wanted to ask:

  • Will this be added as part of a minor upgrade (as in 1.x.0), or alongside the next major one (2.x.0 I assume, with the Java 17 requirement)
  • Is there some way to beta test this currently, besides cloning and checking the crm demo? Saw some PRs/issues related to this topic, and some references to some vaadin-cli template but no public builds (at least afaict)

React support will be part of Hilla 1.3

There is not yet a supported way to try it out, I’m hoping to share something next week

There’s no requirement to use Vaadin components, you can use whatever components you want. Just be mindful that we will always ensure that the Vaadin components are compatible with newer releases, but we cannot do the same for 3rd party components

I see, makes sense. Thanks for all the replies! :heart:

Of course. I’m very much looking forward to this myself and can’t wait to share more

Tried react in 1.3.0. Works good! Tried to add …serverSideRoutes to router in router.tsx, but getting TS2322: Type ‘FlowRoute’ is not assignable to type ‘RouteObject’

AFAIK, we do not yet have support for adding Flow routes to the React router. Let me check with the dev team.

Marcus is correct. Flow+Hilla+React combo is not yet supported. We will aim to add this support in the future (we don’t have definitive dates for that, though).

The reason is that with Lit, we are using our own Vaadin Router. With React, we opted to use the industry standard React Router instead of inventing our own. So in order to support Flow routes, we will need to do a bit more work.

That’s good! I always go hybrid, so I will wait for that. The way Lit & Flow (LitTemplate) works seems perfect to me, hope it can be close to that. Personally I like Lit, but React is very trendy now (at least in Norway)

Is Hilla frontend-framework agnostic out-of-the-box? I haven’t actually checked out Hilla yet.

No, it currently only supports React or Lit libraries for the frontend.