I spent some time last week building an experimental app using Hilla with React on the frontend instead of Lit.
Why?
Mainly I was interested in understanding if React may offer a better developer experience thanks to more tools and IDEs supporting it. There are many teams that have React skills that could benefit from a library like Hilla for a more productive development environment. I wanted to see how much work it would take for us to potentially add support for React alongside Lit.
How?
@determined-zonkey has created a set of React wrappers for the Vaadin component set which allowed me to use the full set of Vaadin components in the app.
Otherwise I tried to use a “default” React stack as much as possible: Redux for state management, React Router for routing, Formik for forms.
Insights
The better tooling support made a positive impact on the developer experience. IntelliJ did a good job for both Java and TS. Using a component in the template automatically imports it. You can choose CSS helper classes from a dropdown instead of having to remember them. Hot module replacement (HMR) in the browser makes updates instant and the app retains its state as you update it.
If we want to, we could integrate with Formik to offer Binder functionality (if we don’t want to write a React binder)
Feedback welcome
You can try out the app here GitHub - marcushellberg/hilla-react-crm.
What do you think? Would it be a good thing if you could choose which frontend framework you want to use with Hilla? I’m thinking we could make a more official experiment to let more people try it out and give feedback.
If I do not care about developer experience but the end result compared to a lit+mobx combo. What would be the pros and cons?
If you already know Lit & MobX there’s no major advantage to using React.
Adding support for React would make it easier for those using React to start using Hilla and get the benefit of full-stack type safety, integrated build tooling, components etc
Personally I think it’s a very good idea to have different options for different development teams, I don’t know much about front-end, in my humble opinion lit and mobx for reactive applications seems perfect, easy to understand and use.
I really like Lit, but it doesn’t seem to be very well known (what you and I are trying to change 
)
In Switzerland Angular is still dominant but I see that many companies are starting with React so it could be beneficial.
For me Hilla and Vaadin are useful because of the convenience. Grids, Binder and all other Vaadin components.
If we do end up supporting React, we would like to offer the same type of full-stack support, meaning having integrations to form libraries and such.
Angular might be worth exploring at some point too, but their build system is quite different and not compatible with Vite, so that’s a bigger effort
I agree with @adaptable-uakari, that Lit is great. However, in some cases, it is harder to get a prototype up and running with Lit than React and Angular. Further, Lit doesn’t seem to have much traction, at least not as much as Polymer did. I don’t use Hilla, but I understand it’s purpose. I think a more framework-agnostic approach would better suit more developers’ needs and grow its share of the market. Some say web components are the future; some say they are dead or dying.
I’m fairly certain the underlying web component technologies are here to stay. Almost 20% of all pages on the internet already use them (Chrome Platform Status).
They make a lot of sense for building framework agnostic component sets and I suspect more frameworks will start using them under the hood over time as they are a performant way of building components.
Lit is very performant and quite nice to use, but the lower popularity means fewer tools support it and there are fewer compatible libraries, best practices etc. I think adding React as an alternative would lower the barrier for many teams to adopt Hilla.
Further, there are emerging technologies for web components. Enhance is pretty cool. https://github.com/enhance-dev
are there any plans to continue with react integration, please?
I have been using React 17 with Lit with webpack a while. I just changed to Vite and React 18. Vite is much easier to set up that webpack.
I like Lit, but in my case I had some React components in the code I ported to Vaadin.
Maybe there should be support for the most used front end frameworks (React, Vue.js, Angular).
I had no issue combining Lit and React. To render React in Lit:
render() {
return html`
<div>REACT RENDER:</div>
<div id="reactDemo">ROT FOR REACT RENDER</div>
`;
}
let reactDemoRoot = createRoot((document.getElementById("reactDemo"))!);
reactDemoRoot.render(new ReactDemo({}).render());
@masterful-jaguar - yes. We are working on official React support in Q4
<:hilla:943467645011914782> React support in Q4 sounds good! Are there plans to integrate binder / model in react as well?
The plan right now is to support Formik instead of building our own binder. So we would generate Formik compatible validations similar to the model used with binder.
This sounds really promising! Would this official support be in beta form by Q4, or would it be considered production-ready? Just curious
I think saying beta is a safer bet. Especially documenting components will take some time.
@practical-rat may have more insights
