Thinking of choosing Hilla for our next project

Hi everyone!

We’re currently exploring options to rewrite parts of our Vaadin 8 application, and Hilla has emerged as a strong candidate. Our primary motivation for this rewrite is to integrate offline support into our app. The idea of having greater control over the frontend is also very appealing.

If we decide to go with Hilla, the next choice is between Lit and React. I’m really interested in hearing your thoughts:

:one: Which of these two frameworks do you think is more popular in the community, and why?

:two: Do you have any ‘lessons learned’ or experiences with either framework that you’d be willing to share?

I would be really interested into hearing your insights and experiences in these regards.

  1. is simple: react is going to be the primary target

React is obviously going to be more popular, Lit is not very well known, although actually it is really nice library. It is good to also understand that neither of them are frameworks. Both are libraries and are used by Hilla framework as rendering solution. Note also that Hilla just uses core React and React router, nothing more. We are discussing whether to include also Signals to some upcoming version so that you can use it without adding dependency yourself. So in context of Hilla React does not mean the whole React ecosystem. And it is good to note, that Hilla itself brings something to table, what you should use instead of some 3rd party React ecosystem things. So in summary React is perhaps more approachable, especially if you already are familiar with it. But especially if you are familiar with it, it means some un-learn cycle too.

Here is a demo app with offline support using Hilla / Lit GitHub - TatuLund/hilla-demo: Application demoing some realistic use cases with Hilla framework

And here is another demo app that using Hilla / React GitHub - TatuLund/hilla-v2-demo: Hilla/React demo application using Hilla v2.2+ features like useForm to bind forms data and dataprovider with Grid to perform backend sorting and filtering.

Thanks Tatu for the resources! I’ve been playing around with both versions. In some ways I love how barebones the Lit is compared to React but then again React seems to be “easier to read” and perhaps bring slightly better DX.

I actually wasn’t sure of this. In some older video Lit was mentioned as the primary library but React seems to be the main thing right now. Thanks for confirming this :+1:

Older Videos is the exact wording here :slightly_smiling_face: focus shifted in the last year

I so love the simplicity of Hilla+Lit+MobX. It just works. I do not know React, but I do see how many tickets we have in our frontend-team at work that are related to “react state management works against me”. I love to never(ich) see this with Hilla+Lit+Mobx :slightly_smiling_face:

This is my very limited experience with React years ago. It’s probably more my fault than the React itself and it probably needs some mindset adjustment but I do get your point. Thanks for sharing!

We are discussing whether to include also Signals to some upcoming version so that you can use it without adding dependency yourself.

I really like the direction that hill/vaadin is heading into.
Do you have more details to share about signals? Are they similar to solidjs, and latest angular signals?

thanks @quirky-zebra Good read — it seems you guys are already thinking ahead!

I’m not involved, found them by coincidence as well. The hilla discussions aren’t announced/promoted :sweat_smile:

@enthusiastic-elephant I prefer react.

In my past application I was working on vaadin with lit over more than 3years I spent there. Initially it was on vaadin 14 than moved to fusion with hybrid approach and most of the components on lit. Lit doesn’t have well styling structure. You have to provide all the style in same component and that’s reduce code redability.

Recently, I moved to hilla + react and I feel that its taking less time and code and Its have inbuilt hook that’s save lot of time compare to lit.

Thanks for sharing. It’s always good to hear the real-life experiences.

I suggest you hilla + react + tailwind

What would be the benefit of using tailwind over the utility styles and customization options provided by Vaadin?

@enthusiastic-elephant Tailwind is really powerful because it can do a lot of things like different styles, hover effects, and responsiveness. It’s much better than creating styles manually. In my a past project, I did my own styling, but it was a big project and had a problem with slow initial loading because of too many CSS classes. Tailwind is smarter – it only includes the styles you actually use, so it doesn’t have that loading issue.

That sounds good. I know how messy CSS can get in a big project :grin: